mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-29 21:59:41 +08:00
Code Issues Actions 33 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
afc163 2016-09-13 23:03:00 +08:00
commit 36c3be20b7
58 changed files with 316 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/alert/index.tsx
View File

@ -4,7 +4,7 @@ import Animate from 'rc-animate';
import Icon from '../icon';
import classNames from 'classnames';
interface AlertProps {
export interface AlertProps {
/**
* Type of Alert styles, options:`success`, `info`, `warning`, `error`
*/

43
components/back-top/index.tsx
View File

@ -3,7 +3,31 @@ import Animate from 'rc-animate';
import Icon from '../icon';
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import classNames from 'classnames';
import omit from 'object.omit';
import omit from 'omit.js';
const reqAnimFrame = (() => {
if (window.requestAnimationFrame) {
return window.requestAnimationFrame;
}
const a = ['moz', 'ms', 'webkit'];
const raf = a.filter(key => `${key}RequestAnimationFrame` in window);
return raf[0] ? window[`${raf[0]}RequestAnimationFrame`] :
((callback) => window.setTimeout(callback, 1000 / 60));
})();
const currentScrollTop = () => {
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
};
const easeInOutCubic = (t, b, c, d) => {
const cc = c - b;
t /= d / 2;
if (t < 1) {
return cc / 2 * t * t * t + b;
} else {
return cc / 2 * ((t -= 2) * t * t + 2) + b;
}
};
function getScroll(target, top) {
if (typeof window === 'undefined') {
@ -23,7 +47,7 @@ function getScroll(target, top) {
return ret;
}
interface BackTopProps {
export interface BackTopProps {
visibilityHeight?: number;
onClick?: (event) => void;
target?: () => HTMLElement | Window;
@ -52,10 +76,17 @@ export default class BackTop extends React.Component<BackTopProps, any> {
}
scrollToTop = (e) => {
if (e) {
e.preventDefault();
}
this.setScrollTop(0);
const scrollTop = currentScrollTop();
const startTime = Date.now();
const frameFunc = () => {
const timestamp = Date.now();
const time = timestamp - startTime;
this.setScrollTop(easeInOutCubic(time, scrollTop, 0, 450));
if (time < 450) {
reqAnimFrame(frameFunc);
}
};
reqAnimFrame(frameFunc);
this.props.onClick(e);
}

2
components/badge/ScrollNumber.tsx
View File

@ -3,7 +3,7 @@ import { createElement, Component } from 'react';
import {findDOMNode} from 'react-dom';
import isCssAnimationSupported from '../_util/isCssAnimationSupported';
import assign from 'object-assign';
import omit from 'object.omit';
import omit from 'omit.js';
function getNumberArray(num) {
return num ?

2
components/badge/demo/status.md
View File

@ -18,7 +18,7 @@ import { Badge } from 'antd';
ReactDOM.render(
<div>
<div>Status: &nbsp;</div>
<span>Status: &nbsp;</span>
<Badge status="success" />
<Badge status="error" />
<Badge status="default" />

2
components/badge/index.tsx
View File

@ -3,7 +3,7 @@ import Animate from 'rc-animate';
import ScrollNumber from './ScrollNumber';
import classNames from 'classnames';
interface BadgeProps {
export interface BadgeProps {
/** Number to show in badge */
count: number | string;
/** Max count to show */

2
components/breadcrumb/BreadcrumbItem.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import splitObject from '../_util/splitObject';
interface BreadcrumbItemProps {
export interface BreadcrumbItemProps {
separator?: React.ReactNode;
href?: string;
}

4
components/button/button-group.tsx
View File

@ -4,9 +4,9 @@ import splitObject from '../_util/splitObject';
const prefix = 'ant-btn-group-';
type ButtonSize = 'small' | 'large'
export type ButtonSize = 'small' | 'large'
interface ButtonGroupProps {
export interface ButtonGroupProps {
size?: ButtonSize;
style?: React.CSSProperties;
className?: string;

8
components/button/button.tsx
View File

@ -24,11 +24,11 @@ function insertSpace(child) {
return child;
}
type ButtonType = 'primary' | 'ghost' | 'dashed'
type ButtonShape = 'circle' | 'circle-outline'
type ButtonSize = 'small' | 'large'
export type ButtonType = 'primary' | 'ghost' | 'dashed'
export type ButtonShape = 'circle' | 'circle-outline'
export type ButtonSize = 'small' | 'large'
interface ButtonProps {
export interface ButtonProps {
type?: ButtonType;
htmlType?: string;
icon?: string;

2
components/button/demo/icon.md
View File

@ -23,7 +23,7 @@ import { Button } from 'antd';
ReactDOM.render(
<div>
<Button type="primary" shape="circle" icon="search" />
<Button type="primary" icon="search">搜索</Button>
<Button type="primary" icon="search">Search</Button>
<br />
<Button type="ghost" shape="circle-outline" icon="search" />
<Button type="ghost" icon="search">Search</Button>

2
components/calendar/index.tsx
View File

@ -16,7 +16,7 @@ function zerofixed(v) {
return `${v}`;
}
interface CalendarContext {
export interface CalendarContext {
antLocale?: {
Calendar?: any
};

2
components/card/index.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import classNames from 'classnames';
import splitObject from '../_util/splitObject';
interface CardProps {
export interface CardProps {
title?: React.ReactNode;
extra?: React.ReactNode;
bordered?: boolean;

14
components/cascader/demo/basic.md
View File

@ -18,24 +18,24 @@ import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: '浙江',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: '杭州',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: '西湖',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: '江苏',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: '南京',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: '中华门',
label: 'Zhong Hua Men',
}],
}],
}];
@ -45,6 +45,6 @@ function onChange(value) {
}
ReactDOM.render(
<Cascader options={options} onChange={onChange} placeholder="请选择地区" />
<Cascader options={options} onChange={onChange} placeholder="Please select" />
, mountNode);
````

12
components/cascader/demo/change-on-select.md
View File

@ -18,24 +18,24 @@ import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: '浙江',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: '杭州',
label: 'Hanzhou',
children: [{
value: 'xihu',
label: '西湖',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: '江苏',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: '南京',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: '中华门',
label: 'Zhong Hua Men',
}],
}],
}];

14
components/cascader/demo/custom-render.md
View File

@ -18,25 +18,25 @@ import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: '浙江',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: '杭州',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: '西湖',
label: 'West Lake',
code: 752100,
}],
}],
}, {
value: 'jiangsu',
label: '江苏',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: '南京',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: '中华门',
label: 'Zhong Hua Men',
code: 453400,
}],
}],
@ -44,7 +44,7 @@ const options = [{
function handleAreaClick(e, label, option) {
e.stopPropagation();
console.log('点击了', label, option);
console.log('clicked', label, option);
}
const displayRender = (labels, selectedOptions) => labels.map((label, i) => {

12
components/cascader/demo/default-value.md
View File

@ -18,24 +18,24 @@ import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: '浙江',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: '杭州',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: '西湖',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: '江苏',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: '南京',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: '中华门',
label: 'Zhong Hua Men',
}],
}],
}];

12
components/cascader/demo/disabled-option.md
View File

@ -18,25 +18,25 @@ import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: '浙江',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: '杭州',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: '西湖',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: '江苏',
label: 'Jiangsu',
disabled: true,
children: [{
value: 'nanjing',
label: '南京',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: '中华门',
label: 'Zhong Hua Men',
}],
}],
}];

14
components/cascader/demo/hover.md
View File

@ -18,24 +18,24 @@ import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: '浙江',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: '杭州',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: '西湖',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: '江苏',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: '南京',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: '中华门',
label: 'Zhong Hua Men',
}],
}],
}];
@ -44,7 +44,7 @@ function onChange(value) {
console.log(value);
}
// 只展示最后一项
// Just show the latest item.
function displayRender(label) {
return label[label.length - 1];
}

23
components/cascader/demo/search.md
View File

@ -18,24 +18,24 @@ import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: '浙江',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: '杭州',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: '西湖',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: '江苏',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: '南京',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: '中华门',
label: 'Zhong Hua men',
}],
}],
}];
@ -45,6 +45,13 @@ function onChange(value) {
}
ReactDOM.render(
<Cascader options={options} onChange={onChange} placeholder="请选择地区" showSearch />
, mountNode);
<Cascader
options={options}
onChange={onChange}
placeholder="Please select"
style={{ width: 230 }}
showSearch
/>,
mountNode
);
````

12
components/cascader/demo/size.md
View File

@ -18,24 +18,24 @@ import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: '浙江',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: '杭州',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: '西湖',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: '江苏',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: '南京',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: '中华门',
label: 'Zhong Hua Men',
}],
}],
}];

2
components/cascader/index.tsx
View File

@ -5,7 +5,7 @@ import Icon from '../icon';
import arrayTreeFilter from 'array-tree-filter';
import classNames from 'classnames';
import splitObject from '../_util/splitObject';
import omit from 'object.omit';
import omit from 'omit.js';
export interface CascaderOptionType {
value: string;

2
components/checkbox/demo/check-all.md
View File

@ -37,7 +37,7 @@ const App = React.createClass({
onChange={this.onCheckAllChange}
checked={this.state.checkAll}
>
全选
Check all
</Checkbox>
</div>
<br />

2
components/date-picker/index.en-US.md
View File

@ -25,8 +25,6 @@ moment.tz.setDefault('Aisa/Shanghai');
<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
```
> Note: `Datepicker` is renamed to `DatePicker` after `0.11`.
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | [moment](http://momentjs.com/) | - |

4
components/date-picker/index.tsx
View File

@ -9,7 +9,7 @@ import RangePicker from './RangePicker';
import Calendar from './Calendar';
import { TimePickerProps } from '../time-picker';
interface PickerProps {
export interface PickerProps {
format?: string;
disabled?: boolean;
style?: React.CSSProperties;
@ -19,7 +19,7 @@ interface PickerProps {
getCalendarContainer?: (trigger) => React.ReactNode;
}
interface SinglePickerProps {
export interface SinglePickerProps {
value?: moment.Moment;
defaultValue?: moment.Moment;
defaultPickerValue?: moment.Moment;

4
components/form/Form.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import { PropTypes } from 'react';
import classNames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import omit from 'object.omit';
import omit from 'omit.js';
import warning from 'warning';
import assign from 'object-assign';
import FormItem from './FormItem';
@ -70,7 +70,7 @@ export interface FormComponentProps {
form: WrappedFormUtils;
}
class FormComponent extends React.Component<FormComponentProps, {}> {
export class FormComponent extends React.Component<FormComponentProps, {}> {
}
export interface ComponentDecorator {

2
components/form/FormItem.tsx
View File

@ -120,7 +120,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
return 'validating';
} else if (!!getFieldError(field)) {
return 'error';
} else if (getFieldValue(field) !== undefined) {
} else if (getFieldValue(field) !== undefined && getFieldValue(field) !== null) {
return 'success';
}
return '';

6
components/input/Input.tsx
View File

@ -3,7 +3,7 @@ import { Component, PropTypes } from 'react';
import classNames from 'classnames';
import calculateNodeHeight from './calculateNodeHeight';
import assign from 'object-assign';
import omit from 'object.omit';
import omit from 'omit.js';
function fixControlledValue(value) {
if (typeof value === 'undefined' || value === null) {
@ -27,7 +27,7 @@ function clearNextFrameAction(nextFrameId) {
}
}
interface AutoSizeType {
export interface AutoSizeType {
minRows?: number;
maxRows?: number;
};
@ -35,7 +35,7 @@ interface AutoSizeType {
export interface InputProps {
prefixCls?: string;
className?: string;
type: string;
type?: string;
id?: number | string;
value?: any;
defaultValue?: any;

2
components/input/demo/basic.md
View File

@ -16,5 +16,5 @@ Basic usage example
````jsx
import { Input } from 'antd';
ReactDOM.render(<Input placeholder="基本使用" />, mountNode);
ReactDOM.render(<Input placeholder="Basic usage" />, mountNode);
````

2
components/layout/col.tsx
View File

@ -7,7 +7,7 @@ import splitObject from '../_util/splitObject';
const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
interface ColSize {
export interface ColSize {
span?: number;
order?: number;
offset?: number;

4
components/menu/index.tsx
View File

@ -5,7 +5,7 @@ import animation from '../_util/openAnimation';
function noop() {
}
interface SelectParam {
export interface SelectParam {
key: string;
keyPath: Array<string>;
item: any;
@ -13,7 +13,7 @@ interface SelectParam {
selectedKeys: Array<string>;
}
interface ClickParam {
export interface ClickParam {
key: string;
keyPath: Array<string>;
item: any;

2
components/message/index.tsx
View File

@ -57,7 +57,7 @@ type ConfigContent = React.ReactNode;
type ConfigDuration = number;
type ConfigOnClose = () => void;
interface ConfigOptions {
export interface ConfigOptions {
top?: number;
duration?: number;
prefixCls?: string;

6
components/modal/demo/confirm-promise.md
View File

@ -23,9 +23,9 @@ function showConfirm() {
title: 'Are you sure you want to delete this item ?',
content: 'When clicked the OK button, this dialog will be closed after 1 second',
onOk() {
return new Promise((resolve) => {
setTimeout(resolve, 1000);
});
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
}).catch(() => console.log('Oops errors!'));
},
onCancel() {},
});

4
components/radio/demo/disable.md
View File

@ -30,9 +30,9 @@ const App = React.createClass({
render() {
return (
<div>
<Radio defaultChecked={false} disabled={this.state.disabled}>不可用</Radio>
<Radio defaultChecked={false} disabled={this.state.disabled}>Disabled</Radio>
<br />
<Radio defaultChecked disabled={this.state.disabled}>不可用</Radio>
<Radio defaultChecked disabled={this.state.disabled}>Disabled</Radio>
<div style={{ marginTop: 20 }}>
<Button type="primary" onClick={this.toggleDisabled}>
Toggle disabled

22
components/radio/demo/radiobutton.md
View File

@ -25,26 +25,26 @@ function onChange(e) {
ReactDOM.render(<div>
<div>
<RadioGroup onChange={onChange} defaultValue="a">
<RadioButton value="a">杭州</RadioButton>
<RadioButton value="b">上海</RadioButton>
<RadioButton value="c">北京</RadioButton>
<RadioButton value="d">成都</RadioButton>
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div style={{ marginTop: 16 }}>
<RadioGroup onChange={onChange} defaultValue="a">
<RadioButton value="a">杭州</RadioButton>
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b" disabled>上海</RadioButton>
<RadioButton value="c">北京</RadioButton>
<RadioButton value="d">成都</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div style={{ marginTop: 16 }}>
<RadioGroup disabled onChange={onChange} defaultValue="a">
<RadioButton value="a">杭州</RadioButton>
<RadioButton value="b">上海</RadioButton>
<RadioButton value="c">北京</RadioButton>
<RadioButton value="d">成都</RadioButton>
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
</div>, mountNode);

26
components/radio/demo/size.md
View File

@ -11,7 +11,7 @@ title:
## en-US
There are three kinds of combination, large medium and small. It can coordinate with input box.
There are three sizes available: large, medium, and small. It can coordinate with input box.
```jsx
import { Radio } from 'antd';
@ -21,26 +21,26 @@ const RadioGroup = Radio.Group;
ReactDOM.render(<div>
<div>
<RadioGroup defaultValue="a" size="large">
<RadioButton value="a">杭州</RadioButton>
<RadioButton value="b">上海</RadioButton>
<RadioButton value="c">北京</RadioButton>
<RadioButton value="d">成都</RadioButton>
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div style={{ marginTop: 16 }}>
<RadioGroup defaultValue="a">
<RadioButton value="a">杭州</RadioButton>
<RadioButton value="b">上海</RadioButton>
<RadioButton value="c">北京</RadioButton>
<RadioButton value="d">成都</RadioButton>
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div style={{ marginTop: 16 }}>
<RadioGroup defaultValue="a" size="small">
<RadioButton value="a">杭州</RadioButton>
<RadioButton value="b">上海</RadioButton>
<RadioButton value="c">北京</RadioButton>
<RadioButton value="d">成都</RadioButton>
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
</div>, mountNode);

4
components/select/demo/combobox.md
View File

@ -41,13 +41,13 @@ const Test = React.createClass({
this.setState({ options });
},
render() {
// filterOption 需要设置为 false，数据是动态设置的
// filterOption needs to be false，as the value is dynamically generated
return (
<Select combobox
style={{ width: 200 }}
onChange={this.handleChange}
filterOption={false}
placeholder="请输入账户名"
placeholder="Enter the account name"
>
{this.state.options}
</Select>

6
components/select/demo/coordinate.md
View File

@ -22,10 +22,10 @@ Using the [Cascader](/components/cascader) component is strongly recommended ins
import { Select } from 'antd';
const Option = Select.Option;
const provinceData = ['浙江', '江苏'];
const provinceData = ['Zhejiang', 'Jiangsu'];
const cityData = {
浙江: ['杭州', '宁波', '温州'],
江苏: ['南京', '苏州', '镇江'],
Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};
const App = React.createClass({

10
components/select/demo/search.md
View File

@ -22,14 +22,14 @@ function handleChange(value) {
ReactDOM.render(
<Select showSearch
style={{ width: 200 }}
placeholder="请选择人员"
placeholder="Select a person"
optionFilterProp="children"
notFoundContent="无法找到"
notFoundContent="Nothing found"
onChange={handleChange}
>
<Option value="jack">杰克</Option>
<Option value="lucy">露西</Option>
<Option value="tom">汤姆</Option>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>
, mountNode);
````

2
components/select/index.tsx
View File

@ -3,7 +3,7 @@ import { PropTypes } from 'react';
import RcSelect, { Option, OptGroup } from 'rc-select';
import classNames from 'classnames';
type SelectValue = string | string[] | Array<{ key: string, label: React.ReactNode }>;
export type SelectValue = string | string[] | Array<{ key: string, label: React.ReactNode }>;
export interface SelectProps {
prefixCls?: string;

4
components/slider/index.tsx
View File

@ -2,14 +2,14 @@ import * as React from 'react';
import { PropTypes } from 'react';
import RcSlider from 'rc-slider';
interface SliderMarks {
export interface SliderMarks {
[key: number]: React.ReactNode | {
style: React.CSSProperties,
label: React.ReactNode,
};
}
type SliderValue = number | [number, number];
export type SliderValue = number | [number, number];
export interface SliderProps {
range?: boolean;

10
components/spin/demo/tip.md
View File

@ -1,23 +1,23 @@
---
order: 4
title:
title:
zh-CN: 自定义描述文案
en-US: Customize description
en-US: Customized description
---
## zh-CN
自定义描述文案，指定的 tip 文案会直接代替 `...`。
自定义描述文案。
## en-US
Customize description content, specified tip content will replace the dots in `Spin`.
Customized description content.
````jsx
import { Spin, Alert } from 'antd';
ReactDOM.render(
<Spin tip="正在读取数据...">
<Spin tip="Loading...">
<Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info"

2
components/spin/index.tsx
View File

@ -4,7 +4,7 @@ import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import isCssAnimationSupported from '../_util/isCssAnimationSupported';
import splitObject from '../_util/splitObject';
import omit from 'object.omit';
import omit from 'omit.js';
export interface SpinProps {
prefixCls?: string;

6
components/table/Table.tsx
View File

@ -33,7 +33,7 @@ const defaultPagination = {
onShowSizeChange: noop,
};
interface TableRowSelection {
export interface TableRowSelection {
type?: 'checkbox' | 'radio';
selectedRowKeys?: string[];
onChange?: (selectedRowKeys: string[], selectedRows: Object[]) => any;
@ -42,7 +42,7 @@ interface TableRowSelection {
onSelectAll?: (selected: boolean, selectedRows: Object[], changeRows: Object[]) => any;
}
interface TableColumnConfig {
export interface TableColumnConfig {
title?: React.ReactNode;
key?: string;
dataIndex?: string;
@ -87,7 +87,7 @@ export interface TableProps {
childrenColumnName?: 'string';
}
interface TableContext {
export interface TableContext {
antLocale?: {
Table?: any,
};

4
components/tabs/index.tsx
View File

@ -4,8 +4,8 @@ import { cloneElement } from 'react';
import classNames from 'classnames';
import Icon from '../icon';
type TabsType = 'line' | 'card' | 'editable-card'
type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
export type TabsType = 'line' | 'card' | 'editable-card'
export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
export interface TabsProps {
activeKey?: string;

2
components/tag/index.tsx
View File

@ -4,7 +4,7 @@ import Animate from 'rc-animate';
import Icon from '../icon';
import classNames from 'classnames';
import splitObject from '../_util/splitObject';
import omit from 'object.omit';
import omit from 'omit.js';
export interface TagProps {
/** 标签是否可以关闭 */

2
components/tooltip/index.tsx
View File

@ -4,7 +4,7 @@ import RcTooltip from 'rc-tooltip';
import getPlacements from '../popover/placements';
import classNames from 'classnames';
type PopoverPlacement =
export type PopoverPlacement =
'top' | 'left' | 'right' | 'bottom' | 'topLeft' |
'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' |
'leftBottom' | 'rightTop' | 'rightBottom'

2
components/tree-select/interface.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
interface TreeData {
export interface TreeData {
key: string;
value: string;
label: React.ReactNode;

4
components/upload/interface.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed'
export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed'
export interface HttpRequestHeader {
[key: string]: string;
@ -18,7 +18,7 @@ export interface File {
originFileObj?: File;
}
interface UploadChangeParam {
export interface UploadChangeParam {
file: File;
fileList: Array<File>;
event?: { percent: number };

7
docs/practice/bussiness.en-US.md Normal file
View File

@ -0,0 +1,7 @@
---
order: 1
disabled: true
title: Business
---
TBD Content ...

0
docs/practice/bussiness.md → docs/practice/bussiness.zh-CN.md
View File

86
docs/practice/cases.en-US.md Normal file
View File

@ -0,0 +1,86 @@
---
order: 0
title: Cases
---
Ant Design is a design language for enterprise-like complex UIs.
Starting in April 2015, more and more products of Ant Financial follow Ant Design specification, covering multiple business lines and more than 40 systems.
Designed for enterprise-like complex UIs, used by both professional and non-professional designers,
Ant Design has a low learning curve that helps you getting started fast and achieve rapid results.
With a strong focus on proof-based design and user experience,
Ant Design provides a complete front-end development solution that can greatly enhance the design and development efficiency.
Currently, there are many products and sites using Ant Design.
References to some of these implementations can be found [here](https://github.com/ant-design/ant-design/issues/477).
If your solutions are using Ant Design, please leave us a message.
## Best Practices
---
### Financial Cloud
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/kBgLUfEwxlBdwUr.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/SeXqPPyixccDJBY.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
Cloud-oriented financial services, used by financial institutions that benefit from customized business cloud computing services.
It assists financial institutions to upgrade to a new financial restructuring, promotion of capacity platforms, data and technology.
<p><a class="outside-link" href="https://www.cloud.alipay.com/" target="_blank">Website</a></p>
---
### OceanBase Cloud Platform
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/JUAXPZYtVyUQfGu.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/lpzTKvgLpJgKGpq.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/GVJGaWbqfBFedWN.png">
OceanBase Cloud is a distributed relational database in a real sense, but OceanBase Cloud Platform is the OceanBase cloud-based database service that can help users quickly create and use OceanBase service.
<p><a class="outside-link internal" href="http://oceanbase.alipay.com/" target="_blank">Website</a></p>
---
### Service Experience Platform
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/PiSveQClPzmxPTy.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/vsoYArBwcPRZnVE.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/TMyfsUGQSjOdGIm.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/sBlmIcJXZdJTJbC.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/fRDuTjVbVApxyzU.png">
Experience Platform is used for collecting all the points of contact and information of the user (including microblogging and other channels).
Through data mining, it exposes the users's experience and it helps the company's internal business team / product managers, facilitating the experience problem solving, in order to achieve healthy functioning streams.
<p><a class="outside-link internal" href="http://tiyan.alipay.com/" target="_blank">Website</a></p>
---
### AntV
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/yWNVSFBhKsoShvi.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/nvJftlNzfzhVDVW.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/LugOCvzybKsmQCj.png">
AntV is a graphical library that is based on the work of a data group team
whose results of exploring data visualization were summarized
and shared them together with the required data visualization theory.
<p><a class="outside-link internal" href="https://antv.alipay.com/" target="_blank">Website</a></p>
<style>
.preview-image-boxes {
margin-top: -36px;
}
.preview-image-wrapper {
padding: 0;
background: #fff;
}
.toc {
display: none;
}
</style>

0
docs/practice/cases.md → docs/practice/cases.zh-CN.md
View File

4
docs/react/install.en-US.md
View File

@ -51,7 +51,7 @@ We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `antd/dis
- https://unpkg.com/antd@beta/dist/antd.min.js
- https://unpkg.com/antd@beta/dist/antd.min.css
> Here is an [example](https://github.com/ant-design/antd-init/tree/master/examples/build-antd-standalone) about how to build your own antd.js if you are using antd@<1.0.0.
> Here is an [example](https://github.com/ant-design/antd-init/tree/master/examples/build-antd-standalone) of how to build your own antd.js if you are using antd@<1.0.0.
## Development tool
@ -63,6 +63,6 @@ $ npm install antd-init -g
Inside an empty folder run `antd-init` to init.
You can explore the latest structure of scaffold [there]((https://github.com/ant-design/antd-init/tree/master/boilerplates)), it is a good habit to watch this repo to get the latest features.
You can explore the latest structure of scaffold [here](https://github.com/ant-design/antd-init/tree/master/boilerplates), it is a good habit to watch this repo to get the latest features.
> [More development tools](http://ant-tool.github.io/)。

22
docs/spec/principle.en-US.md
View File

@ -31,16 +31,16 @@ After referring to the summary and reasoning of design principles from The Non-D
</a>
</div>
#### Ant Design 十大设计原则
#### Ant Design Principles
- [亲密性 Proximity](/docs/spec/proximity)
- [对齐 Alignment](/docs/spec/alignment)
- [对比 Contrast](/docs/spec/contrast)
- [重复 Repetition](/docs/spec/repetition)
- [直截了当 Make it Direct](/docs/spec/direct)
- [简化交互 Keep it Lightweight](/docs/spec/lightweight)
- [足不出户 Stay on the Page](/docs/spec/stay)
- [提供邀请 Provide Invitation](/docs/spec/invitation)
- [巧用过渡 Use Transition](/docs/spec/transition)
- [即时反应 React Immediately](/docs/spec/reaction)
- [Proximity](/docs/spec/proximity)
- [Alignment](/docs/spec/alignment)
- [Contrast](/docs/spec/contrast)
- [Repetition](/docs/spec/repetition)
- [Make it Direct](/docs/spec/direct)
- [Keep it Lightweight](/docs/spec/lightweight)
- [Stay on the Page](/docs/spec/stay)
- [Provide Invitation](/docs/spec/invitation)
- [Use Transition](/docs/spec/transition)
- [React Immediately](/docs/spec/reaction)

27
index.js
View File

@ -1,25 +1,34 @@
/* eslint no-console:0 */
// this file is not used if use https://github.com/ant-design/babel-plugin-antd
function camelCase(name) {
return name.charAt(0).toUpperCase() +
name.slice(1).replace(/-(\w)/g, (m, n) => n.toUpperCase());
name.slice(1).replace(/-(\w)/g, (m, n) => {
return n.toUpperCase();
});
}
var req = require.context('./components', true, /^\.\/[^_][\w-]+\/(style\/)?index\.tsx?$/);
const req = require.context('./components', true, /^\.\/[^_][\w-]+\/(style\/)?index\.tsx?$/);
req.keys().forEach((mod) => {
var v = req(mod);
let v = req(mod);
if (v && v.default) {
v = v.default;
}
var match = mod.match(/^\.\/([^_][\w-]+)\/index\.tsx?$/);
const match = mod.match(/^\.\/([^_][\w-]+)\/index\.tsx?$/);
if (match && match[1]) {
exports[camelCase(match[1])] = v;
if (match[1] === 'message' || match[1] === 'notification') {
// message & notification should not be capitalized
exports[match[1]] = v;
} else {
exports[camelCase(match[1])] = v;
}
}
});
if (typeof console !== 'undefined' && console.warn) {
console.warn('you are using prebuild antd,\
please use https://github.com/ant-design/babel-plugin-antd to reduce app bundle size.');
if (process.env.NODE_ENV !== 'production') {
if (typeof console !== 'undefined' && console.warn) {
console.warn(`You are using prebuilt antd,
please use https://github.com/ant-design/babel-plugin-antd to reduce app bundle size.`);
}
}

5
package.json
View File

@ -1,6 +1,6 @@
{
"name": "antd",
"version": "2.0.0-beta.0",
"version": "2.0.0-beta.2",
"title": "Ant Design",
"description": "An enterprise-class UI design language and React-based implementation",
"homepage": "http://ant.design/",
@ -40,7 +40,7 @@
"gregorian-calendar": "~4.1.0",
"gregorian-calendar-format": "~4.1.0",
"object-assign": "~4.1.0",
"object.omit": "^2.0.0",
"omit.js": "^0.1.0",
"rc-animate": "~2.3.0",
"rc-calendar": "^7.0.3",
"rc-cascader": "~0.10.1",
@ -86,6 +86,7 @@
"bisheng-plugin-description": "^0.1.1",
"bisheng-plugin-react": "^0.2.0",
"bisheng-plugin-toc": "^0.3.0",
"css-split-webpack-plugin": "^0.2.1",
"dora-plugin-upload": "^0.3.1",
"enquire.js": "^2.1.1",
"es6-shim": "^0.35.0",

2
site/bisheng.config.js
View File

@ -1,4 +1,5 @@
const path = require('path');
const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
function pickerGenerator(module) {
const tester = new RegExp(`^docs/${module}`);
@ -68,6 +69,7 @@ module.exports = {
site: path.join(process.cwd(), 'site'),
'react-router': 'react-router/umd/ReactRouter',
};
config.plugins.push(new CSSSplitWebpackPlugin({ imports: true }));
config.babel.plugins.push([
require.resolve('babel-plugin-transform-runtime'),

2
site/theme/template/Layout/Header.jsx
View File

@ -109,7 +109,7 @@ export default class Header extends React.Component {
const url = `/components/${pathSnippet}`;
const subtitle = meta.subtitle || meta.chinese;
return (
<Option value={url} key={url} data-label={`${(meta.title || meta.english).toLowerCase()} ${meta.subtitle || meta.chinese}`}>
<Option value={url} key={url} data-label={`${(meta.title || meta.english).toLowerCase()} ${subtitle || ''}`}>
<strong>{meta.title || meta.english}</strong>
{subtitle && <span className="ant-component-decs">{subtitle}</span>}
</Option>

4
custom-typings.d.ts → typings/custom-typings.d.ts vendored
View File

@ -67,8 +67,8 @@ declare module "object-assign" {
export default function(target: any, ...sources: any[]): any;
}
declare module "object.omit" {
export default function(target: any, ...sources: any[]): any;
declare module "omit.js" {
export default function(obj: Object, fields: string[]): any;
}
declare module 'rc-animate' {