merge master

CHANGELOG.md

@@ -1,3 +1,8 @@
+<a name="1.6.19"></a>
+## [1.6.19](https://github.com/tinper-bee/bee-table/compare/v1.6.18...v1.6.19) (2018-12-26)
+
+
+
 <a name="1.6.18"></a>
 ## [1.6.18](https://github.com/tinper-bee/bee-table/compare/v1.6.17...v1.6.18) (2018-12-19)
 

build/Table.css

@@ -446,6 +446,10 @@
     display: none;
     pointer-events: none; }
 
+.u-table:focus {
+  outline: none;
+  box-shadow: 0 0 0; }
+
 .u-table.bordered table {
   border-collapse: collapse; }
 

build/Table.js

@@ -168,6 +168,27 @@ var Table = function (_Component) {
       );
     };
 
+    _this.onKeyDown = function (e) {
+      var event = _utils.Event.getEvent(e);
+      // event.preventDefault?event.preventDefault():event.returnValue = false;
+      if (event.keyCode === 9) {
+        //tab
+        _this.props.onKeyTab && _this.props.onKeyTab();
+      } else if (event.keyCode === 38) {
+        //up
+        _this.props.onKeyUp && _this.props.onKeyUp();
+      } else if (event.keyCode === 40) {
+        //down
+        _this.props.onKeyDown && _this.props.onKeyDown();
+      }
+      _this.props.onTabkeKeyDown && _this.props.onTabkeKeyDown();
+      // else if(event.altKey && event.keyCode === 38){
+      //   this.props.onKeyMove&&this.props.onKeyMove('up');
+      // }else if(event.altKey && event.keyCode === 40){
+      //   this.props.onKeyMove&&this.props.onKeyMove('down');
+      // }
+    };
+
     var expandedRowKeys = [];
     var rows = [].concat(_toConsumableArray(props.data));
     _this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth);
@@ -220,6 +241,14 @@ var Table = function (_Component) {
     return _this;
   }
 
+  Table.prototype.componentWillMount = function componentWillMount() {
+    _utils.EventUtil.addHandler(document, 'keydown', this.onKeyDown);
+  };
+
+  Table.prototype.componentWillUnmount = function componentWillUnmount() {
+    _utils.EventUtil.removeHandler(document, 'keydown', this.onKeyDown);
+  };
+
   Table.prototype.componentDidMount = function componentDidMount() {
     setTimeout(this.resetScrollY, 300);
     //含有纵向滚动条
@@ -1168,7 +1197,7 @@ var Table = function (_Component) {
       'div',
       { className: className, style: props.style, ref: function ref(el) {
           return _this6.contentTable = el;
-        } },
+        }, tabIndex: '0' },
       this.getTitle(),
       _react2["default"].createElement(
         'div',

demo/demolist/Demo13.js

@@ -70,6 +70,7 @@ const data13 = [
   { a: "郭靖", b: 153, c: 25, d: "大侠",e:90, key: "3" }
 ];
 
+
 //拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
 let ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);
 

demo/demolist/Demo30.js

@@ -71,7 +71,7 @@ const data = [ ...new Array(10000) ].map((e, i) => {
    })
 
 
-class Demo1 extends Component {
+class Demo30 extends Component {
 
   constructor(props) {
     super(props);
@@ -101,4 +101,4 @@ class Demo1 extends Component {
   }
 }
 
-export default Demo1;
+export default Demo30;

demo/demolist/Demo33.js

@@ -0,0 +1,98 @@
+/**
+*
+* @title 快捷键在table中的简单使用应用。
+* @description tab 键可以默认选中第一行、up 选中上一条、down 选中下一条 更多api 见文档说明。
+*/
+
+import React, { Component } from "react";
+import Button from "bee-button";
+import Tooltip from "bee-tooltip";
+import Table from "../../src";
+
+const columns = [
+  { 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 },
+];
+
+const data = [
+  { a: "令狐冲", b: "男", c: 41, key: "1" },
+  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
+  { a: "郭靖", b: "男", c: 25, key: "3" }
+];
+
+class Demo33 extends Component {
+
+  constructor(props){
+      super(props);
+      this.state = {
+        data: data,
+        selectedRowIndex: 2
+      }
+  }
+
+  onKeyTab=()=>{
+    let {selectedRowIndex} = this.state;
+    // let count = selectedRowIndex;//(selectedRowIndex+1);
+    // count == (data.length-1)?count = -1:count;
+    // this.setState({
+    //   selectedRowIndex: (count+1)
+    // })
+    console.log(" ---onKeyTab---- ",selectedRowIndex);
+     this.setState({
+      selectedRowIndex: 0
+    })
+  }
+
+  onKeyUp=()=>{
+    let {selectedRowIndex} = this.state;
+    let count = selectedRowIndex;
+    let len = (data.length-1);
+    count = count == 0?count = len:(count-1);
+    this.setState({
+      selectedRowIndex: count
+    })
+  }
+
+  onKeyDown=()=>{
+    let {selectedRowIndex} = this.state;
+    let count = selectedRowIndex;
+    count == (data.length-1)?count = -1:(count+1);
+    this.setState({
+      selectedRowIndex: (count+1)
+    })
+  }
+ 
+  onTabkeKeyDown = ()=>{
+    let {selectedRowIndex} = this.state;
+    console.log(" ----onTabkeKeyDown--- ",selectedRowIndex);
+  }
+ 
+  render() {
+    return (
+      <div><input />
+      <Table
+        columns={columns}
+        data={data}
+        rowClassName={(record,index,indent)=>{
+          if (this.state.selectedRowIndex == index) {
+              return 'selected';
+          } else {
+              return '';
+          }
+        }}
+        onRowClick={(record,index,indent)=>{
+          this.setState({ 
+              selectedRowIndex: index
+          });
+        }}
+        onKeyTab={this.onKeyTab}
+        onKeyUp={this.onKeyUp}
+        onKeyDown={this.onKeyDown}
+        onTabkeKeyDown={this.onTabkeKeyDown}
+      /> </div>
+    );
+  }
+}
+
+export default Demo33;

dist/demo.css

@@ -8708,6 +8708,10 @@ ul {
     display: none;
     pointer-events: none; }
 
+.u-table:focus {
+  outline: none;
+  box-shadow: 0 0 0; }
+
 .u-table.bordered table {
   border-collapse: collapse; }
 

docs/api.md

@@ -55,12 +55,18 @@ import 'bee-table/build/Table.css';
 | headerScroll       | 表头下是否显示滚动条 | bool| false
 | sort       | 排序的属性 | object| {  mode:'single'//单列排序,  backSource:false //默认是前端排序，值为true为后端排序 } mode:multiple-多列排序
 | syncHover       | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
+| onKeyTab       | tab快捷键，可以处理默认选中第一条数据 | function| -
+| onKeyUp       | up快捷键，可以处理table的上一条数据 | function| -
+| onKeyDown       | up快捷键，可以处理table的下一条数据 | function| -
+| onTabkeKeyDown       | 触发table的快捷键 | function| -
 | loadBuffer       | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
 
+> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
 
 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
 
 
+
 ### Column
 
 |参数|说明|类型|默认值|

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "1.6.18",
+ "version": "1.6.19",
  "description": "Table ui component for react",
  "keywords": [
   "react",

src/Table.js

@@ -9,6 +9,7 @@ import addEventListener from 'tinper-bee-core/lib/addEventListener';
 import ColumnManager from './ColumnManager';
 import createStore from './createStore';
 import Loading from 'bee-loading';
+import { Event,EventUtil} from "./utils";
 
 const propTypes = {
   data: PropTypes.array,
@@ -135,6 +136,14 @@ class Table extends Component {
     this.computeTableWidth = this.computeTableWidth.bind(this);
   }
 
+  componentWillMount() {
+    EventUtil.addHandler(document,'keydown',this.onKeyDown);
+  }
+
+  componentWillUnmount() {
+    EventUtil.removeHandler(document,'keydown',this.onKeyDown);
+  }   
+
   componentDidMount() {
     setTimeout(this.resetScrollY, 300);
     //含有纵向滚动条
@@ -1005,7 +1014,24 @@ class Table extends Component {
         currentHoverKey: isHover ? key : null,
       });
     }
+  }
 
+  onKeyDown=(e)=>{
+    let event = Event.getEvent(e);
+    // event.preventDefault?event.preventDefault():event.returnValue = false;
+    if (event.keyCode === 9){//tab
+      this.props.onKeyTab&&this.props.onKeyTab();
+    }else if(event.keyCode === 38){//up
+      this.props.onKeyUp&&this.props.onKeyUp();
+    }else if(event.keyCode === 40){//down
+      this.props.onKeyDown&&this.props.onKeyDown();
+    }
+    this.props.onTabkeKeyDown&&this.props.onTabkeKeyDown();
+    // else if(event.altKey && event.keyCode === 38){
+    //   this.props.onKeyMove&&this.props.onKeyMove('up');
+    // }else if(event.altKey && event.keyCode === 40){
+    //   this.props.onKeyMove&&this.props.onKeyMove('down');
+    // }
   }
 
   render() {
@@ -1038,7 +1064,7 @@ class Table extends Component {
     }
 
     return (
-      <div className={className} style={props.style} ref={el => this.contentTable = el}>
+      <div className={className} style={props.style} ref={el => this.contentTable = el} tabIndex="0" >
         {this.getTitle()}
         <div className={`${clsPrefix}-content`}>
          

src/Table.scss

@@ -476,6 +476,12 @@ $checkbox-height:16px;
     pointer-events: none;
   }
 }
+.u-table:focus{
+  outline: none;
+  // border-color: #9ecaed;
+  // box-shadow: 0 0 10px #9ecaed;
+  box-shadow: 0 0 0;
+}
 
 .u-table.bordered {
   table {