feat: add UniformSelect

Author: danielpza

Diff for: README.md

@@ -9,9 +9,9 @@
 
 Components with the same simple interface to handle onChange events on react components
 
-Also exports Input components using this pattern to help with implementation of forms and such
+Also exports Input and Select components using this pattern to help with implementation of forms and such
 
-# Example
+## Example
 
 ```tsx
 import { UniformComponent, UniformInput, UniformInputNumber } from "uniform-react-components"
@@ -146,9 +146,9 @@ class SimpleUniform extends UniformComponent<ISimpleData> {
 }
 ```
 
-## Input helpers
+## Built-in helpers
 
-uniform-react-components exports two input helpers ( _UniformInput_ and _UniformInputNumber_ )that have the same interface, it only changes the _onChange_ ( and _defaultValue_ which is the case of _UniformInputNumber_ ) properties, and accepts all the properties of a plain `input` element. This only saves you the trouble of implementing these components, but you could implement them if you want to, and even add some more.
+uniform-react-components exports two input helpers ( _UniformInput_ and _UniformInputNumber_ ) and a select helper that have the same interface, it only changes the _onChange_ ( and _defaultValue_ which is the case of _UniformInputNumber_ ) properties, and accepts all the properties of a plain `input` element. This only saves you the trouble of implementing these components, but you could implement them if you want to, and even add some more.
 
 ### UniformInput
 
@@ -174,3 +174,25 @@ The same as the plain input element, but the onChange property returns an _numbe
   // you can add all the other properties such as className, style...
 />
 ```
+
+### UniformSelect
+
+```tsx
+import { UniformSelect, UniformOptionProps } from "./index"
+    type MaleOrFemale = "male" | "female"
+    const options: UniformOptionProps<MaleOrFemale>[] = [
+      {
+        value: "male",
+        children: "Male",
+      },
+      {
+        value: "female",
+        children: "Female",
+      },
+    ]
+    let changed: MaleOrFemale | null = null
+    const el = <UniformSelect options={options} onChange={(newValue) => console.log(newValue)} defaultValue={"male"} />, // newValue is MaleOrFemale
+/>
+```
+
+The options is an array of Options, which has all the properties the option element takes, but value is restricted to the specified type, so it enforces type safety

Diff for: package-lock.json

@@ -25,7 +25,8 @@
     "typescript": true,
     "react": true,
     "rules": {
-      "no-console": "on"
+      "no-console": "on",
+      "jsx-no-multiline-js": "off"
     }
   },
   "jest": {
@@ -74,8 +75,7 @@
     "semantic-release": "^15.10.5",
     "travis-deploy-once": "^5.0.9",
     "ts-jest": "^23.1.4",
-    "typescript": "^3.0.3",
-    "utility-types": "^2.1.0"
+    "typescript": "^3.0.3"
   },
   "peerDependencies": {
     "react": "^16.5.2",

Diff for: package.json

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { UniformProps } from "./UniformComponent"
-import { Omit } from "utility-types"
+import { Omit } from "./type-helpers"
 
 export class UniformInput extends React.Component<
   UniformProps<string, Omit<JSX.IntrinsicElements["input"], "onChange">>

Diff for: src/UniformInput.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { UniformProps } from "./UniformComponent"
-import { Omit } from "utility-types"
+import { Omit } from "./type-helpers"
 
 export class UniformInputNumber extends React.Component<
   UniformProps<

Diff for: src/UniformInputNumber.tsx

@@ -0,0 +1,31 @@
+// tslint:disable:jsx-no-lambda
+import * as React from "react"
+import { mount } from "enzyme"
+import { UniformSelect, UniformOptionProps } from "./index"
+
+describe("<UniformSelect>", () => {
+  it("should dispatch change event", () => {
+    type MaleOrFemale = "male" | "female"
+    const options: UniformOptionProps<MaleOrFemale>[] = [
+      {
+        value: "male",
+        children: "Male",
+      },
+      {
+        value: "female",
+        children: "Female",
+      },
+    ]
+    let changed: MaleOrFemale | null = null
+    const wrapper = mount(
+      <UniformSelect
+        options={options}
+        onChange={newValue => (changed = newValue)}
+        defaultValue={"male"}
+      />,
+    )
+    const input = wrapper.find("select")
+    input.simulate("change", { target: { value: "female" } })
+    expect(changed).toBe("female")
+  })
+})

Diff for: src/UniformSelect.test.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { UniformComponent } from "./UniformComponent"
+import { Omit } from "./type-helpers"
+
+export type UniformOptionProps<T> = Omit<JSX.IntrinsicElements["option"], "value"> & { value: T }
+
+export class UniformSelect<T extends string> extends UniformComponent<
+  T,
+  Omit<JSX.IntrinsicElements["select"], "onChange"> & { options?: UniformOptionProps<T>[] }
+> {
+  _UniformSelectOnChange = (ev: React.ChangeEvent<HTMLSelectElement>) => {
+    if (this.props.onChange) {
+      this.props.onChange(ev.target.value as T)
+    }
+  }
+  render() {
+    return (
+      <select onChange={this._UniformSelectOnChange}>
+        {this.props.options &&
+          this.props.options.map(prop => <option {...prop} key={prop.value} />)}
+      </select>
+    )
+  }
+}

Diff for: src/UniformSelect.tsx

@@ -1,3 +1,4 @@
 export * from "./UniformComponent"
 export * from "./UniformInput"
 export * from "./UniformInputNumber"
+export * from "./UniformSelect"

Diff for: src/index.tsx

@@ -0,0 +1,2 @@
+// From Typescript docs
+export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>