mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
commit
bf96362cea
@ -1,9 +1,8 @@
|
||||
---
|
||||
category: Components
|
||||
chinese: 自动完成
|
||||
type: Form Controls
|
||||
cols: 1
|
||||
english: AutoComplete
|
||||
title: AutoComplete
|
||||
---
|
||||
|
||||
Autocomplete function of input field.
|
||||
|
65
components/checkbox/demo/check-all.md
Normal file
65
components/checkbox/demo/check-all.md
Normal 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);
|
||||
````
|
@ -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>
|
||||
);
|
||||
|
@ -21,6 +21,7 @@ english: Checkbox
|
||||
| checked | 指定当前是否选中 | Boolean | false |
|
||||
| defaultChecked | 初始是否选中 | Boolean | false |
|
||||
| onChange | 变化时回调函数 | Function(e:Event) | - |
|
||||
| indeterminate | 设置 indeterminate 状态,只负责样式控制 | Boolean | false |
|
||||
|
||||
### Checkbox Group
|
||||
|
||||
|
@ -1,8 +1,7 @@
|
||||
---
|
||||
category: Components
|
||||
chinese: 图标
|
||||
type: Basic
|
||||
english: Icon
|
||||
title: Icon
|
||||
toc: false
|
||||
---
|
||||
|
||||
|
@ -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.
|
||||
|
@ -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.
|
||||
|
@ -1,9 +1,8 @@
|
||||
---
|
||||
category: Components
|
||||
chinese: 提及
|
||||
cols: 1
|
||||
type: Views
|
||||
english: Mention
|
||||
title: Mention
|
||||
---
|
||||
|
||||
Mention component。
|
||||
|
@ -3,6 +3,7 @@ category: Components
|
||||
cols: 1
|
||||
type: Views
|
||||
title: Table
|
||||
subtitle: 表格
|
||||
---
|
||||
|
||||
展示行列数据。
|
||||
|
@ -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,
|
||||
|
@ -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',
|
||||
|
@ -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}
|
||||
/>
|
||||
|
@ -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 (
|
||||
|
@ -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() {
|
||||
|
@ -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>
|
||||
|
@ -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': '最佳实践',
|
||||
|
Loading…
Reference in New Issue
Block a user