diff --git a/docs/date-picker/index.en-us.md b/docs/date-picker/index.en-us.md
index af11ebb5e4..b735a43974 100644
--- a/docs/date-picker/index.en-us.md
+++ b/docs/date-picker/index.en-us.md
@@ -27,7 +27,7 @@ DatePicker are used to select a single date for an input.
| format | Format of date value (it will also effect user input) | String | 'YYYY-MM-DD' |
| showTime | Enable time-picker, pass object like `{ defaultValue, format, ... }` | Object/Boolean | false |
| resetTime | If reset time for every re-select | Boolean | false |
-| disabledDate | Function to disable date
**signature**:
Function(dateValue: MomentObject) => Boolean
**parameter**:
_dateValue_: {MomentObject} null
**return**:
{Boolean} if disable current date
| Function | () => false |
+| disabledDate | Function to disable date
**signature**:
Function(dateValue: MomentObject) => Boolean
**parameter**:
_dateValue_: {MomentObject} null
_view_: {Enum} current view type: 'year', 'month', 'date'
**return**:
{Boolean} if disable current date
| Function | () => false |
| footerRender | Template render for custom footer
**signature**:
Function() => Node
**return**:
{Node} Custom footer
| Function | () => null |
| onChange | Callback when date changes
**signature**:
Function() => MomentObject
**return**:
{MomentObject} dateValue
| Function | func.noop |
| onOk | Callback when click the ok button
**signature**:
Function() => MomentObject
**return**:
{MomentObject} dateValue
| Function | func.noop |
@@ -54,7 +54,7 @@ DatePicker are used to select a single date for an input.
| format | Date format | String | 'YYYY-MM-DD' |
| showTime | Enable time picker | Object/Boolean | false |
| resetTime | If reset time for every select | Boolean | false |
-| disabledDate | Function to disable dates
**signature**:
Function(dateValue: MomentObject) => Boolean
**parameter**:
_dateValue_: {MomentObject} null
**return**:
{Boolean} if disabled
| Function | () => false |
+| disabledDate | Function to disable dates
**signature**:
Function(dateValue: MomentObject) => Boolean
**parameter**:
_dateValue_: {MomentObject} null
_view_: {Enum} current view type: 'year', 'month', 'date'
**return**:
{Boolean} if disabled
| Function | () => false |
| footerRender | Template render for footer
**signature**:
Function() => Node
**return**:
{Node} custom footer
| Function | () => null |
| onChange | Callback when date changes
**signature**:
Function() => MomentObject
**return**:
{MomentObject} range values
| Function | func.noop |
| onOk | Callback when click ok button
**signature**:
Function() => MomentObject
**return**:
{MomentObject} range values
| Function | func.noop |
@@ -82,4 +82,3 @@ DatePicker are used to select a single date for an input.
| number key | Need to manual input the date, the specified date format |
| Enter | open the calendar or select date |
| Esc | close the calendar |
-
\ No newline at end of file
diff --git a/docs/date-picker/index.md b/docs/date-picker/index.md
index 5cd564b838..07c6e904a9 100644
--- a/docs/date-picker/index.md
+++ b/docs/date-picker/index.md
@@ -89,123 +89,123 @@ DatePicker 默认情况下接收和返回的数据类型都是 Moment 对象。
### DatePicker
-| 参数 | 说明 | 类型 | 默认值 |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------ |
-| label | 输入框内置标签 | ReactNode | - |
-| size | 输入框尺寸
**可选值**:
'small', 'medium', 'large' | Enum | 'medium' |
-| state | 输入框状态
**可选值**:
'success', 'loading', 'error' | Enum | - |
-| placeholder | 输入提示 | String | - |
-| defaultVisibleMonth | 默认展现的月
**签名**:
Function() => MomentObject
**返回值**:
{MomentObject} 返回包含指定月份的 moment 对象实例
| Function | - |
-| value | 日期值（受控）moment 对象 | custom | - |
-| defaultValue | 初始日期值，moment 对象 | custom | - |
-| format | 日期值的格式（用于限定用户输入和展示） | String | 'YYYY-MM-DD' |
-| showTime | 是否使用时间控件，传入 TimePicker 的属性 { defaultValue, format, ... } | Object/Boolean | false |
-| resetTime | 每次选择日期时是否重置时间（仅在 showTime 开启时有效） | Boolean | false |
-| disabledDate | 禁用日期函数
**签名**:
Function(日期值: MomentObject) => Boolean
**参数**:
_日期值_: {MomentObject} null
**返回值**:
{Boolean} 是否禁用
| Function | () => false |
-| footerRender | 自定义面板页脚
**签名**:
Function() => Node
**返回值**:
{Node} 自定义的面板页脚组件
| Function | () => null |
-| onChange | 日期值改变时的回调
**签名**:
Function(value: MomentObject/String) => void
**参数**:
_value_: {MomentObject/String} 日期值 | Function | func.noop |
-| onOk | 点击确认按钮时的回调
**签名**:
Function() => MomentObject/String
**返回值**:
{MomentObject/String} 日期值
| Function | func.noop |
-| disabled | 是否禁用 | Boolean | - |
-| hasClear | 是否显示清空按钮 | Boolean | true |
-| visible | 弹层显示状态 | Boolean | - |
-| defaultVisible | 弹层默认是否显示 | Boolean | - |
-| onVisibleChange | 弹层展示状态变化时的回调
**签名**:
Function(visible: Boolean, reason: String) => void
**参数**:
_visible_: {Boolean} 弹层是否显示
_reason_: {String} 触发弹层显示和隐藏的来源 | Function | func.noop |
-| popupTriggerType | 弹层触发方式
**可选值**:
'click', 'hover' | Enum | 'click' |
-| popupAlign | 弹层对齐方式,具体含义见 OverLay文档 | String | 'tl tl' |
-| popupContainer | 弹层容器
**签名**:
Function(target: Element) => Element
**参数**:
_target_: {Element} 目标元素
**返回值**:
{Element} 弹层的容器元素
| Function | - |
-| popupStyle | 弹层自定义样式 | Object | - |
-| popupClassName | 弹层自定义样式类 | String | - |
-| popupProps | 弹层其他属性 | Object | - |
-| inputProps | 输入框其他属性 | Object | - |
-| dateCellRender | 自定义日期渲染函数
**签名**:
Function(value: Object) => ReactNode
**参数**:
_value_: {Object} 日期值（moment对象）
**返回值**:
{ReactNode} null
| Function | - |
-| monthCellRender | 自定义月份渲染函数
**签名**:
Function(calendarDate: Object) => ReactNode
**参数**:
_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象
**返回值**:
{ReactNode} null
| Function | - |
+| 参数 | 说明 | 类型 | 默认值 |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------ |
+| label | 输入框内置标签 | ReactNode | - |
+| size | 输入框尺寸
**可选值**:
'small', 'medium', 'large' | Enum | 'medium' |
+| state | 输入框状态
**可选值**:
'success', 'loading', 'error' | Enum | - |
+| placeholder | 输入提示 | String | - |
+| defaultVisibleMonth | 默认展现的月
**签名**:
Function() => MomentObject
**返回值**:
{MomentObject} 返回包含指定月份的 moment 对象实例
| Function | - |
+| value | 日期值（受控）moment 对象 | custom | - |
+| defaultValue | 初始日期值，moment 对象 | custom | - |
+| format | 日期值的格式（用于限定用户输入和展示） | String | 'YYYY-MM-DD' |
+| showTime | 是否使用时间控件，传入 TimePicker 的属性 { defaultValue, format, ... } | Object/Boolean | false |
+| resetTime | 每次选择日期时是否重置时间（仅在 showTime 开启时有效） | Boolean | false |
+| disabledDate | 禁用日期函数
**签名**:
Function(日期值: MomentObject, view: String) => Boolean
**参数**:
_日期值_: {MomentObject} null
_view_: {String} 当前视图类型，year: 年， month: 月, date: 日
**返回值**:
{Boolean} 是否禁用
| Function | () => false |
+| footerRender | 自定义面板页脚
**签名**:
Function() => Node
**返回值**:
{Node} 自定义的面板页脚组件
| Function | () => null |
+| onChange | 日期值改变时的回调
**签名**:
Function(value: MomentObject/String) => void
**参数**:
_value_: {MomentObject/String} 日期值 | Function | func.noop |
+| onOk | 点击确认按钮时的回调
**签名**:
Function() => MomentObject/String
**返回值**:
{MomentObject/String} 日期值
| Function | func.noop |
+| disabled | 是否禁用 | Boolean | - |
+| hasClear | 是否显示清空按钮 | Boolean | true |
+| visible | 弹层显示状态 | Boolean | - |
+| defaultVisible | 弹层默认是否显示 | Boolean | - |
+| onVisibleChange | 弹层展示状态变化时的回调
**签名**:
Function(visible: Boolean, reason: String) => void
**参数**:
_visible_: {Boolean} 弹层是否显示
_reason_: {String} 触发弹层显示和隐藏的来源 | Function | func.noop |
+| popupTriggerType | 弹层触发方式
**可选值**:
'click', 'hover' | Enum | 'click' |
+| popupAlign | 弹层对齐方式,具体含义见 OverLay文档 | String | 'tl tl' |
+| popupContainer | 弹层容器
**签名**:
Function(target: Element) => Element
**参数**:
_target_: {Element} 目标元素
**返回值**:
{Element} 弹层的容器元素
| Function | - |
+| popupStyle | 弹层自定义样式 | Object | - |
+| popupClassName | 弹层自定义样式类 | String | - |
+| popupProps | 弹层其他属性 | Object | - |
+| inputProps | 输入框其他属性 | Object | - |
+| dateCellRender | 自定义日期渲染函数
**签名**:
Function(value: Object) => ReactNode
**参数**:
_value_: {Object} 日期值（moment对象）
**返回值**:
{ReactNode} null
| Function | - |
+| monthCellRender | 自定义月份渲染函数
**签名**:
Function(calendarDate: Object) => ReactNode
**参数**:
_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象
**返回值**:
{ReactNode} null
| Function | - |
### DatePicker.MonthPicker
-| 参数 | 说明 | 类型 | 默认值 |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
-| label | 输入框内置标签 | ReactNode | - |
-| size | 输入框尺寸
**可选值**:
'small', 'medium', 'large' | Enum | 'medium' |
-| state | 输入框状态
**可选值**:
'success', 'loading', 'error' | Enum | - |
-| placeholder | 输入提示 | String | - |
-| defaultVisibleYear | 默认展现的年
**签名**:
Function() => MomentObject
**返回值**:
{MomentObject} 返回包含指定年份的 moment 对象实例
| Function | - |
-| value | 日期值（受控）moment 对象 | custom | - |
-| defaultValue | 初始日期值，moment 对象 | custom | - |
-| format | 日期值的格式（用于限定用户输入和展示） | String | 'YYYY-MM' |
-| disabledDate | 禁用日期函数
**签名**:
Function(日期值: MomentObject) => Boolean
**参数**:
_日期值_: {MomentObject} null
**返回值**:
{Boolean} 是否禁用
| Function | () => false |
-| footerRender | 自定义面板页脚
**签名**:
Function() => Node
**返回值**:
{Node} 自定义的面板页脚组件
| Function | () => null |
-| onChange | 日期值改变时的回调
**签名**:
Function(value: MomentObject/String) => void
**参数**:
_value_: {MomentObject/String} 日期值 | Function | func.noop |
-| disabled | 是否禁用 | Boolean | - |
-| hasClear | 是否显示清空按钮 | Boolean | true |
-| visible | 弹层显示状态 | Boolean | - |
-| defaultVisible | 弹层默认是否显示 | Boolean | - |
-| onVisibleChange | 弹层展示状态变化时的回调
**签名**:
Function(visible: Boolean, reason: String) => void
**参数**:
_visible_: {Boolean} 弹层是否显示
_reason_: {String} 触发弹层显示和隐藏的来源 | Function | func.noop |
-| popupTriggerType | 弹层触发方式
**可选值**:
'click', 'hover' | Enum | 'click' |
-| popupAlign | 弹层对齐方式, 具体含义见 OverLay文档 | String | 'tl tl' |
-| popupContainer | 弹层容器
**签名**:
Function(target: Element) => Element
**参数**:
_target_: {Element} 目标元素
**返回值**:
{Element} 弹层的容器元素
| Function | - |
-| popupStyle | 弹层自定义样式 | Object | - |
-| popupClassName | 弹层自定义样式类 | String | - |
-| popupProps | 弹层其他属性 | Object | - |
-| inputProps | 输入框其他属性 | Object | - |
-| monthCellRender | 自定义月份渲染函数
**签名**:
Function(calendarDate: Object) => ReactNode
**参数**:
_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象
**返回值**:
{ReactNode} null
| Function | - |
+| 参数 | 说明 | 类型 | 默认值 |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| label | 输入框内置标签 | ReactNode | - |
+| size | 输入框尺寸
**可选值**:
'small', 'medium', 'large' | Enum | 'medium' |
+| state | 输入框状态
**可选值**:
'success', 'loading', 'error' | Enum | - |
+| placeholder | 输入提示 | String | - |
+| defaultVisibleYear | 默认展现的年
**签名**:
Function() => MomentObject
**返回值**:
{MomentObject} 返回包含指定年份的 moment 对象实例
| Function | - |
+| value | 日期值（受控）moment 对象 | custom | - |
+| defaultValue | 初始日期值，moment 对象 | custom | - |
+| format | 日期值的格式（用于限定用户输入和展示） | String | 'YYYY-MM' |
+| disabledDate | 禁用日期函数
**签名**:
Function(日期值: MomentObject, view: String) => Boolean
**参数**:
_日期值_: {MomentObject} null
_view_: {String} 当前视图类型，year: 年， month: 月, date: 日
**返回值**:
{Boolean} 是否禁用
| Function | () => false |
+| footerRender | 自定义面板页脚
**签名**:
Function() => Node
**返回值**:
{Node} 自定义的面板页脚组件
| Function | () => null |
+| onChange | 日期值改变时的回调
**签名**:
Function(value: MomentObject/String) => void
**参数**:
_value_: {MomentObject/String} 日期值 | Function | func.noop |
+| disabled | 是否禁用 | Boolean | - |
+| hasClear | 是否显示清空按钮 | Boolean | true |
+| visible | 弹层显示状态 | Boolean | - |
+| defaultVisible | 弹层默认是否显示 | Boolean | - |
+| onVisibleChange | 弹层展示状态变化时的回调
**签名**:
Function(visible: Boolean, reason: String) => void
**参数**:
_visible_: {Boolean} 弹层是否显示
_reason_: {String} 触发弹层显示和隐藏的来源 | Function | func.noop |
+| popupTriggerType | 弹层触发方式
**可选值**:
'click', 'hover' | Enum | 'click' |
+| popupAlign | 弹层对齐方式, 具体含义见 OverLay文档 | String | 'tl tl' |
+| popupContainer | 弹层容器
**签名**:
Function(target: Element) => Element
**参数**:
_target_: {Element} 目标元素
**返回值**:
{Element} 弹层的容器元素
| Function | - |
+| popupStyle | 弹层自定义样式 | Object | - |
+| popupClassName | 弹层自定义样式类 | String | - |
+| popupProps | 弹层其他属性 | Object | - |
+| inputProps | 输入框其他属性 | Object | - |
+| monthCellRender | 自定义月份渲染函数
**签名**:
Function(calendarDate: Object) => ReactNode
**参数**:
_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象
**返回值**:
{ReactNode} null
| Function | - |
### DatePicker.RangePicker
-| 参数 | 说明 | 类型 | 默认值 | | |
-| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------- | -------- | --------- |
-| defaultVisibleMonth | 默认展示的起始月份
**签名**:
Function() => MomentObject
**返回值**:
{MomentObject} 返回包含指定月份的 moment 对象实例
| Function | - | | |
-| size | 输入框尺寸
**可选值**:
'small', 'medium', 'large' | Enum | 'medium' | | |
-| value | 日期范围值数组 [moment, moment] | Array | - | | |
-| defaultValue | 初始的日期范围值数组 [moment, moment] | Array | - | | |
-| format | 日期格式 | String | 'YYYY-MM-DD' | | |
-| showTime | 是否使用时间控件，支持传入 TimePicker 的属性 | Object/Boolean | false | | |
-| resetTime | 每次选择是否重置时间（仅在 showTime 开启时有效） | Boolean | false | | |
-| disabledDate | 禁用日期函数
**签名**:
Function(日期值: MomentObject) => Boolean
**参数**:
_日期值_: {MomentObject} null
**返回值**:
{Boolean} 是否禁用
| Function | () => false | | |
-| footerRender | 自定义面板页脚
**签名**:
Function() => Node
**返回值**:
{Node} 自定义的面板页脚组件
| Function | () => null | | |
-| onChange | 日期范围值改变时的回调 \[ MomentObject | String, MomentObject | String ]
**签名**:
Function(value: Array) => void
**参数**:
_value_: {Array} 日期值 | Function | func.noop |
-| onOk | 点击确认按钮时的回调 返回开始时间和结束时间`[ MomentObject|String, MomentObject|String ]`
**签名**:
Function() => Array
**返回值**:
{Array} 日期范围
| Function | func.noop | | |
-| label | 输入框内置标签 | ReactNode | - | | |
-| state | 输入框状态
**可选值**:
'error', 'loading', 'success' | Enum | - | | |
-| disabled | 是否禁用 | Boolean | - | | |
-| hasClear | 是否显示清空按钮 | Boolean | true | | |
-| visible | 弹层显示状态 | Boolean | - | | |
-| defaultVisible | 弹层默认是否显示 | Boolean | - | | |
-| onVisibleChange | 弹层展示状态变化时的回调
**签名**:
Function(visible: Boolean, reason: String) => void
**参数**:
_visible_: {Boolean} 弹层是否显示
_reason_: {String} 触发弹层显示和隐藏的来源 | Function | func.noop | | |
-| popupTriggerType | 弹层触发方式
**可选值**:
'click', 'hover' | Enum | 'click' | | |
-| popupAlign | 弹层对齐方式, 具体含义见 OverLay文档 | String | 'tl tl' | | |
-| popupContainer | 弹层容器
**签名**:
Function(target: Element) => Element
**参数**:
_target_: {Element} 目标元素
**返回值**:
{Element} 弹层的容器元素
| Function | - | | |
-| popupStyle | 弹层自定义样式 | Object | - | | |
-| popupClassName | 弹层自定义样式类 | String | - | | |
-| popupProps | 弹层其他属性 | Object | - | | |
-| inputProps | 输入框其他属性 | Object | - | | |
-| dateCellRender | 自定义日期单元格渲染
**签名**:
Function() => void | Function | - | | |
+| 参数 | 说明 | 类型 | 默认值 | | |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------- | -------- | --------- |
+| defaultVisibleMonth | 默认展示的起始月份
**签名**:
Function() => MomentObject
**返回值**:
{MomentObject} 返回包含指定月份的 moment 对象实例
| Function | - | | |
+| size | 输入框尺寸
**可选值**:
'small', 'medium', 'large' | Enum | 'medium' | | |
+| value | 日期范围值数组 [moment, moment] | Array | - | | |
+| defaultValue | 初始的日期范围值数组 [moment, moment] | Array | - | | |
+| format | 日期格式 | String | 'YYYY-MM-DD' | | |
+| showTime | 是否使用时间控件，支持传入 TimePicker 的属性 | Object/Boolean | false | | |
+| resetTime | 每次选择是否重置时间（仅在 showTime 开启时有效） | Boolean | false | | |
+| disabledDate | 禁用日期函数
**签名**:
Function(日期值: MomentObject, view: String) => Boolean
**参数**:
_日期值_: {MomentObject} null
_view_: {String} 当前视图类型，year: 年， month: 月, date: 日
**返回值**:
{Boolean} 是否禁用
| Function | () => false | | |
+| footerRender | 自定义面板页脚
**签名**:
Function() => Node
**返回值**:
{Node} 自定义的面板页脚组件
| Function | () => null | | |
+| onChange | 日期范围值改变时的回调 \[ MomentObject | String, MomentObject | String ]
**签名**:
Function(value: Array) => void
**参数**:
_value_: {Array} 日期值 | Function | func.noop |
+| onOk | 点击确认按钮时的回调 返回开始时间和结束时间`[ MomentObject|String, MomentObject|String ]`
**签名**:
Function() => Array
**返回值**:
{Array} 日期范围
| Function | func.noop | | |
+| label | 输入框内置标签 | ReactNode | - | | |
+| state | 输入框状态
**可选值**:
'error', 'loading', 'success' | Enum | - | | |
+| disabled | 是否禁用 | Boolean | - | | |
+| hasClear | 是否显示清空按钮 | Boolean | true | | |
+| visible | 弹层显示状态 | Boolean | - | | |
+| defaultVisible | 弹层默认是否显示 | Boolean | - | | |
+| onVisibleChange | 弹层展示状态变化时的回调
**签名**:
Function(visible: Boolean, reason: String) => void
**参数**:
_visible_: {Boolean} 弹层是否显示
_reason_: {String} 触发弹层显示和隐藏的来源 | Function | func.noop | | |
+| popupTriggerType | 弹层触发方式
**可选值**:
'click', 'hover' | Enum | 'click' | | |
+| popupAlign | 弹层对齐方式, 具体含义见 OverLay文档 | String | 'tl tl' | | |
+| popupContainer | 弹层容器
**签名**:
Function(target: Element) => Element
**参数**:
_target_: {Element} 目标元素
**返回值**:
{Element} 弹层的容器元素
| Function | - | | |
+| popupStyle | 弹层自定义样式 | Object | - | | |
+| popupClassName | 弹层自定义样式类 | String | - | | |
+| popupProps | 弹层其他属性 | Object | - | | |
+| inputProps | 输入框其他属性 | Object | - | | |
+| dateCellRender | 自定义日期单元格渲染
**签名**:
Function() => void | Function | - | | |
### DatePicker.YearPicker
-| 参数 | 说明 | 类型 | 默认值 |
-| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
-| label | 输入框内置标签 | ReactNode | - |
-| size | 输入框尺寸
**可选值**:
'small', 'medium', 'large' | Enum | 'medium' |
-| state | 输入框状态
**可选值**:
'success', 'loading', 'error' | Enum | - |
-| placeholder | 输入提示 | String | - |
-| value | 日期值（受控）moment 对象 | custom | - |
-| defaultValue | 初始日期值，moment 对象 | custom | - |
-| format | 日期值的格式（用于限定用户输入和展示） | String | 'YYYY' |
-| disabledDate | 禁用日期函数
**签名**:
Function(日期值: MomentObject) => Boolean
**参数**:
_日期值_: {MomentObject} null
**返回值**:
{Boolean} 是否禁用
| Function | () => false |
-| footerRender | 自定义面板页脚
**签名**:
Function() => Node
**返回值**:
{Node} 自定义的面板页脚组件
| Function | () => null |
-| onChange | 日期值改变时的回调
**签名**:
Function(value: MomentObject/String) => void
**参数**:
_value_: {MomentObject/String} 日期值 | Function | func.noop |
-| disabled | 是否禁用 | Boolean | - |
-| hasClear | 是否显示清空按钮 | Boolean | true |
-| visible | 弹层显示状态 | Boolean | - |
-| defaultVisible | 弹层默认是否显示 | Boolean | - |
-| onVisibleChange | 弹层展示状态变化时的回调
**签名**:
Function(visible: Boolean, reason: String) => void
**参数**:
_visible_: {Boolean} 弹层是否显示
_reason_: {String} 触发弹层显示和隐藏的来源 | Function | func.noop |
-| popupTriggerType | 弹层触发方式
**可选值**:
'click', 'hover' | Enum | 'click' |
-| popupAlign | 弹层对齐方式, 具体含义见 OverLay文档 | String | 'tl tl' |
-| popupContainer | 弹层容器
**签名**:
Function(target: Element) => Element
**参数**:
_target_: {Element} 目标元素
**返回值**:
{Element} 弹层的容器元素
| Function | - |
-| popupStyle | 弹层自定义样式 | Object | - |
-| popupClassName | 弹层自定义样式类 | String | - |
-| popupProps | 弹层其他属性 | Object | - |
-| inputProps | 输入框其他属性 | Object | - |
+| 参数 | 说明 | 类型 | 默认值 |
+| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| label | 输入框内置标签 | ReactNode | - |
+| size | 输入框尺寸
**可选值**:
'small', 'medium', 'large' | Enum | 'medium' |
+| state | 输入框状态
**可选值**:
'success', 'loading', 'error' | Enum | - |
+| placeholder | 输入提示 | String | - |
+| value | 日期值（受控）moment 对象 | custom | - |
+| defaultValue | 初始日期值，moment 对象 | custom | - |
+| format | 日期值的格式（用于限定用户输入和展示） | String | 'YYYY' |
+| disabledDate | 禁用日期函数
**签名**:
Function(日期值: MomentObject, view: String) => Boolean
**参数**:
_日期值_: {MomentObject} null
_view_: {String} 当前视图类型，year: 年， month: 月, date: 日
**返回值**:
{Boolean} 是否禁用
| Function | () => false |
+| footerRender | 自定义面板页脚
**签名**:
Function() => Node
**返回值**:
{Node} 自定义的面板页脚组件
| Function | () => null |
+| onChange | 日期值改变时的回调
**签名**:
Function(value: MomentObject/String) => void
**参数**:
_value_: {MomentObject/String} 日期值 | Function | func.noop |
+| disabled | 是否禁用 | Boolean | - |
+| hasClear | 是否显示清空按钮 | Boolean | true |
+| visible | 弹层显示状态 | Boolean | - |
+| defaultVisible | 弹层默认是否显示 | Boolean | - |
+| onVisibleChange | 弹层展示状态变化时的回调
**签名**:
Function(visible: Boolean, reason: String) => void
**参数**:
_visible_: {Boolean} 弹层是否显示
_reason_: {String} 触发弹层显示和隐藏的来源 | Function | func.noop |
+| popupTriggerType | 弹层触发方式
**可选值**:
'click', 'hover' | Enum | 'click' |
+| popupAlign | 弹层对齐方式, 具体含义见 OverLay文档 | String | 'tl tl' |
+| popupContainer | 弹层容器
**签名**:
Function(target: Element) => Element
**参数**:
_target_: {Element} 目标元素
**返回值**:
{Element} 弹层的容器元素
| Function | - |
+| popupStyle | 弹层自定义样式 | Object | - |
+| popupClassName | 弹层自定义样式类 | String | - |
+| popupProps | 弹层其他属性 | Object | - |
+| inputProps | 输入框其他属性 | Object | - |
## ARIA and KeyBoard
diff --git a/docs/dialog/demo/accessibility.md b/docs/dialog/demo/accessibility.md
index 3507d4e7a6..a479266b11 100644
--- a/docs/dialog/demo/accessibility.md
+++ b/docs/dialog/demo/accessibility.md
@@ -28,9 +28,7 @@ class Demo extends React.Component {
visible: true
});
};
- onClose = reason => {
- console.log(reason);
-
+ onClose = () => {
this.setState({
visible: false
});
@@ -44,6 +42,7 @@ class Demo extends React.Component {
` 和 `
- |
- |
-
-````
+
+ |
+ |
+
## API
diff --git a/docs/overlay/demo/accessibility.md b/docs/overlay/demo/accessibility.md
index 67dfb4e02f..744082f0cb 100644
--- a/docs/overlay/demo/accessibility.md
+++ b/docs/overlay/demo/accessibility.md
@@ -21,24 +21,20 @@ import { Overlay } from '@alifd/next';
class Demo extends React.Component {
constructor(props) {
super(props);
-
this.state = {
visible: false
};
- }
-
+ };
onClick = () => {
this.setState({
visible: !this.state.visible
});
- }
-
+ };
onClose = () => {
this.setState({
visible: false
});
- }
-
+ };
render() {
return (
@@ -48,6 +44,7 @@ class Demo extends React.Component {
overlay accessibility
this.btn}
safeNode={() => this.btn}
onRequestClose={this.onClose}>
diff --git a/docs/radio/index.md b/docs/radio/index.md
index bf9c61d767..ae9b6707b2 100644
--- a/docs/radio/index.md
+++ b/docs/radio/index.md
@@ -34,19 +34,19 @@
### Radio.Group
-| 参数 | 说明 | 类型 | 默认值 |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | --------- |
-| name | name | String | - |
-| size | 与 `shape` 属性配套使用，shape设为button时有效
-
+ReactDOM.render(
single slider - from left to right
single slider - from right to left
-), mountNode);
+
-
+ReactDOM.render(
single slider - from left to right
single slider - from right to left
@@ -47,6 +45,5 @@ ReactDOM.render((
tooltipVisible
-), mountNode);
+
+ReactDOM.render(
With minimal and maximal value
@@ -41,6 +40,5 @@ ReactDOM.render((
-), mountNode);
+
Range 0 ~ 1024
@@ -30,5 +30,5 @@ ReactDOM.render((
-), mountNode);
+, mountNode);
````
diff --git a/docs/range/demo/reverse.md b/docs/range/demo/reverse.md
index 01988372b8..0627d7fd7c 100644
--- a/docs/range/demo/reverse.md
+++ b/docs/range/demo/reverse.md
@@ -22,7 +22,7 @@ const style = {
marginBottom: '15px'
};
-ReactDOM.render((
+ReactDOM.render(
-), mountNode);
+
search} style={{width: '400px'}}/>
);
diff --git a/docs/select/demo/multiple.md b/docs/select/demo/multiple.md
index 3f2751b87d..02d92ed911 100644
--- a/docs/select/demo/multiple.md
+++ b/docs/select/demo/multiple.md
@@ -32,5 +32,33 @@ function handleChange(value) {
console.log(value);
}
-ReactDOM.render(
+
+, mountNode);
````
diff --git a/docs/step/index.md b/docs/step/index.md
index e844e7c496..3cc809dcdb 100644
--- a/docs/step/index.md
+++ b/docs/step/index.md
@@ -23,13 +23,13 @@
### Step.Item
-| 参数 | 说明 | 类型 | 默认值 |
-| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | --------- |
-| status | 步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`
-
enable sticky
-
-
+ enable sticky
+ enable lock
+ toggle dataSource
+
+
);
diff --git a/docs/table/index.md b/docs/table/index.md
index 31af14dc00..9250cfdfc1 100644
--- a/docs/table/index.md
+++ b/docs/table/index.md
@@ -106,7 +106,7 @@ ReactDOM.render(
| hasHeader | 表格是否具有头部 | Boolean | true |
| isZebra | 表格是否是斑马线 | Boolean | false |
| loading | 表格是否在加载中 | Boolean | false |
-| loadingComponent | 自定义 Loading 组件
const newContextProps = ['prefix', 'locale', 'pure', 'rtl'].reduce(
(ret, name) => {
if (typeof contextProps[name] !== 'undefined') {
@@ -172,13 +191,21 @@ export function config(Component, options = {}) {
? options.transform(others, this._deprecated)
: others;
- return (
+ const content = (
{content}
+ ) : (
+ content
+ );
}
}
diff --git a/src/config-provider/error-boundary.jsx b/src/config-provider/error-boundary.jsx
new file mode 100644
index 0000000000..27041de87f
--- /dev/null
+++ b/src/config-provider/error-boundary.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+DefaultUI.propTypes = {
+ error: PropTypes.object,
+ errorInfo: PropTypes.object,
+};
+
+function DefaultUI() {
+ return '';
+}
+
+export default class ErrorBoundary extends React.Component {
+ static propTypes = {
+ children: PropTypes.element,
+ /**
+ * 捕获错误后的自定义处理, 比如埋点上传
+ * @param {Object} error 错误
+ * @param {Object} errorInfo 错误详细信息
+ */
+ afterCatch: PropTypes.func,
+ /**
+ * 捕获错误后的展现 自定义组件
+ * @param {Object} error 错误
+ * @param {Object} errorInfo 错误详细信息
+ * @returns {Element} 捕获错误后的处理
+ */
+ fallbackUI: PropTypes.func,
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = { error: null, errorInfo: null };
+ }
+
+ componentDidCatch(error, errorInfo) {
+ this.setState({
+ error: error,
+ errorInfo: errorInfo,
+ });
+
+ const { afterCatch } = this.props;
+
+ if ('afterCatch' in this.props && typeof afterCatch === 'function') {
+ this.props.afterCatch(error, errorInfo);
+ }
+ }
+
+ render() {
+ const { fallbackUI: FallbackUI = DefaultUI } = this.props;
+
+ if (this.state.errorInfo) {
+ return (
+ value,
reverse: false,
+ rtl: false,
};
constructor(props) {
diff --git a/src/range/view/mark.jsx b/src/range/view/mark.jsx
index efb8fb140c..5d8174ddf0 100644
--- a/src/range/view/mark.jsx
+++ b/src/range/view/mark.jsx
@@ -14,6 +14,7 @@ export default class Mark extends React.Component {
prefix: PropTypes.string,
marks: PropTypes.object,
marksPosition: PropTypes.string,
+ rtl: PropTypes.bool,
};
static defaultProps = {
@@ -22,10 +23,11 @@ export default class Mark extends React.Component {
max: 100,
value: 0,
marksPosition: '',
+ rtl: false,
};
_renderItems() {
- const { min, max, value, prefix, marks } = this.props;
+ const { min, max, value, prefix, marks, rtl } = this.props;
const items = [];
Object.keys(marks).forEach((mark, i) => {
@@ -33,11 +35,22 @@ export default class Mark extends React.Component {
[`${prefix}range-mark-text`]: true,
activated: inRange(mark, value, min),
});
- const left = `${getPercent(min, max, mark)}%`;
+ let style;
+ if (rtl) {
+ style = {
+ right: `${getPercent(min, max, mark)}%`,
+ left: 'auto',
+ };
+ } else {
+ style = {
+ left: `${getPercent(min, max, mark)}%`,
+ right: 'auto',
+ };
+ }
items.push(
// "key" is for https://fb.me/react-warning-keys
-
+
{marks[mark]}
);
diff --git a/src/range/view/range.jsx b/src/range/view/range.jsx
index 5095d2e9ba..bfb5354618 100644
--- a/src/range/view/range.jsx
+++ b/src/range/view/range.jsx
@@ -243,6 +243,10 @@ export default class Range extends React.Component {
* tooltip是否默认展示
*/
tooltipVisible: PropTypes.bool,
+ /**
+ * 是否已rtl模式展示
+ */
+ rtl: PropTypes.bool,
};
static defaultProps = {
@@ -262,6 +266,7 @@ export default class Range extends React.Component {
reverse: false,
pure: false,
marksPosition: 'above',
+ rtl: false,
};
constructor(props) {
@@ -553,15 +558,15 @@ export default class Range extends React.Component {
// position => current (value type)
_positionToCurrent(position) {
const { start, end } = this._moving;
- const { step, min, max } = this.props;
+ const { step, min, max, rtl } = this.props;
if (position < start) {
position = start;
} else if (position > end) {
position = end;
}
- const percent = getPercent(start, end, position);
-
+ let percent = getPercent(start, end, position);
+ percent = rtl ? 100 - percent : percent;
// reset by step
const newValue = parseFloat(
(Math.round(((percent / 100) * (max - min)) / step) * step).toFixed(
@@ -574,12 +579,12 @@ export default class Range extends React.Component {
_currentToValue(current, preValue, lastPosition, isFixedWidth) {
const { dragging } = this._moving;
+ const { min, max } = this.props;
if (!_isMultiple(this.props.slider, isFixedWidth)) {
return current;
} else {
let result;
- const { min, max } = this.props;
const precision = getPrecision(this.props.step);
const diff = current - lastPosition;
@@ -659,6 +664,7 @@ export default class Range extends React.Component {
fixedWidth,
defaultValue,
tooltipVisible,
+ rtl,
} = this.props;
const classes = classNames({
[`${prefix}range`]: true,
@@ -689,6 +695,7 @@ export default class Range extends React.Component {
tooltipVisible,
hasMovingClass: this.state.hasMovingClass,
disabled,
+ rtl,
};
this.isFixedWidth =
@@ -707,6 +714,7 @@ export default class Range extends React.Component {
style={style}
className={classes}
id={id}
+ dir={rtl ? 'rtl' : 'ltr'}
onMouseDown={disabled ? noop : this._onMouseDown.bind(this)}
>
{marks !== false && marksPosition === 'above' ? (
diff --git a/src/range/view/scale.jsx b/src/range/view/scale.jsx
index bfd0519443..002ee2b629 100644
--- a/src/range/view/scale.jsx
+++ b/src/range/view/scale.jsx
@@ -13,6 +13,7 @@ export default class Scale extends React.Component {
]),
prefix: PropTypes.string,
scales: PropTypes.arrayOf(PropTypes.number),
+ rtl: PropTypes.bool,
};
static defaultProps = {
@@ -20,10 +21,11 @@ export default class Scale extends React.Component {
min: 0,
max: 100,
value: 0,
+ rtl: false,
};
_renderItems() {
- const { min, max, value, prefix, scales } = this.props;
+ const { min, max, value, prefix, scales, rtl } = this.props;
const items = [];
scales.forEach((scale, i) => {
@@ -31,11 +33,22 @@ export default class Scale extends React.Component {
[`${prefix}range-scale-item`]: true,
activated: inRange(scale, value, min),
});
- const left = `${getPercent(min, max, scale)}%`;
+ let style;
+ if (rtl) {
+ style = {
+ right: `${getPercent(min, max, scale)}%`,
+ left: 'auto',
+ };
+ } else {
+ style = {
+ left: `${getPercent(min, max, scale)}%`,
+ right: 'auto',
+ };
+ }
items.push(
// "key" is for https://fb.me/react-warning-keys
-
(this.underlayNode = n)}
+ aria-hidden
>
{underlay}
diff --git a/src/select/main.scss b/src/select/main.scss
index 110e2a54f2..cf577e3470 100644
--- a/src/select/main.scss
+++ b/src/select/main.scss
@@ -307,14 +307,20 @@
&-all {
display: block;
cursor: pointer;
- line-height: $select-menu-item-height;
- padding: $s-1 $s-2;
+ padding: 0 $s-2;
margin: 0 $s-3 $s-2;
border-bottom: 1px solid $color-line1-2;
&:hover {
color: $color-link-3;
}
+
+ .#{$css-prefix}menu-icon-selected.#{$css-prefix}icon {
+ // remove display: inline-block !important; in next Y
+ display: inline-block !important;
+ top: initial;
+ color: $select-menu-icon-color;
+ }
}
&-highlight {
diff --git a/src/select/scss/variable.scss b/src/select/scss/variable.scss
index 11826649dc..921ba53dde 100644
--- a/src/select/scss/variable.scss
+++ b/src/select/scss/variable.scss
@@ -52,3 +52,4 @@ $select-tag-spacing-lr: $s-1;
$select-tag-spacing-tb: 3px;
$select-tag-padding-lr: $s-1;
$select-menu-item-height: $s-5;
+$select-menu-icon-color: $color-brand1-6;
diff --git a/src/select/select.jsx b/src/select/select.jsx
index 053422ae27..00bf9ae911 100644
--- a/src/select/select.jsx
+++ b/src/select/select.jsx
@@ -232,6 +232,7 @@ class Select extends Base {
this.valueDataSource.mapValueDS,
this.dataStore.getMapDS()
);
+ this.updateSelectAllYet(this.valueDataSource.value);
} else if (
'defaultValue' in nextProps &&
nextProps.defaultValue === this.valueDataSource.value &&
@@ -375,6 +376,8 @@ class Select extends Base {
this.handleChange(itemObj.value, triggerType, itemObj.valueDS);
}
+ this.updateSelectAllYet(itemObj.value);
+
// 清空搜索
if (!('searchValue' in this.props) && this.state.searchValue) {
// 因为 SearchValue 被 clear 后会重新渲染 Menu，所以在 Overlay 检测 safeNode 的时候 e.target 可能会找不到导致弹窗关闭
@@ -384,6 +387,28 @@ class Select extends Base {
}
}
+ updateSelectAllYet(value) {
+ // multiple mode
+ // is current state select all or not
+ this.selectAllYet = false;
+ if (this.props.hasSelectAll && Array.isArray(value)) {
+ const selectAllValues = this.dataStore
+ .getEnableDS()
+ .map(item => item.value);
+
+ if (selectAllValues.length <= value.length) {
+ this.selectAllYet = true;
+
+ selectAllValues.forEach(val => {
+ if (value.indexOf(val) === -1) {
+ this.selectAllYet = false;
+ return;
+ }
+ });
+ }
+ }
+ }
+
handleSearchValue(value) {
if (this.state.searchValue === value) {
return;
@@ -595,7 +620,14 @@ class Select extends Base {
*/
handleSelectAll(e) {
e && e.preventDefault();
- const nextValues = this.dataStore.getEnableDS().map(item => item.value);
+ let nextValues;
+
+ if (this.selectAllYet) {
+ nextValues = [];
+ } else {
+ nextValues = this.dataStore.getEnableDS().map(item => item.value);
+ }
+
// 直接传 values，减少 toString 操作
this.handleMultipleSelect(nextValues, 'selectAll');
}
@@ -913,13 +945,34 @@ class Select extends Base {
const text =
typeof hasSelectAll === 'boolean' ? 'Select All' : hasSelectAll;
+ const selectAllYet = this.selectAllYet;
+
+ const cls = classNames({
+ [`${prefix}select-all`]: true,
+ [`${prefix}selected`]: selectAllYet,
+ });
+
+ const clsInner = classNames({
+ [`${prefix}select-all-inner`]: true,
+ });
+
+ // remove style={{'lineHeight': 'unset'}} in next Y
+ // remove style={{'display': 'none'}} in next Y
return (
- {text}
+ {selectAllYet ? (
+ {text}
);
}
diff --git a/src/step/view/step-item.jsx b/src/step/view/step-item.jsx
index b01d390c77..3ef186b5d0 100644
--- a/src/step/view/step-item.jsx
+++ b/src/step/view/step-item.jsx
@@ -108,6 +108,13 @@ class StepItem extends Component {
if (shape === 'arrow') {
return;
}
+ const resetTailStyle = () => {
+ dom.setStyle(this.tail, {
+ width: '',
+ // eslint-disable-next-line
+ top: '',
+ });
+ };
if (direction === 'vertical' || direction === 'ver') {
this.resize();
@@ -117,19 +124,18 @@ class StepItem extends Component {
width: '',
[pos]: '',
});
- } else if (
- shape === 'circle' &&
- (labelPlacement === 'horizontal' || labelPlacement === 'hoz') &&
- index !== total - 1
- ) {
- // 调整横向Content
- this.adjustTail();
+ if (
+ shape === 'circle' &&
+ (labelPlacement === 'horizontal' || labelPlacement === 'hoz') &&
+ index !== total - 1
+ ) {
+ // 调整横向Content
+ this.adjustTail();
+ } else {
+ resetTailStyle();
+ }
} else if (index !== total - 1) {
- dom.setStyle(this.tail, {
- width: '',
- // eslint-disable-next-line
- top: '',
- });
+ resetTailStyle();
}
}
diff --git a/src/tab/rtl.scss b/src/tab/rtl.scss
index b583674425..8d875b33e4 100644
--- a/src/tab/rtl.scss
+++ b/src/tab/rtl.scss
@@ -1,6 +1,27 @@
@import "../core/index-noreset.scss";
+@import "scss/variable";
#{$tab-prefix}[dir="rtl"] {
+ &.#{$css-prefix}medium {
+ & #{$tab-prefix}-nav-container-scrolling {
+ padding-left: $tab-nav-scroll-padding-right-m;
+ padding-right: 0;
+ }
+ .#{$css-prefix}tabs-tab-close {
+ padding-right: $tab-nav-close-icon-padding-l-size-m;
+ padding-left: 0;
+ }
+ }
+ &.#{$css-prefix}small {
+ & #{$tab-prefix}-nav-container-scrolling {
+ padding-left: $tab-nav-scroll-padding-right-s;
+ padding-right: 0;
+ }
+ .#{$css-prefix}tabs-tab-close {
+ padding-right: $tab-nav-close-icon-padding-l-size-s;
+ padding-left: 0;
+ }
+ }
&#{$tab-prefix}-wrapped#{$tab-prefix}-top > #{$tab-prefix}-bar {
#{$tab-prefix}-nav-extra {
right: auto;
@@ -21,4 +42,18 @@
left: 0;
}
}
+
+ #{$tab-prefix}-btn-next {
+ left: $tab-nav-arrow-right-positon-right;
+ right: auto;
+ }
+ #{$tab-prefix}-btn-prev {
+ left: $tab-nav-arrow-left-positon-right;
+ right: auto;
+ }
+ #{$tab-prefix}-btn-down {
+ left: $tab-nav-arrow-down-positon-right;
+ right: auto;
+ }
}
+
diff --git a/src/tab/tab.jsx b/src/tab/tab.jsx
index 278238f280..5991d689c1 100644
--- a/src/tab/tab.jsx
+++ b/src/tab/tab.jsx
@@ -243,7 +243,10 @@ export default class Tab extends Component {
const { activeKey } = this.state;
const tabs = toArray(children);
-
+ let newPosition = tabPosition;
+ if (rtl && ['left', 'right'].indexOf(tabPosition) >= 0) {
+ newPosition = tabPosition === 'left' ? 'right' : 'left';
+ }
const classNames = classnames(
{
[`${prefix}tabs`]: true,
@@ -251,7 +254,7 @@ export default class Tab extends Component {
[`${prefix}tabs-vertical`]:
shape === 'wrapped' &&
['left', 'right'].indexOf(tabPosition) >= 0,
- [`${prefix}tabs-${tabPosition}`]: shape === 'wrapped',
+ [`${prefix}tabs-${newPosition}`]: shape === 'wrapped',
[`${prefix + size}`]: size,
},
className
diff --git a/src/tab/tabs/nav.jsx b/src/tab/tabs/nav.jsx
index 443ff3e0be..d012903e66 100644
--- a/src/tab/tabs/nav.jsx
+++ b/src/tab/tabs/nav.jsx
@@ -109,15 +109,17 @@ class Nav extends React.Component {
const wrapperOffset = getOffsetLT(this.wrapper);
if (
+ // active tab partially in visible zone
wrapperOffset + wrapperWH < activeTabOffset + activeTabWH &&
activeTabOffset < wrapperOffset + wrapperWH
) {
- target -=
+ target -= // Move more to make active tab totally in visible zone
activeTabOffset + activeTabWH - (wrapperOffset + wrapperWH);
}
}
if (this.offset !== target) {
+ // needs move
this.offset = target;
let navOffset = {};
@@ -133,7 +135,7 @@ class Nav extends React.Component {
name: 'top',
value: `${target}px`,
};
- } else {
+ } else if (!this.props.rtl) {
navOffset = canTransform
? {
value: `translate3d(${target}px, 0, 0)`,
@@ -142,6 +144,15 @@ class Nav extends React.Component {
name: 'left',
value: `${target}px`,
};
+ } else {
+ navOffset = canTransform
+ ? {
+ value: `translate3d(${-target}px, 0, 0)`,
+ }
+ : {
+ name: 'right',
+ value: `${target}px`,
+ };
}
if (canTransform) {
@@ -346,12 +357,12 @@ class Nav extends React.Component {
onPrevClick = () => {
const wrapperWH = getOffsetWH(this.wrapper);
this.setOffset(this.offset + wrapperWH, true, false);
- }
+ };
onNextClick = () => {
const wrapperWH = getOffsetWH(this.wrapper);
this.setOffset(this.offset - wrapperWH, true, false);
- }
+ };
onNavItemClick(key, callback, e) {
this.props.onTriggerEvent(triggerEvents.CLICK, key);
@@ -394,7 +405,7 @@ class Nav extends React.Component {
return null;
}
- const { prefix, activeKey, triggerType, popupProps } = this.props;
+ const { prefix, activeKey, triggerType, popupProps, rtl } = this.props;
const trigger = (
target.parentNode}
{...popupProps}
>
-
);
@@ -519,7 +532,7 @@ class Nav extends React.Component {
onClick={state.next ? this.onNextClick : noop}
className={nextBtnCls}
>
-
+
);
restButton = null;
diff --git a/src/table/lock.jsx b/src/table/lock.jsx
index 483c9204fc..eb97c00303 100644
--- a/src/table/lock.jsx
+++ b/src/table/lock.jsx
@@ -477,10 +477,13 @@ export default function lock(BaseComponent) {
);
setTimeout(() => {
- this.tableRightInc.affixRef &&
- this.tableRightInc.affixRef
- .getInstance()
- .updatePosition();
+ const affixRef = this.tableRightInc.affixRef;
+ // if rendered then update postion of affix
+ return (
+ affixRef &&
+ affixRef.getInstance() &&
+ affixRef.getInstance().updatePosition()
+ );
});
}
@@ -494,10 +497,13 @@ export default function lock(BaseComponent) {
);
setTimeout(() => {
- this.tableLeftInc.affixRef &&
- this.tableLeftInc.affixRef
- .getInstance()
- .updatePosition();
+ const affixRef = this.tableLeftInc.affixRef;
+ // if rendered then update postion of affix
+ return (
+ affixRef &&
+ affixRef.getInstance() &&
+ affixRef.getInstance().updatePosition()
+ );
});
}
});
diff --git a/src/table/main.scss b/src/table/main.scss
index 4293f4a318..9c73f81353 100644
--- a/src/table/main.scss
+++ b/src/table/main.scss
@@ -303,6 +303,9 @@
cursor: pointer;
width: 20px;
display: inline-block;
+ &:focus {
+ outline: 0;
+ }
.#{$css-prefix}icon {
@include icon-size($table-filter-icon-size);
color: $table-sort-color;
diff --git a/src/tag/main.scss b/src/tag/main.scss
index e17ca12140..6d56edf360 100644
--- a/src/tag/main.scss
+++ b/src/tag/main.scss
@@ -121,6 +121,18 @@
&tag-closable {
position: relative;
+ &.#{$css-prefix}tag-large > .#{$css-prefix}tag-body {
+ max-width: calc(100% - #{$tag-size-l-height});
+ }
+
+ &.#{$css-prefix}tag-medium > .#{$css-prefix}tag-body {
+ max-width: calc(100% - #{$tag-size-m-height});
+ }
+
+ &.#{$css-prefix}tag-small > .#{$css-prefix}tag-body {
+ max-width: calc(100% - #{$tag-size-s-height});
+ }
+
> .#{$css-prefix}tag-close-btn {
display: inline-block;
vertical-align: middle;
diff --git a/src/tag/scss/mixin.scss b/src/tag/scss/mixin.scss
index 19271a46af..80af2edc14 100644
--- a/src/tag/scss/mixin.scss
+++ b/src/tag/scss/mixin.scss
@@ -20,7 +20,7 @@
line-height: $height - $borderWidth * 2;
font-size: 0;
- $_marginLeft: $height / 4 - 1px;
+ $_marginLeft: $iconSize;
> .#{$css-prefix}tag-body {
font-size: $fontSize;
diff --git a/src/time-picker/module/time-menu.jsx b/src/time-picker/module/time-menu.jsx
index e1f1419cc2..00f9edab0c 100644
--- a/src/time-picker/module/time-menu.jsx
+++ b/src/time-picker/module/time-menu.jsx
@@ -96,7 +96,6 @@ class TimeMenu extends React.Component {
list.push(
{
@@ -450,10 +450,13 @@ class List extends Component {
if (rtl && listType === 'card' && Array.isArray(list)) {
list = list.reverse();
}
- const listclassNames = classNames({
- [`${prefixCls}-list`]: true,
- [`${prefixCls}-list-${this.props.listType}`]: true,
- });
+ const listclassNames = classNames(
+ {
+ [`${prefixCls}-list`]: true,
+ [`${prefixCls}-list-${this.props.listType}`]: true,
+ },
+ className
+ );
const others = obj.pickAttrsWith(this.props, 'data-');
return (
diff --git a/src/upload/main.scss b/src/upload/main.scss
index 4e67d192c9..91afbef6bd 100644
--- a/src/upload/main.scss
+++ b/src/upload/main.scss
@@ -208,6 +208,7 @@
text-align: center;
overflow: hidden;
box-sizing: border-box;
+
img {
width: 100%;
height: 100%;
@@ -291,6 +292,9 @@
img {
width: 100%;
height: 100%;
+ &:focus {
+ outline: 0;
+ }
}
.#{$css-prefix}icon {
diff --git a/src/upload/upload.jsx b/src/upload/upload.jsx
index ffcf9d1a62..35f55ac459 100644
--- a/src/upload/upload.jsx
+++ b/src/upload/upload.jsx
@@ -259,6 +259,7 @@ class Upload extends Base {
onDrop = files => {
this.onSelect(files);
+ this.props.onDrop(files);
};
/**
@@ -374,8 +375,8 @@ class Upload extends Base {
targetItem.imgURL = response.imgURL || response.url; // 缩略图地址(可选)
}
- this.props.onSuccess(targetItem, value);
this.onChange(value, targetItem);
+ this.props.onSuccess(targetItem, value);
};
onError = (err, response, file) => {
@@ -394,8 +395,8 @@ class Upload extends Base {
response,
});
- this.props.onError(targetItem, value);
this.onChange(value, targetItem);
+ this.props.onError(targetItem, value);
};
/**
diff --git a/src/util/log.js b/src/util/log.js
index 1492ad1ff9..f6bd1548e7 100644
--- a/src/util/log.js
+++ b/src/util/log.js
@@ -24,11 +24,12 @@ export function deprecated(props, instead, component) {
/**
* 控制台警告日志
- * @param {String} msg
+ * @param {String} msg
+ * @return {Console | void}
*/
export function warning(msg) {
/* istanbul ignore else */
- if (typeof console !== 'undefined' && console.error) {
+ if (!isProduction() && typeof console !== 'undefined' && console.error) {
return console.error(`Warning: ${msg}`);
}
}
diff --git a/test/calendar/index-spec.js b/test/calendar/index-spec.js
index 623ce1dd23..f4623ae825 100644
--- a/test/calendar/index-spec.js
+++ b/test/calendar/index-spec.js
@@ -85,7 +85,10 @@ describe('Calendar', () => {
});
it('should render with disabled dates', () => {
- const disabledDate = date => date.valueOf() > defaultVal.valueOf();
+ const disabledDate = (date, view) => {
+ assert(view === 'date');
+ return date.valueOf() > defaultVal.valueOf();
+ };
wrapper = mount(
defaultVal}
diff --git a/test/cascader-select/index-spec.js b/test/cascader-select/index-spec.js
index 083c1afa04..26c8c5317a 100644
--- a/test/cascader-select/index-spec.js
+++ b/test/cascader-select/index-spec.js
@@ -416,6 +416,33 @@ describe('CascaderSelect', () => {
done();
}, 2000);
});
+
+ it('should support signle value not in dataSource', () => {
+ const VALUE = '222333';
+ let called = false;
+ const valueRender = (item) => {
+ assert(!item.label);
+ assert(item.value === VALUE);
+ called = true;
+ }
+ wrapper = mount( item.label || ''} dataSource={ChinaArea} valueRender={valueRender} />);
+ wrapper.setProps({
+ value: VALUE,
+ });
+ assert(called);
+ });
});
function findItem(menuIndex, itemIndex) {
diff --git a/test/config-provider/index-spec.js b/test/config-provider/index-spec.js
index 50a247d000..db4f3c4f8b 100644
--- a/test/config-provider/index-spec.js
+++ b/test/config-provider/index-spec.js
@@ -1,11 +1,12 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
-import Enzyme, { mount } from 'enzyme';
+import Enzyme, { mount, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import moment from 'moment';
import assert from 'power-assert';
import Select from '../../src/select';
+import Button from '../../src/button';
import enUS from '../../src/locale/en-us';
import zhCN from '../../src/locale/zh-cn';
import ConfigProvider from '../../src/config-provider';
@@ -15,7 +16,7 @@ import ConfigProvider from '../../src/config-provider';
Enzyme.configure({ adapter: new Adapter() });
-const { config, getContextProps } = ConfigProvider;
+const { config, getContextProps, ErrorBoundary } = ConfigProvider;
class Output extends Component {
static propTypes = {
@@ -408,3 +409,131 @@ describe('ConfigProvider.Consumer', () => {
assert(output.prop('warning') === contextState.warning);
});
});
+
+describe('ConfigProvider.ErrorBoundary', () => {
+ let wrapper;
+
+ afterEach(() => {
+ if (wrapper) {
+ wrapper.unmount();
+ wrapper = null;
+ }
+ });
+
+ it('should catch errors with componentDidCatch', () => {
+ const Something = () => null;
+
+ wrapper = mount(
+
+
+ );
+ const error = new Error('test');
+
+ wrapper.find(Something).simulateError(error);
+ });
+
+ it('should catch errors with componentDidCatch as to basic component', () => {
+ const Something = () => null;
+ wrapper = mount(
+
+
+
+
+ );
+ const error = new Error('test');
+
+ wrapper.find(Something).simulateError(error);
+ });
+
+ it('should on: errorBoundary should work', () => {
+ wrapper = shallow(
+
+
+ );
+ assert(wrapper.dive().name() === 'ErrorBoundary');
+ });
+
+ it('should on: errorBoundary={{}} should work', () => {
+ wrapper = shallow(
+
+
+ );
+ assert(wrapper.dive().name() === 'ErrorBoundary');
+ });
+
+ it('should off: errorBoundary={false} should work', () => {
+ wrapper = shallow(
+
+
+ );
+ assert(wrapper.dive().name() === 'Button');
+ });
+
+ it('should on: errorBoundary={{open: true}} should work', () => {
+ wrapper = shallow(
+
+
+ );
+ assert(wrapper.dive().name() === 'ErrorBoundary');
+ });
+
+ it('should off: errorBoundary={{open: false}} should work', () => {
+ wrapper = shallow(
+
+
+ );
+ assert(wrapper.dive().name() === 'Button');
+ });
+
+ it('should off: config on component iteself > on ConfigProvider 1', () => {
+ wrapper = shallow(
+
+
+ );
+ assert(wrapper.dive().name() === 'Button');
+ });
+
+ it('should on: config on component iteself > on ConfigProvider 2', () => {
+ wrapper = shallow(
+
+
+ );
+ assert(wrapper.dive().name() === 'ErrorBoundary');
+ });
+
+ it('should on: config on component iteself > on ConfigProvider 3', () => {
+ wrapper = shallow(
+
+
+ );
+ assert(wrapper.dive().name() === 'ErrorBoundary');
+ });
+
+ it('should off: config on component iteself > on ConfigProvider 4', () => {
+ wrapper = shallow(
+
+
+ );
+ assert(wrapper.dive().name() === 'Button');
+ });
+
+ it('should on: config on component iteself > on ConfigProvider 5', () => {
+ wrapper = shallow(
+
+
+ );
+ assert(wrapper.dive().name() === 'ErrorBoundary');
+ });
+});
diff --git a/test/date-picker/index-spec.js b/test/date-picker/index-spec.js
index 52d22cbfe2..9ef805c989 100644
--- a/test/date-picker/index-spec.js
+++ b/test/date-picker/index-spec.js
@@ -13,7 +13,8 @@ const endValue = moment('2017-12-15', 'YYYY-MM-DD', true);
const defaultTimeValue = moment('09:00:00', 'HH:mm:ss', true);
// 禁止选择 startValue 之前的所有日期
-const disabledDate = function(date) {
+const disabledDate = function(date, view) {
+ if (!view) return true;
return date.valueOf() < startValue.valueOf();
};
diff --git a/test/range/index-spec.js b/test/range/index-spec.js
index 40a91a7c19..9bba3fc99f 100644
--- a/test/range/index-spec.js
+++ b/test/range/index-spec.js
@@ -137,32 +137,23 @@ describe('Range ', () => {
assert(wrapper.find('.next-range-scale-item').length === 4);
assert(wrapper.find('.next-range-scale-item.activated').length === 2);
- assert.deepEqual(
+ assert(
wrapper
.find('.next-range-scale-item')
.first()
- .props().style,
- {
- left: '3%',
- }
+ .props().style.left === '3%'
);
- assert.deepEqual(
+ assert(
wrapper
.find('.next-range-scale-item')
.at(1)
- .props().style,
- {
- left: '26%',
- }
+ .props().style.left === '26%'
);
- assert.deepEqual(
+ assert(
wrapper
.find('.next-range-scale-item')
.at(2)
- .props().style,
- {
- left: '37%',
- }
+ .props().style.left === '37%'
);
assert(wrapper2.find('.next-range-scale-item').length === 11);
assert(wrapper3.find('.next-range-scale-item').length === 4);
@@ -472,4 +463,35 @@ describe('Range ', () => {
wrapper.find('.next-range-slider').simulate('keyDown', { keyCode: 39 });
assert(!aSpy.called);
});
+
+ it('rtl', () => {
+ const wrapperSingle = mount(
+
+ );
wrapper = mount(ele);
window.dispatchEvent(new Event('resize'));
assert(render.calledOnce);
@@ -418,9 +422,14 @@ describe('Tab', () => {
});
it('should not render dropdown if not excessed', () => {
- wrapper = mount(
-
, { attachTo: target });
+ wrapper = mount(
+
+
+
+
,
+ { attachTo: target }
+ );
assert(wrapper.find('.next-tabs-btn-down').length === 0);
});
@@ -443,4 +452,72 @@ describe('Tab', () => {
);
});
});
+ describe('rtl mode', () => {
+ let wrapper, target;
+ const panes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item, index) => (
+
+
+ {panes}
+
+
,
+ { attachTo: target }
+ );
+ assert(wrapper.find('.next-tabs-btn-prev').hasClass('disabled'));
+ assert(wrapper.find('.next-tabs-btn-next').length === 1);
+ });
+ it('should slide', (done) => {
+ const boxStyle = { width: '200px' };
+ wrapper = mount(
+
+
+ {panes}
+
+
,
+ { attachTo: target }
+ );
+ const prev = wrapper.find(".next-tabs-nav").at(0).getDOMNode().getBoundingClientRect().left;
+ wrapper.find('.next-tabs-btn-next').simulate('click');
+ setTimeout(()=>{
+ const newpos = wrapper.find(".next-tabs-nav").at(0).getDOMNode().getBoundingClientRect().left;
+ assert(newpos>prev);
+ done();
+ }, 500);
+ });
+ });
});
diff --git a/test/table/index-spec.js b/test/table/index-spec.js
index fafb19060b..00a73a9d3b 100644
--- a/test/table/index-spec.js
+++ b/test/table/index-spec.js
@@ -731,7 +731,7 @@ describe('Table', () => {
);
});
- it('should support rtl', () => {
+ it('should support rtl', done => {
timeout(
{
children: [
@@ -742,6 +742,7 @@ describe('Table', () => {
},
() => {
assert(wrapper.find('.next-table[dir="rtl"]').length === 3);
+ done();
}
);
});
diff --git a/test/table/issue-spec.js b/test/table/issue-spec.js
index 0f42bf25ad..9f4c5537de 100644
--- a/test/table/issue-spec.js
+++ b/test/table/issue-spec.js
@@ -487,4 +487,35 @@ describe('Issue', () => {
ReactDOM.unmountComponentAtNode(div);
document.body.removeChild(div);
});
+
+ it('fix #466, stickHeader + lock with enough space', () => {
+ class App extends React.Component {
+ render() {
+ return (
+
+ );
+ }
+ }
+
+ const div = document.createElement('div');
+ document.body.appendChild(div);
+ ReactDOM.render(