feat: add UniformSelect

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

package.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",

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 UniformInput extends React.Component<
   UniformProps<string, Omit<JSX.IntrinsicElements["input"], "onChange">>

src/UniformInputNumber.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<

src/UniformSelect.test.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")
+  })
+})

src/UniformSelect.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>
+    )
+  }
+}

src/index.tsx

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

src/type-helpers.ts

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