feat(TelInput): add FormField in TelInput

Yoctol · Dec 12, 2019 · 54502a1 · 54502a1
1 parent e578a2b
commit 54502a1
Showing 1 changed file with 33 additions and 14 deletions.
diff --git a/packages/tailor-ui/src/TelInput/TelInput.tsx b/packages/tailor-ui/src/TelInput/TelInput.tsx
@@ -1,5 +1,9 @@
 import IntlTelInput from 'react-intl-tel-input';
-import React, { FC, MouseEventHandler } from 'react';
+import React, { ChangeEvent, FC, MouseEventHandler } from 'react';
+
+import { mergeEventProps } from '@tailor-ui/utils';
+
+import { useFormField } from '../FormField';
 
 import StyledTelInput from './style';
 
@@ -23,18 +27,33 @@ const TelInput: FC<TelInputProps> = ({
   onChange,
   onBlur,
   ...props
-}) => (
-  <StyledTelInput>
-    <IntlTelInput
-      fieldId={id}
-      fieldName={name}
-      onPhoneNumberChange={onChange}
-      onPhoneNumberBlur={onBlur}
-      format
-      preferredCountries={['tw']}
-      {...props}
-    />
-  </StyledTelInput>
-);
+}) => {
+  const [invalid, labelId, setValue] = useFormField({
+    id,
+    value: props.value,
+    defaultValue: props.defaultValue,
+  });
+  return (
+    <StyledTelInput
+      id={labelId}
+      invalid={invalid}
+      {...mergeEventProps(props, {
+        onChange: (event: ChangeEvent<HTMLInputElement>) => {
+          setValue(event.currentTarget.value);
+        },
+      })}
+    >
+      <IntlTelInput
+        fieldId={id}
+        fieldName={name}
+        onPhoneNumberChange={onChange}
+        onPhoneNumberBlur={onBlur}
+        format
+        preferredCountries={['tw']}
+        {...props}
+      />
+    </StyledTelInput>
+  );
+};
 
 export { TelInput };