es-grid-template 1.9.53 → 1.9.56

package/es/table-virtuoso/table/TableWrapper.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { ColumnDef, Table } from "@tanstack/react-table";
-import type { CommandClick, ContextInfo, PaginationConfig } from '../../grid-component/type';
-import type { ContextMenuItem } from "../..";
+import type { CommandClick, ContextInfo, ContextMenuItem, PaginationConfig } from '../../grid-component/type';
 type Props<T> = {
     tableContainerRef: React.RefObject<HTMLDivElement>;
     table: Table<T>;

package/es/table-virtuoso/table/TableWrapper.js

@@ -7,6 +7,7 @@ import { TableContext } from "../useContext";
 import classNames from 'classnames';
 import TableBodyRow from "../body/TableBodyRow";
 import TableFooterCell from "../footer/TableFooterCell";
+// import type { ContextMenuItem } from 'es-grid-template';
 import { Tooltip } from 'react-tooltip';
 import ContextMenu from "../../table-component/ContextMenu";
 const TableWrapper = props => {

package/lib/ali-table/Grid.d.ts

@@ -17,5 +17,6 @@ declare const Grid: React.ForwardRefExoticComponent<Omit<TableProps, "useVirtual
         vertical?: VirtualEnum;
         header?: VirtualEnum;
     };
+    dataRowIds: any[];
 } & React.RefAttributes<BaseTable>>;
 export default Grid;

package/lib/ali-table/Grid.js

@@ -66,7 +66,8 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     useVirtual,
     useOuterBorder = true,
     showHeader = true,
-    gridLines
+    gridLines,
+    dataRowIds
   } = props;
   const {
     cssVariables
@@ -173,16 +174,20 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       [`${prefix}-grid-line-horizontal`]: gridLines === 'Horizontal',
       [`${prefix}-grid-line-vertical`]: gridLines === 'Vertical',
       [`${prefix}-grid-line-none`]: gridLines === 'None',
-      [`use-outer-border`]: useOuterBorder
+      [`use-outer-border`]: useOuterBorder,
+      [`auto-height`]: !minHeight
+      // [`has-title`]: showToolbar !== false && ( fullScreen !== false || title || topToolbaritems.length > 0)
     }),
     style: {
-      maxHeight: height ?? 700,
+      // maxHeight: height ?? 700,
+      maxHeight: height ?? minHeight,
+      // height: height ?? minHeight,
       minHeight,
       display: 'flex',
       flexDirection: 'column',
       ...artTableWrapperProps.style
     }
-  }, (showToolbar !== false || fullScreen !== false || title || topToolbaritems.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
+  }, showToolbar !== false && (fullScreen !== false || title || topToolbaritems.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${prefix}-grid-top`, {})
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -252,6 +257,8 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     isStickyHeader: true,
     stickyBottom: 0,
     stickyTop: 0,
+    isBottom: !!(bottom || pagination && !infiniteScroll),
+    isTitle: !!(showToolbar !== false && (fullScreen !== false || title || topToolbaritems.length > 0)),
     defaultColumnWidth: 100,
     originData: originData,
     format: format
@@ -306,6 +313,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       };
     },
     theme: theme,
+    dataRowIds: dataRowIds,
     footerDataSource: footerDataSource
   })), (bottom || pagination && !infiniteScroll) && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${prefix}-grid-bottom`, {})

package/lib/ali-table/InternalTable.js

@@ -14,11 +14,13 @@ var _react = _interopRequireDefault(require("react"));
 require("./base-table/styles.scss");
 var _utils = require("../table-component/hook/utils");
 var _rcMasterUi = require("rc-master-ui");
-var _antd = require("antd");
 var _useLocale = require("../locale/useLocale");
 var _useContext = require("./useContext");
 var _Grid = _interopRequireDefault(require("./Grid"));
 var _selected = require("./utils/selected");
+var _core = require("@dnd-kit/core");
+var _modifiers = require("@dnd-kit/modifiers");
+var _sortable = require("@dnd-kit/sortable");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const InternalTable = props => {
@@ -49,6 +51,7 @@ const InternalTable = props => {
     footerDataSource,
     summary,
     useVirtual,
+    rowDnd,
     ...rest
   } = props;
   const prefix = 'ui-rc';
@@ -88,8 +91,8 @@ const InternalTable = props => {
   const [filterState, setFilterState] = _react.default.useState(undefined);
   const [sortState, setSortState] = _react.default.useState(undefined);
   const columns = _react.default.useMemo(() => {
-    return (0, _utils.sortByType)(propColumns);
-  }, [propColumns]);
+    return (0, _utils.sortByType)(propColumns, rowDnd);
+  }, [propColumns, rowDnd]);
   const convertData = _react.default.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
       return (0, _utils.groupArrayByColumns)(dataSource, groupColumns);
@@ -135,6 +138,7 @@ const InternalTable = props => {
   //   return getInvisibleColumns(columns)
   // }, [columns])
 
+  const dataIds = _react.default.useMemo(() => mergedData.map(it => it.rowId), [mergedData]);
   const columnVisibility = _react.default.useMemo(() => {
     return (0, _utils.getVisibleFields)(columns);
   }, [columns]);
@@ -235,6 +239,27 @@ const InternalTable = props => {
 
   // }
 
+  // reorder rows after drag & drop
+  function handleDragEnd(event) {
+    const {
+      active,
+      over
+    } = event;
+    if (over && active.id !== over.id) {
+      //  data dạng phẳng
+
+      const oldIndex = dataIds.indexOf(active.id);
+      const newIndex = dataIds.indexOf(over.id);
+      const rs = (0, _sortable.arrayMove)(mergedData, oldIndex, newIndex); // this is just a splice util
+
+      if (rowDnd?.onChange) {
+        rowDnd?.onChange({
+          rows: rs
+        });
+      }
+    }
+  }
+  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {}), (0, _core.useSensor)(_core.TouchSensor, {}), (0, _core.useSensor)(_core.KeyboardSensor, {}));
   return /*#__PURE__*/_react.default.createElement(_rcMasterUi.ConfigProvider, {
     locale: language,
     theme: {
@@ -293,6 +318,11 @@ const InternalTable = props => {
       lang,
       locale
     }
+  }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    collisionDetection: _core.closestCenter,
+    modifiers: [_modifiers.restrictToVerticalAxis],
+    onDragEnd: handleDragEnd,
+    sensors: sensors
   }, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
     id: id,
     useVirtual: {
@@ -313,8 +343,9 @@ const InternalTable = props => {
     onFilter: onFilter,
     onSorter: onSorter,
     defaultFilter: defaultFilter,
-    defaultSorter: defaultSorter
-  })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    defaultSorter: defaultSorter,
+    dataRowIds: dataIds
+  })), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Modal, {
     open: isFullScreen,
     footer: null,
     centered: true,
@@ -363,7 +394,8 @@ const InternalTable = props => {
     onFilter: onFilter,
     onSorter: onSorter,
     defaultFilter: defaultFilter,
-    defaultSorter: defaultSorter
-  })))))));
+    defaultSorter: defaultSorter,
+    dataRowIds: dataIds
+  }))))))));
 };
 var _default = exports.default = InternalTable;

package/lib/ali-table/base-table/html-table-default.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { RenderInfo } from './interfaces';
+import type { BaseTableProps } from './table';
+import type { CommandClick, IFormat } from '../../grid-component/type';
+export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowProps' | 'primaryKey' | 'components'>> {
+    tbodyHtmlTag: 'tbody' | 'tfoot';
+    data: any[];
+    originData: any[];
+    format?: IFormat;
+    id: string;
+    commandClick?: (args: CommandClick<any>) => void;
+    horizontalRenderInfo: Pick<RenderInfo, 'flat' | 'visible' | 'horizontalRenderRange' | 'stickyLeftMap' | 'stickyRightMap'>;
+    verticalRenderInfo: {
+        offset: number;
+        first: number;
+        last: number;
+        limit: number;
+    };
+}
+export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, data, originData, format, commandClick, id, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo, components: { Row, Cell, TableBody }, }: HtmlTableProps): JSX.Element;

package/lib/ali-table/base-table/html-table-default.js

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HtmlTable = HtmlTable;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _internals = require("../internals");
+var _colgroup = require("./colgroup");
+var _SpanManager = _interopRequireDefault(require("./helpers/SpanManager"));
+var _styles = require("./styles");
+var _hooks = require("../../grid-component/hooks");
+var _rcMasterUi = require("rc-master-ui");
+var _Command = _interopRequireDefault(require("../../table-component/components/command/Command"));
+var _useColumns = require("../../table-component/hook/useColumns");
+function HtmlTable({
+  tbodyHtmlTag,
+  getRowProps,
+  primaryKey,
+  data,
+  originData,
+  format,
+  commandClick,
+  id,
+  verticalRenderInfo: verInfo,
+  horizontalRenderInfo: hozInfo,
+  components: {
+    Row,
+    Cell,
+    TableBody
+  }
+}) {
+  const {
+    flat,
+    horizontalRenderRange: hoz
+  } = hozInfo;
+  const spanManager = new _SpanManager.default();
+  const fullFlatCount = flat.full.length;
+  const leftFlatCount = flat.left.length;
+  const rightFlatCount = flat.right.length;
+  const tbody = TableBody != null && tbodyHtmlTag === 'tbody' ? /*#__PURE__*/_react.default.createElement(TableBody, {
+    tbodyProps: {
+      children: data.map(renderRow)
+    }
+  }) : ( /*#__PURE__*/_react.default.createElement(tbodyHtmlTag, null, data.map(renderRow)));
+  return /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement(_colgroup.Colgroup, {
+    descriptors: hozInfo.visible
+  }), tbody);
+  function renderRow(row, i) {
+    const rowIndex = verInfo.offset + i;
+    spanManager.stripUpwards(rowIndex);
+    const rowProps = getRowProps(row, rowIndex);
+    const rowClass = (0, _classnames.default)(_styles.Classes.tableRow, {
+      first: rowIndex === verInfo.first,
+      last: rowIndex === verInfo.last,
+      even: rowIndex % 2 === 0,
+      odd: rowIndex % 2 === 1
+    }, rowProps?.className);
+    const onContextMenu = rowProps?.onContextMenu;
+    const trProps = {
+      ...rowProps,
+      className: rowClass,
+      onContextMenu: tbodyHtmlTag === 'tbody' ? onContextMenu : undefined,
+      'data-rowindex': rowIndex,
+      children: hozInfo.visible.map(descriptor => {
+        if (descriptor.type === 'blank') {
+          return /*#__PURE__*/_react.default.createElement("td", {
+            key: descriptor.blankSide
+          });
+        }
+        return renderBodyCell(row, rowIndex, descriptor.col, descriptor.colIndex);
+      })
+    };
+    const key = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
+    if (Row != null && tbodyHtmlTag === 'tbody') {
+      return /*#__PURE__*/_react.default.createElement(Row, {
+        key,
+        row,
+        rowIndex,
+        trProps
+      });
+    } else {
+      return /*#__PURE__*/_react.default.createElement("tr", (0, _extends2.default)({
+        key: key
+      }, trProps));
+    }
+  }
+  function renderBodyCell(row, rowIndex, column, colIndex) {
+    if (spanManager.testSkip(rowIndex, colIndex)) {
+      return null;
+    }
+    const value = _internals.internals.safeGetValue(column, row, rowIndex);
+    const cellProps = column.getCellProps?.(value, row, rowIndex) ?? {};
+    const a = (0, _useColumns.renderValueCell)(column, value, row, rowIndex, colIndex, format, false);
+
+    // let cellContent: ReactNode = value
+    let cellContent = a;
+
+    // if (column.render) {
+    //   cellContent = column.render(value, row, rowIndex)
+    // }
+    // if (column.field === '#') {
+
+    //   cellContent = findItemPath(originData, row, primaryKey)
+    // }
+
+    if (column.field === 'command') {
+      const commands = column.commandItems ? column.commandItems.map(it => {
+        return {
+          ...it,
+          visible: typeof it.visible === 'function' ? it.visible?.(row) : it.visible
+        };
+      }) : [];
+      cellContent = /*#__PURE__*/_react.default.createElement("div", {
+        className: "ui-rc_cell-content"
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Space, null, commands.filter(it => it.visible !== false).map(item => {
+        return /*#__PURE__*/_react.default.createElement(_Command.default, {
+          id: id,
+          key: item.id,
+          item: item,
+          record: row,
+          onClick: () => {
+            commandClick?.({
+              id: item.id,
+              // rowId: getRowKey(record, index) as any,
+              rowId: row.rowId,
+              rowData: row,
+              index: rowIndex,
+              rows: [...originData]
+            });
+          }
+        });
+      })));
+    }
+    if (column.template) {
+      cellContent = column.template({
+        value,
+        rowData: row,
+        index: rowIndex,
+        field: column.field ?? ''
+      });
+    }
+
+    // 
+
+    let colSpan = 1;
+    let rowSpan = 1;
+    if (column.getSpanRect) {
+      const spanRect = column.getSpanRect(value, row, rowIndex);
+      colSpan = spanRect == null ? 1 : spanRect.right - colIndex;
+      rowSpan = spanRect == null ? 1 : spanRect.bottom - rowIndex;
+    } else {
+      if (cellProps.colSpan != null) {
+        colSpan = cellProps.colSpan;
+      }
+      if (cellProps.rowSpan != null) {
+        rowSpan = cellProps.rowSpan;
+      }
+    }
+
+    // rowSpan/colSpan should not be too large to avoid affecting cells that are not rendered due to virtual scrolling
+    rowSpan = Math.min(rowSpan, verInfo.limit - rowIndex);
+    colSpan = Math.min(colSpan, leftFlatCount + hoz.rightIndex - colIndex);
+    const hasSpan = colSpan > 1 || rowSpan > 1;
+    if (hasSpan) {
+      spanManager.add(rowIndex, colIndex, colSpan, rowSpan);
+    }
+    const positionStyle = {};
+    if (colIndex < leftFlatCount) {
+      positionStyle.position = 'sticky';
+      positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
+    } else if (colIndex >= fullFlatCount - rightFlatCount) {
+      positionStyle.position = 'sticky';
+      positionStyle.right = hozInfo.stickyRightMap.get(colIndex);
+    }
+    const tdProps = {
+      ...cellProps,
+      className: (0, _classnames.default)(_styles.Classes.tableCell, cellProps.className, {
+        first: colIndex === 0,
+        last: colIndex + colSpan === fullFlatCount,
+        'lock-left': colIndex < leftFlatCount,
+        'lock-right': colIndex >= fullFlatCount - rightFlatCount
+      }),
+      ...(hasSpan ? {
+        colSpan,
+        rowSpan
+      } : null),
+      style: {
+        textAlign: column.textAlign,
+        ...cellProps.style,
+        ...positionStyle
+      },
+      // children: <div className='ui-rc_cell-content'>{cellContent}</div>
+
+      children: cellContent
+      // children: () => {
+      //   return (
+      //     <span className='abcccc'>{cellContent}</span>
+      //   )
+      // },
+    };
+    if (tbodyHtmlTag === 'tfoot') {
+      if (!_hooks.nonActionColumn.includes(column.field) && column.isSummary !== false) {
+        return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({
+          key: colIndex
+        }, tdProps));
+      } else {
+        return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({
+          key: colIndex
+        }, tdProps), '');
+      }
+    }
+    if (Cell != null && tbodyHtmlTag === 'tbody') {
+      return /*#__PURE__*/_react.default.createElement(Cell, {
+        key: colIndex,
+        tdProps: tdProps,
+        row: row,
+        rowIndex: rowIndex,
+        column: column,
+        colIndex: colIndex
+      });
+    } else {
+      return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({
+        key: colIndex
+      }, tdProps));
+    }
+  }
+}

package/lib/ali-table/base-table/html-table-new.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { RenderInfo } from './interfaces';
+import type { BaseTableProps } from './table';
+import type { CommandClick, IFormat } from '../../grid-component/type';
+export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowProps' | 'primaryKey' | 'components'>> {
+    tbodyHtmlTag: 'tbody' | 'tfoot';
+    data: any[];
+    originData: any[];
+    format?: IFormat;
+    id: string;
+    commandClick?: (args: CommandClick<any>) => void;
+    horizontalRenderInfo: Pick<RenderInfo, 'flat' | 'visible' | 'horizontalRenderRange' | 'stickyLeftMap' | 'stickyRightMap'>;
+    verticalRenderInfo: {
+        offset: number;
+        first: number;
+        last: number;
+        limit: number;
+    };
+}
+export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, data, originData, format, commandClick, id, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo, components: { Row, Cell, TableBody }, }: HtmlTableProps): JSX.Element;