fixes

Author: theluk

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-formular",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "This libraray is an experimental approach to bind forms and its inputs and editors together using the new React Context API. It aims to be fully customizable and composable. It´s only a set of Higher-Order-Components. Because of the decoupled nature, Middlewares makes it easy to build custom Validations, Security Guards and other data interceptors. ",
   "author": "theluk",
   "license": "MIT",
@@ -20,9 +20,8 @@
     "build-storybook": "build-storybook"
   },
   "peerDependencies": {
-    "prop-types": "^15.5.4",
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.4.6",

package.json

@@ -6,7 +6,7 @@ export default class Debounce extends React.Component {
   timeout = null
 
   static propTypes = {
-    children: PropTypes.children,
+    children: PropTypes.node,
     wait: PropTypes.number
   }
 

src/components/Debounce.js

@@ -12,7 +12,7 @@ class Middleware extends Component {
     // calling it means passing the data up.
     update: PropTypes.func.isRequired,
     data: PropTypes.shape(),
-    children: PropTypes.children
+    children: PropTypes.node
   }
 
   state = {

src/components/Middleware.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 const { Provider: DataProvider, Consumer: DataConsumer } = React.createContext({
   update: null,
-  data: null
+  data: {}
 })
 const { Provider: ErrorProvider, Consumer: ErrorConsumer } = React.createContext({
   errors: {}

src/context.js

@@ -3,6 +3,10 @@ import PropTypes from 'prop-types'
 import { DataProvider, getDisplayName, formAware } from './index'
 
 function provideFormular(WrappedComponent) {
+  if (WrappedComponent === undefined) {
+    WrappedComponent = 'form'
+  }
+
   class ProvideFormular extends Component {
     static displayName = `WithForm(${getDisplayName(WrappedComponent)})`
 
@@ -22,7 +26,10 @@ function provideFormular(WrappedComponent) {
         ...this.state.data,
         ...newData
       }
-      onChange(newData)
+      if (typeof onChange === 'function') {
+        onChange(newData)
+      }
+
       this.setState({ data: newData })
     }
 
@@ -43,12 +50,13 @@ function provideFormular(WrappedComponent) {
 
   return formAware(
     ({ data, update, field, ...props }) => {
+      const isNested = typeof update === 'function' && field !== undefined;
       if (field === undefined && typeof update === 'function') {
         throw new Error('Nested form usage without field specification')
       }
       props = {
         initialData: field !== undefined && data.hasOwnProperty(field) ? data[field] : null,
-        onChange: newData => update(field, newData),
+        onChange: isNested && (newData => update({ [field]: newData })),
         ...props
       }
 

src/form.js

@@ -4,3 +4,4 @@ export * from './withError'
 export * from './form'
 export * from './common'
 export { default as Middleware } from './components/Middleware'
+export { default as Debounce } from './components/Debounce'

src/index.js

@@ -2,12 +2,23 @@ import React from 'react'
 import { provideFormular, withFormField, Middleware } from './index'
 import { create } from 'react-test-renderer'
 
-const Input = withFormField((props) => <input onChange={(e) => props.update(e.target.value)} value={props.value} />)
-const Form = provideFormular(({children, ...props}) => (
-  <div {...props}>
-    {children}
-  </div>
-))
+const Input = withFormField(e => e.target.value)('input')
+const Form = provideFormular()
+
+test('provideFormular', () => {
+  const Form = provideFormular()
+  const s = create(<Form />)
+  expect(s.toJSON().type).toBe('form')
+
+  const DivForm = provideFormular('div')
+  const d = create(<DivForm />)
+  expect(d.toJSON().type).toBe('div')
+})
+
+test('withFormField', () => {
+  const rendered = create(<Form initialData={{}}><Input field="value" type="text" /></Form>)
+  rendered.root.findByType('input').props.onChange({target: {value: 'foo'}})
+})
 
 test('basic middleware', () => {
   const onChange = jest.fn()

src/test.js

@@ -2,6 +2,8 @@ import React from 'react'
 import { DataConsumer } from './context'
 import { getDisplayName } from './common'
 
+const identity = value => value;
+
 /**
  * formAware creates a function which
  * returns a Component that calls the
@@ -12,7 +14,7 @@ function formAware(handler, displayName) {
   function FormAware(props) {
     return (
       <DataConsumer>
-        { ({ data, update }) => handler({ ...props, data, update }) }
+        { ({ data, update }) => handler({ data, update, ...props }) }
       </DataConsumer>
     )
   }
@@ -27,13 +29,13 @@ function formAware(handler, displayName) {
  * the form props (update and data) and value of
  * the specified field
  */
-function withFormField(WrappedComponent) {
+const withFormField = (valueSelector = identity) => WrappedComponent => {
   return formAware(
     ({ data, update, field, ...props }) => (
       <WrappedComponent
         {...props}
         value={data[field]}
-        update={value => update({ [field]: value })}
+        onChange={value => update({ [field]: valueSelector(value) })}
       />
     ),
     `WithFormField(${getDisplayName(WrappedComponent)})`