diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx index e379b281..5b2f3da7 100644 --- a/src/components/input/Input.tsx +++ b/src/components/input/Input.tsx @@ -2,8 +2,11 @@ import React, {DetailedHTMLProps, InputHTMLAttributes, ReactElement, ReactNode, import "./Input.style.scss" import {TablerIconsProps} from "@tabler/icons-react"; + +export type InputChildType = InputControlType | InputDescType | InputLabelType + export interface InputType { - children: React.ReactNode | React.ReactNode[] + children: ReactElement | ReactElement[] //defaults to false disabled?: boolean //defaults to undefined @@ -13,12 +16,20 @@ export interface InputType { const Input: React.FC = (props: InputType) => { - const {disabled, children, valid} = props + const {disabled= false, children, valid} = props + const childNodes = React.Children.toArray(children).map(value => { + if (React.isValidElement(value) && value.type == InputControl) + return React.cloneElement(value as ReactElement, { + "aria-disabled": disabled, + "disabled": disabled + }) + return value + }) return
- {children} + {childNodes}
} @@ -40,7 +51,8 @@ export interface InputControlType extends DetailedHTMLProps[] | ReactElement - + //defaults to false + disabled?: boolean //default is text type type?: InputControlTypesType } @@ -57,7 +69,7 @@ export interface InputControlType extends DetailedHTMLProps & RefAttributes> = React.forwardRef((props, ref) => { - const {type, placeholder, children, ...args} = props + const {type, placeholder, children, disabled, ...args} = props const childNodes = children && !Array.isArray(children) ? Array.of(children) : children; const icon = childNodes ? childNodes.find(child => child.type == InputControlIcon) : null const message = childNodes ? childNodes.find(child => child.type == InputControlMessage) : null @@ -82,7 +94,7 @@ const InputControl: React.ForwardRefExoticComponent
{icon ?? null} - { + { (event.target as HTMLInputElement).focus() }}/>