@clake/react-bootstrap4-window 0.6.3 → 0.7.1

package/lib/CTable.js

@@ -1,6 +1,6 @@
-/* @clake/react-bootstrap4-window v0.6.3 | by Clake
- * Copyright (c) 2023 Clake,
- * 2023-06-16T14:07:02+0800
+/* @clake/react-bootstrap4-window v0.7.1 | by Clake
+ * Copyright (c) 2024 Clake,
+ * 2024-03-13T11:37:05+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;
@@ -1402,13 +1438,19 @@ function (_React$Component) {
     value: function renderMenu() {
       var _this22 = this;
 
-      var lang = this.props.lang;
+      var lang;
 
-      if (!lang) {
+      if (!this.props.lang) {
         var i18 = _reactBootstrap.i18n.getLang();
 
         var langStr = typeof lang === 'string' ? lang : i18["short"];
         lang = _CTable2["default"][langStr];
+      } else {
+        if (typeof this.props.lang === 'string') {
+          lang = _CTable2["default"][this.props.lang];
+        } else {
+          lang = this.props.lang;
+        }
       }
 
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactBootstrap.Menu, {
@@ -1422,7 +1464,7 @@ function (_React$Component) {
           document.execCommand("copy");
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
-        className: "mr-1",
+        className: "me-1",
         icon: "copy"
       }), lang['Copy']), this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         step: true
@@ -1434,7 +1476,7 @@ function (_React$Component) {
           _this22.filterHandler(select.toString(), data.field, 'contain');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
-        className: "mr-1",
+        className: "me-1",
         icon: "filter"
       }), lang['Filter By Selection']) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "select_exclude",
@@ -1444,7 +1486,7 @@ function (_React$Component) {
           _this22.filterHandler(select.toString(), data.field, 'exclude');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
-        className: "mr-1",
+        className: "me-1",
         icon: "filter"
       }), lang['Filter Excluding Selection']) : null, this.is_filter || this.is_sort ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "clear_filter",
@@ -1454,17 +1496,17 @@ function (_React$Component) {
       }, _react["default"].createElement("span", {
         className: "text-danger"
       }, _react["default"].createElement(_reactBootstrap.Icon, {
-        className: "mr-1",
+        className: "me-1",
         icon: "brush"
       }), lang['Clear Filter / Sort'])) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         step: true
       }) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "equal"
       }, _react["default"].createElement("span", {
-        className: "mr-1",
+        className: "me-1",
         style: inputStyle
       }, lang['Equal With']), _react["default"].createElement(_reactBootstrap.Input, {
-        className: "mr-1",
+        className: "me-1",
         size: "xs",
         width: "120px",
         data: this.state.filter.equal,
@@ -1483,10 +1525,10 @@ function (_React$Component) {
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "filter"
       }, _react["default"].createElement("span", {
-        className: "mr-1",
+        className: "me-1",
         style: inputStyle
       }, lang['Start With']), _react["default"].createElement(_reactBootstrap.Input, {
-        className: "mr-1",
+        className: "me-1",
         size: "xs",
         width: "120px",
         data: this.state.filter.start,
@@ -1505,10 +1547,10 @@ function (_React$Component) {
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "filter"
       }, _react["default"].createElement("span", {
-        className: "mr-1",
+        className: "me-1",
         style: inputStyle
       }, lang['End With']), _react["default"].createElement(_reactBootstrap.Input, {
-        className: "mr-1",
+        className: "me-1",
         size: "xs",
         width: "120px",
         data: this.state.filter.end,
@@ -1527,10 +1569,10 @@ function (_React$Component) {
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "filter"
       }, _react["default"].createElement("span", {
-        className: "mr-1",
+        className: "me-1",
         style: inputStyle
       }, lang['Contain with']), _react["default"].createElement(_reactBootstrap.Input, {
-        className: "mr-1",
+        className: "me-1",
         size: "xs",
         width: "120px",
         data: this.state.filter.contain,
@@ -1579,13 +1621,19 @@ function (_React$Component) {
     value: function renderNumberMenu() {
       var _this23 = this;
 
-      var lang = this.props.lang;
+      var lang;
 
-      if (!lang) {
+      if (!this.props.lang) {
         var i18 = _reactBootstrap.i18n.getLang();
 
         var langStr = typeof lang === 'string' ? lang : i18["short"];
         lang = _CTable2["default"][langStr];
+      } else {
+        if (typeof this.props.lang === 'string') {
+          lang = _CTable2["default"][this.props.lang];
+        } else {
+          lang = this.props.lang;
+        }
       }
 
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactBootstrap.Menu, {
@@ -1599,7 +1647,7 @@ function (_React$Component) {
           document.execCommand("copy");
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
-        className: "mr-1",
+        className: "me-1",
         icon: "copy"
       }), lang['Copy']), this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         step: true
@@ -1611,7 +1659,7 @@ function (_React$Component) {
           _this23.filterHandler(select.toString(), data.field, 'contain');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
-        className: "mr-1",
+        className: "me-1",
         icon: "filter"
       }), lang['Filter By Selection']) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "select_exclude",
@@ -1621,7 +1669,7 @@ function (_React$Component) {
           _this23.filterHandler(select.toString(), data.field, 'exclude');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
-        className: "mr-1",
+        className: "me-1",
         icon: "filter"
       }), lang['Filter Excluding Selection']) : null, this.is_filter || this.is_sort ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "clear_filter",
@@ -1631,7 +1679,7 @@ function (_React$Component) {
       }, _react["default"].createElement("span", {
         className: "text-danger"
       }, _react["default"].createElement(_reactBootstrap.Icon, {
-        className: "mr-1",
+        className: "me-1",
         icon: "brush"
       }), lang['Clear Filter / Sort'])) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         step: true
@@ -1800,7 +1848,8 @@ CTable.defaultProps = {
   showNumbers: 30,
   showPages: 10,
   source: null,
-  total: null
+  total: null,
+  lang: 'en'
 };
 var _default = CTable;
 exports["default"] = _default;