feat: handle value property too

Author: danielpza

Diff for: src/UniformComponent.test.tsx

@@ -13,15 +13,15 @@ describe("<UniformComponent>", () => {
     const defaultValue = { bar: "hello" }
     let changed: null | { bar: string } = null
     const wrapper = mount(
-      <TestUniformComponent onChange={value => (changed = value)} defaultValue={defaultValue} />,
+      <TestUniformComponent onChange={value => (changed = value)} value={defaultValue} />,
     )
     const input = wrapper.find("input")
     input.simulate("change", { target: { value: "foo" } })
     expect(changed).toMatchObject({ bar: "foo" })
   })
   it("should allow ommiting onChange property", () => {
     const defaultValue = { bar: "hello" }
-    const wrapper = mount(<TestUniformComponent defaultValue={defaultValue} />)
+    const wrapper = mount(<TestUniformComponent value={defaultValue} />)
     const input = wrapper.find("input")
     input.simulate("change", { target: { value: "foo" } })
   })

Diff for: src/UniformComponent.tsx

@@ -3,15 +3,16 @@ import { dynamicOnChange } from "dynamic-on-change"
 
 export type UniformProps<D, P = {}> = {
   onChange?: (newValue: D) => void
-  defaultValue: D
+  value: D
+  defaultValue?: D // DEPRECATED
 } & P
 
 export class UniformComponent<D, P = {}, S = {}, SS = any> extends Component<
   UniformProps<D, P>,
   S,
   SS
 > {
-  private _UniformData: D = this.props.defaultValue
+  private _UniformData: D = this.props.value
   private _UniformOnChange = (key: keyof D, value: D[keyof D]) => {
     this._UniformData[key] = value
     if (this.props.onChange) {

Diff for: src/UniformInput.test.tsx

@@ -6,15 +6,13 @@ import { UniformInput } from "./index"
 describe("<UniformInput>", () => {
   it("should dispatch change event", () => {
     let changed: null | string = null
-    const wrapper = mount(
-      <UniformInput onChange={newValue => (changed = newValue)} defaultValue="3" />,
-    )
+    const wrapper = mount(<UniformInput onChange={newValue => (changed = newValue)} value="3" />)
     const input = wrapper.find("input")
     input.simulate("change", { target: { value: "foo" } })
     expect(changed).toBe("foo")
   })
   it("should allow ommitting property onChange", () => {
-    const wrapper = mount(<UniformInput defaultValue="3" />)
+    const wrapper = mount(<UniformInput value="3" />)
     wrapper.find("input").simulate("change", { target: { value: "foo" } })
   })
   it("should allow ommitting property defaultValue", () => {

Diff for: src/UniformInput.tsx

@@ -6,6 +6,7 @@ export class UniformInput extends React.Component<
   SafeJoin<
     SafeJoin<JSX.IntrinsicElements["input"], UniformProps<string>>,
     {
+      value?: string
       defaultValue?: string
     }
   >

Diff for: src/UniformInputNumber.test.tsx

@@ -7,18 +7,14 @@ describe("<UniformInputNumber>", () => {
   it("should dispatch change event", () => {
     let changed: null | number = null
     const wrapper = mount(
-      <UniformInputNumber
-        type="number"
-        onChange={newValue => (changed = newValue)}
-        defaultValue={3}
-      />,
+      <UniformInputNumber type="number" onChange={newValue => (changed = newValue)} value={3} />,
     )
     const input = wrapper.find("input")
     input.simulate("change", { target: { value: "6" } })
     expect(changed).toBe(6)
   })
   it("should allow ommitting property onChange", () => {
-    const wrapper = mount(<UniformInputNumber defaultValue={3} />)
+    const wrapper = mount(<UniformInputNumber value={3} />)
     wrapper.find("input").simulate("change", { target: { value: "6" } })
   })
   it("should allow ommitting property defaultValue", () => {

Diff for: src/UniformInputNumber.tsx

@@ -6,6 +6,7 @@ export class UniformInputNumber extends React.Component<
   SafeJoin<
     SafeJoin<JSX.IntrinsicElements["input"], UniformProps<number>>,
     {
+      value?: number
       defaultValue?: number
     }
   >
@@ -16,10 +17,13 @@ export class UniformInputNumber extends React.Component<
     }
   }
   render() {
-    const defaultValue =
-      this.props.defaultValue === undefined ? "0" : this.props.defaultValue.toString()
-    return (
-      <input {...this.props} onChange={this._UniformInputOnChange} defaultValue={defaultValue} />
-    )
+    const props = {
+      ...this.props,
+      ...(this.props.value === undefined ? {} : { value: this.props.value.toString() }),
+      ...(this.props.defaultValue === undefined
+        ? {}
+        : { defaultValue: this.props.defaultValue.toString() }),
+    } as any
+    return <input {...props} onChange={this._UniformInputOnChange} />
   }
 }

Diff for: src/UniformSelect.test.tsx

@@ -21,7 +21,7 @@ describe("<UniformSelect>", () => {
       <UniformSelect
         options={options}
         onChange={newValue => (changed = newValue)}
-        defaultValue={"male"}
+        value={"male"}
       />,
     )
     const input = wrapper.find("select")

Diff for: src/index.test.tsx

@@ -16,18 +16,9 @@ it("should work together", () => {
     render() {
       return (
         <form>
-          <UniformInput
-            onChange={this.onChange.firstName}
-            defaultValue={this.props.defaultValue.firstName}
-          />
-          <UniformInput
-            onChange={this.onChange.lastName}
-            defaultValue={this.props.defaultValue.lastName}
-          />
-          <UniformInputNumber
-            onChange={this.onChange.age}
-            defaultValue={this.props.defaultValue.age}
-          />
+          <UniformInput onChange={this.onChange.firstName} value={this.props.value.firstName} />
+          <UniformInput onChange={this.onChange.lastName} value={this.props.value.lastName} />
+          <UniformInputNumber onChange={this.onChange.age} value={this.props.value.age} />
         </form>
       )
     }
@@ -37,9 +28,7 @@ it("should work together", () => {
     firstName: "foo",
     lastName: "bar",
   }
-  const wrapper = mount(
-    <SimpleUniform onChange={value => (update = value)} defaultValue={update} />,
-  )
+  const wrapper = mount(<SimpleUniform onChange={value => (update = value)} value={update} />)
   const inputs = wrapper.find("input")
   inputs.at(0).simulate("change", { target: { value: "my-firstname" } })
   expect(update).toMatchObject({