diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index c6a0c69234..5aa4220107 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -1,9 +1,8 @@ --- category: Components -chinese: 自动完成 type: Form Controls cols: 1 -english: AutoComplete +title: AutoComplete --- Autocomplete function of input field. diff --git a/components/checkbox/demo/check-all.md b/components/checkbox/demo/check-all.md new file mode 100644 index 0000000000..08e3c2ae91 --- /dev/null +++ b/components/checkbox/demo/check-all.md @@ -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 ( +
+
+ + 全选 + +
+
+ +
+ ); + }, + 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(, mountNode); +```` diff --git a/components/checkbox/index.tsx b/components/checkbox/index.tsx index e13e42fdf2..f08e4e488f 100644 --- a/components/checkbox/index.tsx +++ b/components/checkbox/index.tsx @@ -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 { 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 ( ); diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md index a73b9d9453..4e48e1f5d8 100644 --- a/components/checkbox/index.zh-CN.md +++ b/components/checkbox/index.zh-CN.md @@ -21,6 +21,7 @@ english: Checkbox | checked | 指定当前是否选中 | Boolean | false | | defaultChecked | 初始是否选中 | Boolean | false | | onChange | 变化时回调函数 | Function(e:Event) | - | +| indeterminate | 设置 indeterminate 状态，只负责样式控制 | Boolean | false | ### Checkbox Group diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md index fbde34db92..42e58faa4a 100644 --- a/components/icon/index.en-US.md +++ b/components/icon/index.en-US.md @@ -1,8 +1,7 @@ --- category: Components -chinese: 图标 type: Basic -english: Icon +title: Icon toc: false --- diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md index 55e3a02015..9ce0d3e583 100644 --- a/components/input-number/index.en-US.md +++ b/components/input-number/index.en-US.md @@ -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. diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md index 4a20089569..b0fbc1ea8f 100644 --- a/components/input/index.en-US.md +++ b/components/input/index.en-US.md @@ -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. diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md index f329cc2168..48f98e8717 100644 --- a/components/mention/index.en-US.md +++ b/components/mention/index.en-US.md @@ -1,9 +1,8 @@ --- category: Components -chinese: 提及 cols: 1 type: Views -english: Mention +title: Mention --- Mention component。 diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 58ed3ef507..080bdf50cc 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -3,6 +3,7 @@ category: Components cols: 1 type: Views title: Table +subtitle: 表格 --- 展示行列数据。 diff --git a/site/bisheng.config.js b/site/bisheng.config.js index c9fefb4a08..bf89254fec 100644 --- a/site/bisheng.config.js +++ b/site/bisheng.config.js @@ -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, diff --git a/site/theme/en-US.js b/site/theme/en-US.js index 1cefa968eb..5c322da88d 100644 --- a/site/theme/en-US.js +++ b/site/theme/en-US.js @@ -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', diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx index 6a8948c0c8..a31a5cf0f3 100644 --- a/site/theme/template/Content/ComponentDoc.jsx +++ b/site/theme/template/Content/ComponentDoc.jsx @@ -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 { ) }

- 代码演示 + diff --git a/site/theme/template/Content/EditButton.jsx b/site/theme/template/Content/EditButton.jsx index b951e06a7f..71fc3eae85 100644 --- a/site/theme/template/Content/EditButton.jsx +++ b/site/theme/template/Content/EditButton.jsx @@ -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 ( diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index 232dbe9c69..d51eea97c3 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -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() { diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx index edbc1d9dde..080a51980c 100644 --- a/site/theme/template/Layout/Header.jsx +++ b/site/theme/template/Layout/Header.jsx @@ -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 ( - - ); - }); + .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 ( + + ); + }); 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 (