refactor(TextInput): Destructure props

kronostechnologies · Feb 22, 2021 · a95ee9a · a95ee9a
1 parent 70af7d1
commit a95ee9a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 20 deletions.
diff --git a/packages/react/src/components/text-input/text-input.test.tsx b/packages/react/src/components/text-input/text-input.test.tsx
@@ -32,6 +32,12 @@ describe('TextInput', () => {
         );
     }
 
+    test('input has name property when name prop is set on TextInput', () => {
+        const wrapper = mountWithTheme(<TextInput label="test" name="test" />);
+
+        expect(wrapper.find('input').prop('name')).toBe('test');
+    });
+
     test('onChange callback is called when content is changed', () => {
         const callback = jest.fn();
         const wrapper = setup(callback);

diff --git a/packages/react/src/components/text-input/text-input.tsx b/packages/react/src/components/text-input/text-input.tsx
@@ -2,8 +2,10 @@ import React, {
     ChangeEvent,
     DetailedHTMLProps,
     FocusEvent,
+    forwardRef,
     InputHTMLAttributes,
     ReactElement,
+    Ref,
     useCallback,
     useMemo,
     useState,
@@ -18,8 +20,6 @@ const Input = styled.input`
     ${({ theme }) => inputsStyle(theme)}
 `;
 
-type inputModeType = 'none' | 'numeric' | 'tel' | 'decimal' | 'email' | 'url' | 'search';
-
 type PartialInputProps = Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
     'inputMode' | 'name' | 'value'>;
 
@@ -30,7 +30,6 @@ interface TextInputProps extends PartialInputProps {
     /** Disables default margin */
     noMargin?: boolean;
     id?: string;
-    inputMode?: inputModeType;
     label?: string;
     pattern?: string;
     placeholder?: string;
@@ -46,16 +45,26 @@ interface TextInputProps extends PartialInputProps {
     onFocus?(event: FocusEvent<HTMLInputElement>): void;
 }
 
-export const TextInput = React.forwardRef(({
+export const TextInput = forwardRef(({
     className,
+    defaultValue,
+    disabled,
+    hint,
     id: providedId,
+    inputMode,
+    label,
     name,
     noMargin,
+    pattern,
+    placeholder,
+    required,
+    type,
+    validationErrorMessage,
+    value,
     onBlur,
     onChange,
     onFocus,
-    ...props
-}: TextInputProps, ref: React.Ref<HTMLInputElement>): ReactElement => {
+}: TextInputProps, ref: Ref<HTMLInputElement>): ReactElement => {
     const { t } = useTranslation('text-input');
     const [{ validity }, setValidity] = useState({ validity: true });
     const id = useMemo(() => providedId || uuid(), [providedId]);
@@ -80,20 +89,6 @@ export const TextInput = React.forwardRef(({
         }
     }, [onFocus]);
 
-    const {
-        defaultValue,
-        disabled,
-        inputMode,
-        label,
-        pattern,
-        placeholder,
-        required,
-        type,
-        validationErrorMessage,
-        value,
-        hint,
-    } = props;
-
     return (
         <FieldContainer
             className={className}