add FormBlock

Author: Lobos

docs/src/js/menuList.js

@@ -91,6 +91,11 @@ module.exports = [
     component: require('./pages/formControl.jsx')
   },
 
+  {
+    path: '/formBlock',
+    component: require('./pages/formBlock.jsx')
+  },
+
   {
     path: '/cascade',
     component: require('./pages/cascade.jsx')

docs/src/js/pages/formBlock.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import Code from '../Code'
+import Example from '../Example'
+import { Form, FormControl, FormBlock } from 'rctui'
+import { Cn, En } from '../Language'
+
+module.exports = class extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      data: {
+        base: {
+          email: 'test@123.com',
+          nickname: 'test'
+        }
+      }
+    }
+  }
+
+  render () {
+    return (
+      <div>
+        <div className="header">
+          <h1>FormBlock</h1>
+          <Cn tag="h2">表单区块</Cn>
+        </div>
+
+        <div className="content pure-form">
+          <Cn>
+            表单区块用来处理复杂表单数据中嵌套的部分
+          </Cn>
+
+          <h2 className="subhead">Example</h2>
+
+          <Example>
+            <Form onSubmit={d => console.log(d)} button="Submit" data={this.state.data}>
+              <FormBlock name="base">
+                <FormControl required label="email" name="email" type="email" />
+                <FormControl required label="nickname" name="nickname" type="text" />
+              </FormBlock>
+              <FormBlock layout="inline" name="extra" value={{
+                avatar: '',
+                birthday: '1980-01-01',
+                city: 'nanjing'
+              }}>
+                <FormControl label="avatar" name="avatar" type="text" />
+                <FormControl required label="birthday" name="birthday" type="date" />
+                <FormControl label="city" name="city" type="text" />
+              </FormBlock>
+            </Form>
+          </Example>
+>
+        </div>
+      </div>
+    )
+  }
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "rctui",
   "author": "lobos841@gmail.com",
-  "version": "0.7.16",
+  "version": "0.7.18-rc",
   "description": "a collection of components for React",
   "main": "./src/index.js",
   "scripts": {

src/FormBlock.js

@@ -0,0 +1,104 @@
+import React, { Component } from 'react'
+import PropTypes from './utils/proptypes'
+import { objectAssign } from './utils/objects'
+import Enhance from './higherOrders/FormItem'
+
+class FormBlock extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {}
+
+    this.itemBind = this.itemBind.bind(this)
+    this.itemUnbind = this.itemUnbind.bind(this)
+    this.itemChange = this.itemChange.bind(this)
+
+    this.items = {}
+  }
+
+  getChildContext () {
+    const { columns, labelWidth, layout, hintType } = this.props
+
+    const np = {}
+    if (columns) np.columns = columns
+    if (labelWidth) np.labelWidth = labelWidth
+    if (layout) np.layout = layout
+    if (hintType) np.hintType = hintType
+
+    return {
+      formData: this.props.value,
+      itemBind: this.itemBind,
+      itemUnbind: this.itemUnbind,
+      itemChange: this.itemChange,
+      controlProps: objectAssign({}, this.context.controlProps, np)
+    }
+  }
+
+  itemBind (item) {
+    const { name, value } = item
+    const data = {...this.props.value}
+    this.items[name] = item
+    if (value !== undefined && !data[name]) {
+      data[name] = value
+    }
+    this.props.onChange(data)
+  }
+
+  itemUnbind (name) {
+    delete this.items[name]
+    const data = {...this.props.value}
+    delete data[name]
+    this.props.onChange(data)
+  }
+
+  itemChange (name, value) {
+    const data = objectAssign({}, this.props.value, {[name]: value})
+    this.props.onChange(data)
+  }
+
+  validate (data) {
+    return Object.keys(this.items).reduce((suc, key) => {
+      return suc && (this.items[key].validate(data[key], true) === true)
+    }, true)
+  }
+
+  render () {
+    const { className, children } = this.props
+    return (
+      <div className={className}>
+        {children}
+      </div>
+    )
+  }
+}
+
+FormBlock.isFormBlock = true
+
+FormBlock.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  columns: PropTypes.number,
+  hintType: PropTypes.oneOf(['block', 'none', 'pop', 'inline']),
+  labelWidth: PropTypes.number_string,
+  layout: PropTypes.oneOf(['aligned', 'stacked', 'inline']),
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.object
+}
+
+FormBlock.defaultProps = {
+  value: {}
+}
+
+FormBlock.contextTypes = {
+  controlProps: PropTypes.object
+}
+
+FormBlock.childContextTypes = {
+  formData: PropTypes.object,
+  itemBind: PropTypes.func,
+  itemChange: PropTypes.func,
+  itemUnbind: PropTypes.func,
+  controlProps: PropTypes.object
+}
+
+export default Enhance(FormBlock)
+

src/higherOrders/FormItem.js

@@ -94,8 +94,14 @@ export default function FormItem (Component) {
       const { formData } = this.context
       const { type } = this.props
 
+      let validate
+
       // component's inner validate
-      const validate = getValidate(type)
+      if (Component.isFormBlock) {
+        if (this._el) validate = this._el.validate.bind(this._el)
+      } else {
+        validate = getValidate(type)
+      }
 
       const result = validate ? validate(value, this.props, formData)
         : Validation.validate(value, getValueType(type), formData, this.props, this.setResult)
@@ -164,6 +170,7 @@ export default function FormItem (Component) {
 
       let el = (
         <Component {...props}
+          ref={(el) => { this._el = el }}
           hasError={this.state.result instanceof Error}
           onChange={this.handleChange}
           value={value}

src/index.js

@@ -27,6 +27,7 @@ export { default as FormSubmit } from './FormSubmit'
 export { default as Form } from './Form'
 export { default as FormItem } from './FormItem'
 export { default as FormText } from './FormText'
+export { default as FormBlock } from './FormBlock'
 export { default as If } from './If'
 
 export { default as Alert } from './Alert'