@clake/react-bootstrap4-window 1.0.4 → 1.0.6

package/lib/CTable.js

@@ -1,6 +1,6 @@
-/* @clake/react-bootstrap4-window v1.0.4 | by Clake
+/* @clake/react-bootstrap4-window v1.0.6 | by Clake
  * Copyright (c) 2024 Clake,
- * 2024-04-02T10:57:59+0800
+ * 2024-06-19T16:20:17+0800
  */
 "use strict";
 
@@ -121,6 +121,8 @@ function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "table_total", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "fullButton", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "split", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "mainDom", void 0);
@@ -137,6 +139,8 @@ function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "allchk", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "isFull", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "equals", function (a, b) {
       if (a === b) return true;
       if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
@@ -285,6 +289,27 @@ function (_React$Component) {
       }
     });
 
+    //全屏查看
+    _defineProperty(_assertThisInitialized(_this), "fullHandler", function () {
+      if (_this.isFull) {
+        var _this$fullButton$quer, _this$fullButton$quer2;
+
+        _this.mainDom.classList.remove('ck-ctable-full');
+
+        (_this$fullButton$quer = _this.fullButton.querySelector('i')) === null || _this$fullButton$quer === void 0 ? void 0 : _this$fullButton$quer.classList.remove("fa-compress");
+        (_this$fullButton$quer2 = _this.fullButton.querySelector('i')) === null || _this$fullButton$quer2 === void 0 ? void 0 : _this$fullButton$quer2.classList.add("fa-expand");
+      } else {
+        var _this$fullButton$quer3, _this$fullButton$quer4;
+
+        _this.mainDom.classList.add('ck-ctable-full');
+
+        (_this$fullButton$quer3 = _this.fullButton.querySelector('i')) === null || _this$fullButton$quer3 === void 0 ? void 0 : _this$fullButton$quer3.classList.add("fa-compress");
+        (_this$fullButton$quer4 = _this.fullButton.querySelector('i')) === null || _this$fullButton$quer4 === void 0 ? void 0 : _this$fullButton$quer4.classList.remove("fa-expand");
+      }
+
+      _this.isFull = !_this.isFull;
+    });
+
     _this.state = {
       data: _this.props.data || [],
       dataCount: (_this$props$dataCount = _this.props.dataCount) !== null && _this$props$dataCount !== void 0 ? _this$props$dataCount : 0,
@@ -325,6 +350,7 @@ function (_React$Component) {
     _this.lockColumns = []; //lock column flag
 
     _this.isLock = false;
+    _this.isFull = false;
 
     _this.initTableWidth();
 
@@ -893,14 +919,14 @@ function (_React$Component) {
         data: data,
         dataCount: data.length
       });
-    } //****************************
+    }
+  }, {
+    key: "getSelectRows",
+    //****************************
 
     /**
      * 得到所有选中的行
      */
-
-  }, {
-    key: "getSelectRows",
     value: function getSelectRows() {
       var _this9 = this;
 
@@ -1489,25 +1515,40 @@ function (_React$Component) {
   }, {
     key: "renderFoot",
     value: function renderFoot() {
-      var _this$props$showNumbe, _this$props$showPages, _this$props$edit;
+      var _this$props$showNumbe,
+          _this$props$showPages,
+          _this$props$edit,
+          _this19 = this;
 
       if (!this.props.foot) {
         return null;
       }
 
-      return _react["default"].createElement("div", null, _react["default"].createElement(_PageBar["default"], {
+      return _react["default"].createElement("div", {
+        className: "ck-ctable-foot d-flex align-items-center"
+      }, _react["default"].createElement(_PageBar["default"], {
         page: this.state.page,
         dataCount: this.state.dataCount,
         onSelect: this.selectPageHandler,
         showNumbers: (_this$props$showNumbe = this.props.showNumbers) !== null && _this$props$showNumbe !== void 0 ? _this$props$showNumbe : 0,
         showPages: (_this$props$showPages = this.props.showPages) !== null && _this$props$showPages !== void 0 ? _this$props$showPages : 0,
         noPage: (_this$props$edit = this.props.edit) !== null && _this$props$edit !== void 0 ? _this$props$edit : false
-      }));
+      }), _react["default"].createElement("div", {
+        ref: function ref(c) {
+          _this19.fullButton = c;
+        },
+        className: "full-btn align-self-center ms-auto pe-2 text-primary",
+        onClick: function onClick() {
+          _this19.fullHandler();
+        }
+      }, _react["default"].createElement(_reactBootstrap.Icon, {
+        icon: "expand"
+      })));
     }
   }, {
     key: "renderTotal",
     value: function renderTotal() {
-      var _this19 = this;
+      var _this20 = this;
 
       if (!this.state.total) {
         return null;
@@ -1516,12 +1557,12 @@ function (_React$Component) {
       var total = this.state.total;
       return _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this19.tableTotal = c;
+          return _this20.tableTotal = c;
         },
         className: "ck-ctable-total"
       }, _react["default"].createElement("table", {
         ref: function ref(c) {
-          return _this19.table_total = c;
+          return _this20.table_total = c;
         },
         id: "table-total-".concat(this.domId),
         className: this.getClasses(),
@@ -1535,7 +1576,7 @@ function (_React$Component) {
           return null;
         }
 
-        var align = item.props.align || _this19.props.align;
+        var align = item.props.align || _this20.props.align;
         var style = {
           'textAlign': align
         };
@@ -1545,7 +1586,7 @@ function (_React$Component) {
         }
 
         return _react["default"].createElement("td", {
-          id: _this19.domId + '-' + key,
+          id: _this20.domId + '-' + key,
           "data-field": item.props.field,
           style: style
         }, item.props.onFormat ? item.props.onFormat(total[item.props.field], total, item.props.field) : total[item.props.field]);
@@ -1554,7 +1595,7 @@ function (_React$Component) {
   }, {
     key: "renderMenu",
     value: function renderMenu() {
-      var _this20 = this;
+      var _this21 = this;
 
       var lang;
 
@@ -1573,7 +1614,7 @@ function (_React$Component) {
 
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactBootstrap.Menu, {
         ref: function ref(c) {
-          return _this20.mainMenu = c;
+          return _this21.mainMenu = c;
         },
         onClick: this.menuClickHandler
       }, _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1593,7 +1634,7 @@ function (_React$Component) {
           var select = document.getSelection();
           if (!select) return;
 
-          _this20.filterHandler(select.toString(), data.field, 'contain');
+          _this21.filterHandler(select.toString(), data.field, 'contain');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "me-1",
@@ -1604,7 +1645,7 @@ function (_React$Component) {
           var select = document.getSelection();
           if (!select) return;
 
-          _this20.filterHandler(select.toString(), data.field, 'exclude');
+          _this21.filterHandler(select.toString(), data.field, 'exclude');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "me-1",
@@ -1612,7 +1653,7 @@ function (_React$Component) {
       }), lang['Filter Excluding Selection']) : null, this.is_filter || this.is_sort ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "clear_filter",
         onClick: function onClick() {
-          _this20.clearFilter();
+          _this21.clearFilter();
         }
       }, _react["default"].createElement("span", {
         className: "text-danger"
@@ -1629,7 +1670,7 @@ function (_React$Component) {
         style: inputStyle
       }, lang['Equal With']), _react["default"].createElement(_reactBootstrap.Input, {
         ref: function ref(c) {
-          return _this20.filter.equal = c;
+          return _this21.filter.equal = c;
         },
         className: "me-1",
         size: "xs",
@@ -1638,13 +1679,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('equal'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this20.filterHandler(_this20.state.filter.equal, _this20.mainMenu.data.field, 'equal');
+          _this21.filterHandler(_this21.state.filter.equal, _this21.mainMenu.data.field, 'equal');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this20.filterHandler(_this20.state.filter.equal, _this20.mainMenu.data.field, 'equal');
+          _this21.filterHandler(_this21.state.filter.equal, _this21.mainMenu.data.field, 'equal');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1654,7 +1695,7 @@ function (_React$Component) {
         style: inputStyle
       }, lang['Start With']), _react["default"].createElement(_reactBootstrap.Input, {
         ref: function ref(c) {
-          return _this20.filter.start = c;
+          return _this21.filter.start = c;
         },
         className: "me-1",
         size: "xs",
@@ -1663,13 +1704,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('start'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this20.filterHandler(_this20.state.filter.start, _this20.mainMenu.data.field, 'start');
+          _this21.filterHandler(_this21.state.filter.start, _this21.mainMenu.data.field, 'start');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this20.filterHandler(_this20.state.filter.start, _this20.mainMenu.data.field, 'start');
+          _this21.filterHandler(_this21.state.filter.start, _this21.mainMenu.data.field, 'start');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1679,7 +1720,7 @@ function (_React$Component) {
         style: inputStyle
       }, lang['End With']), _react["default"].createElement(_reactBootstrap.Input, {
         ref: function ref(c) {
-          return _this20.filter.end = c;
+          return _this21.filter.end = c;
         },
         className: "me-1",
         size: "xs",
@@ -1688,13 +1729,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('end'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this20.filterHandler(_this20.state.filter.end, _this20.mainMenu.data.field, 'end');
+          _this21.filterHandler(_this21.state.filter.end, _this21.mainMenu.data.field, 'end');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this20.filterHandler(_this20.state.filter.end, _this20.mainMenu.data.field, 'end');
+          _this21.filterHandler(_this21.state.filter.end, _this21.mainMenu.data.field, 'end');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1704,7 +1745,7 @@ function (_React$Component) {
         style: inputStyle
       }, lang['Contain with']), _react["default"].createElement(_reactBootstrap.Input, {
         ref: function ref(c) {
-          return _this20.filter.contain = c;
+          return _this21.filter.contain = c;
         },
         className: "me-1",
         size: "xs",
@@ -1713,13 +1754,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('contain'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this20.filterHandler(_this20.state.filter.contain, _this20.mainMenu.data.field, 'contain');
+          _this21.filterHandler(_this21.state.filter.contain, _this21.mainMenu.data.field, 'contain');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this20.filterHandler(_this20.state.filter.contain, _this20.mainMenu.data.field, 'contain');
+          _this21.filterHandler(_this21.state.filter.contain, _this21.mainMenu.data.field, 'contain');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1737,7 +1778,7 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('condition'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this20.filterHandler(_this20.state.filter.condition, _this20.mainMenu.data.field, 'condition');
+          _this21.filterHandler(_this21.state.filter.condition, _this21.mainMenu.data.field, 'condition');
         }
       })) : null, this.props.edit ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "",
@@ -1750,13 +1791,13 @@ function (_React$Component) {
         field: "",
         step: true
       }) : null, this.props.customMenu ? this.props.customMenu.map(function (menu) {
-        return _this20.explainCustomMenu(menu);
+        return _this21.explainCustomMenu(menu);
       }) : null));
     }
   }, {
     key: "renderNumberMenu",
     value: function renderNumberMenu() {
-      var _this21 = this;
+      var _this22 = this;
 
       var lang;
 
@@ -1775,7 +1816,7 @@ function (_React$Component) {
 
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactBootstrap.Menu, {
         ref: function ref(c) {
-          return _this21.numMenu = c;
+          return _this22.numMenu = c;
         },
         onClick: this.menuClickHandler
       }, _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1795,7 +1836,7 @@ function (_React$Component) {
           var select = document.getSelection();
           if (!select) return;
 
-          _this21.filterHandler(select.toString(), data.field, 'contain');
+          _this22.filterHandler(select.toString(), data.field, 'contain');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "me-1",
@@ -1806,7 +1847,7 @@ function (_React$Component) {
           var select = document.getSelection();
           if (!select) return;
 
-          _this21.filterHandler(select.toString(), data.field, 'exclude');
+          _this22.filterHandler(select.toString(), data.field, 'exclude');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "me-1",
@@ -1814,7 +1855,7 @@ function (_React$Component) {
       }), lang['Filter Excluding Selection']) : null, this.is_filter || this.is_sort ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "clear_filter",
         onClick: function onClick() {
-          _this21.clearFilter();
+          _this22.clearFilter();
         }
       }, _react["default"].createElement("span", {
         className: "text-danger"
@@ -1836,14 +1877,14 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('condition'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this21.filterHandler(_this21.state.filter.condition, _this21.numMenu.data.field, 'condition');
+          _this22.filterHandler(_this22.state.filter.condition, _this22.numMenu.data.field, 'condition');
         }
       }), _react["default"].createElement("div", null, "and,or,between,>,>=,<,<=,=")) : null));
     }
   }, {
     key: "explainCustomMenu",
     value: function explainCustomMenu(menu) {
-      var _this22 = this;
+      var _this23 = this;
 
       if (menu.children && menu.children instanceof Array) {
         return _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1851,7 +1892,7 @@ function (_React$Component) {
           text: menu.text,
           child: true
         }, menu.children.map(function (item) {
-          return _this22.explainCustomMenu(item);
+          return _this23.explainCustomMenu(item);
         }));
       } else {
         return _react["default"].createElement(_reactBootstrap.Menu.Item, {