From 93cc6d5cbc1a6d342c7b3ecc55e30fee2d1c79fd Mon Sep 17 00:00:00 2001 From: handycode Date: Thu, 6 Apr 2017 02:50:12 +0800 Subject: [PATCH 01/43] =?UTF-8?q?Icon=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0d?= =?UTF-8?q?isplayName?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/icon/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/icon/index.tsx b/components/icon/index.tsx index 6a2bdbe763..a7eade2ad1 100755 --- a/components/icon/index.tsx +++ b/components/icon/index.tsx @@ -11,7 +11,7 @@ export interface IconProps { style?: React.CSSProperties; } -export default (props: IconProps) => { +const icon = (props: IconProps) => { const { type, className = '', spin } = props; const classString = classNames({ anticon: true, @@ -20,3 +20,7 @@ export default (props: IconProps) => { }, className); return ; }; + +icon.displayName = 'Icon'; + +export default icon; From 99639bf5de5bcec4c98810f05c35aa299e5be034 Mon Sep 17 00:00:00 2001 From: handycode Date: Thu, 6 Apr 2017 03:24:47 +0800 Subject: [PATCH 02/43] Update index.tsx --- components/icon/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/icon/index.tsx b/components/icon/index.tsx index a7eade2ad1..6bf6ba2726 100755 --- a/components/icon/index.tsx +++ b/components/icon/index.tsx @@ -21,6 +21,6 @@ const icon = (props: IconProps) => { return ; }; -icon.displayName = 'Icon'; +icon['displayName'] = 'Icon'; export default icon; From fb837ea9a8aed3dd3fb77923ce6e701f94eea5ce Mon Sep 17 00:00:00 2001 From: handycode Date: Thu, 6 Apr 2017 03:36:54 +0800 Subject: [PATCH 03/43] Update index.tsx --- components/icon/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/icon/index.tsx b/components/icon/index.tsx index 6bf6ba2726..91c5555725 100755 --- a/components/icon/index.tsx +++ b/components/icon/index.tsx @@ -19,8 +19,8 @@ const icon = (props: IconProps) => { [`anticon-${type}`]: true, }, className); return ; -}; +} -icon['displayName'] = 'Icon'; +(icon as any).displayName = 'Icon'; export default icon; From 4736a1b9907e76fef5009c92132763889c73d280 Mon Sep 17 00:00:00 2001 From: handycode Date: Thu, 6 Apr 2017 03:41:03 +0800 Subject: [PATCH 04/43] Update index.tsx --- components/icon/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/icon/index.tsx b/components/icon/index.tsx index 91c5555725..726f08eee4 100755 --- a/components/icon/index.tsx +++ b/components/icon/index.tsx @@ -19,7 +19,7 @@ const icon = (props: IconProps) => { [`anticon-${type}`]: true, }, className); return ; -} +}; (icon as any).displayName = 'Icon'; From 4b6c5643e794f4b02a09668bdb8249c17dad6f63 Mon Sep 17 00:00:00 2001 From: handycode Date: Thu, 6 Apr 2017 11:51:48 +0800 Subject: [PATCH 05/43] Update index.tsx --- components/icon/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/icon/index.tsx b/components/icon/index.tsx index 726f08eee4..12786e2483 100755 --- a/components/icon/index.tsx +++ b/components/icon/index.tsx @@ -11,7 +11,7 @@ export interface IconProps { style?: React.CSSProperties; } -const icon = (props: IconProps) => { +const Icon = (props: IconProps) => { const { type, className = '', spin } = props; const classString = classNames({ anticon: true, @@ -21,6 +21,6 @@ const icon = (props: IconProps) => { return ; }; -(icon as any).displayName = 'Icon'; +(Icon as any).displayName = 'Icon'; -export default icon; +export default Icon; From b2db4404574e1f2bf481725810814da97a082e42 Mon Sep 17 00:00:00 2001 From: Kenaniah Cerny Date: Sat, 8 Apr 2017 18:28:07 -0700 Subject: [PATCH 06/43] Adds native English translation for icons spec --- docs/spec/icon.en-US.md | 109 +++++++++++++++++++++++++++ docs/spec/{icon.md => icon.zh-CN.md} | 4 +- 2 files changed, 110 insertions(+), 3 deletions(-) create mode 100644 docs/spec/icon.en-US.md rename docs/spec/{icon.md => icon.zh-CN.md} (99%) diff --git a/docs/spec/icon.en-US.md b/docs/spec/icon.en-US.md new file mode 100644 index 0000000000..dc4cdb91e1 --- /dev/null +++ b/docs/spec/icon.en-US.md @@ -0,0 +1,109 @@ +--- +order: 4 +title: Icons +--- + +An icon is a graphical representation of meaning. Icons can be used to express actions, state, and even to categorize data. Ant Design's icons adhere to the following two principles and are designed for cross-platform consistency: + +- Graphics that are clear, intuitive, and simple enjoy a higher degree of recognition and are more easily understood +- All icons in the user interface should be consistent in style (detail design, perspective, stroke weight, etc.) + +--- + +## System icons + + + +System icons are often used to represent commonly used operations, such as: save, edit, delete. The library also includes icons to represent file types and state. + +- [View the icon library](/components/icon/#Application-Icons) + +### Key contour lines + +Ant Design's grid and key contour lines + +Contour lines play an important role in making various icons with the same visual effect. We recommend using a template following Ant Design's contour lines when creating new icons. + +Please make all icons in the 1024×1024 resolution (16×16 64 times). + +- [Illustrator tips](https://zos.alipayobjects.com/rmsportal/hmNuLjCkBssupcZgYAde.png) + +Square contour +Horizontal rectangle contour + +Circular contour +Vertical rectangle contour + +### Design details + +#### Stroke weight + +Correct example +Incorrect example + +Consistent stroke weight is the key to maintaining the visual unity of the entire icon system. Ant Design's icons have a consistent line width of 72px. + +#### Corners + +Correct example +Incorrect example + +Consistent rounding of corners and sizing of angles is also an important element in maintaining visual unity. + +Icons that follow Ant Design should have rounded corners and edges using a 72px radius. Angles should be a multiple of 45°. + +#### Visual correction + +Correct example +Incorrect example + +In certain special cases (for example, when the icon is too compact), adjustments to line width, outlines, or other subtle changes may be made to increase readability. + +### Perspective + +Correct example +Incorrect example + +Always keep a simple, flat style. Icons should not have a sense of depth nor a large amount of detail. + +### Naming conventions + + + +Uniform naming conventions make finding icons faster and easier. For example, icons with a surrounding outline have a uniform "-o" suffix. + +### Icon sizing + + + +Icons should be scaled according to the text size, according to the Ant Design specification. + +For example, icons inline with 12pt font should be 12px in size with 8px of spacing. + +### Color + + + +The color of the icon should be consistent the color of the surrounding copy, unless the icon is being used to express state (in which case it should be colored accordingly). + +--- + +## Pictographs + + + +While certain icons may be used to express an action or to communicate state, other icons may act as pictographs which can be used to either communicate meaning or to help a user remember an abstract concept. + +> Note: The design principles for system icons (stroke weight, etc.) also apply to pictographs. + +### Pictograph sizing + + + +Conventionally, we recommend storing pictograph icons in three sizes: 32px, 48px, and 64px. That said, the physical dimensions of an icon should match the dimensions of where it is used. + +### Colors + + + +Pictographs should either be monochrome (using a neutral color) or consist of two colors (the neutral color + primary color), with the primary color not exceeding 40% of the pictograph's area. diff --git a/docs/spec/icon.md b/docs/spec/icon.zh-CN.md similarity index 99% rename from docs/spec/icon.md rename to docs/spec/icon.zh-CN.md index 5f95cf708d..e19076e802 100644 --- a/docs/spec/icon.md +++ b/docs/spec/icon.zh-CN.md @@ -1,8 +1,6 @@ --- order: 4 -title: - zh-CN: 图标 - en-US: Icon +title: 图标 --- 图标是具有指代意义的图形，也是一种标识。通过使用图标表达命令，强调状态，表示产品或类别。为了系统及跨平台之间图形认知保持一致， From 07e2c5e9c5128c2f7601246da2030258e8449284 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 10 Apr 2017 11:16:41 +0800 Subject: [PATCH 07/43] docs: update docs for InputNumber, close: #5683 --- .../__tests__/__snapshots__/demo.test.js.snap | 10 +++++----- components/input-number/demo/formatter.md | 20 +++++++++++++++---- .../__tests__/__snapshots__/demo.test.js.snap | 4 ++-- 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/components/input-number/__tests__/__snapshots__/demo.test.js.snap b/components/input-number/__tests__/__snapshots__/demo.test.js.snap index d6867d223c..398c96bc33 100644 --- a/components/input-number/__tests__/__snapshots__/demo.test.js.snap +++ b/components/input-number/__tests__/__snapshots__/demo.test.js.snap @@ -48,7 +48,7 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = ` class="ant-input-number-handler-wrap" > @@ -181,7 +181,7 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = ` class="ant-input-number-handler-wrap" > diff --git a/components/input-number/demo/formatter.md b/components/input-number/demo/formatter.md index e364505ff6..b2d58cb4e5 100644 --- a/components/input-number/demo/formatter.md +++ b/components/input-number/demo/formatter.md @@ -7,11 +7,11 @@ title: ## zh-CN -展示具有具体含义的数据。 +通过 `formatter` 格式化数字，以展示具有具体含义的数据，往往需要配合 `parser` 一起使用。 ## en-US -Display value within it's situation. +Display value within it's situation with `formatter`, and we usually use `parser` at the same time. ````jsx import { InputNumber } from 'antd'; @@ -22,8 +22,20 @@ function onChange(value) { ReactDOM.render(
- `$ ${value}`} defaultValue={100} onChange={onChange} /> - `${value.replace('%', '')}%`} defaultValue={100} onChange={onChange} /> + `$ ${value.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`} + parser={value => value.replace(/\$\s?|(,*)/g, '')} + onChange={onChange} + /> + `${value}%`} + parser={value => value.replace('%', '')} + onChange={onChange} + />
, mountNode); ```` diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap index bdc1bddacb..57790d8879 100644 --- a/components/input/__tests__/__snapshots__/demo.test.js.snap +++ b/components/input/__tests__/__snapshots__/demo.test.js.snap @@ -294,7 +294,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = ` class="ant-input-number-handler-wrap" > Date: Mon, 10 Apr 2017 13:03:24 +0800 Subject: [PATCH 08/43] add `min-width` selection-column and expand-icon-th if the width total of your columns >= 100%, must have `min-width`. --- components/table/style/index.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/table/style/index.less b/components/table/style/index.less index ff6c9c85fa..9c121eee33 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -148,12 +148,14 @@ &-thead > tr > th.@{table-prefix-cls}-selection-column, &-tbody > tr > td.@{table-prefix-cls}-selection-column { text-align: center; + min-width: 62px; width: 62px; } &-expand-icon-th, &-row-expand-icon-cell { text-align: center; + min-width: 50px; width: 50px; } From 9daccc468a672c1a6f9de00a13b292962a7e21ab Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 10 Apr 2017 13:21:15 +0800 Subject: [PATCH 09/43] update input number snapshots --- .../input-number/__tests__/__snapshots__/demo.test.js.snap | 4 ++-- components/input/__tests__/__snapshots__/demo.test.js.snap | 4 ++-- components/slider/__tests__/__snapshots__/demo.test.js.snap | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/input-number/__tests__/__snapshots__/demo.test.js.snap b/components/input-number/__tests__/__snapshots__/demo.test.js.snap index 398c96bc33..58dcab53ba 100644 --- a/components/input-number/__tests__/__snapshots__/demo.test.js.snap +++ b/components/input-number/__tests__/__snapshots__/demo.test.js.snap @@ -48,7 +48,7 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = ` class="ant-input-number-handler-wrap" > Date: Fri, 7 Apr 2017 16:13:35 +0800 Subject: [PATCH 10/43] add fixed sider --- components/layout/demo/fixed-sider.md | 92 +++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 components/layout/demo/fixed-sider.md diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md new file mode 100644 index 0000000000..8b94821ca8 --- /dev/null +++ b/components/layout/demo/fixed-sider.md @@ -0,0 +1,92 @@ +--- +order: 7 +iframe: 360 +title: + zh-CN: 固定侧边栏 + en-US: Fixed Sider +--- + +## zh-CN + +当内容较长时，使用固定侧边栏可以提供更好的体验。 + +## en-US + +In dealing with long content, a fixed sider can provide a better user experience. + +````jsx +import { Layout, Menu, Icon } from 'antd'; +const { Header, Content, Footer, Sider } = Layout; + +ReactDOM.render( + +
+ + + + nav 1 + + + + nav 2 + + + + nav 3 + + + + nav 4 + + + + nav 5 + + + + nav 6 + + + + nav 7 + + + + nav 8 + + + + +
+ +
+ ... +
+ Really +
...
...
...
+ long +
...
...
...
...
...
... +
...
...
...
...
...
... +
...
...
...
...
...
... +
...
...
...
...
...
... +
...
...
...
...
...
... +
...
...
...
...
...
... +
...
...
...
...
...
+ content +
+ +
+ Ant Design ©2016 Created by Ant UED +
+ +, mountNode); +```` + +````css +#components-layout-demo-fixed-sider .logo { + height: 32px; + background: #333; + border-radius: 6px; + margin: 16px; +} +```` From 686cff965c3f8b86fc7d2385e5ee32fe60714fa5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B9=90=E4=BB=AA?= Date: Mon, 10 Apr 2017 14:01:33 +0800 Subject: [PATCH 11/43] undate --- .../__tests__/__snapshots__/demo.test.js.snap | 261 ++++++++++++++++++ components/layout/demo/fixed-sider.md | 2 +- 2 files changed, 262 insertions(+), 1 deletion(-) diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap index 9a33e87bd7..c36569d067 100644 --- a/components/layout/__tests__/__snapshots__/demo.test.js.snap +++ b/components/layout/__tests__/__snapshots__/demo.test.js.snap @@ -297,6 +297,267 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
`; +exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = ` +
+
+ +
+
+
+
+ ... +
+ Really +
+ ... +
+ ... +
+ ... +
+ long +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ ... +
+ content +
+
+
+ Ant Design ©2016 Created by Ant UED +
+
+
+`; + exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
Date: Mon, 10 Apr 2017 14:33:18 +0800 Subject: [PATCH 12/43] If you use locale-provider, specify the ant-design theme as the default theme. This will automatically add all the less variables defined by ant-design. This is useful if you want to create custom themes with less and you are referencing less variables defined by ant-design. --- components/locale-provider/style/index.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/locale-provider/style/index.less b/components/locale-provider/style/index.less index ff7bd09c0c..805e999692 100644 --- a/components/locale-provider/style/index.less +++ b/components/locale-provider/style/index.less @@ -1 +1,3 @@ // placeholder +@import "../../style/themes/default"; +@import "../../style/core/index"; From d8e465d579d5c1fbb414899e6acfcb072926e1af Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 10 Apr 2017 15:30:24 +0800 Subject: [PATCH 13/43] css: fix height of MonthPicker --- components/date-picker/style/MonthPicker.less | 1 + 1 file changed, 1 insertion(+) diff --git a/components/date-picker/style/MonthPicker.less b/components/date-picker/style/MonthPicker.less index ac1d545c9a..a6a7f7a69b 100644 --- a/components/date-picker/style/MonthPicker.less +++ b/components/date-picker/style/MonthPicker.less @@ -2,5 +2,6 @@ .@{calendar-prefix-cls}-month-panel, .@{calendar-prefix-cls}-year-panel { top: 0; + height: 248px; } } From 5ed49191315cd7d04a41c7dd07971586c97a5b16 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 10 Apr 2017 16:49:21 +0800 Subject: [PATCH 14/43] Fix tree select arrow rotate bug, close #5693 --- components/tree-select/style/index.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less index 8ae34be470..4fefc4a57d 100644 --- a/components/tree-select/style/index.less +++ b/components/tree-select/style/index.less @@ -84,6 +84,10 @@ &.@{select-tree-prefix-cls}-bottom_close, &.@{select-tree-prefix-cls}-noline_close { .antTreeSwitcherIcon(); + .ie-rotate(3); + &:after { + transform: rotate(270deg) scale(0.59); + } } } } From e20965e1ee225a17b32434e88fb184ddb97b05bc Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 10 Apr 2017 17:31:58 +0800 Subject: [PATCH 15/43] update scaffold page link --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f55547aa57..fa70ea1c13 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "css-animation": "^1.2.5", "dom-closest": "^0.2.0", "lodash.debounce": "^4.0.8", - "moment": "~2.18.0", + "moment": "^2.18.1", "object-assign": "~4.1.0", "omit.js": "^0.1.0", "rc-animate": "~2.3.0", From 5ddd7f847f09a40b8c14e64a0e9b93e4194d34d6 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 10 Apr 2017 22:42:56 +0800 Subject: [PATCH 16/43] docs: Document customized form control Related: #5700 --- components/form/demo/customized-form-controls.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/form/demo/customized-form-controls.md b/components/form/demo/customized-form-controls.md index e5e21095dc..7896d2667e 100644 --- a/components/form/demo/customized-form-controls.md +++ b/components/form/demo/customized-form-controls.md @@ -10,13 +10,14 @@ title: 自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定： > * 提供受控属性 `value` 或其它与 [`valuePropName`](http://ant.design/components/form/#getFieldDecorator-参数) 的值同名的属性。 > * 提供 `onChange` 事件或 [`trigger`](http://ant.design/components/form/#getFieldDecorator-参数) 的值同名的事件。 +> * 不能是函数式组件。 ## en-US Customized or third-party form controls can be used in Form, too. Controls must follow these conventions: > * It has a controlled property `value` or other name which is equal to the value of [`valuePropName`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters). > * It has event `onChange` or an event which name is equal to the value of [`trigger`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters). - +> * It must be a class component. ````jsx import { Form, Input, Select, Button } from 'antd'; From 692ccf85e78fb4fdbdb256bac174f5391f5fe572 Mon Sep 17 00:00:00 2001 From: Sanjay Kumar Date: Tue, 11 Apr 2017 17:08:09 +0800 Subject: [PATCH 17/43] Adding less variables for table head background color and table row hover --- components/style/themes/default.less | 5 +++++ components/table/style/index.less | 3 +-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 82968408e8..dc0259b61f 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -252,6 +252,11 @@ @spin-dot-size: 20px; @spin-dot-size-lg: 32px; +// Table +// -- +@table-head-background-color: @background-color-base; +@table-row-background-hover : @primary-1; + // TimePicker // --- @time-picker-panel-column-width: 56px; diff --git a/components/table/style/index.less b/components/table/style/index.less index 9c121eee33..0573d09d4e 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -2,7 +2,6 @@ @import "../../style/mixins/index"; @table-prefix-cls: ~"@{ant-prefix}-table"; -@table-head-background-color: @background-color-base; .@{table-prefix-cls}-wrapper { .clearfix; @@ -66,7 +65,7 @@ &.@{table-prefix-cls}-row-hover, &:hover { & > td { - background: @primary-1; + background: @table-row-background-hover; } } } From 92b8e8534ec9d61a81ba57ddafe58e5fbe7e3886 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 11 Apr 2017 17:56:38 +0800 Subject: [PATCH 18/43] change variable names #5711 --- components/style/themes/default.less | 4 ++-- components/table/style/index.less | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/style/themes/default.less b/components/style/themes/default.less index dc0259b61f..28c633777d 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -254,8 +254,8 @@ // Table // -- -@table-head-background-color: @background-color-base; -@table-row-background-hover : @primary-1; +@table-header-bg: @background-color-base; +@table-row-hover-bg: @primary-1; // TimePicker // --- diff --git a/components/table/style/index.less b/components/table/style/index.less index 0573d09d4e..6b19f0fea9 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -28,7 +28,7 @@ } &-thead > tr > th { - background: @table-head-background-color; + background: @table-header-bg; font-weight: 500; transition: background .3s ease; text-align: left; @@ -65,7 +65,7 @@ &.@{table-prefix-cls}-row-hover, &:hover { & > td { - background: @table-row-background-hover; + background: @table-row-hover-bg; } } } @@ -76,13 +76,13 @@ &-footer { padding: 16px 8px; - background: @table-head-background-color; + background: @table-header-bg; border-radius: 0 0 @border-radius-base @border-radius-base; position: relative; &:before { content: ''; height: 1px; - background: @table-head-background-color; + background: @table-header-bg; position: absolute; top: -1px; width: 100%; @@ -159,7 +159,7 @@ } &-header { - background: @table-head-background-color; + background: @table-header-bg; overflow: hidden; } From f311ff40ed258df76c790ded122ed0fe33d52a7b Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 11 Apr 2017 18:07:53 +0800 Subject: [PATCH 19/43] Add English gitter chat room --- README-zh_CN.md | 3 ++- README.md | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/README-zh_CN.md b/README-zh_CN.md index 133dd0370b..689fd99b4b 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -13,7 +13,8 @@ [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open") -[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English) +[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文） 一套企业级的 UI 设计语言和 React 实现。 diff --git a/README.md b/README.md index 3df621eb05..5d9b8c3fbd 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,8 @@ [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open") -[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English) +[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文） An enterprise-class UI design language and React-based implementation. From 3ca3c178cc4355669a39eefa9a079b45d640a937 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 11 Apr 2017 18:13:58 +0800 Subject: [PATCH 20/43] Add English gitter chat room --- docs/react/introduce.en-US.md | 2 +- docs/react/introduce.zh-CN.md | 3 ++- site/theme/en-US.js | 3 ++- site/theme/template/Layout/Footer.jsx | 7 ++++++- site/theme/zh-CN.js | 3 ++- 5 files changed, 13 insertions(+), 5 deletions(-) diff --git a/docs/react/introduce.en-US.md b/docs/react/introduce.en-US.md index b21505c1ec..10554cd272 100644 --- a/docs/react/introduce.en-US.md +++ b/docs/react/introduce.en-US.md @@ -164,6 +164,6 @@ If you'd like to help us improve antd, just create a [Pull Request](https://gith ## Need Help? -For questions on how to use antd, please post questions to [stackoverflow](http://stackoverflow.com/questions/tagged/antd) using the `antd` tag. If you're not finding what you need on stackoverflow, you can find us on [gitter](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) as well. +For questions on how to use antd, please post questions to [stackoverflow](http://stackoverflow.com/questions/tagged/antd) using the `antd` tag. If you're not finding what you need on stackoverflow, you can find us on [gitter](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) as well. As always, we encourage experienced users to help those who are not familiar with `antd`! diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md index a381899a42..88de5cd35b 100644 --- a/docs/react/introduce.zh-CN.md +++ b/docs/react/introduce.zh-CN.md @@ -173,4 +173,5 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' 1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文） 2. [Segment Fault](https://segmentfault.com/t/antd)（中文） -3. [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +3. [![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English) +4. [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文） diff --git a/site/theme/en-US.js b/site/theme/en-US.js index bfbafbc464..d8b6fba046 100644 --- a/site/theme/en-US.js +++ b/site/theme/en-US.js @@ -49,7 +49,8 @@ module.exports = { 'app.footer.feedback': 'Feedback', 'app.footer.stackoverflow': 'StackOverflow', 'app.footer.segmentfault': 'SegmentFault', - 'app.footer.discuss': 'Chat Room', + 'app.footer.discuss-en': 'Chat Room (English)', + 'app.footer.discuss-cn': 'Chat Room (中文)', 'app.footer.bug-report': 'Bug Report', 'app.footer.issues': 'Issues', 'app.footer.version': 'Version: ', diff --git a/site/theme/template/Layout/Footer.jsx b/site/theme/template/Layout/Footer.jsx index fbf70e56ed..0f40531ebe 100644 --- a/site/theme/template/Layout/Footer.jsx +++ b/site/theme/template/Layout/Footer.jsx @@ -126,7 +126,12 @@ class Footer extends React.Component {
+
+ +
diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js index f258907797..9004ea63c6 100644 --- a/site/theme/zh-CN.js +++ b/site/theme/zh-CN.js @@ -49,7 +49,8 @@ module.exports = { 'app.footer.feedback': '反馈和建议', 'app.footer.stackoverflow': 'StackOverflow', 'app.footer.segmentfault': 'SegmentFault', - 'app.footer.discuss': '在线讨论', + 'app.footer.discuss-en': '在线讨论 (English)', + 'app.footer.discuss-cn': '在线讨论 (中文)', 'app.footer.bug-report': '报告 Bug', 'app.footer.issues': '讨论列表', 'app.footer.version': '文档版本：', From 193b2b76848ba6d4174df8db8f37e8c69a9088d5 Mon Sep 17 00:00:00 2001 From: leadream <857098475@qq.com> Date: Tue, 11 Apr 2017 18:48:03 +0800 Subject: [PATCH 21/43] not aligned after customizing the size of input MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit For some reasons I customized the size of . Now the default height of is 40px. But there's a problem in after doing that: the texts and icon inside it are not aligned vertically at center. When I look into the code I found the height of `ant-calendar-range-picker-input` is 18px. I modified it to 100% and it aligned. I'm not sure if it can affect the other code. ---------------------------------------- 因为某些原因我自定义了 的尺寸，现在它的默认高度是40px。但是当我使用 组件时，我发现了一个问题：输入框里面的文字和图标在垂直方向不能居中对齐。我看了一下 css 代码，发现里面的 `ant-calendar-range-picker-input` 高度是固定的18px，我把它改成100%就可以垂直居中对齐了。我不知道这个改动是否会影响其他代码。 --- components/date-picker/style/RangePicker.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less index fb9ea914fb..c6595dfb9e 100644 --- a/components/date-picker/style/RangePicker.less +++ b/components/date-picker/style/RangePicker.less @@ -3,8 +3,8 @@ .@{calendar-prefix-cls}-range-picker-input { background-color: transparent; border: 0; - height: 18px; - line-height: 18px; + height: 100%; + line-height: 100%; outline: 0; width: 43%; text-align: center; From 851f8a8756e8735a82d7220b48d766c2cba28391 Mon Sep 17 00:00:00 2001 From: whtang906 Date: Tue, 11 Apr 2017 21:16:02 +0800 Subject: [PATCH 22/43] Add missing props(parser) into InputNumberProps --- components/input-number/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index b86dee4223..3246c0d32c 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -13,6 +13,7 @@ export interface InputNumberProps { disabled?: boolean; size?: 'large' | 'small' | 'default'; formatter?: (value: number | string | undefined) => string; + parser?: (displayValue: string | undefined) => number; placeholder?: string; style?: React.CSSProperties; className?: string; From 4e055ed5d0c6c6b5586ae2b3fa52457e7260531a Mon Sep 17 00:00:00 2001 From: Manjit Kumar Date: Wed, 12 Apr 2017 02:19:08 +0530 Subject: [PATCH 23/43] use PropTypes from 'prop-types' mdoule instead of React - as React.PropTypes is being deprecated - Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead. - Solution: https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes --- components/affix/index.tsx | 7 +++-- components/anchor/AnchorLink.tsx | 3 +- components/anchor/index.tsx | 3 +- components/breadcrumb/Breadcrumb.tsx | 13 ++++---- components/button/button.tsx | 17 ++++++----- components/checkbox/Group.tsx | 9 +++--- components/date-picker/RangePicker.tsx | 3 +- components/date-picker/createPicker.tsx | 3 +- components/form/FormItem.tsx | 27 +++++++++-------- components/grid/row.tsx | 15 +++++----- components/locale-provider/index.tsx | 5 ++-- components/modal/Modal.tsx | 4 +-- components/select/index.tsx | 5 ++-- components/table/Table.tsx | 31 ++++++++++---------- components/upload/Upload.tsx | 3 +- package.json | 1 + site/theme/template/Content/ComponentDoc.jsx | 3 +- site/theme/template/Content/Demo.jsx | 3 +- site/theme/template/Layout/index.jsx | 3 +- 19 files changed, 88 insertions(+), 70 deletions(-) diff --git a/components/affix/index.tsx b/components/affix/index.tsx index feb49a0932..9543e99915 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import PropTypes from 'prop-types'; import addEventListener from 'rc-util/lib/Dom/addEventListener'; import classNames from 'classnames'; import shallowequal from 'shallowequal'; @@ -60,9 +61,9 @@ export interface AffixProps { export default class Affix extends React.Component { static propTypes = { - offsetTop: React.PropTypes.number, - offsetBottom: React.PropTypes.number, - target: React.PropTypes.func, + offsetTop: PropTypes.number, + offsetBottom: PropTypes.number, + target: PropTypes.func, }; scrollEvent: any; diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 04b291cd00..1a7e9d2f76 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; import AnchorHelper, { scrollTo } from './anchorHelper'; @@ -18,7 +19,7 @@ export interface AnchorLinkProps { export default class AnchorLink extends React.Component { static __ANT_ANCHOR_LINK = true; static contextTypes = { - anchorHelper: React.PropTypes.any, + anchorHelper: PropTypes.any, }; static defaultProps = { diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx index f34d6d6a2f..4b9150eece 100644 --- a/components/anchor/index.tsx +++ b/components/anchor/index.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; import addEventListener from 'rc-util/lib/Dom/addEventListener'; import AnchorLink from './AnchorLink'; @@ -27,7 +28,7 @@ export default class Anchor extends React.Component { }; static childContextTypes = { - anchorHelper: React.PropTypes.any, + anchorHelper: PropTypes.any, }; refs: { diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index 409bd91344..03a4577636 100755 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { cloneElement } from 'react'; import warning from '../_util/warning'; import BreadcrumbItem from './BreadcrumbItem'; @@ -43,12 +44,12 @@ export default class Breadcrumb extends React.Component { }; static propTypes = { - prefixCls: React.PropTypes.string, - separator: React.PropTypes.node, - routes: React.PropTypes.array, - params: React.PropTypes.object, - linkRender: React.PropTypes.func, - nameRender: React.PropTypes.func, + prefixCls: PropTypes.string, + separator: PropTypes.node, + routes: PropTypes.array, + params: PropTypes.object, + linkRender: PropTypes.func, + nameRender: PropTypes.func, }; componentDidMount() { diff --git a/components/button/button.tsx b/components/button/button.tsx index f80477bb8e..473393dc5d 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; import Icon from '../icon'; import omit from 'omit.js'; @@ -60,14 +61,14 @@ export default class Button extends React.Component { }; static propTypes = { - type: React.PropTypes.string, - shape: React.PropTypes.oneOf(['circle', 'circle-outline']), - size: React.PropTypes.oneOf(['large', 'default', 'small']), - htmlType: React.PropTypes.oneOf(['submit', 'button', 'reset']), - onClick: React.PropTypes.func, - loading: React.PropTypes.oneOfType([React.PropTypes.bool, React.PropTypes.object]), - className: React.PropTypes.string, - icon: React.PropTypes.string, + type: PropTypes.string, + shape: PropTypes.oneOf(['circle', 'circle-outline']), + size: PropTypes.oneOf(['large', 'default', 'small']), + htmlType: PropTypes.oneOf(['submit', 'button', 'reset']), + onClick: PropTypes.func, + loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), + className: PropTypes.string, + icon: PropTypes.string, }; timeout: number; diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx index f7fa34fcda..41959a47cb 100644 --- a/components/checkbox/Group.tsx +++ b/components/checkbox/Group.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; import Checkbox from './Checkbox'; import PureRenderMixin from 'rc-util/lib/PureRenderMixin'; @@ -34,10 +35,10 @@ export default class CheckboxGroup extends React.Component { static contextTypes = { - antLocale: React.PropTypes.object, + antLocale: PropTypes.object, }; static defaultProps = { prefixCls: 'ant-calendar', diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx index 9f2231856f..fd4d14c923 100644 --- a/components/date-picker/createPicker.tsx +++ b/components/date-picker/createPicker.tsx @@ -1,5 +1,6 @@ import React from 'react'; import moment from 'moment'; +import PropTypes from 'prop-types'; import MonthCalendar from 'rc-calendar/lib/MonthCalendar'; import RcDatePicker from 'rc-calendar/lib/Picker'; import classNames from 'classnames'; @@ -18,7 +19,7 @@ export default function createPicker(TheCalendar) { // use class typescript error const CalenderWrapper = React.createClass({ contextTypes: { - antLocale: React.PropTypes.object, + antLocale: PropTypes.object, }, getDefaultProps() { return { diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index 060343630a..23dd80f7ed 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; import PureRenderMixin from 'rc-util/lib/PureRenderMixin'; import Row from '../row'; @@ -41,22 +42,22 @@ export default class FormItem extends React.Component { }; static propTypes = { - prefixCls: React.PropTypes.string, - label: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.node]), - labelCol: React.PropTypes.object, - help: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.bool]), - validateStatus: React.PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']), - hasFeedback: React.PropTypes.bool, - wrapperCol: React.PropTypes.object, - className: React.PropTypes.string, - id: React.PropTypes.string, - children: React.PropTypes.node, - colon: React.PropTypes.bool, + prefixCls: PropTypes.string, + label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + labelCol: PropTypes.object, + help: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]), + validateStatus: PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']), + hasFeedback: PropTypes.bool, + wrapperCol: PropTypes.object, + className: PropTypes.string, + id: PropTypes.string, + children: PropTypes.node, + colon: PropTypes.bool, }; static contextTypes = { - form: React.PropTypes.object, - vertical: React.PropTypes.bool, + form: PropTypes.object, + vertical: PropTypes.bool, }; context: FormItemContext; diff --git a/components/grid/row.tsx b/components/grid/row.tsx index 3dfbf680bb..b0cc99492c 100644 --- a/components/grid/row.tsx +++ b/components/grid/row.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Children, cloneElement } from 'react'; import classNames from 'classnames'; import assign from 'object-assign'; +import PropTypes from 'prop-types'; export interface RowProps { className?: string; @@ -19,13 +20,13 @@ export default class Row extends React.Component { }; static propTypes = { - type: React.PropTypes.string, - align: React.PropTypes.string, - justify: React.PropTypes.string, - className: React.PropTypes.string, - children: React.PropTypes.node, - gutter: React.PropTypes.number, - prefixCls: React.PropTypes.string, + type: PropTypes.string, + align: PropTypes.string, + justify: PropTypes.string, + className: PropTypes.string, + children: PropTypes.node, + gutter: PropTypes.number, + prefixCls: PropTypes.string, }; render() { const { type, justify, align, className, gutter, style, children, diff --git a/components/locale-provider/index.tsx b/components/locale-provider/index.tsx index 4075d2481f..ad6ca50ef5 100644 --- a/components/locale-provider/index.tsx +++ b/components/locale-provider/index.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { changeConfirmLocale } from '../modal/locale'; export interface LocaleProviderProps { @@ -18,11 +19,11 @@ export interface LocaleProviderProps { export default class LocaleProvider extends React.Component { static propTypes = { - locale: React.PropTypes.object, + locale: PropTypes.object, }; static childContextTypes = { - antLocale: React.PropTypes.object, + antLocale: PropTypes.object, }; getChildContext() { diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 60f0acb891..c178f97465 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -1,6 +1,6 @@ -import { PropTypes } from 'react'; import React from 'react'; import Dialog from 'rc-dialog'; +import PropTypes from 'prop-types'; import addEventListener from 'rc-util/lib/Dom/addEventListener'; import Button from '../button'; @@ -93,7 +93,7 @@ export default class Modal extends React.Component { }; static contextTypes = { - antLocale: React.PropTypes.object, + antLocale: PropTypes.object, }; context: ModalContext; diff --git a/components/select/index.tsx b/components/select/index.tsx index 926a8a77cd..4ade7cb16c 100755 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import RcSelect, { Option, OptGroup } from 'rc-select'; import classNames from 'classnames'; import warning from '../_util/warning'; @@ -90,7 +91,7 @@ export default class Select extends React.Component { }; static contextTypes = { - antLocale: React.PropTypes.object, + antLocale: PropTypes.object, }; context: SelectContext; diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 7a45783c37..b391c6632c 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -1,5 +1,6 @@ import React from 'react'; import RcTable from 'rc-table'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; import assign from 'object-assign'; import Pagination, { PaginationProps } from '../pagination'; @@ -102,21 +103,21 @@ export default class Table extends React.Component, any> { static ColumnGroup = ColumnGroup; static propTypes = { - dataSource: React.PropTypes.array, - columns: React.PropTypes.array, - prefixCls: React.PropTypes.string, - useFixedHeader: React.PropTypes.bool, - rowSelection: React.PropTypes.object, - className: React.PropTypes.string, - size: React.PropTypes.string, - loading: React.PropTypes.oneOfType([ - React.PropTypes.bool, - React.PropTypes.object, + dataSource: PropTypes.array, + columns: PropTypes.array, + prefixCls: PropTypes.string, + useFixedHeader: PropTypes.bool, + rowSelection: PropTypes.object, + className: PropTypes.string, + size: PropTypes.string, + loading: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.object, ]), - bordered: React.PropTypes.bool, - onChange: React.PropTypes.func, - locale: React.PropTypes.object, - dropdownPrefixCls: React.PropTypes.string, + bordered: PropTypes.bool, + onChange: PropTypes.func, + locale: PropTypes.object, + dropdownPrefixCls: PropTypes.string, }; static defaultProps = { @@ -135,7 +136,7 @@ export default class Table extends React.Component, any> { }; static contextTypes = { - antLocale: React.PropTypes.object, + antLocale: PropTypes.object, }; context: TableContext; diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index 93191a463e..24cdb2bcd2 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -1,5 +1,6 @@ import React from 'react'; import RcUpload from 'rc-upload'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; import assign from 'object-assign'; import Dragger from './Dragger'; @@ -41,7 +42,7 @@ export default class Upload extends React.Component { }; static contextTypes = { - antLocale: React.PropTypes.object, + antLocale: PropTypes.object, }; context: UploadContext; diff --git a/package.json b/package.json index fa70ea1c13..0d0f340c74 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "moment": "^2.18.1", "object-assign": "~4.1.0", "omit.js": "^0.1.0", + "prop-types": "^15.5.7", "rc-animate": "~2.3.0", "rc-calendar": "~7.8.0", "rc-cascader": "~0.11.0", diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx index 4a8f62460a..31ab3e3f3a 100644 --- a/site/theme/template/Content/ComponentDoc.jsx +++ b/site/theme/template/Content/ComponentDoc.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import DocumentTitle from 'react-document-title'; import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; @@ -9,7 +10,7 @@ import EditButton from './EditButton'; export default class ComponentDoc extends React.Component { static contextTypes = { - intl: React.PropTypes.object, + intl: PropTypes.object, } constructor(props) { diff --git a/site/theme/template/Content/Demo.jsx b/site/theme/template/Content/Demo.jsx index 1571eec63b..4a0a66a1f2 100644 --- a/site/theme/template/Content/Demo.jsx +++ b/site/theme/template/Content/Demo.jsx @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import CopyToClipboard from 'react-copy-to-clipboard'; import classNames from 'classnames'; @@ -9,7 +10,7 @@ import BrowserFrame from '../BrowserFrame'; export default class Demo extends React.Component { static contextTypes = { - intl: React.PropTypes.object, + intl: PropTypes.object, } constructor(props) { diff --git a/site/theme/template/Layout/index.jsx b/site/theme/template/Layout/index.jsx index 162469e59f..3f8edbcfa9 100644 --- a/site/theme/template/Layout/index.jsx +++ b/site/theme/template/Layout/index.jsx @@ -1,5 +1,6 @@ import React, { cloneElement } from 'react'; import ReactDOM from 'react-dom'; +import PropTypes from 'prop-types'; import { addLocaleData, IntlProvider } from 'react-intl'; import { LocaleProvider } from 'antd'; import enUS from 'antd/lib/locale-provider/en_US'; @@ -22,7 +23,7 @@ if (typeof window !== 'undefined') { export default class Layout extends React.Component { static contextTypes = { - router: React.PropTypes.object.isRequired, + router: PropTypes.object.isRequired, } constructor(props) { From 4067c1830c76a0e7fe1dc9aaf3dc5b0b0c77607a Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 12 Apr 2017 10:55:31 +0800 Subject: [PATCH 24/43] update changelog for RangePicker placeholder, #5721 --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 78ee532bc5..01258abcc2 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -478,6 +478,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi * RangePicker can set presetted ranges. [demo](https://ant.design/components/date-picker/#components-date-picker-demo-presetted-ranges) * Fix "Now" button doesn't work while `DatePicker[showTime]` is set. [#3748](https://github.com/ant-design/ant-design/issues/3748) * Fix `RangePicker[format]` should work. [#3808](https://github.com/ant-design/ant-design/issues/3808) + * Fix issue that RangePicker `placeholder=['xx', 'xx']` not working. * Add and update some icons. [#3977](https://github.com/ant-design/ant-design/pull/3977) * New component `Input.Search`. [demo](https://ant.design/components/input/#components-input-demo-search-input) * Mention onSelect event will get complete record. [#3867](https://github.com/ant-design/ant-design/issues/3867) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 8f8bc20fe1..31caa08ded 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -478,6 +478,7 @@ timeline: true * RangePicker 现在可以自定义快捷选择。[demo](https://ant.design/components/date-picker/#components-date-picker-demo-presetted-ranges) * 修复 DatePicker 设置 `showTime` 后 “此刻” 按钮失效的问题。[#3748](https://github.com/ant-design/ant-design/issues/3748) * 修复 `RangePicker[format]` 失效的问题。[#3808](https://github.com/ant-design/ant-design/issues/3808) + * 修复 RangePicker `placeholder=['xx', 'xx']` 失效的问题。 * 新增并优化部分 Icon。[#3977](https://github.com/ant-design/ant-design/pull/3977) * 新增 Input.Search 控件。[demo](https://ant.design/components/input/#components-input-demo-search-input) * Mention onSelect 事件现在可以获取完整的数据。[#3867](https://github.com/ant-design/ant-design/issues/3867) From 01f0e078354f53794331a7df9d52a3375d050790 Mon Sep 17 00:00:00 2001 From: pinggod Date: Wed, 12 Apr 2017 14:42:07 +0800 Subject: [PATCH 25/43] fix issue 5707: override the default a:focus style when it nested in the menu component --- components/menu/style/index.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 71f607616d..f8780e1d00 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -53,6 +53,9 @@ &:hover { color: @primary-color; } + &:focus { + text-decoration: none; + } &:before { position: absolute; background-color: transparent; From f2f3719748296c94c073518672988315037fb716 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 12 Apr 2017 14:54:39 +0800 Subject: [PATCH 26/43] Fix doc format --- docs/react/recommendation.en-US.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md index 1c3bb5097b..bd6641303e 100644 --- a/docs/react/recommendation.en-US.md +++ b/docs/react/recommendation.en-US.md @@ -11,8 +11,7 @@ Router | [react-router](https://github.com/ReactTraining/react-router) Layout | [react-blocks](http://whoisandie.github.io/react-blocks/) Drag and drop | [react-dnd](https://github.com/gaearon/react-dnd) [react-draggable](https://github.com/mzabriskie/react-draggable) Code Editor | [react-codemirror](https://github.com/JedWatson/react-codemirror) -Rich Text Editor | [react-quill](https://github.com/zenoamaro/react-quill) [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) -[react-lz-editor](https://github.com/leejaen/react-lz-editor)(Ant Design style) +Rich Text Editor | [react-quill](https://github.com/zenoamaro/react-quill) [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) [react-lz-editor](https://github.com/leejaen/react-lz-editor)(Ant Design style) Color Picker | [rc-color-picker](https://github.com/react-component/color-picker) [react-color](http://casesandberg.github.io/react-color/) Media Query | [react-responsive](https://github.com/contra/react-responsive) [react-media](https://github.com/ReactTraining/react-media) Copy to clipboard | [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard) From 1083f82c5df1ee9b9f80aebb654ab6c78079dc9f Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 12 Apr 2017 15:30:35 +0800 Subject: [PATCH 27/43] Fix icon transtion delay problem in Chrome --- components/button/style/index.less | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/button/style/index.less b/components/button/style/index.less index 45d47d416b..7850189464 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -82,10 +82,6 @@ display: block; } - .@{iconfont-css-prefix} { - transition: all .3s @ease-in-out; - } - &&-loading:not(&-circle):not(&-circle-outline) { padding-left: 29px; pointer-events: none; From 5fa0652af2ab0ea5d18cd364a4110b9c5967ecb0 Mon Sep 17 00:00:00 2001 From: ko Date: Wed, 12 Apr 2017 00:38:45 -0700 Subject: [PATCH 28/43] Minor spelling and grammar changes. --- docs/react/use-with-create-react-app.en-US.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/use-with-create-react-app.en-US.md b/docs/react/use-with-create-react-app.en-US.md index 6952c3685e..3c8dd5b708 100644 --- a/docs/react/use-with-create-react-app.en-US.md +++ b/docs/react/use-with-create-react-app.en-US.md @@ -96,8 +96,8 @@ Ok, you now see a blue primary button displaying in page now, next you can choos ## Advanced Guides -We are successd to run antd components now, but in the real world, there are still lots of problems about antd-demo. -For instance, we actully import all components in the project which will be a serious network perfermance issue. +We are successfully running antd components now; but in the real world, there are still lots of problems about antd-demo. +For instance, we actually import all components in the project which will cause a serious network perfermance issue. > You will see a warning in your browser console. > ![](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) From 08ffa60cce232eebd0d09425f77b9c442844698c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Wed, 12 Apr 2017 18:30:28 +0800 Subject: [PATCH 29/43] Update compositor.json --- compositor.json | 94 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 compositor.json diff --git a/compositor.json b/compositor.json new file mode 100644 index 0000000000..97d302af62 --- /dev/null +++ b/compositor.json @@ -0,0 +1,94 @@ +{ + "name": "ant-design/ant-design", + "version": "0.1.4", + "libraries": { + "xv": "^1.1.25" + }, + "title": "ant-design", + "branch": "", + "style": { + "name": "Material", + "componentSet": { + "nav": "nav/DarkAbsoluteNav", + "header": "header/GradientHeader", + "article": "article/BasicArticle", + "footer": "footer/BasicFooter" + }, + "fontFamily": "Roboto, sans-serif", + "heading": { + "fontWeight": 500, + "letterSpacing": "-0.01em" + }, + "colors": { + "text": "#212121", + "background": "#fff", + "primary": "#2196f3", + "secondary": "#1565c0", + "highlight": "#ff4081", + "border": "#e0e0e0", + "muted": "#f5f5f5" + }, + "layout": { + "centered": true, + "bannerHeight": "80vh", + "maxWidth": 896 + } + }, + "content": [ + { + "component": "nav", + "links": [ + { + "href": "http://ant.design", + "text": "Home" + }, + { + "href": "https://github.com/ant-design/ant-design", + "text": "GitHub" + }, + { + "href": "https://npmjs.com/package/antd", + "text": "npm" + } + ] + }, + { + "component": "header", + "heading": "ant-design", + "subhead": "🐜 A UI Design Language", + "children": [ + { + "component": "ui/TweetButton", + "text": "ant-design: 🐜 A UI Design Language", + "url": "http://ant.design" + }, + { + "component": "ui/GithubButton", + "user": "ant-design", + "repo": "ant-design" + } + ], + "text": "v2.9.1" + }, + { + "component": "article", + "metadata": { + "source": "github.readme" + }, + "html": "

\n \n \n \n

\n\n\n

\n\n

\n

\n\n\n (English)\n（中文）

\n

一套企业级的 UI 设计语言和 React 实现。

\n

README in English

\n

特性

\n
    \n
  • 提炼自企业级中后台产品的交互语言和视觉风格。
    • \n
  • 开箱即用的高质量 React 组件。
    • \n
  • 使用 TypeScript 构建，提供完整的类型定义文件。
    • \n
  • 基于 npm + webpack + dva 的企业级开发框架。
    • \n
\n

支持环境

\n
    \n
  • 现代浏览器和 IE9 及以上。
    • \n
  • 支持服务端渲染。
    • \n
  • Electron
    • \n
\n

参与共建

\n

antd 是一个开源项目，我们欢迎社区参与共建。如果你对此项目感兴趣，有 很多方式 进行参与。你可以 watch 这个仓库，加入 issue 中的讨论，以及尝试实现一些 已接受的特性。我们会给予有活跃贡献的社区成员 collaborator 权限。

\n

安装

\n
npm install antd

示例

\n
import { DatePicker } from 'antd';\nReactDOM.render(<DatePicker />, mountNode);

引入样式：

\n
import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

按需加载可通过此写法 import DatePicker from 'antd/lib/date-picker' 或使用插件 babel-plugin-import。

\n

TypeScript

\n
// tsconfig.json\n{\n  "compilerOptions": {\n    "moduleResolution": "node",\n    "jsx": "preserve",\n    "allowSyntheticDefaultImports": true\n  }\n}
\n

注意：

\n
    \n
  • 设置 allowSyntheticDefaultImports 避免 error TS1192: Module 'react' has no default export 的错误。
    • \n
  • 不要使用 @types/antd, antd 已经自带了 TypeScript 定义。
    • \n
\n
\n

国际化

\n

参考 国际化文档。

\n

链接

\n\n

本地开发

\n
$ git clone git@github.com:ant-design/ant-design.git\n$ npm install\n$ npm start

打开浏览器访问 http://127.0.0.1:8001 ，更多本地开发文档参见: https://github.com/ant-design/ant-design/wiki/Development 。

\n

如何贡献

\n

在任何形式的参与前，请先阅读 贡献者文档。如果你希望参与贡献，欢迎 Pull Request，或给我们 报告 Bug。

\n
\n

强烈推荐阅读 《提问的智慧》、《如何向开源社区提问题》 和 《如何有效地报告 Bug》，更好的问题更容易获得帮助。

\n
\n

社区互助

\n

如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

\n

通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 antd 标签。

\n
    \n
  1. Stack Overflow（英文）
    2. \n
  2. Segment Fault（中文）
    3. \n
    4. \n
\n" + }, + { + "component": "footer", + "links": [ + { + "href": "https://github.com/ant-design/ant-design", + "text": "GitHub" + }, + { + "href": "https://github.com/ant-design", + "text": "ant-design" + } + ] + } + ] +} \ No newline at end of file From c579a25cb51810218c1a1eda6fcf1df4a6e1d6fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Wed, 12 Apr 2017 18:31:04 +0800 Subject: [PATCH 31/43] Update compositor.json via compositor.io --- compositor.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/compositor.json b/compositor.json index 97d302af62..52bc23c161 100644 --- a/compositor.json +++ b/compositor.json @@ -75,7 +75,7 @@ "metadata": { "source": "github.readme" }, - "html": "

\n \n \n \n

\n\n\n

\n\n

\n

\n\n\n (English)\n（中文）

\n

一套企业级的 UI 设计语言和 React 实现。

\n

README in English

\n

特性

\n
    \n
  • 提炼自企业级中后台产品的交互语言和视觉风格。
    • \n
  • 开箱即用的高质量 React 组件。
    • \n
  • 使用 TypeScript 构建，提供完整的类型定义文件。
    • \n
  • 基于 npm + webpack + dva 的企业级开发框架。
    • \n
\n

支持环境

\n
    \n
  • 现代浏览器和 IE9 及以上。
    • \n
  • 支持服务端渲染。
    • \n
  • Electron
    • \n
\n

参与共建

\n

antd 是一个开源项目，我们欢迎社区参与共建。如果你对此项目感兴趣，有 很多方式 进行参与。你可以 watch 这个仓库，加入 issue 中的讨论，以及尝试实现一些 已接受的特性。我们会给予有活跃贡献的社区成员 collaborator 权限。

\n

安装

\n
npm install antd

示例

\n
import { DatePicker } from 'antd';\nReactDOM.render(<DatePicker />, mountNode);

引入样式：

\n
import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

按需加载可通过此写法 import DatePicker from 'antd/lib/date-picker' 或使用插件 babel-plugin-import。

\n

TypeScript

\n
// tsconfig.json\n{\n  "compilerOptions": {\n    "moduleResolution": "node",\n    "jsx": "preserve",\n    "allowSyntheticDefaultImports": true\n  }\n}
\n

注意：

\n
    \n
  • 设置 allowSyntheticDefaultImports 避免 error TS1192: Module 'react' has no default export 的错误。
    • \n
  • 不要使用 @types/antd, antd 已经自带了 TypeScript 定义。
    • \n
\n
\n

国际化

\n

参考 国际化文档。

\n

链接

\n\n

本地开发

\n
$ git clone git@github.com:ant-design/ant-design.git\n$ npm install\n$ npm start

打开浏览器访问 http://127.0.0.1:8001 ，更多本地开发文档参见: https://github.com/ant-design/ant-design/wiki/Development 。

\n

如何贡献

\n

在任何形式的参与前，请先阅读 贡献者文档。如果你希望参与贡献，欢迎 Pull Request，或给我们 报告 Bug。

\n
\n

强烈推荐阅读 《提问的智慧》、《如何向开源社区提问题》 和 《如何有效地报告 Bug》，更好的问题更容易获得帮助。

\n
\n

社区互助

\n

如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

\n

通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 antd 标签。

\n
    \n
  1. Stack Overflow（英文）
    2. \n
  2. Segment Fault（中文）
    3. \n
    4. \n
\n" + "html": "

\n \n \n \n

\n\n\n

\n\n

\n

\n\n\n (English)\n（中文）

\n

An enterprise-class UI design language and React-based implementation.

\n

中文 README

\n

Features

\n
    \n
  • An enterprise-class UI design language for web applications.
    • \n
  • A set of high-quality React components out of the box.
    • \n
  • Written in TypeScript with complete define types.
    • \n
  • A npm + webpack + dva front-end development workflow.
    • \n
\n

Environment Support

\n
    \n
  • Browser: Modern browsers and Internet Explorer 9+
    • \n
  • Server-side Rendering
    • \n
  • Electron
    • \n
\n

Let's build a better antd together

\n

antd is an open source project, improvements are welcomed. If you are interested in contributing to antd, you can watch this repository, join in discussion, or try to implement some features which have been accepted. Actually, there are many ways to contribute. And we are always happy to offer collaborator permission for some active contributors.

\n

Install

\n
npm install antd

Usage

\n
import { DatePicker } from 'antd';\nReactDOM.render(<DatePicker />, mountNode);

And import style manually:

\n
import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

Use modularized antd

\n
    \n

  • Use babel-plugin-import (Recommended)

    \n
     // .babelrc or babel-loader option\n {\n   "plugins": [\n     ["import", { libraryName: "antd", style: "css" }] // `style: true` for less\n   ]\n }

    Then you can import components from antd, equivalent to import manually below.

    \n
     // import js and css modularly, parsed by babel-plugin-import\n import { DatePicker } from 'antd';
    • \n

  • Manually import

    \n
     import DatePicker from 'antd/lib/date-picker';  // for js\n import 'antd/lib/date-picker/style/css';        // for css\n // import 'antd/lib/date-picker/style';         // that will import less
    • \n
\n

TypeScript

\n
// tsconfig.json\n{\n  "compilerOptions": {\n    "moduleResolution": "node",\n    "jsx": "preserve",\n    "allowSyntheticDefaultImports": true\n  }\n}
\n

Note:

\n
    \n
  • set allowSyntheticDefaultImports to prevent error TS1192: Module 'react' has no default export.
    • \n
  • Don't use @types/antd, antd provide a built-in ts definition already.
    • \n
\n
\n

Internationalization

\n

See i18n.

\n

Links

\n\n

Development

\n
$ git clone git@github.com:ant-design/ant-design.git\n$ npm install\n$ npm start

Open your browser and visit http://127.0.0.1:8001 , see more at https://github.com/ant-design/ant-design/wiki/Development .

\n

Contributing

\n

We welcome all contributions, please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues. If you'd like to improve code, check out the Development Instructions and have a good time! :)

\n" }, { "component": "footer", From dd72822c6bbb0866db01a9258d1c8150569ce836 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 12 Apr 2017 18:32:05 +0800 Subject: [PATCH 32/43] remove compositor.json --- compositor.json | 94 ------------------------------------------------- 1 file changed, 94 deletions(-) delete mode 100644 compositor.json diff --git a/compositor.json b/compositor.json deleted file mode 100644 index 52bc23c161..0000000000 --- a/compositor.json +++ /dev/null @@ -1,94 +0,0 @@ -{ - "name": "ant-design/ant-design", - "version": "0.1.4", - "libraries": { - "xv": "^1.1.25" - }, - "title": "ant-design", - "branch": "", - "style": { - "name": "Material", - "componentSet": { - "nav": "nav/DarkAbsoluteNav", - "header": "header/GradientHeader", - "article": "article/BasicArticle", - "footer": "footer/BasicFooter" - }, - "fontFamily": "Roboto, sans-serif", - "heading": { - "fontWeight": 500, - "letterSpacing": "-0.01em" - }, - "colors": { - "text": "#212121", - "background": "#fff", - "primary": "#2196f3", - "secondary": "#1565c0", - "highlight": "#ff4081", - "border": "#e0e0e0", - "muted": "#f5f5f5" - }, - "layout": { - "centered": true, - "bannerHeight": "80vh", - "maxWidth": 896 - } - }, - "content": [ - { - "component": "nav", - "links": [ - { - "href": "http://ant.design", - "text": "Home" - }, - { - "href": "https://github.com/ant-design/ant-design", - "text": "GitHub" - }, - { - "href": "https://npmjs.com/package/antd", - "text": "npm" - } - ] - }, - { - "component": "header", - "heading": "ant-design", - "subhead": "🐜 A UI Design Language", - "children": [ - { - "component": "ui/TweetButton", - "text": "ant-design: 🐜 A UI Design Language", - "url": "http://ant.design" - }, - { - "component": "ui/GithubButton", - "user": "ant-design", - "repo": "ant-design" - } - ], - "text": "v2.9.1" - }, - { - "component": "article", - "metadata": { - "source": "github.readme" - }, - "html": "

\n \n \n \n

\n\n\n

\n\n

\n

\n\n\n (English)\n（中文）

\n

An enterprise-class UI design language and React-based implementation.

\n

中文 README

\n

Features

\n
    \n
  • An enterprise-class UI design language for web applications.
    • \n
  • A set of high-quality React components out of the box.
    • \n
  • Written in TypeScript with complete define types.
    • \n
  • A npm + webpack + dva front-end development workflow.
    • \n
\n

Environment Support

\n
    \n
  • Browser: Modern browsers and Internet Explorer 9+
    • \n
  • Server-side Rendering
    • \n
  • Electron
    • \n
\n

Let's build a better antd together

\n

antd is an open source project, improvements are welcomed. If you are interested in contributing to antd, you can watch this repository, join in discussion, or try to implement some features which have been accepted. Actually, there are many ways to contribute. And we are always happy to offer collaborator permission for some active contributors.

\n

Install

\n
npm install antd

Usage

\n
import { DatePicker } from 'antd';\nReactDOM.render(<DatePicker />, mountNode);

And import style manually:

\n
import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

Use modularized antd

\n
    \n

  • Use babel-plugin-import (Recommended)

    \n
     // .babelrc or babel-loader option\n {\n   "plugins": [\n     ["import", { libraryName: "antd", style: "css" }] // `style: true` for less\n   ]\n }

    Then you can import components from antd, equivalent to import manually below.

    \n
     // import js and css modularly, parsed by babel-plugin-import\n import { DatePicker } from 'antd';
    • \n

  • Manually import

    \n
     import DatePicker from 'antd/lib/date-picker';  // for js\n import 'antd/lib/date-picker/style/css';        // for css\n // import 'antd/lib/date-picker/style';         // that will import less
    • \n
\n

TypeScript

\n
// tsconfig.json\n{\n  "compilerOptions": {\n    "moduleResolution": "node",\n    "jsx": "preserve",\n    "allowSyntheticDefaultImports": true\n  }\n}
\n

Note:

\n
    \n
  • set allowSyntheticDefaultImports to prevent error TS1192: Module 'react' has no default export.
    • \n
  • Don't use @types/antd, antd provide a built-in ts definition already.
    • \n
\n
\n

Internationalization

\n

See i18n.

\n

Links

\n\n

Development

\n
$ git clone git@github.com:ant-design/ant-design.git\n$ npm install\n$ npm start

Open your browser and visit http://127.0.0.1:8001 , see more at https://github.com/ant-design/ant-design/wiki/Development .

\n

Contributing

\n

We welcome all contributions, please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues. If you'd like to improve code, check out the Development Instructions and have a good time! :)

\n" - }, - { - "component": "footer", - "links": [ - { - "href": "https://github.com/ant-design/ant-design", - "text": "GitHub" - }, - { - "href": "https://github.com/ant-design", - "text": "ant-design" - } - ] - } - ] -} \ No newline at end of file From 07e9f01aef0ecff9011400709bc06b39948f41b2 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 12 Apr 2017 20:14:56 +0800 Subject: [PATCH 33/43] upgrade rc-collapse, #5678 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0d0f340c74..cca3e12628 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "rc-calendar": "~7.8.0", "rc-cascader": "~0.11.0", "rc-checkbox": "~1.5.0", - "rc-collapse": "~1.6.4", + "rc-collapse": "~1.7.0", "rc-dialog": "~6.5.0", "rc-dropdown": "~1.4.8", "rc-editor-mention": "~0.5.2", From 04af6d5c7f50ea5ba4da256e038bb1e7748b4e58 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 12 Apr 2017 20:31:31 +0800 Subject: [PATCH 34/43] improve table demo style, close #5697 --- components/table/demo/grouping-columns.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md index e0e033f6bf..3396195fc4 100644 --- a/components/table/demo/grouping-columns.md +++ b/components/table/demo/grouping-columns.md @@ -36,7 +36,7 @@ const columns = [{ title: 'Age', dataIndex: 'age', key: 'age', - width: 100, + width: 200, sorter: (a, b) => a.age - b.age, }, { title: 'Address', @@ -51,7 +51,7 @@ const columns = [{ title: 'Building', dataIndex: 'building', key: 'building', - width: 50, + width: 100, }, { title: 'Door No.', dataIndex: 'number', @@ -66,12 +66,10 @@ const columns = [{ title: 'Company Address', dataIndex: 'companyAddress', key: 'companyAddress', - width: 200, }, { title: 'Company Name', dataIndex: 'companyName', key: 'companyName', - width: 200, }], }, { title: 'Gender', @@ -102,7 +100,7 @@ ReactDOM.render( dataSource={data} bordered size="middle" - scroll={{ x: 1010, y: 240 }} + scroll={{ x: '130%', y: 240 }} /> , mountNode); ``` From 1be0936cb81e31760903ea712301769e91ed5570 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 12 Apr 2017 20:44:57 +0800 Subject: [PATCH 35/43] fix snapshots --- .../__tests__/__snapshots__/demo.test.js.snap | 2 +- .../__tests__/__snapshots__/demo.test.js.snap | 28 +++++++------------ 2 files changed, 11 insertions(+), 19 deletions(-) diff --git a/components/switch/__tests__/__snapshots__/demo.test.js.snap b/components/switch/__tests__/__snapshots__/demo.test.js.snap index e77a29b9f9..47efa43087 100644 --- a/components/switch/__tests__/__snapshots__/demo.test.js.snap +++ b/components/switch/__tests__/__snapshots__/demo.test.js.snap @@ -15,7 +15,7 @@ exports[`renders ./components/switch/demo/disabled.md correctly 1`] = `
- @@ -6602,17 +6599,16 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = ` style="width:200px;min-width:200px;" /> - + + @@ -6755,12 +6751,9 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = ` >
- @@ -6768,17 +6761,16 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = ` style="width:200px;min-width:200px;" /> - + + From bdf0f6212b76f3344391a846bc829d3e1cf2fa45 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 12 Apr 2017 20:45:07 +0800 Subject: [PATCH 36/43] fix design doc --- docs/spec/data-display.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/data-display.md b/docs/spec/data-display.md index 153c59a78f..a608d743ea 100644 --- a/docs/spec/data-display.md +++ b/docs/spec/data-display.md @@ -22,7 +22,7 @@ title: > 1. 表格中的时间、状态、操作栏需保持词语完整不过行。 > 2. 当数据为空时，可使用『- -』来表示暂无数据。 -## 折叠面板 +## 折叠面板 Collapse From a8808c45ac4bab0114bf354d063d8bd5d69f6c46 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 12 Apr 2017 20:49:02 +0800 Subject: [PATCH 37/43] react-addons-test-utils => react-dom/test-utils --- components/grid/__tests__/index.test.js | 2 +- components/icon/__tests__/index.test.js | 2 +- components/popover/__tests__/index.test.js | 2 +- package.json | 1 - 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/components/grid/__tests__/index.test.js b/components/grid/__tests__/index.test.js index 8a0aadbc7b..64c7af5bce 100644 --- a/components/grid/__tests__/index.test.js +++ b/components/grid/__tests__/index.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import TestUtils from 'react-addons-test-utils'; +import TestUtils from 'react-dom/test-utils'; import { Col, Row } from '..'; describe('Grid', () => { diff --git a/components/icon/__tests__/index.test.js b/components/icon/__tests__/index.test.js index 6c074c653c..28e4e789b9 100644 --- a/components/icon/__tests__/index.test.js +++ b/components/icon/__tests__/index.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import TestUtils from 'react-addons-test-utils'; +import TestUtils from 'react-dom/test-utils'; import { wrap } from 'react-stateless-wrapper'; import AntIcon from '..'; diff --git a/components/popover/__tests__/index.test.js b/components/popover/__tests__/index.test.js index ba816e5a55..2cb61217b6 100644 --- a/components/popover/__tests__/index.test.js +++ b/components/popover/__tests__/index.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import TestUtils from 'react-addons-test-utils'; +import TestUtils from 'react-dom/test-utils'; import Popover from '..'; describe('Popover', () => { diff --git a/package.json b/package.json index cca3e12628..7df11353bb 100644 --- a/package.json +++ b/package.json @@ -125,7 +125,6 @@ "rc-scroll-anim": "^1.0.3", "rc-tween-one": "^1.1.2", "react": "^15.0.0", - "react-addons-test-utils": "^15.0.0", "react-color-standalone": "^2.4.2-1", "react-copy-to-clipboard": "^4.0.1", "react-document-title": "^2.0.1", From c5ab604f70a473e8668b73fb627d5935c23f1a37 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 12 Apr 2017 20:56:47 +0800 Subject: [PATCH 38/43] update introduce.md --- docs/react/getting-started.en-US.md | 10 +++++++--- docs/react/getting-started.zh-CN.md | 8 ++++++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/docs/react/getting-started.en-US.md b/docs/react/getting-started.en-US.md index 84226e3e04..3909f9d486 100644 --- a/docs/react/getting-started.en-US.md +++ b/docs/react/getting-started.en-US.md @@ -161,11 +161,15 @@ There are some [scaffolds](https://github.com/ant-design/ant-design/issues/129) ## Import on Demand -If you see a log like below screenshot, you might import all components by writing `import { Button } from 'antd';`, this will affect your app's network perfermance. +If you see logs like below screenshot, you might import all components by writing `import { Button } from 'antd';`, this will affect your app's network perfermance. -> ![](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) +``` +You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size. +``` -But, we can import individual components on demand: +> ![](https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png) + +However, we can import individual components on demand: ```jsx import Button from 'antd/lib/button'; diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md index fe145f418f..7099a28f2b 100644 --- a/docs/react/getting-started.zh-CN.md +++ b/docs/react/getting-started.zh-CN.md @@ -159,9 +159,13 @@ IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016 ## 按需加载 -如果你在控制台看到下面的提示，则你可能使用了 `import { Button } from 'antd';` 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。 +如果你在开发环境的控制台看到下面的提示，那么你可能使用了 `import { Button } from 'antd';` 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。 -> ![](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) +``` +You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size. +``` + +> ![](https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png) 可以通过以下的写法来按需加载组件。 From 031aa140900665c551a88b919ce94b3be4570223 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 12 Apr 2017 21:17:04 +0800 Subject: [PATCH 39/43] Add Hotjar Tracking Code --- site/theme/static/template.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/site/theme/static/template.html b/site/theme/static/template.html index 0d446c861e..6664a229ae 100644 --- a/site/theme/static/template.html +++ b/site/theme/static/template.html @@ -96,6 +96,17 @@ /* eslint-enable */ } + +
From 91d67f732c80b1104a23583f85aa923521dab3a8 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 12 Apr 2017 21:23:54 +0800 Subject: [PATCH 40/43] Add back react-addons-test-utils --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 7df11353bb..e6b8003b4c 100644 --- a/package.json +++ b/package.json @@ -125,6 +125,7 @@ "rc-scroll-anim": "^1.0.3", "rc-tween-one": "^1.1.2", "react": "^15.0.0", + "react-addons-test-utils": "^15.5.1", "react-color-standalone": "^2.4.2-1", "react-copy-to-clipboard": "^4.0.1", "react-document-title": "^2.0.1", From 5be7dc6b901efa5d7a0ddb53e9fe268e901c9306 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 13 Apr 2017 10:56:19 +0800 Subject: [PATCH 41/43] Fix InputGroup style, close #5743 --- components/input/style/mixin.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index 256863c81e..267f50cc3f 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -175,7 +175,6 @@ } // Reset rounded corners - > span > .@{inputClass}:first-child, > .@{inputClass}:first-child, &-addon:first-child { border-bottom-right-radius: 0; @@ -241,6 +240,8 @@ border-radius: 0; border-right-width: 0; vertical-align: middle; + float: none; + display: inline-block; } // Undo float for .ant-input-group .ant-input From 1caba286c49d67cdb6dff6dcefcbb46c3ef98ff9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 13 Apr 2017 11:09:13 +0800 Subject: [PATCH 42/43] fix test case --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index e6b8003b4c..bbf0f86c1f 100644 --- a/package.json +++ b/package.json @@ -134,6 +134,7 @@ "react-intl": "^2.0.1", "react-stateless-wrapper": "^1.0.2", "react-sublime-video": "^0.2.0", + "react-test-renderer": "^15.5.4", "reqwest": "^2.0.5", "rimraf": "^2.5.4", "stylelint": "^7.8.0", From 31273135e228ab10752d0eefe6782912487361b5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 13 Apr 2017 11:10:40 +0800 Subject: [PATCH 43/43] remove displayName --- components/icon/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/icon/index.tsx b/components/icon/index.tsx index 12786e2483..84b4e1dbad 100755 --- a/components/icon/index.tsx +++ b/components/icon/index.tsx @@ -21,6 +21,4 @@ const Icon = (props: IconProps) => { return ; }; -(Icon as any).displayName = 'Icon'; - export default Icon;