Merge branch 'feat/1.20.0' into feat-life-cycle

.fusion

@@ -4,7 +4,7 @@
   "class-prefix": ".next",
   "icon": {
     "iconfont-project-id": "515771",
-    "iconfont-path": "//at.alicdn.com/t/font_515771_7u6frotlpa6"
+    "iconfont-path": "//at.alicdn.com/t/font_515771_xjdbujl2iu"
   },
   "import": {
     "sources": {

CHANGELOG.md

@@ -1,5 +1,63 @@
 # Change Log 
 
+## [1.19.16](https://github.com/alibaba-fusion/next/compare/1.19.15...1.19.16) (2020-02-27)
+
+
+### Bug Fixes
+
+* **Card:** bad time of warning, close [#1612](https://github.com/alibaba-fusion/next/issues/1612) ([02e63e4](https://github.com/alibaba-fusion/next/commit/02e63e4))
+* **Checkbox:** pass value and name to input dom ([3e8f2d9](https://github.com/alibaba-fusion/next/commit/3e8f2d9))
+
+
+
+
+## [1.19.15](https://github.com/alibaba-fusion/next/compare/1.19.14...1.19.15) (2020-02-24)
+
+
+### Bug Fixes
+
+* correct sideEffect path ([9e52828](https://github.com/alibaba-fusion/next/commit/9e52828))
+
+
+
+
+## [1.19.14](https://github.com/alibaba-fusion/next/compare/1.19.13...1.19.14) (2020-02-21)
+
+
+### Bug Fixes
+
+* **Tree:** bug of selected close [#1578](https://github.com/alibaba-fusion/next/issues/1578) ([4455570](https://github.com/alibaba-fusion/next/commit/4455570))
+
+
+
+
+## [1.19.13](https://github.com/alibaba-fusion/next/compare/1.19.12...1.19.13) (2020-02-14)
+
+
+### Bug Fixes
+
+* **Collapse:** collapsed panel should be overflow hidden, close [#1569](https://github.com/alibaba-fusion/next/issues/1569) ([c2767ec](https://github.com/alibaba-fusion/next/commit/c2767ec))
+
+
+### Features
+
+* **Shell:** add align for Shell.Navigaiton ([#1576](https://github.com/alibaba-fusion/next/issues/1576)) ([e6318c3](https://github.com/alibaba-fusion/next/commit/e6318c3))
+* **Table:** add htmlTitle for header ([8a89c0a](https://github.com/alibaba-fusion/next/commit/8a89c0a))
+
+
+
+
+## [1.19.12](https://github.com/alibaba-fusion/next/compare/1.19.11...1.19.12) (2020-02-10)
+
+
+### Bug Fixes
+
+* **Checkbox:** allow pass title to label ([fd36f8c](https://github.com/alibaba-fusion/next/commit/fd36f8c))
+* **Tab:** fix tab hover shake ([#1563](https://github.com/alibaba-fusion/next/issues/1563)) ([c921c89](https://github.com/alibaba-fusion/next/commit/c921c89))
+
+
+
+
 ## [1.19.11](https://github.com/alibaba-fusion/next/compare/1.19.10...1.19.11) (2020-02-05)
 
 

LATESTLOG.md

@@ -1,14 +1,11 @@
 # Latest Log 
 
-## [1.19.11](https://github.com/alibaba-fusion/next/compare/1.19.10...1.19.11) (2020-02-05)
+## [1.19.16](https://github.com/alibaba-fusion/next/compare/1.19.15...1.19.16) (2020-02-27)
 
 
 ### Bug Fixes
 
-* **NumberPicker:** bug of delete like 0.01 => 0.0 ([7377629](https://github.com/alibaba-fusion/next/commit/7377629))
-* **NumberPicker:** can input char while value=null ([be34205](https://github.com/alibaba-fusion/next/commit/be34205))
-* **NumberPicker:** remove iconSize ([030cb2c](https://github.com/alibaba-fusion/next/commit/030cb2c))
-* **Table:** add title for table header, close [#1550](https://github.com/alibaba-fusion/next/issues/1550) ([1fe345c](https://github.com/alibaba-fusion/next/commit/1fe345c))
-* **Upload:** Compatibility in ie/firefox ([23083ee](https://github.com/alibaba-fusion/next/commit/23083ee))
+* **Card:** bad time of warning, close [#1612](https://github.com/alibaba-fusion/next/issues/1612) ([02e63e4](https://github.com/alibaba-fusion/next/commit/02e63e4))
+* **Checkbox:** pass value and name to input dom ([3e8f2d9](https://github.com/alibaba-fusion/next/commit/3e8f2d9))
 
 

docs/button/demo/accessibility.md

@@ -1,13 +1,13 @@
 # 无障碍
 
-- order: 8
+- order: 9
 
 在使用不包含文本的icon Button组件时，我们需要添加`aria-label`对其进行描述，键盘操作请参考`ARIA and KeyBoard`。
 
 :::lang=en-us
 # Accessibility
 
-- order: 8
+- order: 9
 
 When using icon Button component , we should add `aria-label` to describe it. Please refer to `ARIA and KeyBoard` for keyboard operation information.
 

docs/button/demo/component.md

@@ -1,14 +1,14 @@
 # 自定义标签类型
 
-- order: 6
+- order: 7
 
 默认情况下 Button 组件使用 `<button>` 标签来渲染按钮，通过 `component` 属性可以自定义 Button 的标签类型。
 可选值为 `button` 和 `a`。
 
 :::lang=en-us
 # Custom component
 
-- order: 6
+- order: 7
 
 By default, a Button component is rendered by a html `<button>` tag, its render behavior could be modified by a props named `component`, which should be set to `button` or `a`.
 

docs/button/demo/custom-icons.md

@@ -0,0 +1,43 @@
+# 自定义图标
+
+- order: 4
+
+通过设置 `icons` 属性中的 `loading` 即可自定义加载的 `icon`。
+
+:::lang=en-us
+# Custom icons
+
+- order: 4
+
+Button has a inner state `icons.loading` to custom loading icon. It could be changed by setting `icons.loading` attribute.
+
+::
+
+---
+
+````jsx
+import { Button, Icon } from '@alifd/next';
+
+class Demo extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            loading: false
+        };
+    }
+
+    setLoading = () => {
+        this.setState({ loading: true });
+    }
+
+    render() {
+        return (<div>
+            <Button type="secondary" iconSize="xs" loading icons={{ loading: <Icon type="loading" style={{ color: 'orange' }} /> }}>Custom loading icon</Button>&nbsp;&nbsp;
+            <Button type="primary" loading={this.state.loading} onClick={this.setLoading} icons={{ loading: <Icon type="loading" style={{ color: 'orange' }} /> }}>Click to loading and show loading icon</Button>
+        </div>);
+    }
+}
+
+ReactDOM.render(<Demo/>, mountNode);
+````

docs/button/demo/disabled.md

@@ -1,13 +1,13 @@
 # 不可用状态
 
-- order: 5
+- order: 6
 
 添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
 
 :::lang=en-us
 # Disabled
 
-- order: 5
+- order: 6
 
 Disable a Button by adding `disabled` attribute.
 

docs/button/demo/ghost.md

@@ -1,13 +1,13 @@
 # 幽灵按钮
 
-- order: 4
+- order: 5
 
 幽灵按钮通常用在有色背景下，可以使用 `ghost` 属性开启，此时 Button 为透明背景。对于浅色背景和深色背景，通过取值 `light`, `dark` 可以配置使用幽灵按钮的场景。
 
 :::lang=en-us
 # Ghost
 
-- order: 4
+- order: 5
 
 Ghost button is usually used for colored backgrounds. Change a Button to ghost by adding `ghost` attribute,
 and set the attribute's value to `light` or `darked` based on the color depth.

docs/button/demo/group.md

@@ -1,13 +1,13 @@
 # 按钮组
 
-- order: 7
+- order: 8
 
 `Button.Group` 子组件用于将多个按钮组合在一个容器中。
 
 :::lang=en-us
 # Button group
 
-- order: 7
+- order: 8
 
 `Button.Group` could be used to combine multiple Buttons.
 

docs/button/demo/loading.md

@@ -16,7 +16,7 @@ Button has a inner state `loading` to control if a Button is in loading. It coul
 ---
 
 ````jsx
-import { Button } from '@alifd/next';
+import { Button, Icon } from '@alifd/next';
 
 class Demo extends React.Component {
     constructor(props, context) {

docs/button/index.en-us.md

@@ -23,6 +23,7 @@ Buttons are used for emphasizing important functions on your page.
 | --------- | ------------------------------------------------------------------------------------------------------------ | -------- | -------- |
 | size      | Size of button<br><br>**return**:<br>'small', 'medium', 'large'                                                          | Enum     | 'medium' |
 | type      | Typeo of button<br><br>**return**:<br>'primary', 'secondary', 'normal'                                                    | Enum     | 'normal' |
+| icons     | custom icons in button in the format { loading: <Icon type="loading" /> }                                                        | Object   | {}       |
 | iconSize  | Size of icon in button <br><br>**return**:<br>'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl' | Enum     | -        |
 | htmlType  | Original html type <br><br>**return**:<br>'submit', 'reset', 'button'  | Enum     | 'button' |
 | component | The html tag to be rendered <br><br>**return**:<br>'button', 'a', 'div', 'span'                                                                       | Enum     | 'button' |

docs/button/index.md

@@ -23,6 +23,7 @@
 | --------- | ------------------------------------------------------------------------------------------------------------ | -------- | -------- |
 | size      | 按钮的尺寸<br><br>**可选值**:<br>'small', 'medium', 'large'                                                          | Enum     | 'medium' |
 | type      | 按钮的类型<br><br>**可选值**:<br>'primary', 'secondary', 'normal'                                                    | Enum     | 'normal' |
+| icons     | 按钮中可配置的 Icon，格式为 { loading: <Icon type="loading" /> }                                                        | Object   | {}       |
 | iconSize  | 按钮中 Icon 的尺寸，用于替代 Icon 的默认大小<br><br>**可选值**:<br>'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl' | Enum     | -        |
 | htmlType  | 当 component = 'button' 时，设置 button 标签的 type 值<br><br>**可选值**:<br>'submit', 'reset', 'button'                 | Enum     | 'button' |
 | component | 设置标签类型<br><br>**可选值**:<br>'button', 'a', 'div', 'span'                                                       | Enum     | 'button' |

docs/collapse/theme/index.jsx

@@ -35,6 +35,11 @@ function render(i18n) {
                         </Panel>
                         <Panel title={`${title}2`}>
                             {content}
+                            {/* --------- this is for config platform ----------- */}
+                            <div style={{display: "none"}}>
+                                <div type="arrow-right" className='next-collapse-unfold-icon'/>
+                            </div>
+                            {/* --------- this is for config platform ----------- */}
                         </Panel>
                         <Panel title={`${title}3`}>
                             {content}

docs/config-provider/index.en-us.md

@@ -27,6 +27,7 @@ Now support four languages: Simplified Chinese, Traditional Chinese, English and
 import { ConfigProvider, DatePicker } from '@alifd/next';
 import enUS from '@alifd/next/lib/locale/en-us';
 // import zhCN from '@alifd/next/lib/locale/zh-cn';
+// import zhHK from '@alifd/next/lib/locale/zh-hk';
 // import zhTW from '@alifd/next/lib/locale/zh-tw';
 // import jaJP from '@alifd/next/lib/locale/ja-jp';
 

docs/config-provider/index.md

@@ -94,6 +94,7 @@ class App extends React.Component {
 import { ConfigProvider, DatePicker } from '@alifd/next';
 import enUS from '@alifd/next/lib/locale/en-us';
 // import zhCN from '@alifd/next/lib/locale/zh-cn';
+// import zhHK from '@alifd/next/lib/locale/zh-hk';
 // import zhTW from '@alifd/next/lib/locale/zh-tw';
 // import jaJP from '@alifd/next/lib/locale/ja-jp';
 

docs/date-picker/index.en-us.md

@@ -55,6 +55,7 @@ DatePicker are used to select a single date for an input.
 | value               | Range value `[moment, moment]` | Array          | -            |
 | defaultValue        | Default range value `[moment, moment]`    | Array          | - |
 | format              | Date format    | String         | 'YYYY-MM-DD' |
+| placeholder              | input hints:`['start date', 'end date']`    | Array         | - |
 | showTime            | Enable time picker  | Object/Boolean | false        |
 | resetTime           | If reset time for every select     | Boolean        | false        |
 | disabledDate        | Function to disable dates <br><br>**signature**:<br>Function(dateValue: MomentObject) => Boolean<br>**parameter**:<br>_dateValue_: {MomentObject} null<br>_view_: {Enum} current view type: 'year', 'month', 'date'<br>**return**:<br>{Boolean} if disabled<br>                     | Function       | () => false  |

docs/date-picker/index.md

@@ -167,7 +167,7 @@ DatePicker 默认情况下接收和返回的数据类型都是 Moment 对象。
 | defaultVisibleMonth     | 默认展示的起始月份<br><br>**签名**:<br>Function() => MomentObject<br>**返回值**:<br>{MomentObject} 返回包含指定月份的 moment 对象实例<br>                                                                                                                          | Function             | -                                                                                            |          |           |
 | value                   | 日期范围值数组 [moment, moment]                                                                                                                                                                                                                | Array                | -                                                                                            |          |           |
 | defaultValue            | 初始的日期范围值数组 [moment, moment]                                                                                                                                                                                                             | Array                | -                                                                                            |          |           |
-| format                  | 日期格式                                                                                                                                                                                                                                    | String               | 'YYYY-MM-DD'                                                                                 |          |           |
+| format                  | 日期格式                                                                                                                                                                                                                                    | String               | -                                                                                            |          |           |
 | showTime                | 是否使用时间控件，支持传入 TimePicker 的属性                                                                                                                                                                                                            | Object/Boolean       | false                                                                                        |          |           |
 | resetTime               | 每次选择是否重置时间（仅在 showTime 开启时有效）                                                                                                                                                                                                           | Boolean              | false                                                                                        |          |           |
 | disabledDate            | 禁用日期函数<br><br>**签名**:<br>Function(日期值: MomentObject, view: String) => Boolean<br>**参数**:<br>_日期值_: {MomentObject} null<br>_view_: {String} 当前视图类型，year: 年， month: 月, date: 日<br>**返回值**:<br>{Boolean} 是否禁用<br>                          | Function             | () => false                                                                                  |          |           |

docs/field/demo/normalize.md

@@ -2,52 +2,44 @@
 
 - order: 2
 
-通过 `getValueFromEvent` 自定义从组件的 `Event` 获取 `value` 的方式
+当组件返回的数据和最终期望提交的格式不一致的时候，可以使用 `getValueFormatter` 和 `setValueFormatter` 两个函数做转换。
+
+比如 switch 组件期望上报 0/1, date-picker 组件期望上报 YYYY-MM-DD 这种字符串格式
 
 :::lang=en-us
 # custom event value
 
 - order: 2
 
-custom `value` by api `getValueFromEvent`
+eg: you want get 0/1 from switch, or YYYY-MM-DD string from date-picker, you can use `getValueFormatter` 和 `setValueFormatter`
+
 :::
 ---
 
 
 ````jsx
-import { Button, Input, Field } from '@alifd/next';
-
+import { Field, DatePicker, Switch } from '@alifd/next';
+import moment from 'moment';
 
 class App extends React.Component {
 
     field = new Field(this);
 
-    normFile(list) {
-        if (Array.isArray(list)) {
-            return list;
-        }
-        return list && list.fileList;
-    }
-
-    normDate(date, strdate) {
-        console.log('normDate:', date, strdate);
-        return strdate;
-    }
-
     render() {
         const init = this.field.init;
 
         return (<div>
-            <Input {...init('name', { getValueFromEvent: (value) => {
-                if (value.match(/##/)) {
-                    return value;
-                } else {
-                    return `## title-${value}`;
-                }
-            }})} />
-            <Button type="primary" onClick={() => {
-                console.log(this.field.getValues());
-            }}>getValues</Button>
+            <Switch {...init('switch', { 
+                getValueFormatter: (value) => value ? 1 : 0,
+                setValueFormatter: (value) => value === 1
+                })}/>
+            <br/>
+            <DatePicker {...init('time', { 
+                getValueFormatter: (value) => value.format('YYYY-MM-DD'),
+                setValueFormatter: (value) => moment(value, 'YYYY-MM-DD')
+                })} />
+            <br/>
+            <pre style={{marginTop: 8}}>{JSON.stringify(this.field.getValues(), null, 2)}</pre>
         </div>);
     }
 }

docs/field/index.en-us.md

@@ -230,7 +230,8 @@ init(name, options, props)
 | options.initValue | The initial value of the component (the component will be read only when rendering for the first time, and later modifying this value is invalid), similar to defaultValue | any | | |
 |options.trigger | Name of the event that triggered the data change | String | | 'onChange' |
 | 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 | | | |
+| options.getValueFormatter | custom way to get value from `onChange` event, Detailed usage see demo `custom data get` | Function(value, ...args) parameter order and components are exactly the same The | | | |
+| options.getValueFormatter | custom way to set value. Detailed usage see demo `custom data get` | Function(values) | | | |
 |props | Component-defined events can be written here | Object | | | |
 | autoValidate | Automatically validate while value changed | Boolean  |true|
 

docs/field/index.md

@@ -234,7 +234,8 @@ init(name, options, props)
 | options.initValue | 组件初始值(组件第一次render的时候才会读取，后面再修改此值无效),类似defaultValue | any | | |
 | options.trigger | 触发数据变化的事件名称 | String | | 'onChange' |
 | options.rules | 校验规则 | Array/Object | | | |
-| options.getValueFromEvent | 自定义从`onChange`事件中获取value的方式，一般不需要设置. 详细用法查看demo `自定义数据获取` | Function(value,...args) 参数顺序和组件是完全一致的 | | | |
+| options.getValueFormatter | 自定义从组件获取 `value`  ，详细用法查看demo `自定义数据获取` | Function(value,...args) 参数顺序和组件是完全一致的 | | | |
+| options.setValueFormatter | 自定义转换 `value` 到组件 ，详细用法查看demo `自定义数据获取` | Function(value)  | | | |
 | props | 组件自定义的事件可以写在这里  | Object | | | |
 | autoValidate | 是否修改数据的时候自动触发校验单个组件的校验, 设为 false 后只能通过 validate() 来触发校验 | Boolean  |true|
 

docs/form/demo/validate-custom-error.md

@@ -1,4 +1,4 @@
-# 校验
+# 校验(自定义错误)
 
 - order: 9