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

8 years ago · bf96362cea
16 changed files with 115 additions and 34 deletions
--- 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.
--- a/components/checkbox/demo/check-all.md
+++ 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 (
+      <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);
+````
--- 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<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>
    );
--- 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

--- 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
 ---

--- 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.
--- 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.
--- 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。
--- 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: 表格
 ---

 展示行列数据。
--- 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,
--- 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',
--- 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 {
              )
            }
            <h2>
-              代码演示
+              <FormattedMessage id="app.component.examples" />
              <Icon type="appstore" className={expandTriggerClass}
                title="展开全部代码" onClick={this.handleExpandToggle}
              />
--- 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 (
--- 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() {
--- 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 (
-          <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>
--- a/site/theme/zh-CN.js
+++ b/site/theme/zh-CN.js
@ -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': '最佳实践',