docs: Add radio input example

EliasGcf · diego3g · commit 23f27652afe5 · 2021-01-28T15:39:11.000-03:00
diff --git a/docs/config/sidebar.yml b/docs/config/sidebar.yml
@@ -57,6 +57,8 @@
       link: '/examples/file-input'
     - label: 'Checkbox'
       link: '/examples/checkbox'
+    - label: 'Radio'
+      link: '/examples/radio'
     - label: 'React Select'
       link: '/examples/react-select'
     - label: 'React DatePicker'
diff --git a/docs/src/docs/examples/radio.mdx b/docs/src/docs/examples/radio.mdx
@@ -0,0 +1,96 @@
+---
+title: Radio
+---
+
+> ⚠️ All examples below are using **TypeScript**, if you're not using it you can simply remove all type definitions as the `React.FC<Props>` from component definition.
+
+[Click here](https://codesandbox.io/embed/unform-web-radio-example-er0cn?autoresize=1&expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark) to access a Radio Input Live Demo.
+
+## Radio input component
+
+```tsx lineNumbers=true
+import React, { useEffect, useRef, InputHTMLAttributes } from 'react';
+import { useField } from '@unform/core';
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  name: string;
+  options: {
+    id: string;
+    value: string;
+    label: string;
+  }[];
+}
+
+const RadioInput: React.FC<Props> = ({ name, options, ...rest }) => {
+  const inputRefs = useRef<HTMLInputElement[]>([]);
+  const { fieldName, registerField, defaultValue = '' } = useField(name);
+
+  useEffect(() => {
+    registerField({
+      name: fieldName,
+      ref: inputRefs.current,
+      getValue: (refs: HTMLInputElement[]) => {
+        return refs.find(ref => ref.checked)?.value || '';
+      },
+      setValue: (refs: HTMLInputElement[], id: string) => {
+        const inputRef = refs.find(ref => ref.id === id);
+        if (inputRef) inputRef.checked = true;
+      },
+      clearValue: (refs: HTMLInputElement[]) => {
+        const inputRef = refs.find(ref => ref.checked === true);
+        if (inputRef) inputRef.checked = false;
+      },
+    });
+  }, [defaultValue, fieldName, registerField]);
+
+  return (
+    <>
+      {options.map(option => (
+        <label htmlFor={option.id} key={option.id}>
+          <input
+            ref={ref => inputRefs.current.push(ref as HTMLInputElement)}
+            id={option.id}
+            type="radio"
+            name={name}
+            defaultChecked={defaultValue.includes(option.id)}
+            value={option.value}
+            {...rest}
+          />
+          {option.label}
+        </label>
+      ))}
+    </>
+  );
+};
+
+export default RadioInput;
+```
+
+## Usage example
+
+```tsx lineNumbers=true
+const App: React.FC = () => {
+  const radioOptions = [
+    { id: 'rocketseat', value: 'rocketseat', label: 'Rocketseat' },
+    { id: 'eliasgcf', value: 'eliasgcf', label: 'EliasGcf' },
+  ];
+
+  function handleSubmit(data) {
+    /**
+     * Out example when 'EliasGcf' marked: { user: 'eliasgcf' }
+     * You get a string with the value
+     */
+    console.log(data);
+  }
+
+  return (
+    <Form onSubmit={handleSubmit} initialData={{ radio: radioOptions[1].id }}>
+      <RadioInput name="user" options={radioOptions} />
+
+      <button type="submit">Open</button>
+    </Form>
+  );
+};
+
+export default App;
+```
