@clake/react-bootstrap4-window 0.6.2 → 0.7.0

package/lib/CTable.js

@@ -1,6 +1,6 @@
-/* @clake/react-bootstrap4-window v0.6.2 | by Clake
- * Copyright (c) 2023 Clake,
- * 2023-06-15T17:08:03+0800
+/* @clake/react-bootstrap4-window v0.7.0 | by Clake
+ * Copyright (c) 2024 Clake,
+ * 2024-03-08T17:34:46+0800
  */
 "use strict";
 
@@ -37,6 +37,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -81,6 +89,27 @@ function (_React$Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "selectAll", function (checked) {
+      _this.select_all = checked; // Common.map(this.refs, (item,key,idx) => {
+      //     item.setChecked(this.select_all);
+      //     this.setRowCheck(this.select_all,idx);
+      // });
+
+      var selectRows = [];
+
+      if (checked) {
+        _this.state.data.forEach(function (item, key) {
+          selectRows.push(key);
+        });
+      }
+
+      _this.setState({
+        selectRows: selectRows,
+        selectAll: checked,
+        selectHalf: false
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "sortHandler", function (e) {
       var dom = e.currentTarget;
       var sort_type = dom.dataset.sort || 'asc';
@@ -182,16 +211,6 @@ function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "selectAll", function (checked) {
-      _this.select_all = checked;
-
-      _reactBootstrap.Common.map(_this.refs, function (item, key, idx) {
-        item.setChecked(_this.select_all);
-
-        _this.setRowCheck(_this.select_all, idx);
-      });
-    });
-
     _this.state = {
       data: _this.props.data || [],
       dataCount: _this.props.dataCount,
@@ -202,7 +221,10 @@ function (_React$Component) {
         start: '',
         end: '',
         contain: ''
-      }
+      },
+      selectAll: false,
+      selectHalf: false,
+      selectRows: []
     };
     _this.originalData = _this.state.data.slice(0);
     _this.domId = 'table-' + _reactBootstrap.Common.RandomString(16);
@@ -245,15 +267,14 @@ function (_React$Component) {
 
           this.editRows = [];
           this.originalData = _reactBootstrap.Common.Clone(nextProps.data);
-        }
+        } // if (this.allchk) {
+        //     this.allchk.setHalf(false);
+        //     this.selectRows = [];
+        // }
+        // this.select_all = false;
+        // this.selectRows = [];
 
-        if (this.allchk) {
-          this.allchk.setHalf(false);
-          this.selectRows = [];
-        }
 
-        this.select_all = false;
-        this.selectRows = [];
         this.setState({
           data: nextProps.data,
           dataCount: nextProps.dataCount,
@@ -265,6 +286,10 @@ function (_React$Component) {
   }, {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
+      if (nextState.selectRows !== this.state.selectRows) {
+        return true;
+      }
+
       if (this.state.filter !== nextState.filter) {
         return true;
       }
@@ -377,56 +402,63 @@ function (_React$Component) {
       var _this5 = this;
 
       return function (checked, e) {
-        _this5.setRowCheck(checked, i);
+        var selectRows = _this5.setRowCheck(checked, i);
+
+        var _this5$checkAllCheckH = _this5.checkAllCheckHalf(selectRows),
+            _this5$checkAllCheckH2 = _slicedToArray(_this5$checkAllCheckH, 2),
+            allChecked = _this5$checkAllCheckH2[0],
+            half = _this5$checkAllCheckH2[1];
 
-        _this5.checkAllCheckHalf();
+        _this5.setState({
+          selectRows: selectRows,
+          selectAll: allChecked,
+          selectHalf: half
+        });
 
         if (typeof _this5.props.onCheck === "function") {
-          _this5.props.onCheck(e.target.checked, row);
+          _this5.props.onCheck(checked, row);
         }
       };
     }
   }, {
     key: "checkAllCheckHalf",
-    value: function checkAllCheckHalf() {
-      if (this.props.selectOnce) return;
+    value: function checkAllCheckHalf(selectRows) {
+      if (!this.allchk || this.props.selectOnce) {
+        return [false, false];
+      }
 
-      if (this.selectRows.length > 0 && this.selectRows.length !== this.state.data.length) {
-        this.allchk.setHalf(true);
+      if (selectRows.length > 0 && selectRows.length !== this.state.data.length) {
+        return [false, true];
       }
 
-      if (this.selectRows.length === 0) {
-        this.allchk.setHalf(false);
-        this.allchk.setChecked(false);
-      } else if (this.selectRows.length === this.state.data.length) {
-        this.allchk.setHalf(false);
-        this.allchk.setChecked(true);
+      if (selectRows.length === 0) {
+        return [false, false];
+      } else if (selectRows.length === this.state.data.length) {
+        return [true, false];
       }
+
+      return [false, false];
     }
   }, {
     key: "setRowCheck",
     value: function setRowCheck(checked, rowIdx) {
-      var row = this.refs['row_' + rowIdx];
+      // let row = this.refs['row_'+rowIdx];
+      var selectRows = this.props.selectOnce ? [] : this.state.selectRows.slice();
 
       if (checked) {
-        if (this.props.selectOnce && this.selectRows.length > 0) {
-          var reIdx = this.selectRows[0];
-          this.refs['row_' + reIdx].setChecked(false);
-          this.setRowCheck(false, reIdx);
-        }
+        if (selectRows.indexOf(rowIdx) === -1) {
+          selectRows.push(rowIdx);
+        } // ReactDOM.findDOMNode(row).parentNode.parentNode.classList.add('ck-table-selected');
 
-        if (this.selectRows.indexOf(rowIdx) === -1) {
-          this.selectRows.push(rowIdx);
-        }
-
-        ReactDOM.findDOMNode(row).parentNode.parentNode.classList.add('ck-table-selected');
       } else {
-        if (this.selectRows.indexOf(rowIdx) !== -1) {
-          this.selectRows.splice(this.selectRows.indexOf(rowIdx), 1);
-        }
+        if (selectRows.indexOf(rowIdx) !== -1) {
+          selectRows.splice(this.selectRows.indexOf(rowIdx), 1);
+        } // ReactDOM.findDOMNode(row).parentNode.parentNode.classList.remove('ck-table-selected');
 
-        ReactDOM.findDOMNode(row).parentNode.parentNode.classList.remove('ck-table-selected');
-      }
+      } // this.setState({selectRows: selectRows});
+
+
+      return selectRows;
     }
   }, {
     key: "clickHandler",
@@ -741,13 +773,13 @@ function (_React$Component) {
       });
     } //****************************
 
-  }, {
-    key: "getSelectRows",
-
     /**
      * 得到所有选中的行
      * @returns {*}
      */
+
+  }, {
+    key: "getSelectRows",
     value: function getSelectRows() {
       var _this10 = this;
 
@@ -1039,7 +1071,9 @@ function (_React$Component) {
         ref: function ref(c) {
           return _this15.allchk = c;
         },
-        onChange: this.selectAll
+        onChange: this.selectAll,
+        checked: this.state.selectAll,
+        half: this.state.selectHalf
       })) : null, _react["default"].Children.map(this.props.children, function (item, key) {
         _this15.cacheRow[item.props.field] = '';
 
@@ -1116,8 +1150,9 @@ function (_React$Component) {
     value: function renderRow(row, i, parentRow) {
       var _this17 = this;
 
+      var checked = this.state.selectRows.indexOf(i) !== -1;
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("tr", {
-        className: this.props.onClick ? 'click-row' : null,
+        className: checked ? 'ck-table-selected' : null,
         onClick: this.clickHandler(row, i)
       }, this.state.select ? _react["default"].createElement("th", {
         style: {
@@ -1126,7 +1161,8 @@ function (_React$Component) {
         }
       }, _react["default"].createElement(_reactBootstrap.CCheckbox, {
         ref: 'row_' + i,
-        onChange: this.changeHandler(row, i)
+        onChange: this.changeHandler(row, i),
+        checked: checked
       })) : null, _react["default"].Children.map(this.props.children, function (item, key) {
         if (!item || item.props.hide) {
           return null;
@@ -1310,6 +1346,7 @@ function (_React$Component) {
 
         case "checkbox":
           return _react["default"].createElement(_reactBootstrap.CCheckbox, {
+            className: "d-inline",
             width: "20px",
             onChange: function onChange(chk, e) {
               _this20.editHandler(e, chk, 'chk');
@@ -1317,7 +1354,8 @@ function (_React$Component) {
             "data-row": i,
             "data-field": item.field,
             checked: !!row[item.field],
-            disabled: item.disabled
+            disabled: item.disabled,
+            tabIndex: "0"
           });
 
         default:
@@ -1370,7 +1408,7 @@ function (_React$Component) {
         id: "table-total-".concat(this.domId),
         className: this.getClasses(),
         style: this.getTableStyles()
-      }, _react["default"].createElement("tbody", null, _react["default"].createElement("tr", null, this.state.select ? _react["default"].createElement("td", {
+      }, _react["default"].createElement("tbody", null, _react["default"].createElement("tr", null, this.state.select || this.props.edit ? _react["default"].createElement("td", {
         width: "20px"
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         icon: "chart-line"