feat(Form): add width props

src/components/Form/Form/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import update from 'react-update'
-import classnames from 'classnames'
+import cx from 'classnames'
 import invariant from 'invariant'
 import xhr from '../../xhr'
 import './index.less'
@@ -149,14 +149,18 @@ class Form extends Component {
 
   render () {
     const {
-      children, className, data, defaultData, onChange, onSubmit, onSuccess, size, rules, labelWidth, ...other
+      children, className, data, defaultData, onChange, onSubmit, onSuccess, size, rules, labelWidth, width, ...other
     } = this.props
 
-    const classNames = classnames(
+    const classNames = cx(
       'cmui-form',
       {[`cmui-form-${size}`]: size}
     )
 
+    if (width) {
+      other.style = Object.assign(other.style || {}, { width })
+    }
+
     return (
       <form
         onSubmit={::this.handleSubmit}
@@ -194,7 +198,10 @@ Form.propTypes = {
   // 表单验证规则，需要验证的 key 与 data 对象一一对应
   rules: PropTypes.object,
 
-  // 表单 label 宽度，如果不需要 label，设置为 0 即可
+  // 表单的宽度大小，单位为px
+  width: PropTypes.number,
+
+  // 表单 label 宽度，如果不需要 label，设置为`0`即可
   labelWidth: PropTypes.number,
 
   // 表单提交 URL，内部调用 xhr 模块

src/components/Form/Form/index.less

@@ -1,3 +1,4 @@
 .cmui-form {
   margin: 0;
+  width: 100%;
 }

src/components/Form/FormItem/index.js

@@ -123,12 +123,12 @@ FormItem.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
 
-  // label 显示内容
-  label: PropTypes.string,
-
   // 表单数据 key，与 data、rules 对应
   name: PropTypes.string.isRequired,
 
+  // label 显示内容
+  label: PropTypes.string,
+
   // 是否必填，label 显示上的区别
   required: PropTypes.bool,
 

src/components/Form/FormTextarea/index.js

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import './index.less'
 
 const FormTextarea = (props, context) => {
-  const { children, className, onChange, minWidth, minHeight, ...other } = props
+  const { children, className, onChange, minWidth, minHeight, width, ...other } = props
   const { form, formItem } = context
   let value = form.getItemValue(formItem)
   if (!value && value !== 0) {
@@ -15,6 +15,9 @@ const FormTextarea = (props, context) => {
     form.setItemValue(formItem, e.target.value)
     onChange && onChange(e)
   }
+  if (width) {
+    other.style = Object.assign(other.style || {}, { width })
+  }
   if (minWidth) {
     other.style = Object.assign(other.style || {}, { minWidth })
   }
@@ -25,10 +28,19 @@ const FormTextarea = (props, context) => {
 }
 
 FormTextarea.propTypes = {
-  onChange: PropTypes.func,
   children: PropTypes.node,
   className: PropTypes.string,
+
+  // onChange事件
+  onChange: PropTypes.func,
+
+  // 宽度大小，单位为px
+  width: PropTypes.number,
+
+  // 最小宽度
   minWidth: PropTypes.number,
+
+  // 最小高度
   minHeight: PropTypes.number
 }
 

src/components/Form/FormTextarea/index.less

@@ -2,6 +2,7 @@
 
 .cmui-form-textarea {
   display: block;
+  width: 100%;
   color: inherit;
   border: 2px solid @lite;
   padding: 10px;