Merge 67c45c9 into ff0a9dc

examples/README.md

@@ -6,10 +6,11 @@ needs, hiding labels, styling error messages, etc.
 
 | Name     | Link                                                                  |
 | -------- | --------------------------------------------------------------------- |
+| Checkbox | [JavaScript](./checkbox.js) - [TypeScript](./typescript/checkbox.tsx) |
 | Input    | [JavaScript](./input.js) - [TypeScript](./typescript/input.tsx)       |
 | Radio    | [JavaScript](./radio.js) - [TypeScript](./typescript/radio.tsx)       |
+| Select   | [JavaScript](./select.js) - [TypeScript](./typescript/select.tsx)     |
 | Textarea | [JavaScript](./textarea.js) - [TypeScript](./typescript/textarea.tsx) |
-| Checkbox | [JavaScript](./checkbox.js) - [TypeScript](./typescript/checkbox.tsx) |
 
 ## Add an example
 

examples/select.js

@@ -0,0 +1,51 @@
+import { useRef, useEffect } from 'react'
+
+import { useField } from '@unform/core'
+
+/**
+ * Select component for Unform (without React Select)
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
+ */
+export default function Select({ name, label, options, ...rest }) {
+  const selectRef = useRef(null)
+
+  const { fieldName, defaultValue, registerField, error } = useField(name)
+
+  useEffect(() => {
+    registerField({
+      ref: selectRef,
+      name: fieldName,
+      getValue: ref => {
+        return ref.current?.value
+      },
+      setValue: (ref, newValue) => {
+        ref.current.value = newValue
+      },
+      clearValue: ref => {
+        ref.current.value = ''
+      },
+    })
+  }, [fieldName, registerField])
+
+  return (
+    <div>
+      <label htmlFor={fieldName}>{label}</label>
+
+      <select
+        id={fieldName}
+        ref={selectRef}
+        defaultValue={defaultValue}
+        {...rest}
+      >
+        {options.map(option => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+
+      {error && <span className="error">{error}</span>}
+    </div>
+  )
+}

examples/typescript/select.tsx

@@ -0,0 +1,96 @@
+import { useRef, useEffect, SelectHTMLAttributes } from 'react'
+
+import { useField, SubmitHandler, FormHandles } from '@unform/core'
+import { Form } from '@unform/web'
+
+interface SelectProps {
+  name: string
+  label: string
+  options: {
+    label: string
+    value: string
+  }[]
+}
+
+type Props = SelectHTMLAttributes<HTMLSelectElement> & SelectProps
+
+/**
+ * Select component for Unform (without React Select)
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
+ */
+function Select({ name, label, options, ...rest }: Props) {
+  const selectRef = useRef<HTMLSelectElement>(null)
+
+  const { fieldName, defaultValue, registerField, error } = useField(name)
+
+  useEffect(() => {
+    registerField({
+      ref: selectRef,
+      name: fieldName,
+      getValue: ref => {
+        return ref.current?.value
+      },
+      setValue: (ref, newValue) => {
+        ref.current.value = newValue
+      },
+      clearValue: ref => {
+        ref.current.value = ''
+      },
+    })
+  }, [fieldName, registerField])
+
+  return (
+    <div>
+      <label htmlFor={fieldName}>{label}</label>
+
+      <select
+        id={fieldName}
+        ref={selectRef}
+        defaultValue={defaultValue}
+        {...rest}
+      >
+        {options.map(option => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+
+      {error && <span className="error">{error}</span>}
+    </div>
+  )
+}
+
+/**
+ * Usage
+ */
+
+interface FormData {
+  username: string
+}
+
+export default function App() {
+  const formRef = useRef<FormHandles>(null)
+
+  const handleSubmit: SubmitHandler<FormData> = data => {
+    console.log(data)
+  }
+
+  const selectOptions = [
+    { value: 'jpedroschmitz', label: 'jpedroschmitz' },
+    { value: 'rocketseat', label: 'Rocketseat' },
+  ]
+
+  return (
+    <Form ref={formRef} onSubmit={handleSubmit}>
+      <Select
+        name="username"
+        label="Choose a username"
+        options={selectOptions}
+      />
+
+      <button type="submit">Submit</button>
+    </Form>
+  )
+}