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

This commit is contained in:
afc163 2016-09-08 17:05:14 +08:00
commit bf96362cea
16 changed files with 115 additions and 34 deletions

View File

@ -1,9 +1,8 @@
---
category: Components
chinese: 自动完成
type: Form Controls
cols: 1
english: AutoComplete
title: AutoComplete
---
Autocomplete function of input field.

View File

@ -0,0 +1,65 @@
---
order: 4
title:
zh-CN: 全选
en-US: Check all
---
## zh-CN
在实现全选效果时,你可能会用到 `indeterminate` 属性。
## en-US
The `indeterminate` property can help you to achieve a 'check all' effect.
````jsx
import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];
const App = React.createClass({
getInitialState() {
return {
checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,
};
},
render() {
return (
<div>
<div style={{ borderBottom: '1px solid #E9E9E9' }}>
<Checkbox
indeterminate={this.state.indeterminate}
onChange={this.onCheckAllChange}
checked={this.state.checkAll}
>
全选
</Checkbox>
</div>
<br />
<CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />
</div>
);
},
onChange(checkedList) {
this.setState({
checkedList,
indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
checkAll: checkedList.length === plainOptions.length,
});
},
onCheckAllChange(e) {
this.setState({
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
checkAll: e.target.checked,
});
},
});
ReactDOM.render(<App />, mountNode);
````

View File

@ -10,6 +10,8 @@ export interface CheckboxProps {
checked?: boolean;
/** 初始是否选中 */
defaultChecked?: boolean;
/** indeterminate 状态,只负责样式控制 */
indeterminate?: boolean;
/** 变化时回调函数 */
onChange?: React.FormEventHandler;
style?: React.CSSProperties;
@ -21,21 +23,30 @@ export default class Checkbox extends React.Component<CheckboxProps, any> {
static Group = CheckboxGroup;
static defaultProps = {
prefixCls: 'ant-checkbox',
indeterminate: false,
};
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
render() {
const [{ prefixCls, style, children, className }, restProps] = splitObject(
this.props, ['prefixCls', 'style', 'children', 'className']
const [{ prefixCls, style, children, className, indeterminate }, restProps] = splitObject(
this.props, ['prefixCls', 'style', 'children', 'className', 'indeterminate']
);
const classString = classNames({
[className]: !!className,
[`${prefixCls}-wrapper`]: true,
});
const checkboxClass = classNames({
[`${prefixCls}-indeterminate`]: indeterminate,
});
return (
<label className={classString} style={style}>
<RcCheckbox {...restProps} prefixCls={prefixCls} children={null} />
<RcCheckbox
{...restProps}
prefixCls={prefixCls}
className={checkboxClass}
children={null}
/>
{children !== undefined ? <span>{children}</span> : null}
</label>
);

View File

@ -21,6 +21,7 @@ english: Checkbox
| checked | 指定当前是否选中 | Boolean | false |
| defaultChecked | 初始是否选中 | Boolean | false |
| onChange | 变化时回调函数 | Function(e:Event) | - |
| indeterminate | 设置 indeterminate 状态,只负责样式控制 | Boolean | false |
### Checkbox Group

View File

@ -1,8 +1,7 @@
---
category: Components
chinese: 图标
type: Basic
english: Icon
title: Icon
toc: false
---

View File

@ -1,8 +1,7 @@
---
category: Components
chinese: 数字输入框
type: Form Controls
english: InputNumber
title: InputNumber
---
Enter a number within certain range with the mouse or keyboard.

View File

@ -1,8 +1,7 @@
---
category: Components
chinese: 输入框
type: Form Controls
english: Input
title: Input
---
A basic widget for getting the user input is a text field.

View File

@ -1,9 +1,8 @@
---
category: Components
chinese: 提及
cols: 1
type: Views
english: Mention
title: Mention
---
Mention component。

View File

@ -3,6 +3,7 @@ category: Components
cols: 1
type: Views
title: Table
subtitle: 表格
---
展示行列数据。

View File

@ -5,8 +5,7 @@ function pickerGenerator(module) {
return (markdownData) => {
const filename = markdownData.meta.filename;
if (tester.test(filename) &&
!/\/demo$/.test(path.dirname(filename)) &&
!/\.en-US\.md/.test(filename)) {
!/\/demo$/.test(path.dirname(filename))) {
return {
meta: markdownData.meta,
};
@ -31,8 +30,7 @@ module.exports = {
components(markdownData) {
const filename = markdownData.meta.filename;
if (!/^components/.test(filename) ||
/\/demo$/.test(path.dirname(filename)) ||
/\.en-US\.md/.test(filename)) return;
/\/demo$/.test(path.dirname(filename))) return;
return {
meta: markdownData.meta,

View File

@ -11,6 +11,7 @@ module.exports = {
'app.header.menu.spec': 'Specification',
'app.header.menu.resource': 'Resource',
'app.header.lang': '中文',
'app.component.examples': 'Examples',
'app.home.slogan': 'One Design Language for UI',
'app.home.start': 'Getting Started',
'app.home.best-practice': 'Best Practice',

View File

@ -1,5 +1,6 @@
import React from 'react';
import DocumentTitle from 'react-document-title';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { Row, Col, Icon, Affix } from 'antd';
import { getChildren } from 'jsonml.js/lib/utils';
@ -97,7 +98,7 @@ export default class ComponentDoc extends React.Component {
)
}
<h2>
代码演示
<FormattedMessage id="app.component.examples" />
<Icon type="appstore" className={expandTriggerClass}
title="展开全部代码" onClick={this.handleExpandToggle}
/>

View File

@ -1,7 +1,7 @@
import React from 'react';
import { Tooltip, Icon } from 'antd';
const branchUrl = 'https://github.com/ant-design/ant-design/blob/1.x-stable/';
const branchUrl = 'https://github.com/ant-design/ant-design/blob/master/';
export default function EditButton({ title, filename }) {
return (

View File

@ -101,9 +101,12 @@ export default class MainContent extends React.Component {
const pathname = props.location.pathname;
const moduleName = /^components/.test(pathname) ?
'components' : pathname.split('/').slice(0, 2).join('/');
return moduleName === 'components' || moduleName === 'changelog' || moduleName === 'docs/react' ?
[...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog] :
props.picked[moduleName];
const moduleData = moduleName === 'components' || moduleName === 'changelog' || moduleName === 'docs/react' ?
[...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog] :
props.picked[moduleName];
const locale = this.context.intl.locale;
const excludedSuffix = locale === 'zh-CN' ? 'en-US.md' : 'zh-CN.md';
return moduleData.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix));
}
getMenuItems() {

View File

@ -1,6 +1,6 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router';
import { FormattedMessage } from 'react-intl';
import enquire from 'enquire.js';
import debounce from 'lodash.debounce';
import classNames from 'classnames';
@ -100,24 +100,28 @@ export default class Header extends React.Component {
activeMenuItem = 'docs/react';
}
const locale = this.context.intl.locale;
const excludedSuffix = locale === 'zh-CN' ? 'en-US.md' : 'zh-CN.md';
const options = components
.map(({ meta }) => {
const pathSnippet = meta.filename.split('/')[1];
const url = `/components/${pathSnippet}`;
return (
<Option value={url} key={url} data-label={`${(meta.title || meta.english).toLowerCase()} ${meta.subtitle || meta.chinese}`}>
<strong>{meta.title || meta.english}</strong>
<span className="ant-component-decs">{meta.subtitle || meta.chinese}</span>
</Option>
);
});
.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix))
.map(({ meta }) => {
const pathSnippet = meta.filename.split('/')[1];
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}`}>
<strong>{meta.title || meta.english}</strong>
{subtitle && <span className="ant-component-decs">{subtitle}</span>}
</Option>
);
});
const headerClassName = classNames({
clearfix: true,
'home-nav-white': !this.state.isFirstFrame,
});
const searchPlaceholder = this.context.intl.locale === 'zh-CN' ? '搜索组件...' : 'Search...';
const searchPlaceholder = locale === 'zh-CN' ? '搜索组件...' : 'Search...';
return (
<header id="header" className={headerClassName}>
<Row>

View File

@ -11,6 +11,7 @@ module.exports = {
'app.header.menu.spec': '语言',
'app.header.menu.resource': '资源',
'app.header.lang': 'EN',
'app.component.examples': '代码演示',
'app.home.slogan': '一个 UI 设计语言',
'app.home.start': '开始探索',
'app.home.best-practice': '最佳实践',