diff --git a/.remarkrc.js b/.remarkrc.js deleted file mode 100644 index b4d85871eb..0000000000 --- a/.remarkrc.js +++ /dev/null @@ -1,5 +0,0 @@ -const config = { - plugins: ['remark-preset-lint-recommended', ['remark-lint-list-item-indent', 'space']], -}; - -module.exports = config; diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx index 24ecfa7e45..a7dccced15 100644 --- a/components/checkbox/Group.tsx +++ b/components/checkbox/Group.tsx @@ -136,7 +136,16 @@ class CheckboxGroup extends React.Component registeredValues.indexOf(val) !== -1)); + const options = this.getOptions(); + onChange( + value + .filter(val => registeredValues.indexOf(val) !== -1) + .sort((a, b) => { + const indexA = options.findIndex(opt => opt.value === a); + const indexB = options.findIndex(opt => opt.value === b); + return indexA - indexB; + }), + ); } }; diff --git a/components/checkbox/__tests__/group.test.js b/components/checkbox/__tests__/group.test.js index c3cf158ff7..fed5154d30 100644 --- a/components/checkbox/__tests__/group.test.js +++ b/components/checkbox/__tests__/group.test.js @@ -133,4 +133,38 @@ describe('CheckboxGroup', () => { expect(onChange).toHaveBeenCalledWith([2]); }); + + // https://github.com/ant-design/ant-design/issues/17297 + it('onChange should keep the order of the original values', () => { + const onChange = jest.fn(); + const wrapper = mount( + + + + + + , + ); + + wrapper + .find('.ant-checkbox-input') + .at(0) + .simulate('change'); + expect(onChange).toHaveBeenCalledWith([1]); + wrapper + .find('.ant-checkbox-input') + .at(1) + .simulate('change'); + expect(onChange).toHaveBeenCalledWith([1, 2]); + wrapper + .find('.ant-checkbox-input') + .at(0) + .simulate('change'); + expect(onChange).toHaveBeenCalledWith([2]); + wrapper + .find('.ant-checkbox-input') + .at(0) + .simulate('change'); + expect(onChange).toHaveBeenCalledWith([1, 2]); + }); }); diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index a4b9922b50..3f46cacf28 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -56,7 +56,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke | dropdownClassName | to customize the className of the popup calendar | string | - | | getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | | locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | -| mode | picker panel mode | `time|date|month|year|decade` | 'date' | +| mode | picker panel mode（[Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?)） | `time|date|month|year|decade` | 'date' | | open | open state of picker | boolean | - | | placeholder | placeholder of date input | string\|RangePicker\[] | - | | popupStyle | to customize the style of the popup calendar | object | {} | @@ -88,6 +88,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke | value | to set date | [moment](http://momentjs.com/) | - | | onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | onOk | callback when click ok button | function() | - | +| onPanelChange | Callback function for panel changing | function(value, mode) | - | ### MonthPicker diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 41f8361903..ac030fcae0 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -58,6 +58,7 @@ moment.locale('zh-cn'); | dropdownClassName | 额外的弹出日历 className | string | - | | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | +| mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time|date|month|year|decade` | 'date' | | open | 控制弹层是否展开 | boolean | - | | placeholder | 输入框提示文字 | string\|RangePicker\[] | - | | popupStyle | 额外的弹出日历样式 | object | {} | @@ -82,7 +83,6 @@ moment.locale('zh-cn'); | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | | disabledTime | 不可选择的时间 | function(date) | 无 | | format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM-DD" | -| mode | 日期面板的状态 | `time|date|month|year|decade` | 'date' | | renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | | showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | @@ -141,4 +141,4 @@ moment.locale('zh-cn'); ## FAQ -- [当我指定了 DatePicker/RangePicker 的 `mode` 属性后，点击后无法选择年份/月份？](/docs/react/faq-cn#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？) +- [当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？) diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap index 3412e05895..8a43af7d32 100644 --- a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap +++ b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap @@ -105,7 +105,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = ` exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
- Product - + Cloud Database - Billing Mode - + Prepaid - Automatic Renewal - + - Order time - + 2018-04-24 18:00:00 - Usage Time - + - Status - + - Negotiated Amount - + $80.00 - Discount - + $20.00 - Official Receipts - + - Config Info - +
- Product - + Cloud Database - Billing - + Prepaid - time - + - Amount - + $80.00 - Discount - + $20.00 - Official - + - Config Info - + +
+
+ + + + + + +
+ + Product + + + Cloud Database + +
+
+
+ +`; + exports[`Descriptions column is number 1`] = ` { Prepaid 18:00:00 $80.00 + No-Label , ); - expect(wrapper.find('tr')).toHaveLength(4); + expect(wrapper.find('tr')).toHaveLength(5); + expect(wrapper.find('.ant-descriptions-item-no-label')).toHaveLength(1); enquire.callunmatch(); wrapper.unmount(); @@ -138,4 +140,15 @@ describe('Descriptions', () => { expect(wrapper).toMatchSnapshot(); wrapper.unmount(); }); + + it('Descriptions.Item support className', () => { + const wrapper = mount( + + + Cloud Database + + , + ); + expect(wrapper).toMatchSnapshot(); + }); }); diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx index c03d665ab3..06cd33365c 100644 --- a/components/descriptions/index.tsx +++ b/components/descriptions/index.tsx @@ -10,6 +10,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface DescriptionsItemProps { prefixCls?: string; + className?: string; label?: React.ReactNode; children: React.ReactNode; span?: number; @@ -70,29 +71,43 @@ const generateChildrenRows = ( /** * This code is for handling react15 does not support returning an array, - * It can convert a children into two td + * It can convert a children into th and td * @param child DescriptionsItem * @returns * <> - * {DescriptionsItem.label} + * {DescriptionsItem.label} * {DescriptionsItem.children} * */ const renderCol = (child: React.ReactElement, bordered: boolean) => { - const { prefixCls, label, children, span = 1 } = child.props; + const { prefixCls, label, className, children, span = 1 } = child.props; if (bordered) { return [ - + {label} - , - + , + {children} , ]; } return ( - - + + {label} @@ -288,8 +303,8 @@ class Descriptions extends React.Component< return (
{title &&
{title}
} diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less index 0d20ce55f2..6282cd7533 100644 --- a/components/descriptions/style/index.less +++ b/components/descriptions/style/index.less @@ -27,6 +27,7 @@ } &-row { + > th, > td { padding-bottom: 16px; } @@ -37,9 +38,11 @@ &-item-label { color: @heading-color; + font-weight: normal; font-size: @font-size-base; line-height: @line-height-base; white-space: nowrap; + &::after { position: relative; top: -0.5px; @@ -48,6 +51,13 @@ } } + &-item-no-label { + &::after { + content: ''; + margin: 0; + } + } + &-item-content { display: table-cell; color: @text-color; @@ -60,55 +70,23 @@ > span { display: inline-block; } - .@{descriptions-prefix-cls}-item-label { - float: left; - padding: 0 !important; - } - .@{descriptions-prefix-cls}-item-content { - float: left; - padding: 0 !important; - } } - // padding setting - .@{descriptions-prefix-cls}-item-label, - .@{descriptions-prefix-cls}-item-content { - padding: @descriptions-default-padding; - } - - &.bordered.middle { - .@{descriptions-prefix-cls}-item-label, - .@{descriptions-prefix-cls}-item-content { - padding: @descriptions-middle-padding; - } - } - &.bordered.small { - .@{descriptions-prefix-cls}-item-label, - .@{descriptions-prefix-cls}-item-content { - padding: @descriptions-small-padding; - } - } - &.bordered { + &-bordered { .@{descriptions-prefix-cls}-view { border: 1px solid @border-color-split; > table { table-layout: auto; } } + .@{descriptions-prefix-cls}-item-label, .@{descriptions-prefix-cls}-item-content { + padding: @descriptions-default-padding; border-right: 1px solid @border-color-split; - } - .@{descriptions-prefix-cls}-item-label:last-child, - .@{descriptions-prefix-cls}-item-content:last-child { - border-right: none; - } - - .@{descriptions-prefix-cls}-row { - border-bottom: 1px solid @border-color-split; &:last-child { - border-bottom: none; + border-right: none; } } @@ -118,5 +96,26 @@ display: none; } } + + .@{descriptions-prefix-cls}-row { + border-bottom: 1px solid @border-color-split; + &:last-child { + border-bottom: none; + } + } + + &.@{descriptions-prefix-cls}-middle { + .@{descriptions-prefix-cls}-item-label, + .@{descriptions-prefix-cls}-item-content { + padding: @descriptions-middle-padding; + } + } + + &.@{descriptions-prefix-cls}-small { + .@{descriptions-prefix-cls}-item-label, + .@{descriptions-prefix-cls}-item-content { + padding: @descriptions-small-padding; + } + } } } diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index dfb4963bc7..4d4869219f 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -211,6 +211,14 @@ class Drawer extends React.Components -.@{ant-prefix}-radio-inline, -.@{ant-prefix}-radio-vertical, -.@{ant-prefix}-checkbox-inline, -.@{ant-prefix}-checkbox-vertical { - &.disabled { - cursor: not-allowed; - } -} - -// These classes are used on elements with