es-grid-template 1.8.71 → 1.8.73

package/lib/group-component/components/number-range/index.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNumericComponent = require("react-numeric-component");
+var _rcMasterUi = require("rc-master-ui");
+var _utils = require("../../hook/utils");
+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 NumberRange = props => {
+  const {
+    t,
+    max,
+    min,
+    format,
+    onChange,
+    onPressEnter
+  } = props;
+  const values = _react.default.useMemo(() => [min, max], [min, max]);
+
+  // const [values, setValues] = React.useState<any[]>(() =>
+  //   mergedValues,
+  // );
+
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: '',
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      columnGap: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
+    value: values[0] ?? ''
+    // value={min}
+    ,
+    thousandSeparator: (0, _utils.checkThousandSeparator)(format?.thousandSeparator, format?.decimalSeparator),
+    decimalSeparator: (0, _utils.checkDecimalSeparator)(format?.thousandSeparator, format?.decimalSeparator),
+    allowNegative: true,
+    customInput: _rcMasterUi.Input,
+    className: 'input-element',
+    onValueChange: vals => {
+      // onChangeValueFilter(type, values.floatValue, 'min')
+
+      // setValues([vals.floatValue, values[1]])
+      onChange?.([vals.floatValue, max]);
+    }
+    // placeholder={t ? t('Min') : 'Min'}
+    ,
+    placeholder: t ? t('From') : 'From'
+    // autoFocus={true}
+    ,
+    allowClear: true,
+    classNames: {
+      input: 'filter-input'
+    },
+    onPressEnter: () => {
+      const maxInput = document.querySelector('.number-max-input');
+      if (maxInput) {
+        maxInput.focus();
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement("span", null, " - "), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
+    value: values[1] ?? ''
+    // value={max}
+    ,
+    thousandSeparator: (0, _utils.checkThousandSeparator)(format?.thousandSeparator, format?.decimalSeparator),
+    decimalSeparator: (0, _utils.checkDecimalSeparator)(format?.thousandSeparator, format?.decimalSeparator),
+    allowNegative: true,
+    customInput: _rcMasterUi.Input,
+    className: 'input-element',
+    onValueChange: vals => {
+      // setValues([values[0], vals.floatValue])
+      onChange?.([min, vals.floatValue]);
+    }
+    // placeholder={t ? t('Max') : 'Max'}
+    ,
+    placeholder: t ? t('To') : 'To',
+    onPressEnter: onPressEnter,
+    classNames: {
+      input: 'number-max-input'
+    }
+  }))));
+};
+var _default = exports.default = NumberRange;

package/lib/group-component/features/operator.d.ts

@@ -0,0 +1,24 @@
+import { OnChangeFn, RowData, TableFeature } from '@tanstack/react-table';
+export type ColumnOperatorState = ColumnOperator[];
+export interface OperatorTableState {
+    operator: ColumnOperatorState;
+}
+export interface ColumnOperator {
+    id: string;
+    operator: string;
+}
+export interface OperatorOptions {
+    enableOperator?: boolean;
+    onColumnOperatorChange?: OnChangeFn<ColumnOperatorState>;
+}
+declare module '@tanstack/react-table' {
+    interface TableState extends OperatorTableState {
+    }
+    interface TableOptionsResolved<TData extends RowData> extends OperatorOptions {
+    }
+    interface Column<TData extends RowData, TValue> {
+        getFilterOperator: () => string;
+        setFilterOperator: (operator: string) => void;
+    }
+}
+export declare const OperatorFeature: TableFeature<any>;

package/lib/group-component/features/operator.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OperatorFeature = void 0;
+var _reactTable = require("@tanstack/react-table");
+// TypeScript setup for our new feature with all of the same type-safety as stock TanStack Table features
+
+// define types for our new feature's table options
+
+// Define types for our new feature's table APIs
+// export interface OperatorInstance {
+//   setDensity: (updater: Updater<OpetorState>) => void
+
+//   toggleDensity: (value?: OpetorState) => void
+// }
+
+// Use declaration merging to add our new feature APIs and state types to TanStack Table's existing types.
+
+const OperatorFeature = exports.OperatorFeature = {
+  // define the new feature's initial state
+  getInitialState: state => {
+    return {
+      operator: [],
+      ...state
+    };
+  },
+  // define the new feature's default options
+  getDefaultOptions: table => {
+    return {
+      enableOperator: true,
+      onColumnOperatorChange: (0, _reactTable.makeStateUpdater)('operator', table)
+    };
+  },
+  // if you need to add a default column definition...
+  // getDefaultColumnDef: <TData extends RowData>(): Partial<ColumnDef<TData>> => {
+  //   return { meta: {} } //use meta instead of directly adding to the columnDef to avoid typescript stuff that's hard to workaround
+  // },
+
+  // define the new feature's table instance methods
+
+  // if you need to add row instance APIs...
+  // createRow: <TData extends RowData>(row, table): void => {},
+  // if you need to add cell instance APIs...
+  // createCell: <TData extends RowData>(cell, column, row, table): void => {},
+  // if you need to add column instance APIs...
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  createColumn: (column, table) => {
+    column.getFilterOperator = () => {
+      return table.getState().operator?.find(op => op.id === column.id)?.operator ?? undefined;
+    };
+    column.setFilterOperator = updater => {
+      const safeUpdater = old => {
+        const others = old.filter(op => op.id !== column.id);
+        return [...others, {
+          id: column.id,
+          operator: updater
+        }];
+      };
+      return table.options.onColumnOperatorChange?.(safeUpdater);
+    };
+  }
+
+  // if you need to add header instance APIs...
+  // createHeader: <TData extends RowData>(header, table): void => {},
+};

package/lib/group-component/footer/TableFooter.d.ts

@@ -0,0 +1,7 @@
+import type { Table } from "@tanstack/react-table";
+import React from "react";
+interface TableFooterProps<T> {
+    table: Table<T>;
+}
+declare const TableFooter: <RecordType extends object>({ table, }: TableFooterProps<RecordType>) => React.JSX.Element;
+export default TableFooter;

package/lib/group-component/footer/TableFooter.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _TableFooterRow = _interopRequireDefault(require("./TableFooterRow"));
+var _useContext = require("../useContext");
+var _react = _interopRequireWildcard(require("react"));
+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 type { Virtualizer } from "@tanstack/react-virtual";
+
+const TableFooter = ({
+  // columnVirtualizer,
+  table
+  // virtualPaddingLeft,
+  // virtualPaddingRight,
+  // ...rest
+}) => {
+  const {
+    prefix
+  } = (0, _react.useContext)(_useContext.TableContext);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefix}-grid-tfoot`,
+    style: {
+      display: "grid",
+      position: "sticky",
+      bottom: 0,
+      zIndex: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TableFooterRow.default, {
+    table: table
+    // columnVirtualizer={columnVirtualizer}
+    ,
+    headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1]
+    // key={headerGroup.id}
+    // virtualPaddingLeft={virtualPaddingLeft}
+    // virtualPaddingRight={virtualPaddingRight}
+    // {...rest}
+  }));
+};
+var _default = exports.default = TableFooter;

package/lib/group-component/footer/TableFooterCell.d.ts

@@ -0,0 +1,7 @@
+import type { Column } from "@tanstack/react-table";
+import React from "react";
+interface TableFooterCellProps<T> {
+    column: Column<T, any>;
+}
+declare const TableFooterCell: <RecordType extends object>({ column }: TableFooterCellProps<RecordType>) => React.JSX.Element;
+export default TableFooterCell;

package/lib/group-component/footer/TableFooterCell.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../hook/utils");
+var _useContext = require("../useContext");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("../../grid-component/hooks");
+var _reactNumericComponent = require("react-numeric-component");
+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 TableFooterCell = ({
+  column
+}) => {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+  const {
+    prefix,
+    format,
+    dataSource
+  } = (0, _react.useContext)(_useContext.TableContext);
+  const col = column.columnDef.meta ?? {};
+  const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
+  const cellFormat = (0, _utils.getFormat)(colFormat, format);
+  const thousandSeparator = cellFormat?.thousandSeparator;
+  const decimalSeparator = cellFormat?.decimalSeparator;
+
+  // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
+  const dec = cellFormat?.decimalScale;
+
+  // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
+  const sumValue = col.type === 'number' ? (0, _hooks.sumByField)(dataSource, col?.field) : 0;
+  const value = !(0, _utils.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
+  const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
+  const numberValue = Number(value);
+  const numericFormatProps = {
+    thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+    decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+    allowNegative: cellFormat?.allowNegative ?? false,
+    prefix: cellFormat?.prefix,
+    suffix: cellFormat?.suffix,
+    decimalScale: dec,
+    fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    // ref={el => {
+    //   if (el) columnVirtualizer.measureElement(el)
+    // }}
+    // data-index={header.id}
+
+    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,
+      [`${prefix}-grid-cell-text-right`]: true
+    }),
+    key: column.id
+    // colSpan={header.colSpan}
+    ,
+    style: {
+      display: 'flex',
+      ...(0, _utils.getCommonPinningStyles)(column),
+      // width: column?.getSize() ?? column.getSize(),
+      minWidth: column?.getSize()
+      // backgroundColor: "#fafafa",
+    }
+  }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps)) : '');
+};
+var _default = exports.default = TableFooterCell;

package/lib/group-component/footer/TableFooterRow.d.ts

@@ -0,0 +1,8 @@
+import type { HeaderGroup, Table } from "@tanstack/react-table";
+import React from "react";
+interface TableFooterRowProps<T> {
+    table: Table<T>;
+    headerGroup: HeaderGroup<T>;
+}
+declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, }: TableFooterRowProps<RecordType>) => React.JSX.Element;
+export default TableFooterRow;

package/lib/group-component/footer/TableFooterRow.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _TableFooterCell = _interopRequireDefault(require("./TableFooterCell"));
+var _react = _interopRequireDefault(require("react"));
+var _useContext = require("../useContext");
+const TableFooterRow = ({
+  table,
+  headerGroup
+}) => {
+  const visibleColumns = table.getVisibleLeafColumns();
+  const {
+    onRowFooterStyles
+  } = _react.default.useContext(_useContext.TableContext);
+  const rowStyles = typeof onRowFooterStyles === 'function' ? onRowFooterStyles() : onRowFooterStyles;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    key: headerGroup.id,
+    style: {
+      ...rowStyles,
+      display: "grid",
+      width: "100%",
+      height: 37,
+      gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
+    },
+    className: "ui-rc-grid-footer-row"
+  }, visibleColumns.map(header => {
+    return /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
+      key: header.id,
+      column: header
+    });
+  }));
+};
+var _default = exports.default = TableFooterRow;

package/lib/group-component/header/TableHead.d.ts

@@ -0,0 +1,15 @@
+import type { Column } from '@tanstack/react-table';
+import { type Table } from '@tanstack/react-table';
+import { type Virtualizer } from '@tanstack/react-virtual';
+import React from 'react';
+interface TableHeadProps<T> {
+    tableContainerRef: React.RefObject<HTMLDivElement>;
+    table: Table<T>;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    virtualPaddingLeft: number | undefined;
+    virtualPaddingRight: number | undefined;
+    fixedLeftColumns: Column<T, unknown>[];
+    fixedRightColumns: Column<T, unknown>[];
+}
+declare const TableHead: <RecordType extends object>({ columnVirtualizer, table, }: TableHeadProps<RecordType>) => React.JSX.Element;
+export default TableHead;

package/lib/group-component/header/TableHead.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _useContext = require("../useContext");
+var _TableHeadCell = _interopRequireDefault(require("./TableHeadCell2"));
+var _TableHeadGroupCell = _interopRequireDefault(require("./TableHeadGroupCell"));
+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 TableHead = ({
+  columnVirtualizer,
+  table
+}) => {
+  const {
+    prefix,
+    onRowHeaderStyles
+  } = (0, _react.useContext)(_useContext.TableContext);
+  const headerGroups = table.getFlatHeaders();
+  const leafColumns = table.getVisibleFlatColumns();
+  const headerDepth = table.getHeaderGroups().length;
+  const rowStyles = typeof onRowHeaderStyles === 'function' ? onRowHeaderStyles() : onRowHeaderStyles;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefix}-grid-thead`,
+    style: {
+      ...rowStyles,
+      display: 'grid',
+      position: 'sticky',
+      top: 0,
+      zIndex: 1,
+      gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
+    }
+  }, leafColumns.map(column => {
+    const depth = column.depth ?? 0;
+
+    // const colSpan = column.columns.length || 1;
+    const colSpan = column.getFlatColumns().filter(col => col.getIsVisible() && col.columns.length < 1).length;
+    // const colSpan = getVisibleChildCount(column);
+
+    const rowSpan = column.columns?.length > 0 ? 1 : headerDepth - depth;
+    const header = headerGroups.find(it => it.id === column.id || it.column.id === column.id && it.subHeaders.length > 0);
+    // const groupHeader = headerGroups.find((it) => it.column.id === column.id && it.subHeaders.length >= 2)
+
+    if (header?.subHeaders && header.subHeaders.length >= 2) {
+      return /*#__PURE__*/_react.default.createElement(_TableHeadGroupCell.default, {
+        key: column.id,
+        depth: depth,
+        column: column,
+        header: header,
+        table: table,
+        columnVirtualizer: columnVirtualizer,
+        colSpan: colSpan,
+        rowSpan: rowSpan
+      });
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, {
+        key: column.id,
+        depth: depth,
+        column: column,
+        header: header,
+        table: table,
+        columnVirtualizer: columnVirtualizer
+        // rowHeaderVirtualizer={rowHeaderVirtualizer}
+        ,
+        colSpan: colSpan,
+        rowSpan: rowSpan
+      });
+    }
+
+    // if (header) {
+    //   return (
+    //     <TableHeadCell2
+    //       key={column.id}
+    //       depth={depth}
+    //       column={column}
+    //       header={header as any}
+    //       table={table}
+    //       columnVirtualizer={columnVirtualizer}
+    //       // rowHeaderVirtualizer={rowHeaderVirtualizer}
+    //       colSpan={colSpan}
+    //       rowSpan={rowSpan}
+    //     />
+    //   )
+    // }
+
+    // return (
+    //   <div
+    //     key={col.id}
+    //     className="th p-2 border font-bold flex items-center justify-center"
+    //     style={{
+    //       // width: col.getSize(),
+    //       minWidth: col.getSize(),
+    //       gridRow: `${depth + 1} / span ${rowSpan}`,
+
+    //       gridColumn: `span ${colSpan}`,
+    //     }}
+    //   >
+    //     aaaaa
+    //     {/* {flexRender(col.columnDef.header, header.getContext())} */}
+    //   </div>
+    // );
+  }));
+};
+var _default = exports.default = TableHead;

package/lib/group-component/header/TableHeadCell.d.ts

@@ -0,0 +1,15 @@
+import type { Table } from '@tanstack/react-table';
+import { type Header } from '@tanstack/react-table';
+import React from 'react';
+import type { Virtualizer } from '@tanstack/react-virtual';
+interface TableHeadCellProps<T> {
+    t?: any;
+    table: Table<T>;
+    header: Header<T, unknown>;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    colSpan: any;
+    rowSpan: any;
+}
+declare const TableHeadCell: <RecordType extends object>(props: TableHeadCellProps<RecordType>) => React.JSX.Element;
+export default TableHeadCell;