test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 20:19:44 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:ant-design/ant-design

Browse Source
This commit is contained in:
偏右 2016-05-26 13:28:41 +08:00
commit 6799ee278f
31 changed files with 205 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
.github/ISSUE_TEMPLATE.md vendored
View File

@ -1,5 +1,3 @@
> 特别提示：报告 bug 前请确保你的问题是可复现的，并务必提供复现步骤，否则恕难解决。
If you want to ask a question, please read [some tips](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question) first :-)
If you are going to report a bug, please answer the following questions, thank you!
@ -25,3 +23,31 @@ If you are going to report a bug, please answer the following questions, thank y
- The version of antd(e.g. 0.12.0):
- Your operating system and it's version(e.g. OSX 10.11.0):
- Your browser and it's version(e.g. Chrome 48.0.0.0(64-bit)):
---
提问之前，建议先阅读[这份提示](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question)。:-)
如果是报告 bug，请按照下列格式编辑问题，务必提供复现步骤，否则恕难解决，非常感谢！
## 你做了什么？
（例如，我吃了一个汉堡）
## 你期待的结果是：
（例如，我应该饱了）
## 实际上的结果和抱怨：
（例如，我还是饿的，肯定是哪里出问题了）
## 可重现的在线演示
(e.g. http://codepen.io/anon/pen/wGOWGW?editors=001)
## 本地环境信息
- antd 版本:
- 操作系统及其版本：
- 浏览器及其版本:

2
CHANGELOG.md
View File

@ -24,7 +24,7 @@ timeline: true
- Modal
- 修复弹出时背景依然跟随滚动的问题。[#1751](https://github.com/ant-design/ant-design/issues/1751)
- 修复关闭按钮获得焦点时的样式问题。[#1668](https://github.com/ant-design/ant-design/issues/1668)
- 修复 Form 搜索输入框样式问题。[7b7f846](https://github.com/ant-design/ant-design/commit/7b7f8461611e53f4f96ae8d64d37fe28ee8d2553)
- 将搜索输入框相关样式移到 Input 组件下。[7b7f846](https://github.com/ant-design/ant-design/commit/7b7f8461611e53f4f96ae8d64d37fe28ee8d2553)
- 修复 Select 获得焦点时的样式问题。[#1684](https://github.com/ant-design/ant-design/issues/1684)
- 修复 TreeSelect 占位符样式问题。[#1657](https://github.com/ant-design/ant-design/issues/1657)
- 修复了类型定义以更好地支持 `TypeScript`。[#1696](https://github.com/ant-design/ant-design/pull/1696) [@xujihui1985](https://github.com/xujihui1985)

35
README.md
View File

@ -20,7 +20,7 @@ An enterprise-class UI design language and React-based implementation.
npm install antd
```
## Usage example
## Usage
### Use prebuilt bundle
@ -29,7 +29,7 @@ import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
```
Import style:
And import style manually:
```jsx
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
@ -37,23 +37,28 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
### Use modularized antd
```jsx
import DatePicker from 'antd/lib/date-picker'; // just for js
```
- Use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) (Recommended)
We recommend use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) with config:
```js
// .babelrc
{
"plugins": [["antd", { style: "css" }]]
}
```
```js
['antd', {
style: 'css'
}]
```
Then you can import components from antd directly.
```jsx
import { DatePicker } from 'antd'; // automatically parse and require js and css modularly
```
```jsx
// import js and css modularly, parsed by babel-plugin-antd
import { DatePicker } from 'antd';
```
- Manually import
```jsx
import DatePicker from 'antd/lib/date-picker'; // just for js
```
No need to import style manually.
## Browser Support

2
components/affix/index.jsx
View File

@ -76,6 +76,7 @@ export default class Affix extends React.Component {
position: 'fixed',
top: offsetTop,
left: elemOffset.left,
width: ReactDOM.findDOMNode(this).offsetWidth,
},
});
}
@ -88,6 +89,7 @@ export default class Affix extends React.Component {
position: 'fixed',
bottom: offsetBottom,
left: elemOffset.left,
width: ReactDOM.findDOMNode(this).offsetWidth,
},
});
}

4
components/badge/ScrollNumber.jsx
View File

@ -1,6 +1,6 @@
import React, { createElement } from 'react';
import { findDOMNode } from 'react-dom';
import { isCssAnimationSupported } from 'css-animation';
import isCssAnimationSupported from '../util/isCssAnimationSupported';
function getNumberArray(num) {
return num ?
@ -38,7 +38,7 @@ export default class ScrollNumber extends React.Component {
}
componentDidMount() {
if (!isCssAnimationSupported) {
if (!isCssAnimationSupported()) {
findDOMNode(this).className += ' not-support-css-animation';
}
}

2
components/button/index.en-US.md
View File

@ -6,7 +6,7 @@ title: Button
To trigger an operation.
## Occasion
## When To Use
A button means an operation(or a series of operations). Click a button will trigger corresponding business logic.

2
components/checkbox/index.jsx
View File

@ -17,7 +17,7 @@ export default class Checkbox extends React.Component {
return (
<label className={classString} style={style}>
<RcCheckbox {...restProps} prefixCls={prefixCls} children={null} />
{children ? <span>{children}</span> : null}
{children !== undefined ? <span>{children}</span> : null}
</label>
);
}

1
components/form/demo/input-group.md
View File

@ -23,6 +23,7 @@ ReactDOM.render(
<FormItem
label="标签输入框："
labelCol={{ span: 6 }}
validateStatus="success"
wrapperCol={{ span: 16 }}>
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2" />
</FormItem>

51
components/form/index.md
View File

@ -44,11 +44,11 @@ english: Form
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|-------|
| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可 | object | 无 |
| horizontal | 水平排列布局 | boolean | false |
| inline | 行内排列布局 | boolean | false |
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
| prefixCls | 样式类名，默认为 ant-form，通常您不需要设置 | string | 'ant-form' |
| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可 | object | 无 |
| horizontal | 水平排列布局 | boolean | false |
| inline | 行内排列布局 | boolean | false |
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
| prefixCls | 样式类名，默认为 ant-form，通常您不需要设置 | string | 'ant-form' |
### Form.create(options)
@ -102,36 +102,35 @@ CustomizedForm = Form.create({})(CustomizedForm);
| options.rules | 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) | array | |
| options.onXXX | 由于 `getFieldProps` 会占用 `onChange` 等事件（即你所设置的 `trigger` `validateTrigger`），所以如果仍需绑定事件，请在 `options` 内设置 | function | 无 |
### Form.Item
> 一个 Form.Item 建议只放一个 child，有多个 child 时，`help` `required` `validateStatus` 无法自动生成。
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| label | label 标签的文本 | string | | |
| labelCol | label 标签布局，通 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` | object | | |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | object | | |
| help | 提示信息，如不设置，则会根据校验规则自动生成 | string | | |
| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string | | |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | bool | | false |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成 | string | 'success' 'warning' 'error' 'validating' | |
| hasFeedback | 配合 validateStatus 属性使用，是否展示校验状态图标 | bool | | false |
| prefixCls | 样式类名，默认为 ant-form，通常您不需要设置 | string | | 'ant-form' |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|------------------------------------------|-----------|-------|--------|
| label | label 标签的文本 | string | | |
| labelCol | label 标签布局，通 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` | object | | |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | object | | |
| help | 提示信息，如不设置，则会根据校验规则自动生成 | string | | |
| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string | | |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | bool | | false |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成 | string | 'success' 'warning' 'error' 'validating' | |
| hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | bool | | false |
| prefixCls | 样式类名，默认为 ant-form，通常您不需要设置 | string | | 'ant-form' |
### Input
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| type | 【必须】声明 input 类型，同原生 input 标签的 type 属性 | string | | 'text' |
| id | id | number 或 string | | |
| value | value 值 | any | | |
| defaultValue | 设置初始默认值 | any | | |
| size | 控件大小，默认值为 default 。注：标准表单内的输入框大小限制为 large。 | string | {'large','default','small'} | 'default' |
| disabled | 是否禁用状态，默认为 false | bool | | false |
| addonBefore | 带标签的 input，设置前置标签 | node | | |
| addonAfter | 带标签的 input，设置后置标签 | node | | |
| onPressEnter | 按下回车的回调 | function(e) | | |
| type | 【必须】声明 input 类型，同原生 input 标签的 type 属性 | string | | 'text' |
| id | id | number 或 string | | |
| value | value 值 | any | | |
| defaultValue | 设置初始默认值 | any | | |
| size | 控件大小，默认值为 default 。注：标准表单内的输入框大小限制为 large。 | string | {'large','default','small'} | 'default' |
| disabled | 是否禁用状态，默认为 false | bool | | false |
| addonBefore | 带标签的 input，设置前置标签 | node | | |
| addonAfter | 带标签的 input，设置后置标签 | node | | |
| onPressEnter | 按下回车的回调 | function(e) | | |
> 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。

44
components/form/style/index.less
View File

@ -27,11 +27,6 @@ label {
color: @label-required-color;
}
//== Style for input-group: input with label, with button or dropdown...
.ant-input-group {
.input-group(~"ant-input");
}
// Radio && Checkbox
input[type="radio"],
input[type="checkbox"] {
@ -41,6 +36,7 @@ input[type="checkbox"] {
cursor: @cursor-disabled;
}
}
// These classes are used directly on <label>s
.ant-radio-inline,
.ant-radio-vertical,
@ -201,40 +197,6 @@ form {
}
}
.ant-search-input-wrapper {
display: inline-block;
vertical-align: middle;
}
.ant-search-input {
&.ant-input-group .ant-input:first-child {
border-radius: @border-radius-base;
position: absolute;
top: -1px;
}
.ant-search-btn {
.btn-default;
border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
left: -1px;
position: relative;
border-width: 0 0 0 1px;
z-index: 2;
padding-left: 8px;
padding-right: 8px;
&:hover {
border-color: @border-color-base;
}
form & {
padding-top: 6px;
padding-bottom: 6px;
}
}
&&-focus .ant-search-btn-noempty,
&:hover .ant-search-btn-noempty {
.btn-primary;
}
}
// Form layout
//== Horizontal Form
.@{form-prefix-cls}-horizontal {
@ -302,9 +264,10 @@ form {
position: absolute;
top: 0;
right: 0;
visibility: visible;
font-family: "anticon" !important;
.square(@input-height-lg);
line-height: @input-height-lg;
line-height: @input-height-lg + 2;
text-align: center;
font-size: 14px;
animation: zoomIn .3s @ease-out-back;
@ -330,7 +293,6 @@ form {
}
.has-success {
.form-control-validation(@success-color; @input-hover-border-color;);
.ant-input {
border-color: @input-border-color;
box-shadow: none;

4
components/icon/index.md
View File

@ -41,7 +41,7 @@ english: Icon
```__react
import IconSet from '../../site/component/IconSet';
const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrow-salt', 'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'caret-circle-right', 'caret-circle-left', 'caret-circle-o-right', 'caret-circle-o-left', 'circle-right', 'circle-left', 'circle-o-right', 'circle-o-left', 'double-right', 'double-left', 'verticle-right', 'verticle-left', 'forward', 'backward', 'rollback', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-right', 'arrow-up', 'arrow-down', 'arrow-left', 'play-circle', 'play-circle-o', 'circle-up', 'circle-down', 'circle-o-up', 'circle-o-down', 'caret-circle-o-up', 'caret-circle-o-down', 'caret-circle-up', 'caret-circle-down'];
const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrow-salt', 'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'caret-circle-right', 'caret-circle-left', 'caret-circle-o-right', 'caret-circle-o-left', 'circle-right', 'circle-left', 'circle-o-right', 'circle-o-left', 'double-right', 'double-left', 'verticle-right', 'verticle-left', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-right', 'arrow-up', 'arrow-down', 'arrow-left', 'play-circle', 'play-circle-o', 'circle-up', 'circle-down', 'circle-o-up', 'circle-o-down', 'caret-circle-o-up', 'caret-circle-o-down', 'caret-circle-up', 'caret-circle-down'];
ReactDOM.render(<IconSet className="icons" icons={icons1} key="icons1" />, mountNode);
```
@ -57,7 +57,7 @@ ReactDOM.render(<IconSet className="icons" icons={icons2} key="icons2" />, mount
### 三. 网站通用图标
```__react
const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore-o', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'heart-o', 'heart', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o', 'calculator'];
const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf','file-excel', 'file-jpg', 'file-ppt', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore-o', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'heart-o', 'heart', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o', 'calculator', 'pushpin', 'pushpin-o'];
ReactDOM.render(<IconSet className="icons" icons={icons3} key="icons3" />, mountNode);
```

5
components/input/style/index.less
View File

@ -7,3 +7,8 @@
.ant-input {
.input;
}
//== Style for input-group: input with label, with button or dropdown...
.ant-input-group {
.input-group(~"ant-input");
}

2
components/input/style/mixin.less
View File

@ -138,7 +138,7 @@
}
&-wrap > * {
display: block;
display: block !important;
}
.@{inputClass} {

2
components/menu/index.jsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import RcMenu, { Item, Divider, SubMenu, ItemGroup } from 'rc-menu';
import animation from '../common/openAnimation';
import animation from '../util/openAnimation';
function noop() {
}

4
components/spin/index.jsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import { isCssAnimationSupported } from 'css-animation';
import isCssAnimationSupported from '../util/isCssAnimationSupported';
import warning from 'warning';
export default class Spin extends React.Component {
@ -29,7 +29,7 @@ export default class Spin extends React.Component {
componentDidMount() {
warning(!('spining' in this.props), '`spining` property of Popover is a spell mistake, use `spinning` instead.');
if (!isCssAnimationSupported) {
if (!isCssAnimationSupported()) {
// Show text in IE8/9
findDOMNode(this).className += ` ${this.props.prefixCls}-show-text`;
}

2
components/style/core/base.less
View File

@ -1,4 +1,4 @@
@import "~normalize.css/normalize.css";
@import (inline) "~normalize.css/normalize.css";
* {
box-sizing: border-box;

9
components/style/core/iconfont.less
View File

@ -84,6 +84,11 @@
.@{iconfont-css-prefix}-filter:before {content:"\e66f";}
.@{iconfont-css-prefix}-file-text:before {content:"\e66c";}
.@{iconfont-css-prefix}-file:before {content:"\e66b";}
.@{iconfont-css-prefix}-file-unknown:before {content:"\e6a6";}
.@{iconfont-css-prefix}-file-excel:before {content:"\e6ac";}
.@{iconfont-css-prefix}-file-pdf:before {content:"\e6ab";}
.@{iconfont-css-prefix}-file-jpg:before {content:"\e6aa";}
.@{iconfont-css-prefix}-file-ppt:before {content:"\e6a7";}
.@{iconfont-css-prefix}-exception:before {content:"\e66a";}
.@{iconfont-css-prefix}-export:before {content:"\e669";}
.@{iconfont-css-prefix}-desktop:before {content:"\e662";}
@ -135,6 +140,7 @@
.@{iconfont-css-prefix}-verticle-right:before {content:"\e62c";}
.@{iconfont-css-prefix}-verticle-left:before {content:"\e62b";}
.@{iconfont-css-prefix}-rollback:before {content:"\e62a";}
.@{iconfont-css-prefix}-enter:before {content:"\e6b6";}
.@{iconfont-css-prefix}-retweet:before {content:"\e627";}
.@{iconfont-css-prefix}-shrink:before {content:"\e628";}
.@{iconfont-css-prefix}-arrow-salt:before {content:"\e629";}
@ -183,10 +189,11 @@
.@{iconfont-css-prefix}-pay-circle:before {content:"\e6a8";}
.@{iconfont-css-prefix}-pay-circle-o:before {content:"\e6a9";}
.@{iconfont-css-prefix}-message:before {content:"\e6a4";}
.@{iconfont-css-prefix}-file-unknown:before {content:"\e6a6";}
.@{iconfont-css-prefix}-heart:before {content:"\e68c";}
.@{iconfont-css-prefix}-heart-o:before {content:"\e6b0";}
.@{iconfont-css-prefix}-calculator:before {content:"\e6b1";}
.@{iconfont-css-prefix}-pushpin:before {content:"\e6b5";}
.@{iconfont-css-prefix}-pushpin-o:before {content:"\e6b3";}
.@{iconfont-css-prefix}-loading:before {
display: inline-block;
animation: loadingCircle 1s infinite linear;

2
components/style/themes/default.less
View File

@ -19,7 +19,7 @@
// ICONFONT
@iconfont-css-prefix : anticon;
@icon-url : "https://at.alicdn.com/t/font_1461567603_8950496";
@icon-url : "https://at.alicdn.com/t/font_1463992151_360388";
// LINK
@link-color : #2db7f5;

3
components/table/index.jsx
View File

@ -505,6 +505,9 @@ export default class Table extends React.Component {
className: 'ant-table-selection-column',
};
}
if (columns.some(column => column.fixed === 'left' || column.fixed === true)) {
selectionColumn.fixed = 'left';
}
if (columns[0] && columns[0].key === 'selection-column') {
columns[0] = selectionColumn;
} else {

4
components/table/style/index.less
View File

@ -373,10 +373,6 @@
overflow-y: scroll;
}
&-fixed {
table-layout: fixed;
}
&-fixed-left,
&-fixed-right {
position: absolute;

4
components/tree-select/index.md
View File

@ -39,7 +39,7 @@ english: TreeSelect
| filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | bool/Function(inputValue:string, treeNode:TreeNode) (函数需要返回bool值) | Function |
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | String | 'value' |
| treeNodeLabelProp | 作为显示的prop设置 | String | 'title' |
| treeData | treeNodes数据，如果设置则不需要手动构造TreeNode节点（如果value在整个树范围内不唯一，需要设置`key`其值为整个树范围内的唯一id | array<{value, label, children}> | [] |
| treeData | treeNodes数据，如果设置则不需要手动构造TreeNode节点（value在整个树范围内唯一）| array<{value, label, children, [disabled]}> | [] |
|treeDataSimpleMode | 使用简单格式的treeData，具体设置参考可设置的类型 (此时treeData应变为这样的数据结构: [{"id":1, "pId":0, "label":"test1"},...], `pId`是父节点的id) | bool/object{id:'id', pId:'pId', rootPId:null} | false |
| loadData | 异步加载数据 | function(node) | - |
@ -50,6 +50,6 @@ english: TreeSelect
|-----------|------------------------------------------|------------|--------|
| disabled | 是否禁用 | Boolean | false |
| key | 此项必须设置（其值在整个树范围内唯一） | String | - |
| value | 默认根据此属性值进行筛选 | String | - |
| value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | String | - |
| title | 树节点显示的内容 | String/element | '---' |
| isLeaf | 是否是叶子节点 | bool | false |

2
components/tree/index.jsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import RcTree from 'rc-tree';
import animation from '../common/openAnimation';
import animation from '../util/openAnimation';
export default class Tree extends React.Component {
static TreeNode = RcTree.TreeNode;

2
components/upload/demo/beforeUpload.md
View File

@ -5,6 +5,8 @@ title: 限制用户上传的文件
可以通过 `beforeUpload` 在文件上传之前进行干预，如限制用户只能上传 JPG 文件。
也支持异步检查，`beforeUpload` 的返回值可以是一个 Promise：[示例](http://react-component.github.io/upload/examples/beforeUpload.html)。
````jsx
import { Upload, Button, Icon, message } from 'antd';

40
components/upload/uploadList.jsx
View File

@ -6,11 +6,9 @@ import Progress from '../progress';
import classNames from 'classnames';
// https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
const previewFile = function (file, callback) {
const previewFile = (file, callback) => {
const reader = new FileReader();
reader.onloadend = function () {
callback(reader.result);
};
reader.onloadend = () => callback(reader.result);
reader.readAsDataURL(file);
};
@ -70,10 +68,14 @@ export default class UploadList extends React.Component {
icon = <Icon className={`${prefixCls}-list-item-thumbnail`} type="picture" />;
}
} else {
icon = (<a className={`${prefixCls}-list-item-thumbnail`}
onClick={(e) => this.handlePreview(file, e)}
href={file.url}
target="_blank"><img src={file.thumbUrl || file.url} alt={file.name} /></a>
icon = (
<a
className={`${prefixCls}-list-item-thumbnail`}
onClick={e => this.handlePreview(file, e)}
href={file.url}
target="_blank">
<img src={file.thumbUrl || file.url} alt={file.name} />
</a>
);
}
}
@ -93,14 +95,28 @@ export default class UploadList extends React.Component {
<div className={infoUploadingClass} key={file.uid}>
<div className={`${prefixCls}-list-item-info`}>
{icon}
{file.url
? <a onClick={(e) => this.handlePreview(file, e)} href={file.url} target="_blank" className={`${prefixCls}-list-item-name`}>{file.name}</a>
: <span className={`${prefixCls}-list-item-name`}>{file.name}</span>}
{
file.url
? (
<a
onClick={(e) => this.handlePreview(file, e)}
href={file.url} target="_blank"
className={`${prefixCls}-list-item-name`}>
{file.name}
</a>
) : <span className={`${prefixCls}-list-item-name`}>{file.name}</span>
}
{
this.props.listType === 'picture-card' && file.status !== 'uploading'
? (
<span>
<a onClick={(e) => this.handlePreview(file, e)} href={file.url} target="_blank" style={{ pointerEvents: file.url ? '' : 'none' }}><Icon type="eye-o" /></a>
<a
onClick={(e) => this.handlePreview(file, e)}
href={file.url}
target="_blank"
style={{ pointerEvents: file.url ? '' : 'none' }}>
<Icon type="eye-o" />
</a>
<Icon type="delete" onClick={() => this.handleClose(file)} />
</span>
) : <Icon type="cross" onClick={() => this.handleClose(file)} />

24
components/util/isCssAnimationSupported.js Normal file
View File

@ -0,0 +1,24 @@
let animation;
function isCssAnimationSupported() {
if (animation !== undefined) {
return animation;
}
const domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
const elm = document.createElement('div');
if (elm.style.animationName !== undefined) {
animation = true;
}
if (animation !== undefined) {
for (let i = 0; i < domPrefixes.length; i++) {
if (elm.style[`${domPrefixes[i]}AnimationName`] !== undefined) {
animation = true;
break;
}
}
}
animation = animation || false;
return animation;
}
export default isCssAnimationSupported;

0
components/common/openAnimation.js → components/util/openAnimation.js
View File

55
docs/react/getting-started.md
View File

@ -7,6 +7,8 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
---
在开始之前，推荐先学习 [React](http://facebook.github.io/react/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)。
## 第一个例子
最简单的试用方式参照以下 CodePen 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。
@ -34,44 +36,49 @@ $ npm install antd-init -g
```bash
$ mkdir antd-demo && cd antd-demo
$ antd-init
$ npm install
$ antd-init --type plain-react
```
若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`.
antd-init 会自动安装 npm 依赖，若有问题则可自行安装。
若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`。
### 3. 使用组件
编辑 `src/component/App.jsx`，用 React 的方式直接使用 Ant Design React 的组件。
脚手架会生成一个 Todo 应用实例（一个很有参考价值的 React 上手示例），先不管它，我们用来测试组件。
直接用下面的代码替换 `src/entries/index.js` 的内容，用 React 的方式直接使用 antd 组件。
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, message } from 'antd';
const App = React.createClass({
getInitialState() {
return {
date: ''
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
date: '',
};
},
handleChange(value) {
message.info('您选择的日期是: ' + value.toString());
this.setState({
date: value
});
},
render() {
return <div style={{width: 400, margin: '100px auto'}}>
<DatePicker onChange={this.handleChange} />
<div style={{marginTop: 20}}>当前日期：{this.state.date.toString()}</div>
</div>;
}
});
handleChange(date) {
message.info('您选择的日期是: ' + date.toString());
this.setState({ date });
}
render() {
return (
<div style={{ width: 400, margin: '100px auto' }}>
<DatePicker onChange={value => this.handleChange(value)} />
<div style={{ marginTop: 20 }}>当前日期：{this.state.date.toString()}</div>
</div>
);
}
}
export default App;
ReactDOM.render(<App />, document.getElementById('root'));
```
你可以在 [这里](/components/button) 选用更多组件。
> 你可以在左侧菜单选用更多组件。
### 4. 开发调试
@ -95,7 +102,7 @@ $ npm run build
Ant Design React 支持所有的现代浏览器和 IE8+。
对于 IE8，需要提供 [es5-shim](http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills) 等 Polyfills 的支持。
对于 IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html) 版本，并提供 [es5-shim](http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills) 等 Polyfills 的支持。
<div class="code-line-highlight"></div>

4
package.json
View File

@ -36,7 +36,6 @@
"dependencies": {
"array-tree-filter": "~1.0.0",
"classnames": "~2.2.0",
"css-animation": "~1.2.3",
"gregorian-calendar": "~4.1.0",
"gregorian-calendar-format": "~4.1.0",
"normalize.css": "^4.1.1",
@ -72,7 +71,7 @@
"warning": "~2.1.0"
},
"devDependencies": {
"antd-tools": "^0.7.0",
"antd-tools": "^0.8.0",
"babel-eslint": "^6.0.2",
"babel-jest": "^12.0.2",
"babel-plugin-antd": "^0.4.0",
@ -120,6 +119,7 @@
"clean": "antd-tools run clean",
"start": "antd-tools run start",
"site": "antd-tools run site",
"pre-deploy": "cp CNAME _site && rsync -R components/*/demo/*.json _site",
"deploy": "antd-tools run update-self && antd-tools run deploy",
"just-deploy": "antd-tools run just-deploy",
"lint": "npm run srclint && npm run demolint && npm run lesshint",

1
scripts/prepub.js
View File

@ -3,7 +3,6 @@
/* eslint-disable */
'use strict';
// Build a entry less file to dist/antd.less
var fs = require('fs');
var path = require('path');

2
site/common/styles/markdown.less
View File

@ -178,7 +178,7 @@
}
.markdown.api-container table {
font-family: consolas;
font-family: Consolas, Menlo, Courier, monospace;
font-size: 13px;
}

7
site/component/NotFound/index.less
View File

@ -6,7 +6,12 @@
background-attachment: fixed;
background-position: center;
background-size: 100%;
position: relative;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
section {
position: absolute;