publish 1.6.21

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*
 

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

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: 41,d:'操作', key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
+  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67,d:'操作', key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+  { 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>
     );
   }

demo/demolist/Demo5.js

@@ -53,7 +53,7 @@ const data5 = [
 
 class Demo5 extends Component {
   render() {
-    return <Table columns={columns5} data={data5}scroll={{ x: "110%", y: 140 }}/>;
+    return <Table columns={columns5} data={data5} scroll={{ x: "110%", y: 140 }} />;
   }
 }
 

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 {
+  .u-pagination .page_jump_btn,
-    margin-top: -3px;
+  .u-pagination .page_jump_value {
-    margin-left: 10px;
+    margin: 0 6px;
-    border-color: #d7d7d7; }
+    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;
+    position: absolute;
-    cursor: pointer; }
+    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"; }

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中的简单使用应用)

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

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