feat: Form modularization.

components/form/Form.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import rcUtil from 'rc-util';
+
+const cx = rcUtil.classSet;
+
+class Form extends React.Component {
+  render() {
+    const prefixCls = this.props.prefixCls;
+    const formClassName = {
+      [`${prefixCls}-horizontal`]: this.props.horizontal,
+      [`${prefixCls}-inline`]: this.props.inline,
+    };
+    const classes = cx(formClassName);
+
+    return (
+      <form {...this.props} className={classes}>
+        {this.props.children}
+      </form>
+    );
+  }
+}
+
+Form.propTypes = {
+  prefixCls: React.PropTypes.string,
+  horizontal: React.PropTypes.bool,
+  inline: React.PropTypes.bool,
+  children: React.PropTypes.any,
+  onSubmit: React.PropTypes.func,
+};
+
+Form.defaultProps = {
+  prefixCls: 'ant-form',
+};
+
+module.exports = Form;

components/form/FormItem.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import rcUtil from 'rc-util';
+
+const cx = rcUtil.classSet;
+
+function prefixClsFn(prefixCls, ...args) {
+  return args.map((s)=> {
+    return prefixCls + '-' + s;
+  }).join(' ');
+}
+
+class FormItem extends React.Component {
+  renderHelp() {
+    const prefixCls = this.props.prefixCls;
+    return this.props.help ? (
+      <div className={prefixClsFn(prefixCls, 'explain')} key="help">
+        {this.props.help}
+      </div>
+    ) : null;
+  }
+
+  renderValidateWrapper(children) {
+    if (this.props.validateStatus) {
+      const classes = cx(
+        {
+          'has-feedback': this.props.hasFeedback,
+          'has-success': this.props.validateStatus === 'success',
+          'has-warning': this.props.validateStatus === 'warning',
+          'has-error': this.props.validateStatus === 'error',
+          'is-validating': this.props.validateStatus === 'validating',
+        }
+      );
+      return (
+        <div className={classes}>
+          {children}
+        </div>
+      );
+    }
+    return children;
+  }
+
+  renderWrapper(children) {
+    return this.props.wrapperClassName ? (
+      <div className={this.props.wrapperClassName} key="wrapper">
+        {children}
+      </div>
+    ) : children;
+  }
+
+  renderLabel() {
+    const labelClassName = this.props.labelClassName;
+    const required = this.props.required ? 'required' : '';
+
+    return this.props.label ? (
+      <label htmlFor={this.props.id} className={labelClassName} required={required} key="label">
+        {this.props.label}
+      </label>
+    ) : '';
+  }
+
+  renderChildren() {
+    return [
+      this.renderLabel(),
+      this.renderWrapper(
+        this.renderValidateWrapper(
+          [
+            this.props.children,
+            this.renderHelp(),
+          ]
+        )
+      ),
+    ];
+  }
+
+  renderFormItem(children) {
+    const prefixCls = this.props.prefixCls;
+    const itemClassName = {
+      [`${prefixCls}-item`]: true,
+      [`${prefixCls}-item-compact`]: this.props.isCompact,
+    };
+
+    return (
+      <div className={cx(itemClassName)} key="form-item">
+        {children}
+      </div>
+    );
+  }
+
+  render() {
+    const children = this.renderChildren();
+    return this.renderFormItem(children);
+  }
+}
+
+FormItem.propTypes = {
+  prefixCls: React.PropTypes.string,
+  label: React.PropTypes.node,
+  labelClassName: React.PropTypes.string,
+  help: React.PropTypes.node,
+  validateStatus: React.PropTypes.oneOf(['success', 'warning', 'error', 'validating']),
+  hasFeedback: React.PropTypes.bool,
+  wrapperClassName: React.PropTypes.string,
+  isCompact: React.PropTypes.bool,
+  className: React.PropTypes.string,
+  children: React.PropTypes.any,
+};
+
+FormItem.defaultProps = {
+  hasFeedback: false,
+  isCompact: false,
+  required: false,
+  prefixCls: 'ant-form',
+};
+
+module.exports = FormItem;

components/form/Input.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+
+function prefixClsFn(prefixCls, ...args) {
+  return args.map((s)=> {
+    return prefixCls + '-' + s;
+  }).join(' ');
+}
+
+class Group extends React.Component {
+  render() {
+    return (
+      <div className={this.props.className} key="ant-input-group">
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+Group.propTypes = {
+  className: React.PropTypes.string,
+  children: React.PropTypes.any,
+};
+
+Group.defaultProps = {
+  className: 'ant-input-group',
+};
+
+class Input extends React.Component {
+  // TODO
+  getInputDOMNode() {
+    return this.refs.input;
+  }
+
+  // TODO
+  getValue() {
+    if (this.props.type === 'static') {
+      return this.props.value;
+    } else if (this.props.type) {
+      return this.getInputDOMNode().value;
+    }
+
+    throw new Error('Cannot use getValue without specifying input type.');
+  }
+
+  renderLabledInput(children) {
+    const props = this.props;
+    const wrapperClassName = prefixClsFn(props.prefixCls, 'input-group');
+    const addonClassName = prefixClsFn(wrapperClassName, 'addon');
+    const addonBefore = props.addonBefore ? (
+      <span className={addonClassName} key="addonBefore">
+        {props.addonBefore}
+      </span>
+    ) : null;
+
+    const addonAfter = props.addonAfter ? (
+      <span className={addonClassName} key="addonAfter">
+        {props.addonAfter}
+      </span>
+    ) : null;
+
+    return addonBefore || addonAfter ? (
+      <div className={wrapperClassName} key="ant-input-group">
+        {addonBefore}
+        {children}
+        {addonAfter}
+      </div>
+    ) : children;
+  }
+
+  renderInput() {
+    const props = this.props;
+    const prefixCls = props.prefixCls;
+    const inputClassName = prefixClsFn(prefixCls, 'input');
+    if (!props.type) {
+      return props.children;
+    }
+
+    // let inputClass;
+    // switch (props.size) {
+    // case 'small': inputClass = prefixClsFn(inputClassName, 'sm'); break;
+    // case 'large': inputClass = prefixClsFn(inputClassName, 'lg'); break;
+    // default:
+    // }
+
+    switch (props.type) {
+    case 'textarea':
+      return <textarea {...props} className={inputClassName} ref="input" />;
+    case 'static':
+      return (
+        <p id={props.id} className={prefixClsFn(prefixCls, 'form-text')} ref="input">
+          {props.value}
+        </p>
+      );
+    default:
+      return <input {...props} className={inputClassName} ref="input" key="input"/>;
+    }
+  }
+
+  render() {
+    return this.renderLabledInput(this.renderInput());
+  }
+}
+
+Input.propTypes = {
+  type: React.PropTypes.string,
+  id: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.number,
+  ]),
+  size: React.PropTypes.oneOf(['small', 'medium', 'large']),
+  disabled: React.PropTypes.bool,
+  value: React.PropTypes.any,
+  defaultValue: React.PropTypes.any,
+  className: React.PropTypes.string,
+  addonBefore: React.PropTypes.node,
+  addonAfter: React.PropTypes.node,
+  children: React.PropTypes.any,
+  prefixCls: React.PropTypes.string,
+};
+
+Input.defaultProps = {
+  defaultValue: '',
+  disabled: false,
+  prefixCls: 'ant',
+};
+
+module.exports = Input;
+module.exports.Group = Group;

components/form/index.jsx

@@ -0,0 +1,7 @@
+import Form from './Form';
+import FormItem from './FormItem';
+import Input from './Input';
+
+Form.Item = FormItem;
+Form.Input = Input;
+export default Form;