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

2025-01-23 09:54:16 +08:00 · 2015-12-15 18:25:09 +08:00 · 2015-12-15 18:25:09 +08:00 · 3ba785630b
commit 3ba785630b
parent b1d7b7b15f a580826675
19 changed files with 102 additions and 73 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -58,7 +58,7 @@
 - 优先使用苹方字体。
 - 统一 size 属性的可选值为 `small` `default` `large`。
 - 开始初步补充[测试用例](https://github.com/ant-design/ant-design/tree/1a3a19793c0791201666fdcf0dbd12a30fad4be0/tests)。
- 提供主色系更换的方案。[#384](https://github.com/ant-design/ant-design/issues/384)
+- 提供主色系更换的[方案](https://github.com/ant-tool/xtool/tree/master/examples/customize-antd-theme)。[#384](https://github.com/ant-design/ant-design/issues/384)
 - 添加[色彩换算工具](http://ant.design/spec/colors#色彩换算工具)。
 - 添加布局和导航规范，以及[常用布局](http://ant.design/spec/layout/)。
 - 文档支持标题和演示的锚点，方便分享文档和演示代码。
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -1,20 +1,18 @@
+<p align="center">
+  <a href="http://ant.design">
+    <img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
+  </a>
+</p>
+
 # Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 一套企业级的 UI 设计语言和 React 实现。

-<p align="center">
-  <a href="http://ant.design">
-    <img width="360" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
-  </a>
-</p>
-
 ## 特性

- 提炼自企业级后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 基础上二次封装的丰富实用的 UI 组件。
- 基于 React 的组件化开发模式。
- 背靠 npm 生态圈。
- 基于 webpack 的调试构建方案，支持 ES6。
+- 提炼和服务企业级中后台产品的交互语言和视觉风格。
+- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
+- 基于 npm + webpack + babel 的工作流，支持 ES2015。


 ## 安装
@ -48,7 +46,7 @@ npm install antd

 - [首页](http://ant.design/)
 - [React UI 库](http://ant.design/docs/introduce)
- [构建调试工具](https://github.com/ant-design/antd-bin)
+- [构建调试工具](https://github.com/ant-tool/xtool/)
 - [开发计划](https://github.com/ant-design/ant-design/issues/9)
 - [修改记录](CHANGELOG.md)
 - [React 组件](http://react-component.github.io/)
--- a/README.md
+++ b/README.md
@ -1,16 +1,18 @@
+<p align="center">
+  <a href="http://ant.design">
+    <img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
+  </a>
+</p>
+
 # Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 An enterprise-class UI design language and React-based implementation.

-![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg)
-
 ## Features

- An enterprise-class graphical design language and framework for financial applications
+- An enterprise-class graphical design language and framework for financial applications.
 - Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/).
- A Component development model based on React.
- Backed by the npm ecosystem.
- webpack-based debug builds supporting ES6
+- A npm + webpack + babel workflow, supporting ES2015.

 ## Install

@ -44,12 +46,12 @@ Normal browsers and Internet Explorer 8+.

 - [Home page](http://ant.design/)
 - [React UI library](http://ant.design/docs/introduce)
- [Build/Debug tools](https://github.com/ant-design/antd-bin)
+- [Build/Debug tools](https://github.com/ant-tool/xtool/)
 - [Roadmap](https://github.com/ant-design/ant-design/issues/9)
 - [ChangeLog](CHANGELOG.md)
 - [React components](http://react-component.github.io/)
- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/component-code-style.md)
- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/component-design.md)
+- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
+- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
 - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
 - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)

--- a/components/icon/index.md
+++ b/components/icon/index.md
@ -10,34 +10,30 @@

 ## 图标的命名规范

-我们为每个图标赋予了语义化的命名。只需在 <Icon> 标签内，制定对应的 type 属性即可。
-
-不同 type 命名规则如下:
+我们为每个图标赋予了语义化的命名，命名规则如下:

 - 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`(实心) 和 `question-circle-o`(描线)；

 - 命名顺序：`[icon名]-[形状可选]-[描线与否]-[方向可选]`。

-## 实现原理
-
-所有的 Icon 标签最终会渲染为
-
-```html
-<i class="anticon anticon-${type}"></i>
-```
-
 ## 如何使用

-使用 <Icon> 标签申明组件，设置对应的 type 设置需要渲染的图标，示例代码如下:
+使用 `<Icon />` 标签声明组件，指定图标对应的 type 属性，示例代码如下:

 ```html
 <Icon type="link" />
 ```

-> 点击图标复制代码。
+最终会渲染为：
+
+```html
+<i class="anticon anticon-${type}"></i>
+```

 ## 图标列表

+> 点击图标复制代码。
+
 ### 一. 方向性图标

 <div id="iconset-direction"></div>
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@ -1,4 +1,5 @@
 import React from 'react';
+import assign from 'object-assign';

 function prefixClsFn(prefixCls, ...args) {
  return args.map((s)=> {
@ -14,6 +15,13 @@ function ieGT9() {
  return documentMode > 9;
 }

+function fixControlledValue(value) {
+  if (typeof value === 'undefined' || value === null) {
+    return '';
+  }
+  return value;
+}
+
 class Group extends React.Component {
  render() {
    return (
@ -61,7 +69,7 @@ class Input extends React.Component {
  }

  renderInput() {
-    const props = this.props;
+    const props = assign({}, this.props);
    const prefixCls = props.prefixCls;
    let inputClassName = prefixClsFn(prefixCls, 'input');
    if (!props.type) {
@ -77,9 +85,12 @@ class Input extends React.Component {
    if(placeholder && ieGT9()){
      placeholder = null;
    }
+    if ('value' in props) {
+      props.value = fixControlledValue(props.value);
+    }
    switch (props.type) {
    case 'textarea':
-      return <textarea {...props} value={props.value || props.defaultValue} placeholder={placeholder} className={inputClassName} ref="input" />;
+      return <textarea {...props} placeholder={placeholder} className={inputClassName} ref="input" />;
    default:
      inputClassName = props.className ? props.className : inputClassName;
      return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>;
--- a/components/menu/demo/horizontal.md
+++ b/components/menu/demo/horizontal.md
@ -31,7 +31,7 @@ const App = React.createClass({
        <Menu.Item key="mail">
          <Icon type="mail" />导航一
        </Menu.Item>
-        <Menu.Item key="app">
+        <Menu.Item key="app" disabled>
          <Icon type="appstore" />导航二
        </Menu.Item>
        <SubMenu title={<span><Icon type="setting" />导航 - 子菜单</span>}>
--- a/components/notification/index.jsx
+++ b/components/notification/index.jsx
@ -59,6 +59,7 @@ function notice(args) {
      duration: duration,
      closable: true,
      onClose: args.onClose,
+      key: args.key,
      style: {}
    });
  } else {
@ -73,6 +74,7 @@ function notice(args) {
        duration: duration,
        closable: true,
        onClose: args.onClose,
+        key: args.key,
        style: {}
      });
    } else {
--- a/components/select/demo/basic.md
+++ b/components/select/demo/basic.md
@ -14,12 +14,15 @@ function handleChange(value) {
  console.log('selected ' + value);
 }

-ReactDOM.render(
+ReactDOM.render(<div>
  <Select defaultValue="lucy" style={{width:120}} onChange={handleChange}>
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="disabled" disabled>Disabled</Option>
    <Option value="yiminghe">yiminghe</Option>
  </Select>
-, document.getElementById('components-select-demo-basic'));
+  <Select defaultValue="lucy" style={{width:120}} disabled>
+    <Option value="lucy">Lucy</Option>
+  </Select>
+</div>, document.getElementById('components-select-demo-basic'));
 ````
--- a/components/select/index.md
+++ b/components/select/index.md
@ -26,31 +26,34 @@
 |----------|----------------|----------|--------------|
 | value    | 指定当前选中的条目 | string/Array<String>   |  无  |
 | defaultValue | 指定默认选中的条目 | string/Array<String>   |  无  |
-| multiple   | 支持多选 |   | false |
-| filterOption | 是否根据输入项进行筛选 |  | true     |
-| tags | 可以把随意输入的条目作为tag，输入项不需要与下拉选项匹配 | |false |
-| onSelect | 被选中时调用，参数为选中的option value值 | function(value, option) | 无   |
-| onDeselect | 取消选中时调用，参数为选中的option value值，仅在multiple或tags模式下生效 |  function(value, option) | 无   |
-| onChange | 选中option，或input的value变化(combobox模式下)时，调用此函数 | function(value, label) | 无 |
-| allowClear | 显示清除按钮 | | false |
+| multiple   | 支持多选 | boolean | false |
+| filterOption | 是否根据输入项进行筛选 | boolean | true     |
+| tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配 | boolean |false |
+| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无   |
+| onDeselect | 取消选中时调用，参数为选中项的 option value 值，仅在 multiple 或 tags 模式下生效 |  function(value, option) | 无   |
+| onChange | 选中option，或input的value变化(combobox 模式下)时，调用此函数 | function(value, label) | 无 |
+| allowClear | 显示清除按钮 | boolean | false |
 | onSearch | 文本框值变化时回调 | function(value: String) |  |
 | placeholder | 选择框默认文字 | string | 无 |
 | searchPlaceholder | 搜索框默认文字 | string | 无 |
+| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | false |
 | optionFilterProp | 输入项过滤对应的 option 属性 | string | value |
-| combobox | 输入框自动提示模式 | | false |
+| combobox | 输入框自动提示模式 | boolean | false |
 | size    | 选择框大小，可选 `large` `small`  | String      |      default      |
+| showSearch | 在下拉中显示搜索框 | boolean | false |
+| disabled | 是否禁用 | boolean | false |

 ### Option props

 | 参数     | 说明           | 类型     | 默认值       |
 |----------|----------------|----------|--------------|
 | disabled    | 是否禁用 | Boolean   |  false  |
-| key   | 如果react需要你设置此项，此项值与value的值相同，然后可以省略value设置 |  String |  |
+| key   | 如果 react 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置 |  String |  |
 | value   | 默认根据此属性值进行筛选 | String | - |

 ### OptGroup props

 | 参数     | 说明           | 类型     | 默认值          |
-|----------|----------------|----------|--------------|
+|----------|----------------|----------|-----------------|
 | label    | 组名           | String/React.Element | 无  |
 | key      |                |  String  | -               |
--- a/components/table/demo/ajax.md
+++ b/components/table/demo/ajax.md
@ -74,14 +74,18 @@ const Test = React.createClass({
    // 使用受控属性 current，方便外部设置页数
    const pagination = this.state.pagination;
    pagination.current = page;
-    this.setState({ pagination });
+    this.setState({
+      pagination,
+      dataSource: dataSource.clone(),
+    });
  },
  refresh() {
    // 回到第一页
    const pagination = this.state.pagination;
    pagination.current = 1;
    this.setState({
-      dataSource: dataSource.clone()
+      pagination,
+      dataSource: dataSource.clone(),
    });
  },
  changeAndRefresh() {
@ -90,10 +94,10 @@ const Test = React.createClass({
    pagination.current = 1;
    // 可以修改原来的 dataSource 再发请求
    this.setState({
+      pagination,
      dataSource: dataSource.clone({
        data: { city: 'hz' }
      }),
-      pagination,
    });
  },
  render() {
--- a/components/upload/uploadList.jsx
+++ b/components/upload/uploadList.jsx
@ -32,8 +32,7 @@ export default React.createClass({
          <div className={prefixCls + '-list-item-info'}>
            <Icon type="paper-clip" />
            <span className="ant-upload-item-name">{file.name}</span>
-            <Icon type="cross" ref="theCloseBtn"
-              onClick={this.handleClose.bind(this, file)} />
+            <Icon type="cross" onClick={this.handleClose.bind(this, file)} />
          </div>
          { progress }
        </div>
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@ -27,7 +27,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
 $ npm install antd-init -g
 ```

-[更多使用说明](https://github.com/ant-design/antd-bin#使用说明)。
+[更多使用说明](https://github.com/ant-tool/xtool/#使用说明)。

 ### 2. 创建一个项目

@ -131,8 +131,11 @@ Ant Design React 支持所有的现代浏览器和 IE8+。

 ## 自行构建

-如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试，可以参考我们所使用的 [webpack 配置](https://github.com/ant-design/antd-build/blob/master/lib/webpack.common.config.js)。
+如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试，可以参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js)。

+### 改变主色系
+
+- [配置代码示例](https://github.com/ant-tool/xtool/tree/master/examples/customize-antd-theme)

 ## 小甜点

--- a/docs/install.md
+++ b/docs/install.md
@ -51,7 +51,7 @@ $ npm install antd-bin --save-dev
 }
 ```

-> 更多[使用方式](https://github.com/ant-design/antd-bin/)。
+> 更多[使用方式](https://github.com/ant-tool/xtool/)。

 <style>
 .versions {
--- a/docs/introduce.md
+++ b/docs/introduce.md
@ -27,11 +27,9 @@

 ## 特性

- Designed as Ant Design.
- [React Component](http://react-component.github.io/badgeboard/) 上二次封装的丰富实用的 UI 组件。
- 基于 React 的组件化开发模式。
- 背靠 npm 生态圈。
- 基于 webpack 的调试构建方案，支持 ES6。
+- Designed as Ant Design, 提炼和服务企业级中后台产品的交互语言和视觉风格。
+- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
+- 基于 npm + webpack + babel 的工作流，支持 ES2015。


 ## 示例
@ -65,7 +63,7 @@ import 'antd/lib/index.css'; // 样式需要在入口处引用一次

 - [首页](http://ant.design/)
 - [文档和组件](http://ant.design/docs/introduce)
- [构建调试工具](https://github.com/ant-design/antd-bin)
+- [构建调试工具](https://github.com/ant-tool/xtool/)
 - [开发计划](https://github.com/ant-design/ant-design/issues/9)
 - [React 模块](http://react-component.github.io/)
 - [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
--- a/package.json
+++ b/package.json
@ -89,7 +89,7 @@
    "expect.js": "~0.3.1",
    "extract-text-webpack-plugin": "^0.9.1",
    "gh-pages": "^0.5.0",
-    "history": "^1.13.1",
+    "history": "~1.13.1",
    "jest-cli": "~0.6.1",
    "json-loader": "^0.5.1",
    "less": "~2.5.3",
--- a/site/static/homeLoad.js
+++ b/site/static/homeLoad.js
@ -2,6 +2,9 @@
 * Created by jljsj on 15/6/3.
 */
 $(function() {
+  $.ajaxSetup({
+    cache: true
+  });
  var loadData = [
    "https://os.alipayobjects.com/rmsportal/PfhNcINWBAnMIWR.js", // easeljs-0.8.0.min.js
    "https://os.alipayobjects.com/rmsportal/nGFyCGHAblMWsYE.js", // TweenMax.min.js
--- a/spec/colors.md
+++ b/spec/colors.md
@ -156,7 +156,7 @@ let ExtendPalettes = React.createClass({
      },
      {
        'title': 'Purple #5E30B5',
-        'description': '介于红色和黄色之间，传达愉悦，创造力，热情，吸引力。但橙色又不如红色那样具侵略性，同时又能够很好的引起视觉的注意力。可以作为设计的主色也可以用于辅助色。但大面积使用时需要慎重。',
+        'description': '紫色是赤黄黄绿青蓝紫中最后一名，也是人类可见光谱中波长最短的光，有华贵、信仰、神秘等含义，同时是红与蓝的结合体，传达中性、中立等信息。在界面设计中建议作为辅助颜色使用。',
        'colors': [
          "#E8DFFA", "#B196EE", "#8867D2",
          "#581CB6", "#5E30B5", "#7A43E2",
@ -214,6 +214,7 @@ let TintShadeTool = React.createClass({
      result: '#2db7f5',
      color: '#2db7f5',
      justCopied: false,
+      darkBackground: false,
      value: 80
    };
  },
@ -239,8 +240,10 @@ let TintShadeTool = React.createClass({
    }
    let tintOrShade = this.state.value > 0 ? 'tint' : 'shade';
    let c = new Values(this.state.color);
+    let resultColor = c[tintOrShade](Math.abs(this.state.value));
    this.setState({
-      result: '#' + c[tintOrShade](Math.abs(this.state.value)).hex
+      result: '#' + resultColor.hex,
+      darkBackground: resultColor.getBrightness() < 50
    });
  },
  copySuccess(e) {
@ -260,7 +263,7 @@ let TintShadeTool = React.createClass({
      <div>
        <Clip onSuccess={this.copySuccess} data-clipboard-text={this.state.result} style={{border: 0, background: '#fff', cursor: 'pointer'}}>
          <Tooltip title="点击色块复制色值">
-            <div style={{backgroundColor: this.state.result}} className={'color-block ' + (this.state.justCopied ? 'copied' : '')}></div>
+            <div style={{backgroundColor: this.state.result}} className={'color-block ' + (this.state.justCopied ? 'copied' : '') + (this.state.darkBackground ? ' dark' : '')}></div>
          </Tooltip>
        </Clip>
        <span style={{width: 188, display: 'inline-block', fontFamily: 'Consolas'}}>{this.state.result}</span>
@ -306,4 +309,7 @@ ReactDOM.render(<TintShadeTool />, document.getElementById('color-tint-shade-too
  opacity: 1;
  top: 0;
 }
+.color-block.dark:after {
+  color: #fff;
+}
 </style>
--- a/style/components/menu.less
+++ b/style/components/menu.less
@ -100,6 +100,7 @@
    &.@{menu-prefix-cls}-item-disabled,
    &.@{menu-prefix-cls}-submenu-disabled {
      color: #999 !important;
+      cursor: not-allowed;
    }
  }
  & > &-item-divider {
--- a/style/components/switch.less
+++ b/style/components/switch.less
@ -51,13 +51,13 @@
  }

  &-disabled {
-    cursor: no-drop;
+    cursor: not-allowed;
    background: #f4f4f4;
    border-color: #f4f4f4;

    &:after {
      background: #ccc;
-      cursor: no-drop;
+      cursor: not-allowed;
    }

    &-inner {