chore: use "render props" instead of HOC

BREAKING CHANGE: use "render props" instead of HOC

Author: davidpa9708

Diff for: src/UniformComponent.test.tsx

@@ -1,31 +1,19 @@
 // tslint:disable:jsx-no-lambda
 import * as React from "react"
 import { mount } from "enzyme"
-import { UniformComponent, UniformProps } from "./index"
+import { UniformComponent } from "./index"
 
 describe("<UniformComponent>", () => {
-  class TestUniformComponent extends React.Component<
-    UniformProps<{ bar: string }> & { asdf?: string }
-  > {
-    render() {
-      return <input onChange={ev => this.props.data.change.bar(ev.target.value)} type="string" />
-    }
-  }
-  const UniformTestComponent = UniformComponent(TestUniformComponent)
   it("should dispatch change event", () => {
     const defaultValue = { bar: "hello" }
     let changed: null | { bar: string } = null
     const wrapper = mount(
-      <UniformTestComponent onChange={value => (changed = value)} value={defaultValue} />,
+      <UniformComponent onChange={value => (changed = value)} defaultValue={defaultValue}>
+        {data => <input onChange={ev => data.change.bar(ev.target.value)} type="string" />}
+      </UniformComponent>,
     )
     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(<UniformTestComponent value={defaultValue} onChange={() => null} />)
-    const input = wrapper.find("input")
-    input.simulate("change", { target: { value: "foo" } })
-  })
 })

Diff for: src/UniformComponent.tsx

@@ -1,37 +1,27 @@
-import React, { ComponentClass, SFC } from "react"
-import Data, { IData } from "handle-data-change"
+import React from "react"
+import Data from "handle-data-change"
 
-export interface IProps<D> {
-  value: D
-  onChange?: (newValue: D) => void
+export interface IProps<D = {}> {
+  defaultValue: D
+  value?: D
+  onChange?: (value: D) => void
   path?: string[]
+  children: (data: Data<D>) => JSX.Element
 }
 
-export interface UniformProps<D> {
-  data: IData<D>
-}
-
-function equal<T>(a: T, b: T) {
-  return a === b
-}
-
-type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
-
-export function UniformComponent<P extends UniformProps<any>, D = P["data"]["value"]>(
-  Component: ComponentClass<P> | SFC<P>,
-) {
-  let uniOnChange: (data: D) => void = () => null
-  let uniValue: D = {} as D
-  let uniPath: string[]
-  let data = new Data<D>({} as D, uniOnChange)
-  return function(props: IProps<D> & Omit<P, "data">) {
-    const { onChange, value, defaultValue, path, ...rest } = props as any
-    if (!equal(onChange, uniOnChange) || !equal(value, uniValue) || !equal(path, uniPath)) {
-      uniOnChange = onChange
-      uniValue = value
-      uniPath = path
-      data = new Data(value, onChange, path)
-    }
-    return <Component {...rest} data={data} />
+export class UniformComponent<D> extends React.Component<IProps<D>, D> {
+  data = new Data(
+    this.props.value || this.props.defaultValue,
+    (data: D) => this.onChange(data),
+    this.props.path,
+  )
+  state = this.data.value
+  render() {
+    this.data.value = this.props.value || this.data.value
+    return this.props.children(this.data)
+  }
+  private onChange(value: D) {
+    this.setState(value)
+    this.props.onChange && this.props.onChange(value)
   }
 }

Diff for: src/UniformInput.tsx

@@ -1,13 +1,13 @@
 import * as React from "react"
-import { IProps } from "./UniformComponent"
 import { SafeJoin } from "./type-helpers"
 
 export class UniformInput extends React.Component<
   SafeJoin<
-    SafeJoin<JSX.IntrinsicElements["input"], IProps<string>>,
+    JSX.IntrinsicElements["input"],
     {
       value?: string
       defaultValue?: string
+      onChange?: (value: string) => void
     }
   >
 > {

Diff for: src/UniformInputNumber.tsx

@@ -1,13 +1,13 @@
 import * as React from "react"
-import { IProps } from "./UniformComponent"
 import { SafeJoin } from "./type-helpers"
 
 export class UniformInputNumber extends React.Component<
   SafeJoin<
-    SafeJoin<JSX.IntrinsicElements["input"], IProps<number>>,
+    JSX.IntrinsicElements["input"],
     {
       value?: number
       defaultValue?: number
+      onChange?: (value: number) => void
     }
   >
 > {

Diff for: src/index.test.tsx

@@ -1,7 +1,7 @@
 // tslint:disable:jsx-no-lambda
 import * as React from "react"
 import { mount, configure } from "enzyme"
-import { UniformProps, UniformInput, UniformInputNumber } from "./index"
+import { UniformInput, UniformInputNumber } from "./index"
 import Adapter from "enzyme-adapter-react-16"
 import { UniformComponent } from "./UniformComponent"
 
@@ -13,37 +13,31 @@ it("should work together", () => {
     firstName: string
     lastName: string
   }
-  class SimpleUniform extends React.Component<UniformProps<ISimpleData>> {
+  class SimpleUniform extends React.Component<{
+    value: ISimpleData
+    onChange: (data: ISimpleData) => void
+  }> {
     render() {
       return (
-        <form>
-          <UniformInput
-            onChange={this.props.data.change.firstName}
-            value={this.props.data.value.firstName}
-          />
-          <UniformInput
-            onChange={this.props.data.change.lastName}
-            value={this.props.data.value.lastName}
-          />
-          <UniformInputNumber
-            onChange={this.props.data.change.age}
-            value={this.props.data.value.age}
-          />
-        </form>
+        <UniformComponent defaultValue={this.props.value} onChange={this.props.onChange}>
+          {data => (
+            <form>
+              <UniformInput onChange={data.change.firstName} value={data.value.firstName} />
+              <UniformInput onChange={data.change.lastName} value={data.value.lastName} />
+              <UniformInputNumber onChange={data.change.age} value={data.value.age} />
+            </form>
+          )}
+        </UniformComponent>
       )
     }
   }
 
-  const SimpleUniformWrapper = UniformComponent(SimpleUniform)
-
   let update: ISimpleData = {
     age: 1,
     firstName: "foo",
     lastName: "bar",
   }
-  const wrapper = mount(
-    <SimpleUniformWrapper onChange={value => (update = value)} value={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({