Merge branch 'master' into feat/a11y

rosky · Jan 25, 2019 · 6546e30 · 6546e30
2 parents 954eeed + 4a1d8ea
commit 6546e30
Show file tree

Hide file tree

Showing 26 changed files with 226 additions and 44 deletions.
diff --git a/docs/search/index.en-us.md b/docs/search/index.en-us.md
@@ -40,3 +40,4 @@ search data in forms or pages.
 | popupContent       | custom popup menu                                                                                                                 | ReactNode     | -         |
 | visible            | popupContent is displayed                                                                                                                 | Boolean       | -         |
 | hasClear           | show clear text button                                                                                                                   | Boolean       | false     |
+| disabled           | disabled or not                                                                                                                   | Boolean       | false     |
diff --git a/docs/search/index.md b/docs/search/index.md
@@ -41,3 +41,4 @@
 | popupContent       | 自定义渲染的的下拉框                                                                                                                 | ReactNode     | -         |
 | visible            | 自定义渲染的的下拉框                                                                                                                 | Boolean       | -         |
 | hasClear           | 是否显示清除按钮                                                                                                                   | Boolean       | false     |
+| disabled           | 是否禁用                                                                                                                       | Boolean       | false     |
diff --git a/docs/slider/demo/slick-goto.md b/docs/slider/demo/slick-goto.md
@@ -26,7 +26,7 @@ class SlickGoTo extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            index: 0, // The initial value here need to be set to 0 for `activeIndex`. If you want the initial as 0 , you can use the `defaultIndex` property to set.
+            index: 0, // The initial value here need to be set to 0 for `activeIndex`. If you want the initial as 0 , you can use the `defaultActiveIndex` property to set.
         };
         this.changeHandler = this.changeHandler.bind(this);
     }

diff --git a/docs/table/demo/style.md b/docs/table/demo/style.md
@@ -72,8 +72,8 @@ class App extends React.Component {
             <Table dataSource={this.state.dataSource}
                 isZebra={this.state.isZebra}
                 hasBorder={this.state.hasBorder}>
-                <Table.Column title="Id" dataIndex="id"  align={this.state.align}/>
-                <Table.Column title="Title" dataIndex="title" className={this.state.className}/>
+                <Table.Column title="Id" dataIndex="id"  alignHeader="center"/>
+                <Table.Column title="Title" dataIndex="title" align={this.state.align}  className={this.state.className}/>
                 <Table.Column title="Time" dataIndex="time"/>
                 <Table.Column cell={render} width={200}/>
             </Table>

diff --git a/docs/table/index.en-us.md b/docs/table/index.en-us.md
@@ -131,6 +131,7 @@ ReactDOM.render(
 | sortable   | whether to support sorting                                                | Boolean                         | -                |
 | width      | width of column，width needs to be set in lock style                                  | Number/String                   | -                |
 | align      | alignment of cell<br><br>**options**:<br>'left', 'center', 'right' | Enum                            | -                |
+| alignHeader | alignment of header cell, value of align by default<br><br>**options**:<br>'left', 'center', 'right'                                             | Enum                            | -                |
 | filters    | generates a title filter menu in the format `[{label:'xxx', value:'xxx'}]`         | Array&lt;Object>                | -                |
 | filterMode | whether the filtering mode is single or multiple selection<br><br>**options**:<br>'single', 'multiple'  | Enum                            | 'multiple'       |
 | lock       | whether the lock column is supported, the options are `left`, `right`, `true`                    | Boolean/String                  | -                |

diff --git a/docs/table/index.md b/docs/table/index.md
@@ -132,18 +132,19 @@ ReactDOM.render(
 
 ### Table.Column
 
-| 参数         | 说明                                                                                                  | 类型                              | 默认值              |
-| ---------- | --------------------------------------------------------------------------------------------------- | ------------------------------- | ---------------- |
-| dataIndex  | 指定列对应的字段，支持`a.b`形式的快速取值                                                                             | String                          | -                |
-| cell       | 行渲染的逻辑<br>value, rowIndex, record, context四个属性只可读不可被更改<br>Function(value, index, record) => Element | ReactElement/ReactNode/Function | (value) => value |
-| title      | 表头显示的内容<br>value, rowIndex, record, context四个属性只可读不可被更改                                             | ReactElement/ReactNode/Function | -                |
-| sortable   | 是否支持排序                                                                                              | Boolean                         | -                |
-| width      | 列宽，注意在锁列的情况下一定需要配置宽度                                                                                | Number/String                   | -                |
-| align      | 单元格的对齐方式<br><br>**可选值**:<br>'left', 'center', 'right'                                               | Enum                            | -                |
-| filters    | 生成标题过滤的菜单, 格式为`[{label:'xxx', value:'xxx'}]`                                                        | Array&lt;Object>                | -                |
-| filterMode | 过滤的模式是单选还是多选<br><br>**可选值**:<br>'single', 'multiple'                                                | Enum                            | 'multiple'       |
-| lock       | 是否支持锁列,可选值为`left`,`right`, `true`                                                                   | Boolean/String                  | -                |
-| resizable  | 是否支持列宽调整, 当该值设为true，table的布局方式会修改为fixed.                                                            | Boolean                         | false            |
+| 参数          | 说明                                                                                                  | 类型                              | 默认值              |
+| ----------- | --------------------------------------------------------------------------------------------------- | ------------------------------- | ---------------- |
+| dataIndex   | 指定列对应的字段，支持`a.b`形式的快速取值                                                                             | String                          | -                |
+| cell        | 行渲染的逻辑<br>value, rowIndex, record, context四个属性只可读不可被更改<br>Function(value, index, record) => Element | ReactElement/ReactNode/Function | (value) => value |
+| title       | 表头显示的内容<br>value, rowIndex, record, context四个属性只可读不可被更改                                             | ReactElement/ReactNode/Function | -                |
+| sortable    | 是否支持排序                                                                                              | Boolean                         | -                |
+| width       | 列宽，注意在锁列的情况下一定需要配置宽度                                                                                | Number/String                   | -                |
+| align       | 单元格的对齐方式<br><br>**可选值**:<br>'left', 'center', 'right'                                               | Enum                            | -                |
+| alignHeader | 单元格标题的对齐方式, 不配置默认读取align值<br><br>**可选值**:<br>'left', 'center', 'right'                              | Enum                            | -                |
+| filters     | 生成标题过滤的菜单, 格式为`[{label:'xxx', value:'xxx'}]`                                                        | Array&lt;Object>                | -                |
+| filterMode  | 过滤的模式是单选还是多选<br><br>**可选值**:<br>'single', 'multiple'                                                | Enum                            | 'multiple'       |
+| lock        | 是否支持锁列,可选值为`left`,`right`, `true`                                                                   | Boolean/String                  | -                |
+| resizable   | 是否支持列宽调整, 当该值设为true，table的布局方式会修改为fixed.                                                            | Boolean                         | false            |
 
 ### Table.ColumnGroup
 

diff --git a/scripts/server/server.js b/scripts/server/server.js
@@ -77,7 +77,7 @@ function run(port) {
     });
 
     const url = `http://${host}:${port}/${componentName}`;
-    logger.warn(`Start server, listen to ${url}.`);
+    logger.warn(`Start server, listen to ${url}`);
 
     const server = new WebpackDevServer(compiler, {
         disableHostCheck: true,

diff --git a/src/dialog/inner.jsx b/src/dialog/inner.jsx
@@ -101,11 +101,11 @@ export default class Inner extends Component {
     }
 
     renderCloseLink() {
-        const { prefix, closeable, onClose } = this.props;
+        const { prefix, closeable, onClose, locale } = this.props;
 
         if (closeable) {
             return (
-                <a role="button" href="javascript:;" className={`${prefix}dialog-close`}
+                <a role="button" aria-label={locale.close} href="javascript:;" className={`${prefix}dialog-close`}
                     onClick={onClose}>
                     <Icon className={`${prefix}dialog-close-icon`} type="close" />
                 </a>

diff --git a/src/locale/en-us.js b/src/locale/en-us.js
@@ -39,6 +39,7 @@ export default {
         second: 'S'
     },
     Dialog: {
+        close: 'Close',
         ok: 'OK',
         cancel: 'Cancel'
     },

diff --git a/src/locale/ja-jp.js b/src/locale/ja-jp.js
@@ -39,6 +39,7 @@ export default {
         second: '秒'
     },
     Dialog: {
+        close: '閉鎖する',
         ok: '確認',
         cancel: 'キャンセル'
     },

diff --git a/src/locale/zh-cn.js b/src/locale/zh-cn.js
@@ -39,6 +39,7 @@ export default {
         second: '秒'
     },
     Dialog: {
+        close: '关闭',
         ok: '确认',
         cancel: '取消'
     },

diff --git a/src/locale/zh-tw.js b/src/locale/zh-tw.js
@@ -39,6 +39,7 @@ export default {
         second: '秒'
     },
     Dialog: {
+        close: '關閉',
         ok: '確認',
         cancel: '取消'
     },

diff --git a/src/search/Search.jsx b/src/search/Search.jsx
@@ -109,8 +109,13 @@ class Search extends React.Component {
          * 是否显示清除按钮
          */
         hasClear: PropTypes.bool,
+        /**
+         * 是否禁用
+         */
+        disabled: PropTypes.bool,
         locale: PropTypes.object,
         rtl: PropTypes.bool,
+
     };
 
     static defaultProps = {
@@ -125,6 +130,7 @@ class Search extends React.Component {
         onSearch: func.noop,
         onFilterChange: func.noop,
         hasClear: false,
+        disabled: false,
     };
 
     constructor(props) {
@@ -159,6 +165,9 @@ class Search extends React.Component {
     };
 
     onSearch = () => {
+        if (this.props.disabled) {
+            return;
+        }
         this.props.onSearch(this.state.value, this.state.filterValue);
     };
 
@@ -171,14 +180,17 @@ class Search extends React.Component {
     };
 
     onKeyDown = (e) => {
+        if (this.props.disabled) {
+            return;
+        }
         if (e.keyCode !== KEYCODE.ENTER) {
             return;
         }
         this.onSearch();
     }
     render() {
         const {
-            shape, filter, hasIcon,
+            shape, filter, hasIcon, disabled,
             placeholder, type, className,
             style, size, prefix, searchText,
             dataSource, filterProps, buttonProps,
@@ -200,13 +212,13 @@ class Search extends React.Component {
                 [`${prefix}search-icon`]: true,
                 [buttonProps.className]: !!buttonProps.className
             });
-            searchIcon = <Icon {...buttonProps} type="search" tabIndex="0" role="button" className={cls} onClick={this.onSearch} onKeyDown={this.onKeyDown}/>;
+            searchIcon = <Icon {...buttonProps} type="search" tabIndex="0" role="button" aria-disabled={disabled} className={cls} onClick={this.onSearch} onKeyDown={this.onKeyDown}/>;
         } else {
             const cls = classNames({
                 [`${prefix}search-btn`]: true,
                 [buttonProps.className]: !!buttonProps.className
             });
-            searchBtn = (<Button  {...buttonProps} tabIndex="0" className={cls} onClick={this.onSearch} onKeyDown={this.onKeyDown}>
+            searchBtn = (<Button  {...buttonProps} tabIndex="0" className={cls} onClick={this.onSearch} onKeyDown={this.onKeyDown} disabled={disabled}>
                 {hasIcon ? <Icon type="search" /> : null}
                 {searchText ? <span className={`${prefix}search-btn-text`}>{searchText}</span> : null}
             </Button>);
@@ -219,6 +231,7 @@ class Search extends React.Component {
                     hasBorder={false}
                     dataSource={filter}
                     size={size}
+                    disabled={disabled}
                     value={this.state.filterValue}
                     onChange={this.onFilterChange}
                 />
@@ -246,6 +259,7 @@ class Search extends React.Component {
                 value={this.state.value}
                 onChange={this.onChange}
                 popupContent={popupContent}
+                disabled={disabled}
             />
         </Group>);
 

diff --git a/src/select/select.jsx b/src/select/select.jsx
@@ -172,7 +172,7 @@ class Select extends Base {
             searchValue: 'searchValue' in props ? props.searchValue : ''
         });
 
-        // For cache choosen value
+        // because dataSource maybe updated while select a item, so we should cache choosen value's item
         this.valueDataSource = {
             valueDS: [], // [{value,label}]
             mapValueDS: {} // {value: {value,label}}
@@ -226,19 +226,12 @@ class Select extends Base {
 
         if ('value' in nextProps) {
             // under controll
-            this.valueDataSource = getValueDataSource(
-                nextProps.value,
-                this.valueDataSource.mapValueDS,
-                this.dataStore.getMapDS()
-            );
+            this.valueDataSource = getValueDataSource(nextProps.value, this.valueDataSource.mapValueDS, this.dataStore.getMapDS());
         } else if ('defaultValue' in nextProps &&
+            nextProps.defaultValue === this.valueDataSource.value &&
             (nextProps.children !== this.props.children || nextProps.dataSource !== this.props.dataSource)) {
-            //has defaultValue and dataSource changed
-            this.valueDataSource = getValueDataSource(
-                nextProps.defaultValue,
-                this.valueDataSource.mapValueDS,
-                this.dataStore.getMapDS()
-            );
+            //has defaultValue and value not changed and dataSource changed
+            this.valueDataSource = getValueDataSource(nextProps.defaultValue, this.valueDataSource.mapValueDS, this.dataStore.getMapDS());
         }
 
     }
@@ -347,7 +340,7 @@ class Select extends Base {
 
         const { cacheValue, mode, hiddenSelected } = this.props;
 
-        // 非受控更新缓存map
+        // cache those value maybe not exists in dataSource
         if (cacheValue || mode === 'tag') {
             this.valueDataSource = itemObj;
         }
@@ -589,7 +582,11 @@ class Select extends Base {
 
         // get detail value
         if (!this.useDetailValue()) {
-            value = this.valueDataSource.valueDS;
+            if (value === this.valueDataSource.value) {
+                value = this.valueDataSource.valueDS;
+            } else {
+                value = getValueDataSource(value, this.valueDataSource.mapValueDS, this.dataStore.getMapDS()).valueDS;
+            }
         }
 
         if (mode === 'single') {
@@ -641,7 +638,7 @@ class Select extends Base {
 
         // because of can not close Popup by click Input while hasSearch.
         // so when Popup open and hasSearch, we should close Popup intentionally
-        this.state.visible && this.hasSearch() && this.setVisible(!this.state.visible);
+        this.state.visible && this.hasSearch() && this.setVisible(false);
     }
 
     handleClear = e => {

diff --git a/src/tab/main.scss b/src/tab/main.scss
@@ -390,6 +390,36 @@
             }
         }
     }
+
+    &-pure > #{$tab-prefix}-bar {
+        position: relative;
+        #{$tab-prefix}-nav-extra {
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+        }
+    }
+
+    &-capsule > #{$tab-prefix}-bar {
+        position: relative;
+        #{$tab-prefix}-nav-extra {
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+        }
+    }
+
+    &-text > #{$tab-prefix}-bar {
+        position: relative;
+        #{$tab-prefix}-nav-extra {
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+        }
+    }
 }
 
 @import "./rtl.scss";
diff --git a/src/tab/rtl.scss b/src/tab/rtl.scss
@@ -14,4 +14,11 @@
             left: 0;
         }
     }
+
+    & > #{$tab-prefix}-bar {
+        #{$tab-prefix}-nav-extra {
+            right: auto;
+            left: 0;
+        }
+    }
 }
diff --git a/src/table/base/cell.jsx b/src/table/base/cell.jsx
@@ -49,7 +49,7 @@ export default class Cell extends React.Component {
     render() {
         /* eslint-disable no-unused-vars */
         const {prefix, className, cell, value, resizable, colIndex, rowIndex, record, context, align, style = {}, component: Tag,
-            children, title, width, innerStyle, primaryKey, __normalized, filterMode, filters, sortable, lock, pure, ...others} = this.props;
+            children, title, width, innerStyle, primaryKey, __normalized, filterMode, filters, sortable, lock, pure, locale, ...others} = this.props;
         const tagStyle = {...style};
         const cellProps = {value, index: rowIndex, record, context};
         let content = cell;

diff --git a/src/table/base/header.jsx b/src/table/base/header.jsx
@@ -55,7 +55,7 @@ export default class Header extends React.Component {
         const header = columns.map((cols, index) => {
             const col = cols.map((col, j) => {
                 /* eslint-disable no-unused-vars, prefer-const */
-                let { title, colSpan, sortable, resizable, dataIndex, filters, filterMode, width, align, className, __normalized, lock, ...others } = col;
+                let { title, colSpan, sortable, resizable, dataIndex, filters, filterMode, width, align, alignHeader, className, __normalized, lock, ...others } = col;
 
                 className = classnames({
                     [`${prefix}table-header-node`]: true,
@@ -95,7 +95,7 @@ export default class Header extends React.Component {
                     pure={pure}
                     cell={title}
                     component="th"
-                    align={align}
+                    align={alignHeader ? alignHeader : align}
                     className={className}
                     ref={this.getCellRef.bind(this, index, j)}
                     type="header">