publish 1.6.21

2018-12-28 10:02:54 +08:00 · 2018-12-28 10:02:54 +08:00 · 7807142acf
parent 6b377718a5
commit 7807142acf
12 changed files with 20419 additions and 15661 deletions
--- a/README.md
+++ b/README.md
@ -109,7 +109,14 @@ class Demo extends Component {
 | onFilterClear       | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
 | headerScroll       | 表头下是否显示滚动条 | bool| false
 | syncHover       | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
+| onKeyTab       | tab快捷键，可以处理默认选中第一条数据 | function| -
+| onKeyUp       | up快捷键，可以处理table的上一条数据 | function| -
+| onKeyDown       | up快捷键，可以处理table的下一条数据 | function| -
+| onTableKeyDown       | 触发table的快捷键 | function| -
+| tabIndex       | 设置焦点顺序 | number | 0
+| loadBuffer       | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5

+> 快捷键部分参考示例 (快捷键在table中的简单使用应用)

 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*

--- a/build/Table.js
+++ b/build/Table.js
@ -97,8 +97,8 @@ var propTypes = {
  filterDelay: _propTypes2["default"].number,
  onFilterChange: _propTypes2["default"].func,
  onFilterClear: _propTypes2["default"].func,
-  syncHover: _propTypes2["default"].bool
-
+  syncHover: _propTypes2["default"].bool,
+  tabIndex: _propTypes2["default"].string
 };

 var defaultProps = {
@ -139,7 +139,8 @@ var defaultProps = {
  columns: [],
  minColumnWidth: 80,
  locale: {},
-  syncHover: true
+  syncHover: true,
+  tabIndex: '0'
 };

 var Table = function (_Component) {
@ -181,7 +182,7 @@ var Table = function (_Component) {
        //down
        _this.props.onKeyDown && _this.props.onKeyDown();
      }
-      _this.props.onTabkeKeyDown && _this.props.onTabkeKeyDown();
+      _this.props.onTableKeyDown && _this.props.onTableKeyDown();
      // else if(event.altKey && event.keyCode === 38){
      //   this.props.onKeyMove&&this.props.onKeyMove('up');
      // }else if(event.altKey && event.keyCode === 40){
@ -1197,7 +1198,7 @@ var Table = function (_Component) {
      'div',
      { className: className, style: props.style, ref: function ref(el) {
          return _this6.contentTable = el;
-        }, tabIndex: '0' },
+        }, tabIndex: props.tabIndex ? props.tabIndex : '0' },
      this.getTitle(),
      _react2["default"].createElement(
        'div',
--- a/demo/demolist/Demo33.js
+++ b/demo/demolist/Demo33.js
@ -8,17 +8,31 @@ import React, { Component } from "react";
 import Button from "bee-button";
 import Tooltip from "bee-tooltip";
 import Table from "../../src";
+import Checkbox from 'bee-checkbox';

 const columns = [
+  {
+    title: "-",
+    dataIndex: "d",
+    fixed: "left",
+    key: "d",
+    render(text, record, index) {
+      return (
+        <div style={{ position: 'relative' }} title={text} >
+          <Checkbox />
+        </div>
+      );
+    }
+  },
  { title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
 ];

 const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+  { a: "令狐冲", b: "男", c: 41,d:'操作', key: "1" },
+  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67,d:'操作', key: "2" },
+  { a: "郭靖", b: "男", c: 25,d:'操作', key: "3" }
 ];

 class Demo33 extends Component {
@ -63,7 +77,7 @@ class Demo33 extends Component {
    })
  }
 
-  onTabkeKeyDown = ()=>{
+  onTableKeyDown = ()=>{
    let {selectedRowIndex} = this.state;
    console.log(" ----onTabkeKeyDown--- ",selectedRowIndex);
  }
@ -89,7 +103,8 @@ class Demo33 extends Component {
        onKeyTab={this.onKeyTab}
        onKeyUp={this.onKeyUp}
        onKeyDown={this.onKeyDown}
-        onTabkeKeyDown={this.onTabkeKeyDown}
+        onTableKeyDown={this.onTableKeyDown} 
+        scroll={{ x: "110%", y: 140 }}
      /> </div>
    );
  }
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/dist/demo.css
@ -2422,9 +2422,6 @@ i.uf {
 /*
 * 选择时删除文本阴影，及设置默认选中颜色
 */
-::-moz-selection {
-  background: rgb(187,222,251);
-  text-shadow: none; }
 ::selection {
  background: rgb(187,222,251);
  text-shadow: none; }
@ -5288,7 +5285,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
  .u-panel .u-panel-body {
    padding: 15px 15px;
    position: relative; }
-    .u-panel .u-panel-body .uf {
+    .u-panel .u-panel-body .u-panel-copy {
      position: absolute;
      right: 25px;
      top: 30px;
@ -5298,7 +5295,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
      margin: 8px;
      border-radius: 4px;
      cursor: pointer; }
-      .u-panel .u-panel-body .uf:hover {
+      .u-panel .u-panel-body .u-panel-copy:hover {
        color: #a8a7a7; }

 .u-panel-default {
@ -6674,7 +6671,8 @@ input.u-button[type="submit"] {
  border-radius: 0 500px 500px 0; }

 .u-pagination {
-  font-size: 14px; }
+  font-size: 14px;
+  position: relative; }
  .u-pagination-list {
    float: left;
    margin: 5px; }
@ -6682,6 +6680,10 @@ input.u-button[type="submit"] {
      clear: both;
      display: table;
      content: ''; }
+    .u-pagination-list > li.iconBtn > a {
+      padding: 0 11px;
+      font-size: 22px;
+      line-height: 1.57142857; }
    .u-pagination-list > li > a, .u-pagination-list > li > span {
      display: inline-block;
      text-decoration: none;
@ -6769,9 +6771,15 @@ input.u-button[type="submit"] {
    margin: 5px;
    float: left;
    min-width: 120px; }
+    .u-pagination .data_per_select > span {
+      display: inline-block;
+      line-height: 36px;
+      float: left; }
    .u-pagination .data_per_select .u-select {
      width: 50px;
-      margin: 0 6px; }
+      margin: 0 6px;
+      height: 36px;
+      float: left; }
      .u-pagination .data_per_select .u-select .u-select-selection {
        height: 36px; }
        .u-pagination .data_per_select .u-select .u-select-selection .u-select-selection-rendered {
@ -6791,20 +6799,26 @@ input.u-button[type="submit"] {
  .u-pagination .page_jump {
    float: left;
    margin: 5px; }
+    .u-pagination .page_jump > span {
+      display: inline-block;
+      line-height: 36px;
+      float: left; }
  .u-pagination .page_jump_value {
    outline: none;
    -webkit-appearance: none;
    background: #fff;
    border-radius: 4px;
-    line-height: 32px;
    width: 50px;
-    margin: 0 6px;
    text-align: center;
    border: 1px solid #d7d7d7; }
-  .u-pagination .page_jump_btn {
-    margin-top: -3px;
-    margin-left: 10px;
-    border-color: #d7d7d7; }
+  .u-pagination .page_jump_btn,
+  .u-pagination .page_jump_value {
+    margin: 0 6px;
+    padding: 0;
+    height: 36px;
+    line-height: 34px;
+    box-sizing: border-box;
+    float: left; }
  .u-pagination-total {
    float: left;
    height: 36px;
@ -6812,6 +6826,15 @@ input.u-button[type="submit"] {
    margin: 5px; }
    .u-pagination-total span {
      padding: 0 5px; }
+  .u-pagination.u-pagination-disabled .u-pagination-disabled-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 46px;
+    background: rgba(255, 255, 255, 0.6);
+    z-index: 2;
+    cursor: not-allowed; }

 .pagination-state {
  float: left;
@ -6918,15 +6941,29 @@ input.u-button[type="submit"] {
  margin: 0 5px;
  height: 18px;
  line-height: 18px;
-  font-size: 14px; }
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  position: relative;
+  line-height: 1;
+  vertical-align: middle; }
  .u-checkbox.disabled .u-checkbox-label {
    cursor: not-allowed;
    opacity: 0.5; }
  .u-checkbox input[type='checkbox'] {
-    display: none;
-    cursor: pointer; }
+    position: absolute;
+    z-index: 3;
+    cursor: pointer;
+    opacity: 0;
+    box-sizing: border-box;
+    padding: 0;
+    width: 100%;
+    height: 100%; }
  .u-checkbox input[disabled] {
    cursor: not-allowed; }
+  .u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
+    border-color: #1e88e5; }
  .u-checkbox.is-checked .u-checkbox-label:before {
    box-shadow: inset 0 0 0 10px rgb(30,136,229);
    border-color: rgb(30,136,229); }
@ -6978,22 +7015,37 @@ input.u-button[type="submit"] {
  box-shadow: inset 0 0 0 10px rgb(76,175,80);
  border-color: rgb(76,175,80); }

+.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(76,175,80); }
+
 .u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
  box-shadow: inset 0 0 0 10px rgb(255,152,0);
  border-color: rgb(255,152,0); }

+.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(255,152,0); }
+
 .u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
  box-shadow: inset 0 0 0 10px rgb(244,67,54);
  border-color: rgb(244,67,54); }

+.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(244,67,54); }
+
 .u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
  box-shadow: inset 0 0 0 10px rgb(97,97,97);
  border-color: rgb(97,97,97); }

+.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(97,97,97); }
+
 .u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
  box-shadow: inset 0 0 0 10px rgb(0,188,212);
  border-color: rgb(0,188,212); }

+.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(0,188,212); }
+
 /* FormGroup */
 /*  Navlayout  */
 /* keyframes 定义 */
@ -7531,7 +7583,8 @@ ul {
    zoom: 1;
    position: absolute;
    right: 4px;
-    padding: 0 0 0 8px; }
+    padding: 0 0 0 8px;
+    top: -3px; }
  .u-select-selection--multiple .u-select-selection-choice-remove:before {
    display: block;
    font-family: "uf"; }
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map
--- a/docs/api.md
+++ b/docs/api.md
@ -58,7 +58,8 @@ import 'bee-table/build/Table.css';
 | onKeyTab       | tab快捷键，可以处理默认选中第一条数据 | function| -
 | onKeyUp       | up快捷键，可以处理table的上一条数据 | function| -
 | onKeyDown       | up快捷键，可以处理table的下一条数据 | function| -
-| onTabkeKeyDown       | 触发table的快捷键 | function| -
+| onTableKeyDown       | 触发table的快捷键 | function| -
+| tabIndex       | 设置焦点顺序 | number | 0
 | loadBuffer       | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5

 > 快捷键部分参考示例 (快捷键在table中的简单使用应用)
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 "name": "bee-table",
- "version": "1.6.20",
+ "version": "1.6.21",
 "description": "Table ui component for react",
 "keywords": [
  "react",
--- a/src/Table.js
+++ b/src/Table.js
@ -49,7 +49,7 @@ const propTypes = {
  onFilterChange: PropTypes.func,
  onFilterClear: PropTypes.func,
  syncHover: PropTypes.bool,
-
+  tabIndex:PropTypes.string,
 };

 const defaultProps = {
@ -79,7 +79,8 @@ const defaultProps = {
  columns:[],
  minColumnWidth: 80,
  locale:{},
-  syncHover: true
+  syncHover: true,
+  tabIndex:'0'
 };

 class Table extends Component {
@ -1027,7 +1028,7 @@ class Table extends Component {
    }else if(event.keyCode === 40){//down
      this.props.onKeyDown&&this.props.onKeyDown();
    }
-    this.props.onTabkeKeyDown&&this.props.onTabkeKeyDown();
+    this.props.onTableKeyDown&&this.props.onTableKeyDown();
    // else if(event.altKey && event.keyCode === 38){
    //   this.props.onKeyMove&&this.props.onKeyMove('up');
    // }else if(event.altKey && event.keyCode === 40){
@ -1065,7 +1066,7 @@ class Table extends Component {
    }

    return (
-      <div className={className} style={props.style} ref={el => this.contentTable = el} tabIndex="0" >
+      <div className={className} style={props.style} ref={el => this.contentTable = el} tabIndex={props.tabIndex?props.tabIndex:'0'} >
        {this.getTitle()}
        <div className={`${clsPrefix}-content`}>