es-grid-template 1.9.53 → 1.9.56

package/es/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/es/ali-table/Grid.js

@@ -56,7 +56,8 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     useVirtual,
     useOuterBorder = true,
     showHeader = true,
-    gridLines
+    gridLines,
+    dataRowIds
   } = props;
   const {
     cssVariables
@@ -163,16 +164,20 @@ const Grid = /*#__PURE__*/React.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.createElement("div", {
+  }, showToolbar !== false && (fullScreen !== false || title || topToolbaritems.length > 0) && /*#__PURE__*/React.createElement("div", {
     className: classNames(`${prefix}-grid-top`, {})
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -242,6 +247,8 @@ const Grid = /*#__PURE__*/React.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
@@ -296,6 +303,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
       };
     },
     theme: theme,
+    dataRowIds: dataRowIds,
     footerDataSource: footerDataSource
   })), (bottom || pagination && !infiniteScroll) && /*#__PURE__*/React.createElement("div", {
     className: classNames(`${prefix}-grid-bottom`, {})

package/es/ali-table/InternalTable.js

@@ -8,12 +8,14 @@ import "./base-table/styles.scss";
 import { addRowIdArray, filterDataByColumns, flatColumns2,
 // getInvisibleColumns, 
 getVisibleFields, groupArrayByColumns, isTreeArray, revertConvertFilters, sortByType, sumFields } from "../table-component/hook/utils";
-import { CustomProvider, ConfigProvider } from 'rc-master-ui';
-import { Modal } from 'antd';
+import { CustomProvider, ConfigProvider, Modal } from 'rc-master-ui';
 import { getLocale, getLocales } from "../locale/useLocale";
 import { TableContext } from "./useContext";
 import Grid from "./Grid";
 import { getParentKeysLarge, getRowsByKeysKeepTreeOrder } from "./utils/selected";
+import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { arrayMove } from "@dnd-kit/sortable";
 const InternalTable = props => {
   const {
     t,
@@ -42,6 +44,7 @@ const InternalTable = props => {
     footerDataSource,
     summary,
     useVirtual,
+    rowDnd,
     ...rest
   } = props;
   const prefix = 'ui-rc';
@@ -81,8 +84,8 @@ const InternalTable = props => {
   const [filterState, setFilterState] = React.useState(undefined);
   const [sortState, setSortState] = React.useState(undefined);
   const columns = React.useMemo(() => {
-    return sortByType(propColumns);
-  }, [propColumns]);
+    return sortByType(propColumns, rowDnd);
+  }, [propColumns, rowDnd]);
   const convertData = React.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
       return groupArrayByColumns(dataSource, groupColumns);
@@ -128,6 +131,7 @@ const InternalTable = props => {
   //   return getInvisibleColumns(columns)
   // }, [columns])
 
+  const dataIds = React.useMemo(() => mergedData.map(it => it.rowId), [mergedData]);
   const columnVisibility = React.useMemo(() => {
     return getVisibleFields(columns);
   }, [columns]);
@@ -228,6 +232,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 = arrayMove(mergedData, oldIndex, newIndex); // this is just a splice util
+
+      if (rowDnd?.onChange) {
+        rowDnd?.onChange({
+          rows: rs
+        });
+      }
+    }
+  }
+  const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
   return /*#__PURE__*/React.createElement(ConfigProvider, {
     locale: language,
     theme: {
@@ -286,6 +311,11 @@ const InternalTable = props => {
       lang,
       locale
     }
+  }, /*#__PURE__*/React.createElement(DndContext, {
+    collisionDetection: closestCenter,
+    modifiers: [restrictToVerticalAxis],
+    onDragEnd: handleDragEnd,
+    sensors: sensors
   }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
     id: id,
     useVirtual: {
@@ -306,7 +336,8 @@ const InternalTable = props => {
     onFilter: onFilter,
     onSorter: onSorter,
     defaultFilter: defaultFilter,
-    defaultSorter: defaultSorter
+    defaultSorter: defaultSorter,
+    dataRowIds: dataIds
   })), /*#__PURE__*/React.createElement(Modal, {
     open: isFullScreen,
     footer: null,
@@ -356,7 +387,8 @@ const InternalTable = props => {
     onFilter: onFilter,
     onSorter: onSorter,
     defaultFilter: defaultFilter,
-    defaultSorter: defaultSorter
-  })))))));
+    defaultSorter: defaultSorter,
+    dataRowIds: dataIds
+  }))))))));
 };
 export default InternalTable;

package/es/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/es/ali-table/base-table/html-table-default.js

@@ -0,0 +1,224 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import cx from 'classnames';
+import React from 'react';
+import { internals } from "../internals";
+import { Colgroup } from "./colgroup";
+import SpanManager from "./helpers/SpanManager";
+import { Classes } from "./styles";
+import { nonActionColumn } from "../../grid-component/hooks";
+import { Space } from 'rc-master-ui';
+import Command from "../../table-component/components/command/Command";
+import { renderValueCell } from "../../table-component/hook/useColumns";
+export 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();
+  const fullFlatCount = flat.full.length;
+  const leftFlatCount = flat.left.length;
+  const rightFlatCount = flat.right.length;
+  const tbody = TableBody != null && tbodyHtmlTag === 'tbody' ? /*#__PURE__*/React.createElement(TableBody, {
+    tbodyProps: {
+      children: data.map(renderRow)
+    }
+  }) : ( /*#__PURE__*/React.createElement(tbodyHtmlTag, null, data.map(renderRow)));
+  return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement(Colgroup, {
+    descriptors: hozInfo.visible
+  }), tbody);
+  function renderRow(row, i) {
+    const rowIndex = verInfo.offset + i;
+    spanManager.stripUpwards(rowIndex);
+    const rowProps = getRowProps(row, rowIndex);
+    const rowClass = cx(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.createElement("td", {
+            key: descriptor.blankSide
+          });
+        }
+        return renderBodyCell(row, rowIndex, descriptor.col, descriptor.colIndex);
+      })
+    };
+    const key = internals.safeGetRowKey(primaryKey, row, rowIndex);
+    if (Row != null && tbodyHtmlTag === 'tbody') {
+      return /*#__PURE__*/React.createElement(Row, {
+        key,
+        row,
+        rowIndex,
+        trProps
+      });
+    } else {
+      return /*#__PURE__*/React.createElement("tr", _extends({
+        key: key
+      }, trProps));
+    }
+  }
+  function renderBodyCell(row, rowIndex, column, colIndex) {
+    if (spanManager.testSkip(rowIndex, colIndex)) {
+      return null;
+    }
+    const value = internals.safeGetValue(column, row, rowIndex);
+    const cellProps = column.getCellProps?.(value, row, rowIndex) ?? {};
+    const a = 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.createElement("div", {
+        className: "ui-rc_cell-content"
+      }, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
+        return /*#__PURE__*/React.createElement(Command, {
+          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: cx(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 (!nonActionColumn.includes(column.field) && column.isSummary !== false) {
+        return /*#__PURE__*/React.createElement("td", _extends({
+          key: colIndex
+        }, tdProps));
+      } else {
+        return /*#__PURE__*/React.createElement("td", _extends({
+          key: colIndex
+        }, tdProps), '');
+      }
+    }
+    if (Cell != null && tbodyHtmlTag === 'tbody') {
+      return /*#__PURE__*/React.createElement(Cell, {
+        key: colIndex,
+        tdProps: tdProps,
+        row: row,
+        rowIndex: rowIndex,
+        column: column,
+        colIndex: colIndex
+      });
+    } else {
+      return /*#__PURE__*/React.createElement("td", _extends({
+        key: colIndex
+      }, tdProps));
+    }
+  }
+}

package/es/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;