feat:过滤行的输入触发条件支持回车、失去焦点触发

README.md

@@ -103,7 +103,7 @@ class Demo extends Component {
 | haveExpandIcon       | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool   | () =>false |
 | filterable       | 是否开启根据条件来过滤数据 | bool | false
 | filterDelay       | 触发过滤输入的时候的ms延迟时间 | number | 300
-| onFilterRowsChange       | 触发过滤输入操作以及其他的回调 | (key,val) => () | ()=>()
+| onFilterRowsChange       | 触发过滤输入操作以及其他的回调，回车执行函数或者失去焦点触发回调 | (key,val) => () | () => ()
 | onFilterRowsDropChange       | 过滤下拉条件的回调 | (key,val)=>() | () => ()
 
 

build/FilterType.js

@@ -55,22 +55,32 @@ var FilterType = function (_Component) {
         _this.clearText = function () {
             _this.setState({
                 text: ""
-            }, function () {
+            });
-                _this.changeText("");
+            var onChange = _this.props.onChange;
+
+            onChange && onChange("");
+        };
+
+        _this.changeText = function (eve) {
+            _this.setState({
+                text: eve
             });
         };
 
-        _this.changeText = function (val) {
+        _this.changeTextCall = function (eve) {
             var onChange = _this.props.onChange;
 
-            if (onChange) {
+            if (eve.keyCode == 13) {
-                onChange(val);
+                onChange(eve.target.value);
-                _this.setState({
-                    text: val
-                });
             }
         };
 
+        _this.changeTextCallBlur = function (val) {
+            var onChange = _this.props.onChange;
+
+            onChange && onChange(val);
+        };
+
         _this.changeSelect = function (val) {
             var onChange = _this.props.onChange;
 
@@ -129,7 +139,9 @@ var FilterType = function (_Component) {
                             },
                             value: _this.state.text,
                             className: className,
-                            onChange: _this.changeText
+                            onChange: _this.changeText,
+                            onKeyDown: _this.changeTextCall,
+                            onBlur: _this.changeTextCallBlur
                         }),
                         _react2["default"].createElement(_FilterDropDown2["default"], {
                             onSelectDropdown: onSelectDropdown,
@@ -196,8 +208,13 @@ var FilterType = function (_Component) {
     }
     //清除文本
 
+
     //设置文本
 
+    //回车执行函数
+
+    //失去焦点后执行函数
+
     //设置下拉值
 
     //清除下拉值

build/TableHeader.js

@@ -250,8 +250,9 @@ var TableHeader = function (_Component) {
             rendertype: type,
             clsPrefix: clsPrefix,
             className: clsPrefix + ' filter-text',
-            onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex)),
+            onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex))
-            onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
+            // onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
+            , onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
             filterDropdown: rows[1][index]['filterdropdown']
           });
         //下拉框选择

dist/demo.css

@@ -7579,7 +7579,8 @@ ul {
   position: absolute;
   outline: none;
   overflow: hidden;
-  font-size: 12px; }
+  font-size: 12px;
+  animation: uSlideUpIn 300ms ease; }
   .u-select-dropdown.slide-up-enter.slide-up-enter-active.u-select-dropdown-placement-bottomLeft, .u-select-dropdown.slide-up-appear.slide-up-appear-active.u-select-dropdown-placement-bottomLeft {
     animation-name: uSlideUpIn; }
   .u-select-dropdown.slide-up-enter.slide-up-enter-active.u-select-dropdown-placement-topLeft, .u-select-dropdown.slide-up-appear.slide-up-appear-active.u-select-dropdown-placement-topLeft {
@@ -9334,8 +9335,7 @@ ul {
   border-collapse: collapse;
   max-width: 100%;
   background-color: transparent;
-  width: 100%;
+  width: 100%; }
-  height: 100%; }
 
 .rc-calendar table,
 .rc-calendar td,
@@ -9538,7 +9538,7 @@ ul {
 .rc-calendar-time-panel-table {
   table-layout: fixed;
   width: 100%;
-  height: 100%;
+  height: 255px;
   border-collapse: separate; }
 
 .rc-calendar-time-panel-cell {
@@ -9632,16 +9632,13 @@ ul {
   user-select: none;
   right: 0; }
 
-.rc-calendar-month-panel-body, .rc-calendar-year-panel-body, .rc-calendar-decade-panel-body {
+.rc-calendar-month-panel-body {
-  padding: 9px 10px 10px;
+  padding: 9px 10px 10px; }
-  height: calc(100% - 30px); }
-
-.rc-calendar-month-panel > div, .rc-calendar-year-panel > div {
-  height: 100%; }
 
 .rc-calendar-month-panel-table {
   table-layout: fixed;
   width: 100%;
+  height: 255px;
   border-collapse: separate; }
 
 .rc-calendar-month-panel-cell {

docs/api.md

@@ -50,7 +50,7 @@ import 'bee-table/build/Table.css';
 | haveExpandIcon       | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool   | () =>false |
 | filterable       | 是否开启根据条件来过滤数据 | bool | false
 | filterDelay       | 触发过滤输入的时候的ms延迟时间 | number | 300
-| onFilterRowsChange       | 触发过滤输入操作以及其他的回调 | (key,val) => () | ()=>()
+| onFilterRowsChange       | 触发过滤输入操作以及其他的回调，回车执行函数或者失去焦点触发回调 | (key,val) => () | () => ()
 | onFilterRowsDropChange       | 过滤下拉条件的回调 | (key,val)=>() | () => ()
 
 

package.json

@@ -55,7 +55,7 @@
   "bee-loading": "^1.0.3",
   "bee-menus": "^1.0.7",
   "bee-popover": "^1.0.2",
-  "bee-select": "^1.0.8",
+  "bee-select": "^1.0.21",
   "classnames": "^2.2.5",
   "lodash.clonedeep": "^4.5.0",
   "object-path": "^0.11.3",

src/FilterType.js

@@ -23,20 +23,29 @@ class FilterType extends Component {
     clearText = () => {
         this.setState({
             text: ""
-        }, () => {
+        });
-            this.changeText("");
+        let { onChange } = this.props;
+        onChange && onChange("");
+    }
+
+    //设置文本
+    changeText = (eve) => {
+        this.setState({
+            text: eve
         });
     }
-    //设置文本
+    //回车执行函数
-    changeText = (val) => {
+    changeTextCall = (eve) => {
         let { onChange } = this.props;
-        if (onChange) {
+        if (eve.keyCode == 13) {
-            onChange(val);
+            onChange(eve.target.value);
-            this.setState({
-                text: val
-            });
         }
     }
+    //失去焦点后执行函数
+    changeTextCallBlur = (val) => {
+        let { onChange } = this.props;
+        onChange && onChange(val);
+    }
     //设置下拉值
     changeSelect = (val) => {
         let { onChange } = this.props;
@@ -84,6 +93,8 @@ class FilterType extends Component {
                     value={this.state.text}
                     className={className}
                     onChange={this.changeText}
+                    onKeyDown={this.changeTextCall}
+                    onBlur={this.changeTextCallBlur}
                 />
                     <FilterDropDown
                         onSelectDropdown={onSelectDropdown}

src/TableHeader.js

@@ -241,6 +241,7 @@ class TableHeader extends Component {
           clsPrefix={clsPrefix}
           className={`${clsPrefix} filter-text`}
           onChange={debounce(filterDelay || 300, this.handlerFilterTextChange.bind(this, dataIndex))}
+          // onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
           onSelectDropdown={this.handlerFilterDropChange.bind(this, dataIndex)}
           filterDropdown={rows[1][index]['filterdropdown']}
         />