Merge pull request alibaba-fusion#368 from alibaba-fusion/feat/1.13.0

Feat/1.13.0
STLighter · Feb 21, 2019 · 07ae358 · 07ae358
2 parents 0c504f7 + 7134f13
commit 07ae358
Show file tree

Hide file tree

Showing 91 changed files with 1,290 additions and 228 deletions.
diff --git a/docs/checkbox/demo/basic.md b/docs/checkbox/demo/basic.md
@@ -15,15 +15,15 @@ Basic components rendered using `Checkbox`.
 ````jsx
 import { Checkbox } from '@alifd/next';
 
-ReactDOM.render((
+ReactDOM.render(
     <div>
         <h6>Different status without label:</h6>
-        Unchecked：<Checkbox />&nbsp;
-        DefaultChecked：<Checkbox defaultChecked />&nbsp;
-        Indeterminate：<Checkbox defaultIndeterminate />&nbsp;
-        Disabled：<Checkbox disabled />&nbsp;
-        Checked-Disabled：<Checkbox disabled checked />&nbsp;
-        Checked：<Checkbox checked />&nbsp;
+        <Checkbox >Unchecked</Checkbox>
+        <Checkbox defaultChecked >DefaultChecked</Checkbox>
+        <Checkbox defaultIndeterminate >Indeterminate</Checkbox>
+        <Checkbox disabled >Disabled</Checkbox>;
+        <Checkbox disabled checked >Checked-Disabled</Checkbox>
+        <Checkbox checked >Checked</Checkbox>
         <h6>Using with label</h6>
         <Checkbox>Banana</Checkbox>&nbsp;
         <Checkbox id="apple" /><label htmlFor="apple" className="next-checkbox-label">Apple</label>&nbsp;
@@ -32,6 +32,5 @@ ReactDOM.render((
             <span className="next-checkbox-label">Pear</span>
         </label>&nbsp;
         <Checkbox label="Banana" />
-    </div>
-), mountNode);
+    </div>, mountNode);
 ````
diff --git a/docs/collapse/demo/basic.md b/docs/collapse/demo/basic.md
@@ -13,33 +13,60 @@
 ---
 
 ````jsx
-import { Collapse } from '@alifd/next';
+import { Collapse, Radio } from '@alifd/next';
 
 const Panel = Collapse.Panel;
+const RadioGroup = Radio.Group;
+
+const RTL = 'rtl';
+const LTR = 'ltr';
+
+class App extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            rtl: false
+        }
+        this.handleDirectionChange = this.handleDirectionChange.bind(this);
+    }
+
+    handleDirectionChange(v) {
+        this.setState({
+            rtl: !this.state.rtl
+        });
+    }
+
+    render() {
+        return (<div>
+            <RadioGroup dataSource={['ltr', 'rtl']} value={this.state.rtl ? 'rtl' : 'ltr'} onChange={this.handleDirectionChange} />
+            <Collapse rtl={this.state.rtl}>
+                <Panel title="simple tile">
+                    <ul>
+                        <li>Promotions are marketing campaigns ran by Marketplace</li>
+                        <li>Participate to sale your products during that promotion and make a profit</li>
+                    </ul>
+                </Panel>
+                <Panel title="What are Promotion Products?">
+                    <ul>
+                        <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>
+                        <li>You can choose which products should be available for the promotion</li>
+                        <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>
+                    </ul>
+                </Panel>
+                <Panel title="Why can i not submit a higher price?">
+                    <ul>
+                        <li>The Promotion requires a certain price to make sure that our customers are attracted</li>
+                    </ul>
+                </Panel>
+                <Panel title="What is Promo Stock?">
+                    Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.
+                </Panel>
+            </Collapse>
+        </div>);
+    }
+}
 
 ReactDOM.render(
-    <Collapse>
-        <Panel title="simple tile">
-            <ul>
-                <li>Promotions are marketing campaigns ran by Marketplace</li>
-                <li>Participate to sale your products during that promotion and make a profit</li>
-            </ul>
-        </Panel>
-        <Panel title="What are Promotion Products?">
-            <ul>
-                <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>
-                <li>You can choose which products should be available for the promotion</li>
-                <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>
-            </ul>
-        </Panel>
-        <Panel title="Why can i not submit a higher price?">
-            <ul>
-                <li>The Promotion requires a certain price to make sure that our customers are attracted</li>
-            </ul>
-        </Panel>
-        <Panel title="What is Promo Stock?">
-            Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.
-        </Panel>
-    </Collapse>,
+    <App />,
     mountNode);
 ````
diff --git a/docs/field/demo/dynamic.md b/docs/field/demo/dynamic.md
@@ -2,14 +2,14 @@
 
 - order: 6
 
-Input 的 name 必须全局唯一, 否则可能会出现串行的错误
+通过 `spliceArray` 可以删除数组格式 name (eg: name.{index}) 的数据, 并且自动订正其他 name 的 index - 1 问题
 
 :::lang=en-us
 # mix usage
 
 - order: 6
 
-name of Input must be unique
+by use `spliceArray` could delete array type keys (eg: name.{index}), and make larger keys auto -1
 :::
 ---
 
@@ -31,7 +31,6 @@ class Demo extends React.Component {
 
         this.field = new Field(this, {
             parseName: true,
-            autoUnmount: true
         });
     }
 
@@ -52,11 +51,11 @@ class Demo extends React.Component {
     removeItem(index) {
         const { tableSource } = this.state;
         tableSource.splice(index, 1);
+        this.field.spliceArray('name.{index}', index);
         this.setState({ tableSource });
     }
 
-    // name.${value} 全局唯一
-    input = (value) => <Input {...this.field.init(`name.${value}`, { initValue: value })} />;
+    input = (value, index) => <Input  {...this.field.init(`name.${index}`, { initValue: index })} />;
     delete = (value, index) => <Button warning onClick={this.removeItem.bind(this, index)}>delete</Button>;
 
     render() {
@@ -68,8 +67,8 @@ class Demo extends React.Component {
                     <Table.Column title="operation" cell={this.delete} width={100} />
                 </Table>
                 <div style={{ marginTop: 10 }}>
-                    <Button type="primary" onClick={this.getValues}>print</Button>
-                    <Button type="normal" onClick={this.add} style={{ marginLeft: 4 }}>Add</Button>
+                    <Button type="primary" onClick={this.getValues} >print</Button>
+                    <Button type="normal" onClick={this.add} style={{ marginLeft: 8 }}>Add</Button>
                 </div>
             </div>
         );
@@ -78,9 +77,3 @@ class Demo extends React.Component {
 
 ReactDOM.render(<Demo />, mountNode);
 ````
-
-````css
-.demo .next-btn {
-    margin-right: 5px;
-}
-````
diff --git a/docs/field/demo/validator.md b/docs/field/demo/validator.md
@@ -105,11 +105,11 @@ class App extends React.Component {
             <br/>
             <br/>
 
-            <Input multiple maxLength={10} defaultValue=">3 and <10" {...init('textarea', {
+            <Input.TextArea placeholder=">3 and <10" {...init('textarea', {
                 rules: [{
                     required: true,
-                    min: 3,
-                    max: 10
+                    minLength: 3,
+                    maxLength: 10
                 }]
             })} />
             {this.field.getError('textarea') ?

diff --git a/docs/field/index.en-us.md b/docs/field/index.en-us.md
@@ -188,6 +188,7 @@ Let myfield = new Field(this [,options]);
 |forceUpdate | Only the components of PureComponent are recommended to open this forced refresh function, which will cause performance problems (500 components as an example: the render will cost 700ms when it is turned on, and 400ms if it is turned off) | Boolean |false|
 | scrollToFirstError | scrolling field.validate scrolls to the first errored component, offsets if it is an integer | Boolean/Number |true|
 | autoUnmount | Automatically delete the Unmout element, if you want to keep the data can be set to false | Boolean |true|
+| autoValidate | Automatically validate while value changed | Boolean  |true|
 | values | initial value| Object ||
 
 #### API Interface
@@ -210,6 +211,7 @@ The api interface provided by the object after `new` (eg `myfield.getValues()`)
 |getState | Judge check status | Function(name: String)| 'error' 'success' 'loading' '' | '' |
 | getNames | Get the key of all components | Function()| ||
 |remove | Delete the data of a certain control or a group of controls. After deletion, the validate/value associated with it will be cleared. | Function(name: String/String[])|
+| spliceArray  | delete data of name like name.{index} | Function(keyMatch: String, index: Number)|  |  |
 
 #### init
 ```
@@ -225,6 +227,7 @@ init(name, options, props)
 | options.rules | Checksum Rules | Array/Object | | | |
 | options.getValueFromEvent | custom way to get value from `onChange` event, generally do not need to set. Detailed usage see demo `custom data get` | Function(value, ...args) parameter order and components are exactly the same The | | | |
 |props | Component-defined events can be written here | Object | | | |
+| autoValidate | Automatically validate while value changed | Boolean  |true|
 
 return
 

diff --git a/docs/field/index.md b/docs/field/index.md
@@ -192,6 +192,7 @@ let myfield = new Field(this [,options]);
 | forceUpdate | 仅建议PureComponent的组件打开此强制刷新功能，会带来性能问题(500个组件为例：打开的时候render花费700ms, 关闭时候render花费400ms) | Boolean  |false|
 | scrollToFirstError | field.validate的时候滚动到第一个出错的组件, 如果是整数会进行偏移 | Boolean/Number  |true|
 | autoUnmount | 自动删除Unmout元素，如果想保留数据可以设置为false | Boolean  |true|
+| autoValidate | 是否修改数据的时候就自动触发校验, 设为 false 后只能通过 validate() 来触发校验  | Boolean  |true|
 | values | 初始化数据 | Object ||
 
 #### API接口
@@ -214,7 +215,7 @@ let myfield = new Field(this [,options]);
 | getState  | 判断校验状态 | Function(name: String)| 'error' 'success' 'loading' '' | '' |
 | getNames  | 获取所有组件的key | Function()|  |  |
 | remove  | 删除某一个或者一组控件的数据，删除后与之相关的validate/value都会被清空 | Function(name: String/String[])|  |  |
-
+| spliceArray  | 删除 name 是数组格式的数据, 并且自动处理其他 name 的数组错位问题 | Function(keyMatch: String, index: Number)|  |  |
 
 #### init
 ```
@@ -230,6 +231,7 @@ init(name, options, props)
 | options.rules | 校验规则 | Array/Object | | | |
 | options.getValueFromEvent | 自定义从`onChange`事件中获取value的方式，一般不需要设置. 详细用法查看demo `自定义数据获取` | Function(value,...args) 参数顺序和组件是完全一致的 | | | |
 | props | 组件自定义的事件可以写在这里  | Object | | | |
+| autoValidate | 是否修改数据的时候自动触发校验单个组件的校验, 设为 false 后只能通过 validate() 来触发校验 | Boolean  |true|
 
 返回值
 ```

diff --git a/docs/form/index.en-us.md b/docs/form/index.en-us.md
@@ -80,6 +80,7 @@ Form layout, validation, data submission operations used.
 | formatMessage | custom error message for `format` | String | - |
 | formatTrigger | custom trigger mode for `format` | String/Array | - |
 | validator | [validation] custom validation function <br><br> **signature **:<br>Function() => void | Function | - |
+| autoValidate | validate while value changed | Boolean            | -     |
 
 ### Form.Reset