feat(TelInput): add FormField in TelInput, ref: #311 (#373)

feat(TelInput): add FormField in TelInput, ref: #311
Yoctol · Dec 13, 2019 · 783dab0 · 783dab0
2 parents 3141d30 + 8f3d907
commit 783dab0
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 19 deletions.
diff --git a/docs/TelInput.md b/docs/TelInput.md
@@ -21,6 +21,14 @@ import { TelInput } from 'tailor-ui';
 <TelInput onChange={console.log} />
 ```
 
+### With errors
+
+```jsx live
+<FormField label="With Error" validationMessage="Something errors happend">
+  <TelInput onChange={console.log} />
+</FormField>
+```
+
 ## API
 
 The component is based on `react-intl-tel-input`, please check more API on it's [document](https://patw0929.github.io/react-intl-tel-input/).
diff --git a/packages/tailor-ui/src/TelInput/TelInput.tsx b/packages/tailor-ui/src/TelInput/TelInput.tsx
@@ -1,19 +1,23 @@
 import IntlTelInput from 'react-intl-tel-input';
 import React, { FC, MouseEventHandler } from 'react';
 
+import { useFormField } from '../FormField';
+
 import StyledTelInput from './style';
 
+type ChangeHandler = (
+  isValid: boolean,
+  value: string,
+  phoneInfo: object,
+  fullPhoneNumber: string
+) => void;
+
 interface TelInputProps {
   id?: string;
   name?: string;
   value?: string;
   defaultValue?: string;
-  onChange?: (
-    isValid: boolean,
-    value: string,
-    phoneInfo: object,
-    fullPhoneNumber: string
-  ) => void;
+  onChange?: ChangeHandler;
   onBlur?: MouseEventHandler;
 }
 
@@ -23,18 +27,39 @@ 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,
+  });
+
+  const onPhoneNumberChange: ChangeHandler = (
+    isValid,
+    value,
+    phoneInfo,
+    fullPhoneNumber
+  ) => {
+    setValue(value);
+
+    if (onChange) {
+      onChange(isValid, value, phoneInfo, fullPhoneNumber);
+    }
+  };
+
+  return (
+    <StyledTelInput invalid={invalid}>
+      <IntlTelInput
+        format
+        fieldId={labelId}
+        fieldName={name}
+        onPhoneNumberBlur={onBlur}
+        onPhoneNumberChange={onPhoneNumberChange}
+        preferredCountries={['tw']}
+        {...props}
+      />
+    </StyledTelInput>
+  );
+};
 
 export { TelInput };