From 9cdd859e768319fe238250214efec9716d8f701a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Tue, 9 Aug 2022 11:19:38 +0300 Subject: [PATCH] Input group component --- src/components/Inputgroup.tsx | 52 +++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 src/components/Inputgroup.tsx diff --git a/src/components/Inputgroup.tsx b/src/components/Inputgroup.tsx new file mode 100644 index 0000000..cc06015 --- /dev/null +++ b/src/components/Inputgroup.tsx @@ -0,0 +1,52 @@ +/** + * A container for components + * Any component can be a child for this container + */ +import React, { useEffect, useState, cloneElement } from "react"; +import classNames from "classnames"; + +const focusable = ["input", "select", "textarea", "button"]; + +export type Props = { + /** + * Container's children + */ + children?: React.ReactNode | React.ReactNode[]; +} & React.HTMLProps; + +const Inputgroup = ({ children }: Props) => { + const [focused, setFocused] = useState(false); + useEffect(() => {}, [focused]); + const arrChildren = React.Children.toArray(children); + + return ( +
+ {arrChildren.map((e) => { + if ( + React.isValidElement(e) && + typeof e.type === "string" && + focusable.includes(e.type) + ) { + return cloneElement(e as React.ReactComponentElement<"input">, { + onFocus: (event: any) => { + setFocused(true); + e.props.onFocus && e.props.onFocus(event); + }, + onBlur: (event: any) => { + setFocused(false); + e.props.onBlur && e.props.onBlur(event); + }, + }); + } + return e; + })} +
+ ); +}; + +export default Inputgroup;