docs: Add checkbox input example

EliasGcf · diego3g · commit 57a735b0b8da · 2020-07-06T22:40:28.000-03:00
diff --git a/docs/src/docs/examples/checkbox.mdx b/docs/src/docs/examples/checkbox.mdx
@@ -0,0 +1,117 @@
+---
+title: Checkbox
+---
+
+> ⚠️ 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.
+
+## Checkbox 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 CheckboxInput: 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.filter(ref => ref.checked).map(ref => ref.value);
+      },
+      clearValue: (refs: HTMLInputElement[]) => {
+        refs.forEach(ref => {
+          ref.checked = false;
+        });
+      },
+      setValue: (refs: HTMLInputElement[], values: string[]) => {
+        refs.forEach(ref => {
+          if (values.includes(ref.id)) {
+            ref.checked = true;
+          }
+        });
+      },
+    });
+  }, [defaultValue, fieldName, registerField]);
+
+  return (
+    <div>
+      {options.map((option, index) => (
+        <label htmlFor={option.id} key={option.id}>
+          <input
+            defaultChecked={defaultValue.find((dv: string) => dv === option.id)}
+            ref={ref => {
+              inputRefs.current[index] = ref as HTMLInputElement;
+            }}
+            value={option.value}
+            type="checkbox"
+            id={option.id}
+            {...rest}
+          />
+          {option.label}
+        </label>
+      ))}
+    </div>
+  );
+};
+
+export default CheckboxInput;
+```
+
+## Usage example
+
+```jsx lineNumbers=true
+import React, { useRef } from 'react';
+import { FormHandles } from '@unform/core';
+import { Form } from '@unform/web';
+
+import { CheckboxInput } from '../../components/Form';
+
+interface CheckboxOption {
+  id: string;
+  value: string;
+  label: string;
+}
+
+const CheckboxForm: React.FC = () => {
+  const formRef = useRef<FormHandles>(null);
+
+  const checkboxOptions: CheckboxOption[] = [
+    { id: 'node', value: 'node', label: 'Node' },
+    { id: 'react', value: 'react', label: 'ReactJS' },
+  ];
+
+  function handleSubmit(data) {
+    /**
+     * Out example when 'Node' marked: ['node']
+     * You get a string array with the value
+     */
+    console.log(data);
+  }
+
+  return (
+    <Form
+      ref={formRef}
+      onSubmit={handleSubmit}
+      initialData={{ checkbox: ['node'] }}
+    >
+      <CheckboxInput name="checkbox" options={checkboxOptions} />
+
+      <button type="submit">Enviar</button>
+    </Form>
+  );
+};
+
+export default CheckboxForm;
+```
