es-grid-template 1.8.55 → 1.8.57

package/es/table-component/header/TableHeadGroupCell.js

@@ -1,28 +1,15 @@
-// import { useSortable } from "@dnd-kit/sortable"
-
 import { flexRender } from '@tanstack/react-table';
 import React, { useContext } from 'react';
-// import { CSS } from '@dnd-kit/utilities'
-// import type { Virtualizer } from '@tanstack/react-virtual'
-import { Button, Space } from 'antd';
-import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';
-import { Checkbox, Dropdown, Select } from 'rc-master-ui';
-import { booleanOperator, nonActionColumn, numberOperator, stringOperator, translateOption } from "../hook/constant";
-import { extendsObject, getCommonPinningStyles2, getDefaultOperator, getTypeFilter } from "../hook/utils";
+import { Checkbox } from 'rc-master-ui';
+import { getCommonPinningStyles2 } from "../hook/utils";
 import { TableContext } from "../useContext";
-import { renderFilter } from "./renderFilter";
 import ReactDOMServer from 'react-dom/server';
-
-// import { ColumnTable } from "../type";
-
-// import { Tooltip } from 'react-tooltip'
-
 const TableHeadGroupCell = props => {
   const {
     column,
     header,
-    getPopupContainer,
+    // getPopupContainer,
     table,
     depth,
     // t,
@@ -32,30 +19,21 @@ const TableHeadGroupCell = props => {
     rowSpan
   } = props;
   const {
-    t,
+    // t,
     prefix,
-    setSorterChange,
-    setFilterChange,
+    // setSorterChange,
+    // setFilterChange,
     wrapSettings,
     selectionSettings,
     setIsSelectionChange,
-    id,
-    locale
+    id
+    // locale
   } = useContext(TableContext);
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
   const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
-  const [selectedKeys, setSelectedKeys] = React.useState([]);
-  const [visible, setVisible] = React.useState(false);
-  const {
-    filterIcon
-  } = column.columnDef.meta ?? {};
-
-  // const column = (column.columnDef ?? {}) as ColumnTable
-  // const column = column.columnDef
-
   const originalColumn = column.columnDef.meta ?? {};
-  const filtered = (column.getFilterValue() ?? []).length > 0;
+  const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
   const cellContent = flexRender(column.columnDef.header, header.getContext());
   const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
   const hasValue = html.trim().length > 0;
@@ -68,148 +46,10 @@ const TableHeadGroupCell = props => {
   //   })
 
   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: column.getSize(),
-    // zIndex: isDragging ? 1 : 0,
+    whiteSpace: 'nowrap',
+    ...cellStyles
   };
-  const getDropdownTrigger = () => {
-    let iconFilter;
-    if (typeof filterIcon === 'function') {
-      iconFilter = filterIcon(filtered);
-    } else if (filterIcon) {
-      iconFilter = filterIcon;
-    } else {
-      iconFilter = /*#__PURE__*/React.createElement(FilterFill, {
-        style: {
-          color: filtered ? '#E3165B' : '#283046'
-        },
-        fontSize: 12
-      });
-    }
-    return /*#__PURE__*/React.createElement("span", {
-      role: "button",
-      tabIndex: -1,
-      className: classNames(`${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 = column.getFilterValue() ?? [];
-        const operatorValue = column.getFilterOperator() ?? getDefaultOperator(column?.meta ?? {});
-        setSelectedKeys(filterValue);
-        column.setFilterOperator?.(operatorValue);
-      } else {}
-      triggerVisible(newVisible);
-    }
-  };
-  const doFilter = type => {
-    if (type) {
-      column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
-    } else {
-      column.setFilterValue(undefined);
-      setSelectedKeys([]);
-    }
-    setFilterChange(true);
-    triggerVisible(false);
-    setTimeout(() => {
-      setFilterChange(false);
-    }, 10);
-  };
-  const mergedDropdownProps = 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 = getTypeFilter(originalColumn);
-      const operatorValue = column.getFilterOperator() ?? getDefaultOperator(originalColumn);
-      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
-      return /*#__PURE__*/React.createElement("div", {
-        // className='ui-rc-table-filter-dropdown'
-
-        className: classNames(`${prefix}-grid-filter-dropdown`, {}),
-        style: {}
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          minWidth: 275,
-          padding: '8px'
-        }
-      }, /*#__PURE__*/React.createElement("div", null), column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
-        className: 'mb-1'
-      }, /*#__PURE__*/React.createElement(Select, {
-        options: translateOption(operatorOptions, t),
-        style: {
-          width: '100%',
-          marginBottom: 8
-        },
-        value: operatorValue,
-        onChange: val => {
-          column.setFilterOperator(val);
-        }
-      })), /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginBottom: 8
-        }
-      }, renderFilter({
-        column: column,
-        selectedKeys,
-        setSelectedKeys
-        // selectedKeys: (column.getFilterValue() ?? []) as string[],
-        // setSelectedKeys: column.setFilterValue,
-      })), /*#__PURE__*/React.createElement(Space, {
-        style: {
-          justifyContent: 'end',
-          width: '100%'
-        }
-      }, /*#__PURE__*/React.createElement(Button, {
-        type: "primary",
-        onClick: () => {
-          // column.setFilterValue(selectedKeys)
-
-          doFilter(true);
-        },
-        size: "small",
-        style: {
-          width: 90
-        }
-      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
-        type: "link",
-        size: "small",
-        onClick: () => {
-          // column.setFilterValue([])
-          // column.setFilterOperator('')
-
-          setSelectedKeys([]);
-          doFilter(false);
-        }
-      }, t ? t('Clear') : 'Clear'))));
-
-      // if (typeof filterDropdownProps?.dropdownRender === 'function') {
-      //   return filterDropdownProps.dropdownRender(dropdownContent);
-      // }
-      // return dropdownContent;
-    }
-  });
   return /*#__PURE__*/React.createElement("div", {
     // ref={setNodeRef}
     className: classNames(`${prefix}-grid-cell`, {
@@ -219,21 +59,14 @@ const TableHeadGroupCell = props => {
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
       [`${prefix}-grid-cell-text-center`]: (originalColumn?.headerTextAlign ?? originalColumn?.textAlign) === 'center',
       [`${prefix}-grid-cell-text-right`]: (originalColumn?.headerTextAlign ?? originalColumn.textAlign) === 'right'
-    })
-    // colSpan={colSpan}
-    // rowSpan={rowSpan}
-    ,
-
+    }),
     "data-col-span": colSpan,
     key: header.id,
     style: {
-      // display: 'flex',
-      // width: column.getSize(),
       minWidth: column.getSize(),
       flex: 1,
       gridRow: `${depth + 1} / span ${rowSpan}`,
       gridColumn: `span ${colSpan}`,
-      // maxWidth: header.getSize(),
       ...getCommonPinningStyles2(header),
       width: 'auto',
       ...style
@@ -267,52 +100,7 @@ const TableHeadGroupCell = props => {
       [`${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)), !nonActionColumn.includes(column.id) && column.columns.length < 1 && /*#__PURE__*/React.createElement("span", {
-    className: "ui-rc-header-trigger"
-  }, column.getCanSort() && /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginInlineEnd: 6,
-      cursor: 'pointer'
-    },
-    onClick: e => {
-      setSorterChange(true);
-      const toggleSortingHandler = column.getToggleSortingHandler();
-      if (typeof toggleSortingHandler === 'function') {
-        toggleSortingHandler(e);
-      }
-    }
-  }, column.getIsSorted() ? column.getIsSorted() === 'asc' ? /*#__PURE__*/React.createElement(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.createElement(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.createElement(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: classNames(`ui-rc-table-column-sorter-cancel`, {
-      active: true
-    })
-  })), column.getCanFilter() && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Dropdown, mergedDropdownProps)))), column.getCanResize() && /*#__PURE__*/React.createElement("div", {
+  }, cellContent))), column.getCanResize() && /*#__PURE__*/React.createElement("div", {
     onDoubleClick: () => column.resetSize(),
     onMouseDown: header.getResizeHandler(),
     onTouchStart: header.getResizeHandler(),

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

@@ -1,40 +1,30 @@
 import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
-// import type { Virtualizer } from '@tanstack/react-virtual'
-// import type { Person } from "../../tanstack-table/makeData"
 import React from 'react';
 import { TableContext } from "../useContext";
 import TableHeadCell from "./TableHeadCell";
-// import { getCommonPinningStyles } from '../hook/utils'
-
 const TableHeadRow = ({
   table,
   headerGroup,
   columnVirtualizer
-  // virtualPaddingLeft,
-  // virtualPaddingRight,
-  // fixedLeftColumns,
-  // fixedRightColumns
 }) => {
   const {
-    prefix
+    prefix,
+    onRowHeaderStyles
   } = React.useContext(TableContext);
-
-  // const virtualColumns = columnVirtualizer.getVirtualItems()
-
   const columnOrder = table.getState().columnOrder;
+  const rowStyles = typeof onRowHeaderStyles === 'function' ? onRowHeaderStyles() : onRowHeaderStyles;
   return /*#__PURE__*/React.createElement("div", {
     key: headerGroup.id
     // ref={el => {
     //   if (el) rowHeaderVirtualizer.measureElement(el)
     // }}
-    // data-index={rowHeaderVirtual?.index}
     ,
+
     "data-index": headerGroup.id,
-    className: `${prefix}-grid-row`,
+    className: `${prefix}-grid-row ${prefix}-grid-header`,
     style: {
-      // display: 'flex',
+      ...rowStyles,
       width: '100%'
-      // minHeight: rowHeaderVirtual?.size
     }
   }, /*#__PURE__*/React.createElement(SortableContext, {
     items: columnOrder,
@@ -53,9 +43,7 @@ const TableHeadRow = ({
       key: header.id,
       header: header,
       table: table,
-      columnVirtualizer: columnVirtualizer
-      // rowHeaderVirtualizer={rowHeaderVirtualizer}
-      ,
+      columnVirtualizer: columnVirtualizer,
       colSpan: header.colSpan,
       rowSpan: rowSpan
     });

package/es/table-component/hook/useColumns.js

@@ -214,6 +214,8 @@ export const toggleRowSelection = props => {
     return;
   }
   if (row.subRows && row.subRows.length > 0) {
+    // click vào row cha
+
     const allChild = getAllChildren(row);
     toggleRowAndChildren(row, !row.getIsSelected());
     if (row.getIsSelected()) {
@@ -245,17 +247,29 @@ export const toggleRowSelection = props => {
       });
     }
   } else {
+    // click vào row không có cha
+
     row.getToggleSelectedHandler()(e);
     if (row.getIsSelected()) {
       // đã chọn
 
-      // xóa row ra list selected 
-      const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
+      const rowParent = row.getParentRow();
+      // const rowParent1 = row.getParentRows()
+
+      let newCheckedRows = [];
+      if (rowParent) {}
+      if (rowParent && countUnselectedChildren(row) === 1) {
+        newCheckedRows = prevSelected.filter(it => it.id !== row.id && it.id !== rowParent.id);
+      } else {
+        // xóa row ra list selected 
+        // const newRowsSelected = prevSelected.filter((it) => it.id !== row.id)
+        newCheckedRows = prevSelected.filter(it => it.id !== row.id);
+      }
       setIsSelectionChange({
         isChange: true,
         type: 'rowSelected',
         rowData: row.original,
-        rowsData: newRowsSelected ?? []
+        rowsData: newCheckedRows ?? []
       });
     } else {
       // chưa selected

package/es/table-component/hook/utils.js

@@ -26,25 +26,13 @@ export const convertDateToDayjs = (date, format) => {
 };
 export const getCommonPinningStyles = column => {
   const isPinned = column.getIsPinned();
-  // const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
-  // const isFirstRightPinnedColumn =isPinned === "right" && column.getIsFirstColumn("right");
-
   return {
-    // boxShadow: isFirstRightPinnedColumn
-    //     ? "#e0e0e0 2px 0px 1px -1px inset"
-    //     : undefined,
-
     left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
     right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
-    // opacity: isPinned ? 0.5 : 1,
     opacity: 1,
     position: isPinned ? "sticky" : "relative",
-    // width: column.getSize(),
     width: 'auto',
     zIndex: isPinned ? 2 : 0
-    // border: '1px solid #e5e7eb',
-    // borderTop: 0,
-    // borderBottom: 0
   };
 };
 export const getCommonPinningStyles2 = header => {
@@ -59,15 +47,10 @@ export const getCommonPinningStyles2 = header => {
 
     left: isPinned === "left" ? `${header.getStart("left")}px` : undefined,
     right: isPinned === "right" ? `${header.getAfter("right")}px` : undefined,
-    // opacity: isPinned ? 0.5 : 1,
     opacity: 1,
     position: isPinned ? "sticky" : "relative",
-    // width: column.getSize(),
     width: 'auto',
     zIndex: isPinned ? 2 : 0
-    // border: '1px solid #e5e7eb',
-    // borderTop: 0,
-    // borderBottom: 0
   };
 };
 export const sumSize = items => {