@clake/react-bootstrap4-window 0.6.1 → 0.6.3

package/lib/CTable.js

@@ -1,6 +1,6 @@
-/* @clake/react-bootstrap4-window v0.6.1 | by Clake
+/* @clake/react-bootstrap4-window v0.6.3 | by Clake
  * Copyright (c) 2023 Clake,
- * 2023-06-07T17:23:51+0800
+ * 2023-06-16T14:07:02+0800
  */
 "use strict";
 
@@ -143,8 +143,9 @@ function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "editHandler", function (e, val, row) {
-      var index = parseInt(e.target.dataset.row);
-      var field = e.target.dataset.field; //如果是check组件
+      var dataset = row === 'chk' ? e.currentTarget.dataset : e.target.dataset;
+      var index = parseInt(dataset.row);
+      var field = dataset.field; //如果是check组件
 
       if (row === 'chk') {
         val = val ? 1 : 0;
@@ -256,7 +257,8 @@ function (_React$Component) {
         this.setState({
           data: nextProps.data,
           dataCount: nextProps.dataCount,
-          page: nextProps.page
+          page: nextProps.page,
+          total: nextProps.total
         });
       }
     }
@@ -267,6 +269,10 @@ function (_React$Component) {
         return true;
       }
 
+      if (nextState.total !== this.state.total) {
+        return true;
+      }
+
       return nextState.data !== this.state.data;
     }
   }, {
@@ -830,8 +836,13 @@ function (_React$Component) {
     }
   }, {
     key: "getClasses",
-    value: function getClasses() {
-      var base = 'table ck-table'; //striped
+    value: function getClasses(name) {
+      var base = 'table ck-table';
+
+      if (!!name) {
+        base = (0, _bind["default"])(base, name);
+      } //striped
+
 
       if (this.props.striped && !this.props.edit) {
         base = (0, _bind["default"])(base, 'table-striped');
@@ -954,14 +965,35 @@ function (_React$Component) {
       var base = 'ck-ctable-body flex-grow-1 d-flex flex-column';
       return base;
     }
+  }, {
+    key: "calcLocalTotal",
+    value: function calcLocalTotal(field) {
+      var _this13 = this;
+
+      return function (e) {
+        var list = _this13.state.data;
+        var total = 0;
+        list.forEach(function (item) {
+          if (!!parseFloat(item[field])) {
+            total += parseFloat(item[field]);
+          }
+        });
+        var totalData = Object.assign({}, _this13.state.total);
+        totalData[field] = total.toFixed(2);
+
+        _this13.setState({
+          total: totalData
+        });
+      };
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this13 = this;
+      var _this14 = this;
 
       return _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this13.mainDom = c;
+          return _this14.mainDom = c;
         },
         className: this.getMainClasses(),
         style: this.getStyles()
@@ -973,7 +1005,7 @@ function (_React$Component) {
         selector: "#table-body-com-".concat(this.domId)
       })), this.renderFoot(), _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this13.split = c;
+          return _this14.split = c;
         },
         className: "ck-split d-none"
       }));
@@ -981,15 +1013,15 @@ function (_React$Component) {
   }, {
     key: "renderHeader",
     value: function renderHeader() {
-      var _this14 = this;
+      var _this15 = this;
 
       return _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this14.tableHeader = c;
+          return _this15.tableHeader = c;
         }
       }, _react["default"].createElement("table", {
         ref: function ref(c) {
-          return _this14.table_head = c;
+          return _this15.table_head = c;
         },
         id: "table-head-".concat(this.domId),
         className: this.getClasses(),
@@ -1005,11 +1037,11 @@ function (_React$Component) {
         icon: "list"
       }) : _react["default"].createElement(_reactBootstrap.CCheckbox, {
         ref: function ref(c) {
-          return _this14.allchk = c;
+          return _this15.allchk = c;
         },
         onChange: this.selectAll
       })) : null, _react["default"].Children.map(this.props.children, function (item, key) {
-        _this14.cacheRow[item.props.field] = '';
+        _this15.cacheRow[item.props.field] = '';
 
         if (!item || item.props.hide) {
           return null;
@@ -1026,28 +1058,28 @@ function (_React$Component) {
 
         var sort_icon = '';
 
-        if (_this14.sortList[item.props.field]) {
-          sort_icon = 'sort-alpha-' + (_this14.sortList[item.props.field] === 'asc' ? 'down' : 'up');
+        if (_this15.sortList[item.props.field]) {
+          sort_icon = 'sort-alpha-' + (_this15.sortList[item.props.field] === 'asc' ? 'down' : 'up');
         }
 
         return _react["default"].createElement("th", {
-          onContextMenu: _this14.menuContextHandler,
-          id: _this14.domId + '-' + key,
+          onContextMenu: _this15.menuContextHandler,
+          id: _this15.domId + '-' + key,
           "data-key": 'head_' + key,
           style: style
-        }, _this14.is_sort ? _react["default"].createElement("a", {
+        }, _this15.is_sort ? _react["default"].createElement("a", {
           className: "ck-ctable-sort",
           href: "javascript://",
-          id: "".concat(_this14.domId, "-sort-").concat(item.props.field),
+          id: "".concat(_this15.domId, "-sort-").concat(item.props.field),
           "data-field": item.props.field,
-          onClick: _this14.sortHandler
+          onClick: _this15.sortHandler
         }, item.props.text, " ", _react["default"].createElement(_reactBootstrap.Icon, {
           icon: sort_icon
-        })) : item.props.text, _this14.props.move ? _react["default"].createElement("span", {
+        })) : item.props.text, _this15.props.move ? _react["default"].createElement("span", {
           ref: function ref(c) {
-            return _this14.headerSplits.push(c);
+            return _this15.headerSplits.push(c);
           },
-          "data-key": _this14.domId + '-' + key,
+          "data-key": _this15.domId + '-' + key,
           className: "ck-column-split"
         }) : null);
       })))));
@@ -1055,34 +1087,34 @@ function (_React$Component) {
   }, {
     key: "renderRows",
     value: function renderRows() {
-      var _this15 = this;
+      var _this16 = this;
 
       return _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this15.table_rows = c;
+          return _this16.table_rows = c;
         },
         id: "table-body-com-".concat(this.domId),
         className: "flex-grow-1 rows",
         onScroll: this.scrollHandler
       }, _react["default"].createElement("table", {
         ref: function ref(c) {
-          return _this15.table_body = c;
+          return _this16.table_body = c;
         },
         id: "table-body-".concat(this.domId),
         className: this.getClasses(),
         style: this.getTableStyles()
       }, _react["default"].createElement("tbody", null, this.state.data.map(function (row, i) {
-        if (_this15.props.edit) {
-          return _this15.renderEditRow(row, i);
+        if (_this16.props.edit) {
+          return _this16.renderEditRow(row, i);
         }
 
-        return _this15.renderRow(row, i);
+        return _this16.renderRow(row, i);
       }), this.props.edit ? this.renderEditAddRow() : null)), this.props.menu ? this.renderMenu() : null, this.props.menu ? this.renderNumberMenu() : null);
     }
   }, {
     key: "renderRow",
     value: function renderRow(row, i, parentRow) {
-      var _this16 = this;
+      var _this17 = this;
 
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("tr", {
         className: this.props.onClick ? 'click-row' : null,
@@ -1101,9 +1133,9 @@ function (_React$Component) {
         } //set style
 
 
-        var style = _objectSpread({}, _this16.props.columnStyle);
+        var style = _objectSpread({}, _this17.props.columnStyle);
 
-        style.textAlign = item.props.align || _this16.props.align;
+        style.textAlign = item.props.align || _this17.props.align;
 
         if (item.props.width) {
           style.width = item.props.width;
@@ -1126,8 +1158,8 @@ function (_React$Component) {
 
         if (item.props.children) {
           return _react["default"].createElement("td", {
-            onContextMenu: _this16.menuContextHandler(dataType),
-            id: _this16.domId + '-' + key,
+            onContextMenu: _this17.menuContextHandler(dataType),
+            id: _this17.domId + '-' + key,
             "data-row": "".concat(i),
             "data-field": item.props.field,
             className: item.props.className,
@@ -1146,8 +1178,8 @@ function (_React$Component) {
           }
 
           return _react["default"].createElement("td", {
-            onContextMenu: _this16.menuContextHandler(dataType),
-            id: _this16.domId + '-' + key,
+            onContextMenu: _this17.menuContextHandler(dataType),
+            id: _this17.domId + '-' + key,
             "data-field": item.props.field,
             style: style,
             onClick: function onClick(e) {
@@ -1161,14 +1193,14 @@ function (_React$Component) {
               }
             },
             "data-row": "".concat(i)
-          }, item.props.type ? _this16.renderEditComponent(item.props, row, i) : item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field]);
+          }, item.props.type ? _this17.renderEditComponent(item.props, row, i) : item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field]);
         }
       })));
     }
   }, {
     key: "renderEditRow",
     value: function renderEditRow(row, i) {
-      var _this17 = this;
+      var _this18 = this;
 
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("tr", {
         className: this.props.onClick ? 'click-row' : null,
@@ -1188,9 +1220,9 @@ function (_React$Component) {
         } //set style
 
 
-        var style = _objectSpread({}, _this17.props.columnStyle);
+        var style = _objectSpread({}, _this18.props.columnStyle);
 
-        style.textAlign = item.props.align || _this17.props.align;
+        style.textAlign = item.props.align || _this18.props.align;
 
         if (item.props.width) {
           style.width = item.props.width;
@@ -1198,9 +1230,9 @@ function (_React$Component) {
 
         var dataType = 'text';
         return _react["default"].createElement("td", {
-          onContextMenu: _this17.menuContextHandler(dataType),
+          onContextMenu: _this18.menuContextHandler(dataType),
           className: item.props.disabled ? 'disabled' : '',
-          id: _this17.domId + '-' + key,
+          id: _this18.domId + '-' + key,
           "data-field": item.props.field,
           style: style,
           onClick: function onClick(e) {
@@ -1214,13 +1246,13 @@ function (_React$Component) {
             }
           },
           "data-row": "".concat(i)
-        }, item.props.disabled ? item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field] : _this17.renderEditComponent(item.props, row, i));
+        }, item.props.disabled ? item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field] : _this18.renderEditComponent(item.props, row, i));
       })));
     }
   }, {
     key: "renderEditAddRow",
     value: function renderEditAddRow() {
-      var _this18 = this;
+      var _this19 = this;
 
       return _react["default"].createElement("tr", {
         id: this.domId + '-edit'
@@ -1242,14 +1274,14 @@ function (_React$Component) {
         return _react["default"].createElement("td", {
           style: style
         }, _react["default"].createElement(_CTableInput["default"], {
-          onFocus: _this18.addNewHandler
+          onFocus: _this19.addNewHandler
         }));
       }));
     }
   }, {
     key: "renderEditComponent",
     value: function renderEditComponent(item, row, i) {
-      var _this19 = this;
+      var _this20 = this;
 
       switch (item.type) {
         case "combo":
@@ -1278,14 +1310,16 @@ function (_React$Component) {
 
         case "checkbox":
           return _react["default"].createElement(_reactBootstrap.CCheckbox, {
+            className: "d-inline",
             width: "20px",
             onChange: function onChange(chk, e) {
-              _this19.editHandler(e, chk, 'chk');
+              _this20.editHandler(e, chk, 'chk');
             },
             "data-row": i,
             "data-field": item.field,
             checked: !!row[item.field],
-            disabled: item.disabled
+            disabled: item.disabled,
+            tabIndex: "0"
           });
 
         default:
@@ -1295,7 +1329,8 @@ function (_React$Component) {
             "data-field": item.field,
             data: row[item.field],
             align: item.align,
-            disabled: item.disabled
+            disabled: item.disabled,
+            onBlur: this.state.total && this.state.total.hasOwnProperty(item.field) ? this.calcLocalTotal(item.field) : null
           });
       }
     }
@@ -1318,7 +1353,7 @@ function (_React$Component) {
   }, {
     key: "renderTotal",
     value: function renderTotal() {
-      var _this20 = this;
+      var _this21 = this;
 
       if (!this.state.total) {
         return null;
@@ -1327,16 +1362,17 @@ function (_React$Component) {
       var total = this.state.total;
       return _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this20.tableTotal = c;
-        }
+          return _this21.tableTotal = c;
+        },
+        className: "ck-ctable-total"
       }, _react["default"].createElement("table", {
         ref: function ref(c) {
-          return _this20.table_total = c;
+          return _this21.table_total = c;
         },
         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"
@@ -1345,7 +1381,7 @@ function (_React$Component) {
           return null;
         }
 
-        var align = item.props.align || _this20.props.align;
+        var align = item.props.align || _this21.props.align;
         var style = {
           'textAlign': align
         };
@@ -1355,7 +1391,7 @@ function (_React$Component) {
         }
 
         return _react["default"].createElement("td", {
-          id: _this20.domId + '-' + key,
+          id: _this21.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]);
@@ -1364,7 +1400,7 @@ function (_React$Component) {
   }, {
     key: "renderMenu",
     value: function renderMenu() {
-      var _this21 = this;
+      var _this22 = this;
 
       var lang = this.props.lang;
 
@@ -1377,7 +1413,7 @@ function (_React$Component) {
 
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactBootstrap.Menu, {
         ref: function ref(c) {
-          return _this21.mainMenu = c;
+          return _this22.mainMenu = c;
         },
         onClick: this.menuClickHandler
       }, _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1395,7 +1431,7 @@ function (_React$Component) {
         onClick: function onClick(e, field, data) {
           var select = document.getSelection();
 
-          _this21.filterHandler(select.toString(), data.field, 'contain');
+          _this22.filterHandler(select.toString(), data.field, 'contain');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "mr-1",
@@ -1405,7 +1441,7 @@ function (_React$Component) {
         onClick: function onClick(e, field, data) {
           var select = document.getSelection();
 
-          _this21.filterHandler(select.toString(), data.field, 'exclude');
+          _this22.filterHandler(select.toString(), data.field, 'exclude');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "mr-1",
@@ -1413,7 +1449,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"
@@ -1435,13 +1471,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('equal'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this21.filterHandler(_this21.state.filter.equal, _this21.mainMenu.data.field, 'equal');
+          _this22.filterHandler(_this22.state.filter.equal, _this22.mainMenu.data.field, 'equal');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this21.filterHandler(_this21.state.filter.equal, _this21.mainMenu.data.field, 'equal');
+          _this22.filterHandler(_this22.state.filter.equal, _this22.mainMenu.data.field, 'equal');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1457,13 +1493,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('start'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this21.filterHandler(_this21.state.filter.start, _this21.mainMenu.data.field, 'start');
+          _this22.filterHandler(_this22.state.filter.start, _this22.mainMenu.data.field, 'start');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this21.filterHandler(_this21.state.filter.start, _this21.mainMenu.data.field, 'start');
+          _this22.filterHandler(_this22.state.filter.start, _this22.mainMenu.data.field, 'start');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1479,13 +1515,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('end'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this21.filterHandler(_this21.state.filter.end, _this21.mainMenu.data.field, 'end');
+          _this22.filterHandler(_this22.state.filter.end, _this22.mainMenu.data.field, 'end');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this21.filterHandler(_this21.state.filter.end, _this21.mainMenu.data.field, 'end');
+          _this22.filterHandler(_this22.state.filter.end, _this22.mainMenu.data.field, 'end');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1501,13 +1537,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('contain'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this21.filterHandler(_this21.state.filter.contain, _this21.mainMenu.data.field, 'contain');
+          _this22.filterHandler(_this22.state.filter.contain, _this22.mainMenu.data.field, 'contain');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this21.filterHandler(_this21.state.filter.contain, _this21.mainMenu.data.field, 'contain');
+          _this22.filterHandler(_this22.state.filter.contain, _this22.mainMenu.data.field, 'contain');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1524,7 +1560,7 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('condition'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this21.filterHandler(_this21.state.filter.condition, _this21.mainMenu.data.field, 'condition');
+          _this22.filterHandler(_this22.state.filter.condition, _this22.mainMenu.data.field, 'condition');
         }
       })) : null, this.props.edit ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         step: true
@@ -1535,13 +1571,13 @@ function (_React$Component) {
       }, lang['Clone Row']) : null, this.props.customMenu ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         step: true
       }) : null, this.props.customMenu ? this.props.customMenu.map(function (menu) {
-        return _this21.explainCustomMenu(menu);
+        return _this22.explainCustomMenu(menu);
       }) : null));
     }
   }, {
     key: "renderNumberMenu",
     value: function renderNumberMenu() {
-      var _this22 = this;
+      var _this23 = this;
 
       var lang = this.props.lang;
 
@@ -1554,7 +1590,7 @@ function (_React$Component) {
 
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactBootstrap.Menu, {
         ref: function ref(c) {
-          return _this22.numMenu = c;
+          return _this23.numMenu = c;
         },
         onClick: this.menuClickHandler
       }, _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1572,7 +1608,7 @@ function (_React$Component) {
         onClick: function onClick(e, field, data) {
           var select = document.getSelection();
 
-          _this22.filterHandler(select.toString(), data.field, 'contain');
+          _this23.filterHandler(select.toString(), data.field, 'contain');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "mr-1",
@@ -1582,7 +1618,7 @@ function (_React$Component) {
         onClick: function onClick(e, field, data) {
           var select = document.getSelection();
 
-          _this22.filterHandler(select.toString(), data.field, 'exclude');
+          _this23.filterHandler(select.toString(), data.field, 'exclude');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "mr-1",
@@ -1590,7 +1626,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() {
-          _this22.clearFilter();
+          _this23.clearFilter();
         }
       }, _react["default"].createElement("span", {
         className: "text-danger"
@@ -1611,14 +1647,14 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('condition'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this22.filterHandler(_this22.state.filter.condition, _this22.numMenu.data.field, 'condition');
+          _this23.filterHandler(_this23.state.filter.condition, _this23.numMenu.data.field, 'condition');
         }
       }), _react["default"].createElement("div", null, "and,or,between,>,>=,<,<=,=")) : null));
     }
   }, {
     key: "explainCustomMenu",
     value: function explainCustomMenu(menu) {
-      var _this23 = this;
+      var _this24 = this;
 
       if (menu.children && menu.children instanceof Array) {
         return _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1626,7 +1662,7 @@ function (_React$Component) {
           text: menu.text,
           child: true
         }, menu.children.map(function (item) {
-          return _this23.explainCustomMenu(item);
+          return _this24.explainCustomMenu(item);
         }));
       } else {
         return _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1763,7 +1799,8 @@ CTable.defaultProps = {
   menu: true,
   showNumbers: 30,
   showPages: 10,
-  source: null
+  source: null,
+  total: null
 };
 var _default = CTable;
 exports["default"] = _default;