es-grid-template 1.7.23 → 1.7.25

package/lib/table-component/header/TableHeadCell.js

@@ -0,0 +1,352 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactTable = require("@tanstack/react-table");
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _becoxyIcons = require("becoxy-icons");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcMasterUi = require("rc-master-ui");
+var _constant = require("../hook/constant");
+var _utils = require("../hook/utils");
+var _useContext = require("../useContext");
+var _renderFilter = require("./renderFilter");
+var _server = _interopRequireDefault(require("react-dom/server"));
+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; }
+// import { useSortable } from "@dnd-kit/sortable"
+
+// import { CSS } from '@dnd-kit/utilities'
+
+// import { ColumnTable } from "../type";
+
+// import { Tooltip } from 'react-tooltip'
+
+const TableHeadCell = props => {
+  const {
+    header,
+    getPopupContainer,
+    table,
+    t,
+    columnVirtualizer,
+    rowHeaderVirtualizer
+  } = props;
+  const {
+    prefix,
+    setSorterChange,
+    setFilterChange,
+    wrapSettings,
+    selectionSettings,
+    setIsSelectionChange,
+    id,
+    locale
+  } = (0, _react.useContext)(_useContext.TableContext);
+  const isPinned = header.column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left');
+  const isFirstRightPinnedColumn = isPinned === 'right' && header.column.getIsFirstColumn('right');
+  const [selectedKeys, setSelectedKeys] = _react.default.useState([]);
+  const [visible, setVisible] = _react.default.useState(false);
+  const {
+    filterIcon
+  } = header.column.columnDef.meta ?? {};
+
+  // const column = (header.column.columnDef ?? {}) as ColumnTable
+  const column = header.column.columnDef;
+  const originalColumn = header.column.columnDef.meta ?? {};
+  const filtered = (header.column.getFilterValue() ?? []).length > 0;
+  const cellContent = (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext());
+  const html = _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent));
+  const hasValue = html.trim().length > 0;
+
+  // const filtered = header.column.getIsFiltered()
+
+  // const { attributes, isDragging, listeners, setNodeRef, transform } =
+  //   useSortable({
+  //     id: header.column.id,
+  //   })
+
+  const style = {
+    // opacity: isDragging ? 0.8 : 1,
+    // position: 'relative',
+    // transform: CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
+    transition: 'width transform 0.2s ease-in-out',
+    whiteSpace: 'nowrap'
+    // width: header.column.getSize(),
+    // zIndex: isDragging ? 1 : 0,
+  };
+  const getDropdownTrigger = () => {
+    let iconFilter;
+    if (typeof filterIcon === 'function') {
+      iconFilter = filterIcon(filtered);
+    } else if (filterIcon) {
+      iconFilter = filterIcon;
+    } else {
+      iconFilter = /*#__PURE__*/_react.default.createElement(_becoxyIcons.FilterFill, {
+        style: {
+          color: filtered ? '#E3165B' : '#283046'
+        },
+        fontSize: 12
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement("span", {
+      role: "button",
+      tabIndex: -1,
+      className: (0, _classnames.default)(`${prefix}-trigger`, {
+        active: filtered
+      }),
+      onClick: e => {
+        e.stopPropagation();
+      }
+    }, iconFilter);
+  };
+  const triggerVisible = newVisible => {
+    setVisible(newVisible);
+  };
+  const onVisibleChange = (newVisible, info) => {
+    if (info.source === 'trigger') {
+      if (newVisible) {
+        const filterValue = header.column.getFilterValue() ?? [];
+        const operatorValue = header.column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(column?.meta ?? {});
+        setSelectedKeys(filterValue);
+        header.column.setFilterOperator?.(operatorValue);
+      } else {}
+      triggerVisible(newVisible);
+    }
+  };
+  const doFilter = type => {
+    if (type) {
+      header.column.setFilterValue(selectedKeys);
+    } else {
+      header.column.setFilterValue('');
+      setSelectedKeys([]);
+    }
+    setFilterChange(true);
+    triggerVisible(false);
+  };
+  const mergedDropdownProps = (0, _utils.extendsObject)({
+    trigger: ['click'],
+    placement: 'bottomRight',
+    // placement: direction === 'rtl' ? 'bottomLeft' : 'bottomRight',
+    children: getDropdownTrigger(),
+    getPopupContainer
+  }, {
+    // ...filterDropdownProps,
+    // rootClassName: classNames(rootClassName, filterDropdownProps.rootClassName),
+    open: visible,
+    onOpenChange: onVisibleChange,
+    destroyPopupOnHide: true,
+    dropdownRender: () => {
+      const type = (0, _utils.getTypeFilter)(originalColumn);
+      const operatorValue = header.column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(originalColumn);
+      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _constant.booleanOperator : !type || type === 'Text' ? _constant.stringOperator : _constant.numberOperator;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        // className='ui-rc-table-filter-dropdown'
+
+        className: (0, _classnames.default)(`${prefix}-grid-filter-dropdown`, {}),
+        style: {}
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          minWidth: 275,
+          padding: '8px'
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", null), column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
+        options: (0, _constant.translateOption)(operatorOptions, t),
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: operatorValue,
+        onChange: val => {
+          header.column.setFilterOperator(val);
+        }
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          marginBottom: 8
+        }
+      }, (0, _renderFilter.renderFilter)({
+        column: column,
+        selectedKeys,
+        setSelectedKeys
+        // selectedKeys: (header.column.getFilterValue() ?? []) as string[],
+        // setSelectedKeys: header.column.setFilterValue,
+      })), /*#__PURE__*/_react.default.createElement(_antd.Space, {
+        style: {
+          justifyContent: 'end',
+          width: '100%'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        type: "primary",
+        onClick: () => {
+          // header.column.setFilterValue(selectedKeys)
+
+          doFilter(true);
+        },
+        size: "small",
+        style: {
+          width: 90
+        }
+      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        type: "link",
+        size: "small",
+        onClick: () => {
+          // header.column.setFilterValue([])
+          // header.column.setFilterOperator('')
+
+          setSelectedKeys([]);
+          doFilter(false);
+        }
+      }, t ? t('Clear') : 'Clear'))));
+
+      // if (typeof filterDropdownProps?.dropdownRender === 'function') {
+      //   return filterDropdownProps.dropdownRender(dropdownContent);
+      // }
+      // return dropdownContent;
+    }
+  });
+
+  // if (header.column.id === "#" || header.column.id === "selection_column") {
+  //   return (
+  //     <th
+  //       ref={el => {
+  //         if (el) columnVirtualizer.measureElement(el)
+  //       }}
+  //       data-index={header.id}
+  //       // ref={setNodeRef}
+  //       key={header.id}
+  //       colSpan={header.colSpan}
+  //       style={{
+  //         display: 'flex',
+  //         ...getCommonPinningStyles(header.column),
+  //         ...style,
+  //         width: header?.getSize() ?? header.column.getSize()
+  //       }}
+  //     >
+
+  //       {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+  //       {/* <div> */}
+
+  //       <div
+  //         {...{
+  //           onDoubleClick: () => header.column.resetSize(),
+
+  //           onMouseDown: header.getResizeHandler(),
+  //           onTouchStart: header.getResizeHandler(),
+
+  //           className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""
+  //             }`,
+  //         }}
+  //       />
+
+  //       {/* </div> */}
+  //     </th>
+  //   )
+  // }
+
+  return /*#__PURE__*/_react.default.createElement("th", {
+    // ref={setNodeRef}
+    className: (0, _classnames.default)(`${prefix}-grid-cell`, {
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
+      [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
+      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
+    }),
+    key: header.id,
+    style: {
+      display: 'flex',
+      width: header.getSize(),
+      ...(0, _utils.getCommonPinningStyles)(header.column),
+      ...style
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": !hasValue ? '' : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement("div", null, cellContent))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('', {
+      [`${prefix}-grid-filter-column`]: header.column.id !== 'selection_column',
+      [`${prefix}-grid-selection-column`]: header.column.id === 'selection_column'
+    })
+  }, header.column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== false && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Checkbox, {
+    checked: table.getIsAllRowsSelected(),
+    indeterminate: table.getIsSomeRowsSelected(),
+    onChange: e => {
+      setIsSelectionChange({
+        isChange: true,
+        type: 'all',
+        rowData: {}
+      });
+      table.getToggleAllRowsSelectedHandler()(e);
+    }
+  }), header.column.id !== 'selection_column' && /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-column-title",
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('', {
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
+      [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')
+    })
+  }, cellContent)), !_constant.nonActionColumn.includes(header.id) && /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-header-trigger"
+  }, header.column.getCanSort() && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginInlineEnd: 6,
+      cursor: 'pointer'
+    },
+    onClick: e => {
+      setSorterChange(true);
+      const toggleSortingHandler = header.column.getToggleSortingHandler();
+      if (typeof toggleSortingHandler === 'function') {
+        toggleSortingHandler(e);
+      }
+    }
+  }, header.column.getIsSorted() ? header.column.getIsSorted() === 'asc' ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowUp, {
+    fontSize: 15,
+    color: '#000'
+    // data-tooltip-id={`${id}-tooltip-header-trigger`}
+    ,
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-content='Nhấp để sắp xếp giảm dần'
+    ,
+    "data-tooltip-content": locale?.triggerDesc ?? 'Click to sort descending'
+  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowDown, {
+    fontSize: 15,
+    color: '#000',
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-id={`${id}-tooltip-header-trigger`}
+    // data-tooltip-content='Nhấp để hủy sắp xếp'
+    ,
+    "data-tooltip-content": locale?.cancelSort ?? 'Click to cancel sorting'
+  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.SortCancel
+  // data-tooltip-id={`${id}-tooltip-header-trigger`}
+  , {
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-content='Nhấp để sắp xếp tăng dần'
+    ,
+    "data-tooltip-content": locale?.triggerAsc ?? 'Click to sort ascending',
+    fontSize: 15,
+    style: {
+      display: 'flex'
+    },
+    className: (0, _classnames.default)(`ui-rc-table-column-sorter-cancel`, {
+      active: true
+    })
+  })), header.column.getCanFilter() && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown, mergedDropdownProps)))), header.column.getCanResize() && /*#__PURE__*/_react.default.createElement("div", {
+    onDoubleClick: () => header.column.resetSize(),
+    onMouseDown: header.getResizeHandler(),
+    onTouchStart: header.getResizeHandler(),
+    onMouseUp: () => {
+      requestAnimationFrame(() => {
+        columnVirtualizer.measure();
+        rowHeaderVirtualizer.measure();
+      });
+    },
+    className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`
+  }));
+};
+var _default = exports.default = TableHeadCell;

package/lib/table-component/header/TableHeadRow.d.ts

@@ -0,0 +1,16 @@
+import type { Column, HeaderGroup, Table } from '@tanstack/react-table';
+import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+import React from 'react';
+interface TableHeadRowProps<T> {
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    rowHeaderVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+    headerGroup: HeaderGroup<T>;
+    virtualPaddingLeft: number | undefined;
+    virtualPaddingRight: number | undefined;
+    table: Table<T>;
+    fixedLeftColumns: Column<T, unknown>[];
+    fixedRightColumns: Column<T, unknown>[];
+    rowHeaderVirtual: VirtualItem;
+}
+declare const TableHeadRow: ({ table, columnVirtualizer, rowHeaderVirtualizer, headerGroup, fixedLeftColumns, fixedRightColumns, rowHeaderVirtual }: TableHeadRowProps<any>) => React.JSX.Element;
+export default TableHeadRow;

package/lib/table-component/header/TableHeadRow.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _sortable = require("@dnd-kit/sortable");
+var _react = _interopRequireDefault(require("react"));
+var _useContext = require("../useContext");
+var _TableHeadCell = _interopRequireDefault(require("./TableHeadCell"));
+// import type { Person } from "../../tanstack-table/makeData"
+
+const TableHeadRow = ({
+  table,
+  columnVirtualizer,
+  rowHeaderVirtualizer,
+  headerGroup,
+  // virtualPaddingLeft,
+  // virtualPaddingRight,
+  fixedLeftColumns,
+  fixedRightColumns,
+  rowHeaderVirtual
+}) => {
+  const {
+    prefix
+  } = _react.default.useContext(_useContext.TableContext);
+
+  // const virtualColumns = columnVirtualizer.getVirtualItems()
+  const virtualColumns = columnVirtualizer.measurementsCache;
+
+  // console.log('virtualColumns', virtualColumns)
+
+  const columnOrder = table.getState().columnOrder;
+  return /*#__PURE__*/_react.default.createElement("tr", {
+    key: headerGroup.id,
+    ref: el => {
+      if (el) rowHeaderVirtualizer.measureElement(el);
+    }
+    // data-index={rowHeaderVirtual?.index}
+    ,
+    "data-index": headerGroup.id,
+    className: `${prefix}-grid-row`,
+    style: {
+      display: 'flex',
+      width: '100%',
+      minHeight: rowHeaderVirtual?.size
+    }
+  }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
+    items: columnOrder,
+    strategy: _sortable.horizontalListSortingStrategy
+  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
+    return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, {
+      columnVirtualizer: columnVirtualizer,
+      rowHeaderVirtualizer: rowHeaderVirtualizer,
+      key: column.id,
+      table: table,
+      header: headerGroup.headers.find(h => h.column.id === column.id)
+      // column={column as any}
+    });
+  }) : null, virtualColumns.map(virtualColumn => {
+    const header = headerGroup.headers[virtualColumn.index];
+    const isFixed = table.getState().columnPinning.left?.includes(header?.column?.id) || table.getState().columnPinning.right?.includes(header?.column?.id);
+    if (header && !isFixed) {
+      return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, {
+        key: header.id,
+        header: header,
+        table: table,
+        columnVirtualizer: columnVirtualizer,
+        rowHeaderVirtualizer: rowHeaderVirtualizer
+      });
+    }
+  }),
+  //fake empty column to the right for virtualization scroll padding
+  fixedRightColumns.length > 0 ? fixedRightColumns.map(column => /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, {
+    columnVirtualizer: columnVirtualizer,
+    rowHeaderVirtualizer: rowHeaderVirtualizer,
+    table: table,
+    key: column.id,
+    header: headerGroup.headers.find(h => h.column.id === column.id)
+    // column={column as any}
+  })) : null));
+};
+var _default = exports.default = TableHeadRow;

package/lib/table-component/header/renderFilter.d.ts

@@ -0,0 +1,20 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import React from "react";
+import type { IFormat } from "../type";
+type RenderFilterProps<RecordType> = {
+    column: ColumnDef<RecordType, unknown>;
+    selectedKeys: any[];
+    setSelectedKeys: (keys: any[]) => void;
+    confirm?: () => void;
+    t?: any;
+    locale?: any;
+    dataSourceFilter?: {
+        key: string;
+        data: any[];
+    }[];
+    format?: IFormat;
+    buddhistLocale?: any;
+    dateRangeLocale?: any;
+};
+export declare const renderFilter: <RecordType>(args: RenderFilterProps<RecordType>) => React.JSX.Element;
+export {};