@king-design/react 3.1.4-beta.2 → 3.1.4

package/components/table/row.d.ts

@@ -30,7 +30,7 @@ export interface TableRowProps {
     onRowDragOver: DragCallback;
     onRowDragEnd: DragCallback;
 }
-declare type DragCallback = (e: MouseEvent, tableRow: TableRow) => void;
+type DragCallback = (e: MouseEvent, tableRow: TableRow) => void;
 export declare class TableRow extends Component<TableRowProps> {
     static template: string | import('intact-react').Template<any>;
     private config;

package/components/table/row.js

@@ -8,45 +8,36 @@ import { isEqualObject } from '../utils';
 import { useConfigContext } from '../config';
 export var TableRow = /*#__PURE__*/function (_Component) {
   _inheritsLoose(TableRow, _Component);
-
   function TableRow() {
     var _context;
-
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.config = useConfigContext();
     return _this;
   }
-
   var _proto = TableRow.prototype;
-
   _proto.$update = function $update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force) {
     var lastProps = lastVNode.props;
     var nextProps = nextVNode.props;
     var isSame = true;
     var key;
-
     for (key in lastProps) {
       // ignore index
       if (key === 'index') continue;
       var lastValue = lastProps[key];
-      var nextValue = nextProps[key]; // deeply compare for offsetMap
-
+      var nextValue = nextProps[key];
+      // deeply compare for offsetMap
       if (key === 'offsetMap' && isEqualObject(lastValue, nextValue)) {
         continue;
       }
-
       if (lastValue !== nextValue) {
         isSame = false;
         break;
       }
     }
-
     if (!isSame) {
       _Component.prototype.$update.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
     } else {
@@ -56,85 +47,62 @@ export var TableRow = /*#__PURE__*/function (_Component) {
       });
     }
   };
-
   _proto.onClick = function onClick(e) {
     if (e.target.tagName === 'INPUT') return;
-
     var _this$get = this.get(),
-        index = _this$get.index,
-        key = _this$get.key,
-        data = _this$get.data,
-        onClick = _this$get.onClick,
-        disabled = _this$get.disabled;
-
+      index = _this$get.index,
+      key = _this$get.key,
+      data = _this$get.data,
+      onClick = _this$get.onClick,
+      disabled = _this$get.disabled;
     if (!disabled) {
       onClick(data, index, key);
     }
   };
-
   _proto.onChangeChecked = function onChangeChecked(v) {
     var _this$get2 = this.get(),
-        index = _this$get2.index,
-        key = _this$get2.key,
-        onChangeChecked = _this$get2.onChangeChecked;
-
+      index = _this$get2.index,
+      key = _this$get2.key,
+      onChangeChecked = _this$get2.onChangeChecked;
     onChangeChecked(index, v, key);
   };
-
   _proto.onClickArrow = function onClickArrow(e) {
     e.stopPropagation();
-
     var _this$get3 = this.get(),
-        onToggleSpreadRow = _this$get3.onToggleSpreadRow,
-        key = _this$get3.key;
-
+      onToggleSpreadRow = _this$get3.onToggleSpreadRow,
+      key = _this$get3.key;
     onToggleSpreadRow(key);
   };
-
   _proto.onMouseEnter = function onMouseEnter(e) {
     // for tooltip
     var mouseEnter = this.get('ev-mouseenter');
     mouseEnter && mouseEnter(e);
   };
-
   _proto.onMouseLeave = function onMouseLeave(e) {
     // for tooltip
     var mouseLeave = this.get('ev-mouseleave');
     mouseLeave && mouseLeave(e);
   };
-
   _proto.onRowDragStart = function onRowDragStart(e) {
     this.get('onRowDragStart')(e, this);
   };
-
   _proto.onRowDragOver = function onRowDragOver(e) {
     this.get('onRowDragOver')(e, this);
   };
-
   _proto.onRowDragEnd = function onRowDragEnd(e) {
     this.get('onRowDragEnd')(e, this);
   };
-
   _proto.beforeUnmount = function beforeUnmount() {
     this.get('onBeforeUnmount')(this.get('key'));
   };
-
   return TableRow;
 }(Component);
 TableRow.template = template;
-
 __decorate([bind], TableRow.prototype, "onClick", null);
-
 __decorate([bind], TableRow.prototype, "onChangeChecked", null);
-
 __decorate([bind], TableRow.prototype, "onClickArrow", null);
-
 __decorate([bind], TableRow.prototype, "onMouseEnter", null);
-
 __decorate([bind], TableRow.prototype, "onMouseLeave", null);
-
 __decorate([bind], TableRow.prototype, "onRowDragStart", null);
-
 __decorate([bind], TableRow.prototype, "onRowDragOver", null);
-
 __decorate([bind], TableRow.prototype, "onRowDragEnd", null);

package/components/table/row.vdt.js

@@ -8,54 +8,46 @@ import { TableCell } from './cell';
 import { createElementVNode, className as cx, createFragment } from 'intact-react';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
-      _this = this;
-
+    _this = this;
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      cols = _this$get.cols,
-      data = _this$get.data,
-      checkType = _this$get.checkType,
-      hasFixedLeft = _this$get.hasFixedLeft,
-      checked = _this$get.checked,
-      disabled = _this$get.disabled,
-      className = _this$get.className,
-      merge = _this$get.merge,
-      grid = _this$get.grid,
-      rowIndex = _this$get.index,
-      indeterminate = _this$get.indeterminate,
-      allDisabled = _this$get.allDisabled,
-      selected = _this$get.selected,
-      spreaded = _this$get.spreaded,
-      hasChildren = _this$get.hasChildren,
-      indent = _this$get.indent,
-      key = _this$get.key,
-      offsetMap = _this$get.offsetMap,
-      draggable = _this$get.draggable,
-      draggingKey = _this$get.draggingKey,
-      animation = _this$get.animation;
-
+    cols = _this$get.cols,
+    data = _this$get.data,
+    checkType = _this$get.checkType,
+    hasFixedLeft = _this$get.hasFixedLeft,
+    checked = _this$get.checked,
+    disabled = _this$get.disabled,
+    className = _this$get.className,
+    merge = _this$get.merge,
+    grid = _this$get.grid,
+    rowIndex = _this$get.index,
+    indeterminate = _this$get.indeterminate,
+    allDisabled = _this$get.allDisabled,
+    selected = _this$get.selected,
+    spreaded = _this$get.spreaded,
+    hasChildren = _this$get.hasChildren,
+    indent = _this$get.indent,
+    key = _this$get.key,
+    offsetMap = _this$get.offsetMap,
+    draggable = _this$get.draggable,
+    draggingKey = _this$get.draggingKey,
+    animation = _this$get.animation;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-checked"] = checked, _classNameObj[k + "-selected"] = selected, _classNameObj[k + "-spreaded"] = spreaded, _classNameObj[k + "-dragging"] = draggingKey === key, _classNameObj[className] = className, _classNameObj);
-
   var getGridItem = function getGridItem(columnIndex) {
     var _grid$rowIndex;
-
     return ((_grid$rowIndex = grid[rowIndex]) == null ? void 0 : _grid$rowIndex[columnIndex]) || {
       render: true,
       spans: null
     };
   };
-
   var vNodes = [];
-
   var pushCheckTypeVNode = function pushCheckTypeVNode(children) {
     var _getGridItem = getGridItem(0),
-        render = _getGridItem.render,
-        spans = _getGridItem.spans;
-
+      render = _getGridItem.render,
+      spans = _getGridItem.spans;
     if (!render) return;
     vNodes.push(_$cv('td', _extends({
       'key': '$checktype'
@@ -64,7 +56,6 @@ export default function ($props, $blocks, $__proto__) {
       className: [k + "-table-check"]
     }, 0, k), spans), children));
   };
-
   if (checkType === 'checkbox') {
     pushCheckTypeVNode(_$cc(Checkbox, {
       'value': indeterminate ? false : checked,
@@ -79,13 +70,11 @@ export default function ($props, $blocks, $__proto__) {
       'ev-$change:value': this.onChangeChecked
     }));
   }
-
   var columnIndexOffset = checkType !== 'none' ? 1 : 0;
   cols.forEach(function (props, columnIndex) {
     var _getGridItem2 = getGridItem(columnIndex + columnIndexOffset),
-        render = _getGridItem2.render,
-        spans = _getGridItem2.spans;
-
+      render = _getGridItem2.render,
+      spans = _getGridItem2.spans;
     if (!render) return;
     var columnKey = props.key;
     vNodes.push(_$cc(TableCell, {
@@ -110,8 +99,8 @@ export default function ($props, $blocks, $__proto__) {
     'children': vNodes
   }) : createFragment(vNodes, 8);
   /* const rows = vNodes; */
-  // for performance, no normalize
 
+  // for performance, no normalize
   return createElementVNode(2, 'tr', rows, 2, cx(classNameObj), {
     'data-key': key,
     'ev-mouseenter': this.onMouseEnter,

package/components/table/styles.js

@@ -9,21 +9,16 @@ var defaults = {
   get transition() {
     return theme.transition.large;
   },
-
   // transition: '15000s',
   border: "1px solid #e2e5e8",
-
   get borderRadius() {
     return theme.borderRadius;
   },
-
   fontSize: "12px",
   bgColor: "#fff",
-
   get color() {
     return theme.color.text;
   },
-
   fixLeftShadow: "inset 5px 0px 6px -6px rgb(0 0 0 / 30%)",
   fixRightShadow: "inset -5px 0px 6px -6px rgb(0 0 0 / 30%)",
   // head
@@ -31,11 +26,9 @@ var defaults = {
     get bgColor() {
       return theme.color.bg;
     },
-
     get color() {
       return theme.color.lightBlack;
     },
-
     padding: "0 5px 0 12px",
     fontSize: "12px",
     fontWeight: "bold",
@@ -49,7 +42,6 @@ var defaults = {
     get hoverBgcolor() {
       return theme.color.bg;
     },
-
     padding: "11px 5px 11px 12px"
   },
   // stripe
@@ -59,35 +51,27 @@ var defaults = {
     gap: "8px",
     menuMaxHeight: '200px',
     menuMinWidth: '200px',
-
     get activeColor() {
       return theme.color.primary;
     },
-
     headerPadding: "8px",
-
     get headerBorder() {
       return "1px solid " + theme.color.bg;
     }
-
   },
   // sort
   sort: {
     iconHeight: "7px",
     gap: "8px",
-
     // color: `#d0d5d9`,
     get enabledColor() {
       return theme.color.primary;
     }
-
   },
   expandBgColor: '#fdfcff',
-
   get selectedBgColor() {
     return palette(theme.color.primary, -4);
   },
-
   // tree
   arrow: {
     gap: "4px",
@@ -102,8 +86,8 @@ setDefault(function () {
   table = deepDefaults(theme, {
     table: defaults
   }).table;
-  makeStyles == null ? void 0 : makeStyles.clearCache();
-  makeGroupMenuStyles == null ? void 0 : makeGroupMenuStyles.clearCache();
+  makeStyles == null || makeStyles.clearCache();
+  makeGroupMenuStyles == null || makeGroupMenuStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {

package/components/table/table.d.ts

@@ -61,14 +61,14 @@ export interface TableBlocks<T = unknown> {
     tooltip: [T, number];
     expand: [T, number];
 }
-declare type CheckType = 'checkbox' | 'radio' | 'none';
-export declare type TableCheckType = CheckType;
-export declare type TableRowKey = string | number;
-export declare type TableSortValue<T = string> = {
+type CheckType = 'checkbox' | 'radio' | 'none';
+export type TableCheckType = CheckType;
+export type TableRowKey = string | number;
+export type TableSortValue<T = string> = {
     key?: T;
     type?: 'desc' | 'asc';
 };
-export declare type TableGroupValue<T extends string | number | symbol = string | number | symbol> = Record<T, any | any[]>;
+export type TableGroupValue<T extends string | number | symbol = string | number | symbol> = Record<T, any | any[]>;
 export declare class Table<T = any, RowKey extends TableRowKey = TableRowKey, Checkbox extends CheckType = 'checkbox', Sort extends string = string, Group extends TableGroupValue = TableGroupValue> extends Component<TableProps<T, RowKey, Checkbox, Sort, Group>, TableEvents<T, RowKey>, TableBlocks<T>> {
     static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<TableProps<unknown, TableRowKey, CheckType, string, TableGroupValue<string | number | symbol>>>>;

package/components/table/table.js

@@ -63,7 +63,6 @@ var typeDefs = {
   hideHeader: Boolean,
   pagination: [Boolean, Object]
 };
-
 var defaults = function defaults() {
   return {
     checkType: 'checkbox',
@@ -79,7 +78,6 @@ var defaults = function defaults() {
     showIndeterminate: true
   };
 };
-
 var events = {
   clickRow: true,
   dragstart: true,
@@ -92,17 +90,14 @@ var events = {
 };
 export var Table = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Table, _Component);
-
   function Table() {
     var _context;
-
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    // use public for unit test to get paginationRef
     _this.pagination = usePagination();
     _this.tree = useTree(_this.pagination.data);
     _this.columns = useColumns();
@@ -123,95 +118,74 @@ export var Table = /*#__PURE__*/function (_Component) {
     _this.config = useConfigContext();
     return _this;
   }
-
   var _proto = Table.prototype;
-
   _proto.checkAll = function checkAll() {
     this.checked.toggleCheckedAll(true);
   };
-
   _proto.uncheckAll = function uncheckAll() {
     this.checked.toggleCheckedAll(false);
   };
-
   _proto.getCheckedData = function getCheckedData() {
     return this.getData('checkedKeys');
   };
-
   _proto.getSelectedData = function getSelectedData() {
     return this.getData('selectedKeys');
   };
-
   _proto.scrollToRowByIndex = function scrollToRowByIndex(index) {
     return this.scrollToRowByKey(this.disableRow.getEnableKeys()[index]);
   };
-
   _proto.scrollToRowByKey = function scrollToRowByKey(key) {
     var _this2 = this;
-
     return new _Promise(function (resolve) {
       var scrollElement = _this2.scroll.scrollRef.value;
       var tr = scrollElement.querySelector("tr[data-key=\"" + key + "\"]");
-      if (!tr) return resolve(); // we can not use scrollIntoView with smooth, because it can only operate one element
+      if (!tr) return resolve();
+      // we can not use scrollIntoView with smooth, because it can only operate one element
       // at the same time
       // elem.scrollIntoView({behavior: 'smooth'});
-
       var headerHeight = scrollElement.querySelector('thead').offsetHeight;
       var scrollTop = scrollElement.scrollTop;
       var offsetTop = tr.offsetTop - headerHeight;
       var top = offsetTop - scrollTop;
       var topOneFrame = top / 60 / (100 / 1000);
-
       var step = function step() {
         scrollTop = Math[topOneFrame < 0 ? 'max' : 'min'](scrollTop + topOneFrame, offsetTop);
         scrollElement.scrollTop = scrollTop;
-
         if (!_this2.$unmounted && scrollTop !== offsetTop) {
           requestAnimationFrame(step);
         } else {
           resolve();
         }
       };
-
       requestAnimationFrame(step);
     });
   };
-
   _proto.exportTable = /*#__PURE__*/function () {
     var _exportTable2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, filename) {
       return _regeneratorRuntime.wrap(function _callee$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (data === void 0) {
-                data = this.get('data');
-              }
-
-              if (filename === void 0) {
-                filename = 'table';
-              }
-
-              _context2.next = 4;
-              return _exportTable(this.columns.getData, data, filename, this, filename);
-
-            case 4:
-              return _context2.abrupt("return", _context2.sent);
-
-            case 5:
-            case "end":
-              return _context2.stop();
-          }
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (data === void 0) {
+              data = this.get('data');
+            }
+            if (filename === void 0) {
+              filename = 'table';
+            }
+            _context2.next = 4;
+            return _exportTable(this.columns.getData, data, filename, this, filename);
+          case 4:
+            return _context2.abrupt("return", _context2.sent);
+          case 5:
+          case "end":
+            return _context2.stop();
         }
       }, _callee, this);
     }));
-
     function exportTable(_x, _x2) {
       return _exportTable2.apply(this, arguments);
     }
-
     return exportTable;
   }();
-
   _proto.getData = function getData(type) {
     var keys = this.get(type);
     var ret = [];
@@ -223,29 +197,23 @@ export var Table = /*#__PURE__*/function (_Component) {
     });
     this.tree.loopData(function (value, index) {
       var key = allKeys[index];
-
       if (checkedKeysMap[key]) {
         ret.push(value);
       }
     });
     return ret;
   };
-
   _proto.clickRow = function clickRow(data, index, key) {
     this.trigger('clickRow', data, index, key);
   };
-
   _proto.onChangeGroup = function onChangeGroup(key, value) {
     this.set("group." + key, value);
   };
-
   return Table;
 }(Component);
 Table.template = template;
 Table.typeDefs = typeDefs;
 Table.defaults = defaults;
 Table.events = events;
-
 __decorate([bind], Table.prototype, "clickRow", null);
-
 __decorate([bind], Table.prototype, "onChangeGroup", null);