diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.js b/components/breadcrumb/__tests__/Breadcrumb.test.js index b84fbd7c7a..8d5dccaebb 100644 --- a/components/breadcrumb/__tests__/Breadcrumb.test.js +++ b/components/breadcrumb/__tests__/Breadcrumb.test.js @@ -14,7 +14,7 @@ describe('Breadcrumb', () => { }); // https://github.com/airbnb/enzyme/issues/875 - xit('warns on non-Breadcrumb.Item children', () => { + it('warns on non-Breadcrumb.Item children', () => { const MyCom = () =>
foo
; mount( diff --git a/components/card/__tests__/index.test.js b/components/card/__tests__/index.test.js new file mode 100644 index 0000000000..1c7155cd85 --- /dev/null +++ b/components/card/__tests__/index.test.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import Card from '../index'; + +const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout)); + +describe('Card', () => { + function fakeResizeWindowTo(wrapper, width) { + Object.defineProperties(wrapper.node.container, { + offsetWidth: { + get() { return width; }, + configurable: true, + }, + }); + window.resizeTo(width); + } + + it('resize card will trigger different padding', async () => { + const wrapper = mount(xxx); + fakeResizeWindowTo(wrapper, 1000); + await delay(0); + expect(wrapper.hasClass('ant-card-wider-padding')).toBe(true); + fakeResizeWindowTo(wrapper, 800); + await delay(0); + expect(wrapper.hasClass('ant-card-wider-padding')).toBe(false); + }); +}); diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index a6cb488753..8a229413aa 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -66,7 +66,7 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr > Note: Before using `getFieldsValue` `getFieldValue` `setFieldsValue` and so on, please make sure that corresponding field had been registered with `getFieldDecorator`. -| Property | Description | Type | +| Method | Description | Type | |-----------|------------------------------------------|------------| | getFieldsValue | Get the specified fields' values. If you don't specify a parameter, you will get all fields' values. | Function([fieldNames: string[]]) | | getFieldValue | Get the value of a field. | Function(fieldName: string) | @@ -83,6 +83,16 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr | resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function([names: string[]]) | | getFieldDecorator | Two-way binding for form, please read below for details. | | +### this.props.form.validateFields/validateFieldsAndScroll([fieldNames: string[]], [options: object], callback: Function(errors, values)) + +| 参数 | 说明 | 类型 | 默认值 | +|-----|-----|------|-------| +| options.first | If `true`, every field will stop validation at first failed rule | boolean | false | +| options.firstFields | Those fields will stop validation at first failed rule | String[] | [] | +| options.force | Should validate validated field again when `validateTrigger` is been triggered again | boolean | false | +| options.scroll | Config scroll behavior of `validateFieldsAndScroll`, more: [dom-scroll-into-view's config](https://github.com/yiminghe/dom-scroll-into-view#function-parameter) | Object | {} | + + ### this.props.form.getFieldDecorator(id, options) After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls，the flow of form data will be handled by Form which will cause: diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 2a4ef53018..67da8c19b9 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -68,7 +68,7 @@ CustomizedForm = Form.create({})(CustomizedForm); > 注意：使用 `getFieldsValue` `getFieldValue` `setFieldsValue` 等时，应确保对应的 field 已经用 `getFieldDecorator` 注册过了。 -| 参数 | 说明 | 类型 | +| 方法      | 说明                                     | 类型       | |-----------|------------------------------------------|------------| | getFieldsValue | 获取一组输入控件的值，如不传入参数，则获取全部组件的值 | Function([fieldNames: string[]]) | | getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) | @@ -84,6 +84,15 @@ CustomizedForm = Form.create({})(CustomizedForm); | resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) | | getFieldDecorator | 用于和表单进行双向绑定，详见下方描述 | | +### this.props.form.validateFields/validateFieldsAndScroll([fieldNames: string[]], [options: object], callback: Function(errors, values)) + +| 参数 | 说明 | 类型 | 默认值 | +|-----|-----|------|-------| +| options.first | 若为 true，则每一表单域的都会在碰到第一个失败了的校验规则后停止校验 | boolean | false | +| options.firstFields | 指定表单域会在碰到第一个失败了的校验规则后停止校验 | String[] | [] | +| options.force | 对已经校验过的表单域，在 validateTrigger 再次被触发时是否再次校验 | boolean | false | +| options.scroll | 定义 validateFieldsAndScroll 的滚动行为，详细配置见 [dom-scroll-into-view config](https://github.com/yiminghe/dom-scroll-into-view#function-parameter) | Object | {} | + ### this.props.form.getFieldDecorator(id, options) 经过 `getFieldDecorator` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果： diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md index 4186f6f428..3d33435867 100644 --- a/components/grid/index.en-US.md +++ b/components/grid/index.en-US.md @@ -84,7 +84,7 @@ Flex layout is based on a grid 24 to define each "box" in width, but not rigidly Ant Design layout component if it can not meet your needs, you can use the excellent layout of the components of the community: - [react-flexbox-grid](http://roylee0704.github.io/react-flexbox-grid/) -- [react-blocks](http://whoisandie.github.io/react-blocks/) +- [react-blocks](https://github.com/whoisandy/react-blocks/) ### Row diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md index 7b5bf169b8..bd9457e6c6 100644 --- a/components/grid/index.zh-CN.md +++ b/components/grid/index.zh-CN.md @@ -83,7 +83,7 @@ Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排 Ant Design 的布局组件若不能满足你的需求，你也可以直接使用社区的优秀布局组件： - [react-flexbox-grid](http://roylee0704.github.io/react-flexbox-grid/) -- [react-blocks](http://whoisandie.github.io/react-blocks/) +- [react-blocks](https://github.com/whoisandy/react-blocks/) ### Row diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index 28d783cff3..1631ee4952 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -4,7 +4,7 @@ type: Data Entry title: Select --- -A Selector similar to Select2. +Select component to select value from options. ## When To Use diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index b74482af15..c9c6bff9f9 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -5,7 +5,7 @@ type: Data Entry title: Select --- -类似 Select2 的选择器。 +下拉选择器。 ## 何时使用 diff --git a/components/select/style/index.less b/components/select/style/index.less index b0293b974f..b722a32364 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -469,10 +469,6 @@ background-color: @item-hover-bg; } - &-active { - background-color: @item-active-bg; - } - &-disabled { color: @disabled-color; cursor: not-allowed; @@ -493,6 +489,10 @@ } } + &-active { + background-color: @item-active-bg; + } + &-divider { height: 1px; margin: 1px 0; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 8f1e86083f..ebfb015426 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -17,20 +17,14 @@ // alert info backgrounds. @primary-1: color(~`colorPalette("@{primary-color}", 1)`); // replace tint(@primary-color, 90%) @primary-2: color(~`colorPalette("@{primary-color}", 2)`); // replace tint(@primary-color, 80%) -// unused -@primary-3: color(~`colorPalette("@{primary-color}", 3)`); -@primary-4: color(~`colorPalette("@{primary-color}", 4)`); -// Color used to control the text color in many active and hover states. -@primary-5: color(~`colorPalette("@{primary-color}", 5)`); // replace tint(@primary-color, 20%) -@primary-6: @primary-color; // don't use, use @primary-color -// Color used to control the text color of active buttons. +@primary-3: color(~`colorPalette("@{primary-color}", 3)`); // unused +@primary-4: color(~`colorPalette("@{primary-color}", 4)`); // unused +@primary-5: color(~`colorPalette("@{primary-color}", 5)`); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%) +@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color @primary-7: color(~`colorPalette("@{primary-color}", 7)`); // replace shade(@primary-color, 5%) -// unused -@primary-8: color(~`colorPalette("@{primary-color}", 8)`); -// unused -@primary-9: color(~`colorPalette("@{primary-color}", 9)`); -// unused -@primary-10: color(~`colorPalette("@{primary-color}", 10)`); +@primary-8: color(~`colorPalette("@{primary-color}", 8)`); // unused +@primary-9: color(~`colorPalette("@{primary-color}", 9)`); // unused +@primary-10: color(~`colorPalette("@{primary-color}", 10)`); // unused // Base Scaffolding Variables // --- diff --git a/package.json b/package.json index 3f541bb4a7..e010d4f46a 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "rc-input-number": "~3.6.0", "rc-menu": "~5.0.10", "rc-notification": "~2.0.0", - "rc-pagination": "~1.10.6", + "rc-pagination": "~1.11.0", "rc-progress": "~2.2.2", "rc-rate": "~2.1.1", "rc-select": "~6.8.6", diff --git a/tests/setup.js b/tests/setup.js index 79de834434..5a895ae2d2 100644 --- a/tests/setup.js +++ b/tests/setup.js @@ -1,3 +1,5 @@ +import { jsdom } from 'jsdom'; + // fixed jsdom miss if (typeof window !== 'undefined') { const matchMediaPolyfill = function matchMediaPolyfill() { @@ -11,3 +13,17 @@ if (typeof window !== 'undefined') { }; window.matchMedia = window.matchMedia || matchMediaPolyfill; } + +global.requestAnimationFrame = global.requestAnimationFrame || function (cb) { + return setTimeout(cb, 0); +}; + +const documentHTML = '
'; +global.document = jsdom(documentHTML); +global.window = document.parentWindow; + +global.window.resizeTo = (width, height) => { + global.window.innerWidth = width || global.window.innerWidth; + global.window.innerHeight = height || global.window.innerHeight; + global.window.dispatchEvent(new Event('resize')); +};