feat(component): use native props for input

abusix · Oct 27, 2023 · 40fd0f3 · 40fd0f3
1 parent da62b95
commit 40fd0f3
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 36 deletions.
diff --git a/src/components/form-field/text-input/text-input.stories.tsx b/src/components/form-field/text-input/text-input.stories.tsx
@@ -17,12 +17,16 @@ const TextInputWithHooks = ({
     error = false,
     disabled = false,
     hasLeftIcon = false,
+    readOnly = false,
+    value,
 }: {
     error?: boolean;
     disabled?: boolean;
     hasLeftIcon?: boolean;
+    readOnly?: boolean;
+    value?: string;
 }) => {
-    const [value, setValue] = useState("");
+    const [inputValue, setInputValue] = useState(value);
 
     return (
         <FormField>
@@ -32,13 +36,13 @@ const TextInputWithHooks = ({
             </FormField.LabelGroup>
             <FormField.TextInput
                 id="value"
-                value={value}
-                placeholder="Placeholder"
-                onChange={(e) => setValue(e.target.value)}
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
                 ariaDescribedBy="value-description"
                 error={error}
                 disabled={disabled}
                 LeftIcon={hasLeftIcon ? SearchIcon : undefined}
+                readOnly={readOnly}
             />
             {error ? <FormField.ErrorMessage>Error message.</FormField.ErrorMessage> : null}
         </FormField>
@@ -69,6 +73,14 @@ export const WithLeftIcon: Story = {
     ),
 };
 
+export const ReadOnly: Story = {
+    render: () => (
+        <div className="w-72">
+            <TextInputWithHooks readOnly value="Readonly text" />
+        </div>
+    ),
+};
+
 export const Disabled: Story = {
     render: () => (
         <div className="w-72">

diff --git a/src/components/form-field/text-input/text-input.tsx b/src/components/form-field/text-input/text-input.tsx
@@ -15,46 +15,32 @@ const formFieldGroupStyles = classNames(
     `[.group.form-field-group_&:last-child_.target-field]:border-l-1 [.group.form-field-group_&:last-child_.target-field]:rounded-l-none`
 );
 
-export interface TextInputProps {
-    id: string;
-    placeholder: string;
-    value: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    readOnly?: boolean;
+export interface TextInputProps extends React.ComponentPropsWithoutRef<"input"> {
     type?: "text" | "password" | "email";
     autoSelect?: boolean;
     ariaDescribedBy?: string;
     LeftIcon?: React.ElementType;
     error?: boolean;
-    disabled?: boolean;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-    onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
 }
 
 export const TextInput = ({
-    id,
-    placeholder,
-    value,
-    onChange,
     ariaDescribedBy,
     type = "text",
     LeftIcon,
     readOnly,
     autoSelect,
     error,
     disabled,
-    onBlur,
-    onKeyDown,
-    onKeyUp,
+    className,
+    ...props
 }: TextInputProps) => {
     const inputRef = useRef<HTMLInputElement>(null);
 
-    function handleAutoSelection() {
+    const handleAutoSelection = () => {
         if (autoSelect && inputRef.current) {
             inputRef.current.select();
         }
-    }
+    };
 
     return (
         <div className={classNames("relative w-full", formFieldGroupStyles)}>
@@ -69,16 +55,10 @@ export const TextInput = ({
 
             <input
                 ref={inputRef}
-                id={id}
-                name={id}
-                value={value}
-                readOnly={readOnly}
-                onChange={onChange}
-                placeholder={placeholder}
                 aria-describedby={ariaDescribedBy}
-                onMouseOver={autoSelect ? handleAutoSelection : undefined}
-                onFocus={autoSelect ? handleAutoSelection : undefined}
-                onClick={autoSelect ? handleAutoSelection : undefined}
+                onMouseOver={handleAutoSelection}
+                onFocus={handleAutoSelection}
+                onClick={handleAutoSelection}
                 type={type}
                 className={classNames(
                     targetAttachmentIdentifier,
@@ -89,12 +69,12 @@ export const TextInput = ({
                     !error &&
                         !disabled &&
                         "hover:border-neutral-600 focus:border-primary-400 focus:ring-2 focus:ring-primary-200",
-                    error && !disabled && "border-danger-500"
+                    error && !disabled && "border-danger-500",
+                    className
                 )}
+                readOnly={readOnly}
                 disabled={disabled}
-                onBlur={onBlur}
-                onKeyDown={onKeyDown}
-                onKeyUp={onKeyUp}
+                {...props}
             />
         </div>
     );