es-grid-template 1.8.71 → 1.8.73

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

@@ -272,6 +272,35 @@ export function groupArrayByColumns(arr, columns) {
     return arr;
   }
 }
+export function unGroupData(groupedArray, originData) {
+  const result = [];
+  function traverse(arr) {
+    arr.forEach(item => {
+      if (item.children && item.children.length > 0) {
+        traverse(item.children);
+      } else {
+        // Đây là data item, không phải group item
+        result.push(item);
+      }
+    });
+  }
+  traverse(groupedArray);
+
+  // Tạo map từ id đến index trong originData
+  const indexMap = new Map();
+  originData.forEach((item, index) => {
+    const id = item.id ?? item.rowId;
+    indexMap.set(id, index);
+  });
+
+  // Sort result theo thứ tự trong originData
+  result.sort((a, b) => {
+    const aIndex = indexMap.get(a.id ?? a.rowId) ?? -1;
+    const bIndex = indexMap.get(b.id ?? b.rowId) ?? -1;
+    return aIndex - bIndex;
+  });
+  return result;
+}
 export const flatColumns2 = columns => {
   return columns.reduce((list, column) => {
     const subColumns = column.children;

package/es/table-virtuoso/style.js

@@ -2,6 +2,8 @@ import styled from "styled-components";
 const color = "#000000de";
 const BgColor = "#ffffff";
 const rowSelectedBg = "#FEF2EF";
+const cellSelectedBg = "#F3F8FF";
+const borderSelectedColor = "#0550C5";
 const tableBorderColor = "#e0e0e0";
 const tableBorderColorDark = "#44485E";
 const BgColorDark = "#343e59";
@@ -9,4 +11,4 @@ const colorDark = "#e6e4f3e6";
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-rs980s-0"
-})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";}}}.", "-grid-cell{padding:7px 8px;.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:#33335d !important;}&.disable{background-color:#272A2F;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";}}}.", "-grid-cell{padding:7px 8px;.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:", " !important;}&.disable{background-color:#f0f0f0;}&.cell-editable{user-select:none;&.cell-border-top{&::after{content:\"\";position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-bottom{border-bottom:1px solid ", ";}&.cell-border-left{&::before{content:\"\";position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-right{border-inline-end:1px solid ", ";}&.cell-paste-border-top{&::after{content:\"\";position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{&::before{content:\"\";position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:", ";bottom:0;right:0;}}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ant-input{height:100% !important;&:focus-visible{outline:none;}}textarea.ant-input{line-height:1.8;height:36px !important;min-height:36px !important;}input.be-cell-editing,.ant-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.", "-checkbox-wrapper{.", "-checkbox{background-color:red;}.", "-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.", "-table-select-single .", "-table-select-selector,.", "-select-single .", "-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.", "-table-select-single:not(.", "-table-select-customize-input){.", "-table-select-selector{.", "-table-select-selection-search-input{height:auto;}}}}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, cellSelectedBg, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

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

@@ -173,7 +173,7 @@ const Grid = props => {
     t: t,
     windowSize: windowSize,
     table: table,
-    editAble: editAble,
+    editAble: false,
     dataSource: dataSource,
     originData: originData,
     prefix: prefix,
@@ -243,7 +243,7 @@ const Grid = props => {
     id: faker.string.alpha(20),
     t: t,
     table: table,
-    editAble: editAble,
+    editAble: false,
     dataSource: dataSource,
     originData: originData,
     prefix: prefix,

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ColumnDef, Table } from "@tanstack/react-table";
-import type { CommandClick } from '../../grid-component/type';
+import type { CommandClick, ContextInfo, PaginationConfig } from '../../grid-component/type';
+import type { ContextMenuItem } from "../..";
 type Props<T> = {
     tableContainerRef: React.RefObject<HTMLDivElement>;
     table: Table<T>;
@@ -14,9 +15,14 @@ type Props<T> = {
     loading?: boolean;
     commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;
     editAble?: boolean;
+    contextMenuItems?: ContextMenuItem[];
     showEmptyText?: boolean;
     contextMenuClick?: any;
+    contextMenuOpen?: (args: Omit<ContextInfo<T>, 'item'>) => void;
+    contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<T>, 'item' | 'event'>) => string[]);
     next?: () => void;
+    pagination?: false | PaginationConfig;
+    infiniteScroll?: boolean;
 };
 declare const TableWrapper: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default TableWrapper;

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

@@ -24,10 +24,13 @@ const TableWrapper = props => {
     table,
     height,
     id,
-    commandClick
+    commandClick,
+    editAble
   } = props;
   const {
-    prefix
+    prefix,
+    editingKey,
+    rowEditable
   } = useContext(TableContext); //onRowHeaderStyles
 
   // ref cho scroll container
@@ -74,22 +77,38 @@ const TableWrapper = props => {
       TableHead: props => /*#__PURE__*/React.createElement("thead", _extends({}, props, {
         className: `${prefix}-grid-thead`
       })),
+      //  TableBody: (props) => (
+      //   <tbody {...props} className={`${prefix}-grid-tbody1`} />
+      // ),
+
       TableFoot: props => /*#__PURE__*/React.createElement("tfoot", _extends({}, props, {
         className: `${prefix}-grid-tfoot`
       })),
       TableRow: props => {
+        const {
+          item,
+          ...rest
+        } = props;
         const index = props["data-index"];
         const rowheight = props["data-known-size"];
         const row = rows[index];
+        const isEditing = row.id === editingKey;
+        const isRowEditable = rowEditable ? rowEditable(row.original) : true;
         return /*#__PURE__*/React.createElement(TableBodyRow, _extends({
           tableId: id,
           row: row,
           table: table,
           commandClick: commandClick,
-          rowheight: rowheight
-        }, props));
+          rowheight: editAble ? 37 : rowheight,
+          isEditing: isEditing,
+          isRowEditable: isRowEditable,
+          editAble: editAble
+        }, rest));
       }
-    }
+    },
+    defaultItemHeight: 37,
+    fixedItemHeight: 37,
+    itemSize: () => 37
 
     // overscan={{
     //   main: 10,

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

@@ -1,11 +1,11 @@
 import type { Dispatch, SetStateAction } from 'react';
-import type { ColumnTable, ExpandableConfig, IFormat, IGroupSetting, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings } from "../grid-component/type";
+import type { ColumnTable, ExpandableConfig, IFormat, IGroupSetting, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "../grid-component/type";
 import type { SubmitHandler } from "react-hook-form";
 import type { ExpandedState, Row, Table } from '@tanstack/react-table';
 export type IPositionCell = {
     rowId: string;
     colId: string;
-} | undefined;
+};
 export interface IContext<T> {
     t?: any;
     prefix: string;
@@ -48,6 +48,7 @@ export interface IContext<T> {
     reset?: any;
     setValue?: any;
     handleCellChange?: (args: ContextCellChange) => void;
+    handleCellChangeAndAddRow?: (args: ContextCellChange) => void;
     editingKey?: string;
     setEditingKey?: Dispatch<SetStateAction<string>>;
     rangeState?: RangeState;
@@ -68,6 +69,7 @@ export interface IContext<T> {
     setIsPasting?: Dispatch<SetStateAction<boolean>>;
     focusedCell?: IPositionCell;
     setFocusedCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
+    cellActive?: any;
     triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
     handleDeleteContent?: () => void;
     handleAddMulti?: (item: any, n: number, id?: string) => void;
@@ -82,12 +84,13 @@ export interface IContext<T> {
     onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     groupSetting?: IGroupSetting;
+    dataSourceFilter?: SourceFilter[];
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {
     key: string;
     record: any;
-    field: string | undefined;
+    field: string;
     option: any;
     indexRow: number;
     indexCol: number;

package/es/table-virtuoso/useContext.js

@@ -18,4 +18,22 @@ export const TableContext = /*#__PURE__*/createContext({
   setFilterChange: () => {},
   setExpanded: () => {},
   handleCellClick: () => {}
+
+  // startCellRef: { current: undefined } as React.MutableRefObject<IPositionCell | undefined>,
+  // endCellRef: { current: undefined } as React.MutableRefObject<IPositionCell | undefined>,
+  // focusedCellRef: { current: undefined } as React.MutableRefObject<IPositionCell | undefined>,
+  // isSelectingRef: { current: false } as React.MutableRefObject<boolean>,
+
+  // rangeStateRef: {
+  //   current: {
+  //     startRowIndex: undefined,
+  //     endRowIndex: undefined,
+  //     startColIndex: undefined,
+  //     endColIndex: undefined,
+  //     rowIds: [],
+  //     colIds: [],
+  //     colRange: [],
+  //     rowRange: []
+  //   }
+  // } as React.MutableRefObject<RangeState>
 });

package/lib/grid-component/TempTable.js

@@ -9,13 +9,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _tableComponent = _interopRequireDefault(require("../table-component"));
 var _tableVirtuoso = _interopRequireDefault(require("../table-virtuoso"));
+var _groupComponent = _interopRequireDefault(require("../group-component"));
 const TempTable = props => {
   const {
     groupAble,
     editAble,
     ...rest
   } = props;
-  const TabComponent = groupAble ? _tableVirtuoso.default : _tableComponent.default;
+  const TabComponent = groupAble ? editAble ? _groupComponent.default : _tableVirtuoso.default : _tableComponent.default;
   return /*#__PURE__*/_react.default.createElement(TabComponent, (0, _extends2.default)({}, rest, {
     groupAble: groupAble,
     editAble: editAble

package/lib/grid-component/type.d.ts

@@ -290,14 +290,12 @@ export type ExpandableConfig<RecordType> = {
     onExpand?: (expanded: boolean, record: RecordType) => void;
     onExpandedRowsChange?: (expandedKeys: readonly Key[]) => void;
     defaultExpandAllRows?: boolean;
-    indentSize?: number;
     expandIconColumnIndex?: number;
+    showExpandAll?: boolean;
     showExpandColumn?: boolean;
     expandedRowClassName?: string | RowClassName<RecordType>;
     childrenColumnName?: string;
     rowExpandable?: (record: RecordType) => boolean;
-    columnWidth?: number | string;
-    fixed?: FixedType;
 };
 export type RenderExpandIcon<RecordType> = (props: RenderExpandIconProps<RecordType>) => React.ReactNode;
 export interface RenderExpandIconProps<RecordType> {

package/lib/group-component/ColumnsChoose.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ColumnsTable, ColumnTable } from "./../grid-component/type";
+import type { ColumnDef } from "@tanstack/react-table";
+export type IColumnsChoose<RecordType> = {
+    columns: ColumnDef<RecordType>[];
+    originColumns: ColumnTable[];
+    columnsGroup?: string[];
+    triggerChangeColumns?: (columns: ColumnsTable<RecordType>, keys: string[], type: string) => void;
+    t?: any;
+    triggerChangeKeys?: any;
+    columnHidden: any;
+};
+export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;

package/lib/group-component/ColumnsChoose.js

@@ -0,0 +1,221 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnsChoose = void 0;
+var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+var _tree = _interopRequireDefault(require("rc-master-ui/es/tree"));
+var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
+var _utils = require("./hook/utils");
+var _becoxyIcons = require("becoxy-icons");
+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 BoxAction = _styledComponents.default.div.withConfig({
+  displayName: "BoxAction",
+  componentId: "es-grid-template__sc-74bu9v-0"
+})(["border-top:1px solid #c4c4c4;padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
+const ColumnsChoose = props => {
+  const {
+    columns: propsColumns,
+    originColumns,
+    columnHidden,
+    triggerChangeColumns,
+    // triggerChangeKeys,
+    t,
+    columnsGroup
+  } = props;
+  const treeColumns = _react.default.useMemo(() => {
+    return (0, _utils.convertColumnsToTreeData)(propsColumns, columnsGroup);
+  }, [propsColumns, columnsGroup]);
+  const defaultSelectedKeys = _react.default.useMemo(() => {
+    const defaultColumns = originColumns.filter(it => it.field && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
+    const aa = Object.keys(columnHidden);
+    return (0, _utils.getVisibleColumnKeys1)(defaultColumns).filter(it => !aa.includes(it));
+  }, [columnHidden, columnsGroup, originColumns]);
+  const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined, {
+    value: undefined
+  });
+  const [clicked, setClicked] = (0, _react.useState)(false);
+  const [autoExpandParent, setAutoExpandParent] = (0, _react.useState)(true);
+
+  // const treeData = useMemo(() => {
+  //   const loop = (data: TreeDataNode[]): TreeDataNode[] =>
+  //     data.map((item) => {
+  //       const strTitle = item.title as string;
+  //       const index = strTitle.indexOf(searchValue);
+  //       const beforeStr = strTitle.substring(0, index);
+  //       const afterStr = strTitle.slice(index + searchValue.length);
+  //       const title =
+  //         index > -1 ? (
+  //           <span key={item.key}>
+  //             {beforeStr}
+  //             <span className="site-tree-search-value">{searchValue}</span>
+  //             {afterStr}
+  //           </span>
+  //         ) : (
+  //           <span key={item.key}>{strTitle}</span>
+  //         );
+  //       if (item.children) {
+  //         return { title, key: item.key, children: loop(item.children) };
+  //       }
+  //
+  //       return {
+  //         title,
+  //         key: item.key,
+  //       };
+  //     });
+  //
+  //   // return loop(defaultData);
+  //   return loop(columns as any);
+  // }, [searchValue, columns]);
+
+  const hide = () => {
+    setClicked(false);
+  };
+  const handleClickChange = open => {
+    setClicked(open);
+  };
+  const onExpand = () => {
+    // setExpandedKeys(newExpandedKeys)
+    setAutoExpandParent(false);
+  };
+
+  // const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
+  //   let parentKey: React.Key
+  //   for (let i = 0; i < tree.length; i++) {
+  //     const node = tree[i]
+  //     if (node.children) {
+  //       if (node.children.some((item) => item.key === key)) {
+  //         parentKey = node.key
+  //       } else if (getParentKey(key, node.children)) {
+  //         parentKey = getParentKey(key, node.children)
+  //       }
+  //     }
+  //   }
+  //   return parentKey!
+  // }
+
+  // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onChange = () => {
+    // const { value } = e.target
+    // const newExpandedKeys = dataList
+    //   .map((item) => {
+    //     if (item.title.indexOf(value) > -1) {
+    //       return getParentKey(item.key, defaultData)
+    //     }
+    //     return null
+    //   })
+    //   .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
+    // setExpandedKeys(newExpandedKeys)
+
+    // setSearchValue(value)
+    setAutoExpandParent(true);
+  };
+  const onCheck = keys => {
+    // setSelectedKeys(keys)
+    // setIsManualUpdate(true)
+    setMergedSelectedKeys(keys);
+  };
+  const handleAccept = () => {
+    const rs1 = (0, _utils.updateColumns1)(originColumns, mergedSelectedKeys ?? []);
+    triggerChangeColumns?.(rs1, mergedSelectedKeys ?? [], 'columnChoose');
+    hide();
+  };
+  const handleCancel = () => {
+    setMergedSelectedKeys(defaultSelectedKeys);
+    hide();
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
+    placement: 'bottomLeft',
+    content: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        minWidth: 250,
+        maxWidth: 320
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      style: {
+        marginBottom: 8
+      },
+      placeholder: t ? t("Search") : 'Search',
+      prefix: /*#__PURE__*/_react.default.createElement(_SearchOutlined.default, null),
+      onChange: onChange
+    }), /*#__PURE__*/_react.default.createElement(_tree.default, {
+      onExpand: onExpand
+      // expandedKeys={expandedKeys}
+      ,
+      autoExpandParent: autoExpandParent
+      // treeData={treeData}
+      // treeData={columns.filter((it) => !columnsGroup?.includes(it.field as string))}
+      ,
+      treeData: treeColumns,
+      defaultExpandAll: true,
+      checkable: true
+      // onSelect={(keys, info) => {
+      //   const key = info.node.key
+      //
+      //   const find = findItemByKey(columns, 'key', key)
+      //
+      //   // const tmpColumn
+      //
+      //   // if (selectedKeys.includes(key as string)) {
+      //   //   const rssss  = findKeyPath(columns, key as string)
+      //   //   const rs = selectedKeys.filter(item => !rssss.includes(item));
+      //   //
+      //   //   setSelectedKeys(rs)
+      //   // } else {
+      //
+      //     // const rs  = [...selectedKeys, keys[0]]
+      //
+      //     // setSelectedKeys(keys)
+      //   // }
+      // }}
+      ,
+      onCheck: keys => onCheck(keys),
+      multiple: true
+      // checkedKeys={selectedKeys}
+      ,
+      checkedKeys: mergedSelectedKeys || defaultSelectedKeys
+
+      // defaultCheckedKeys={selectedKeys}
+      ,
+      defaultCheckedKeys: defaultSelectedKeys,
+      selectedKeys: []
+
+      // height={window.innerHeight - 200}
+      ,
+      height: window.innerHeight / 2 > 450 ? 450 : window.innerHeight / 2 - 110
+      // style={{height: 300}}
+    }), /*#__PURE__*/_react.default.createElement(BoxAction, {
+      className: 'px-1'
+    }, /*#__PURE__*/_react.default.createElement(_antd.Button
+    // className={classnames('btn-action btn-action-submit', {
+    //   // disable: !columns.find((item) => item.visible !== false || item.visible)
+    // })}
+    , {
+      onClick: handleAccept
+      // disabled={!columns.find((item) => item.visible !== false || item.visible)}
+    }, t ? t('OK') : 'OK'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      className: 'btn-action btn-action-cancel',
+      onClick: handleCancel
+    }, t ? t('Cancel') : 'Cancel'))),
+    trigger: "click",
+    open: clicked,
+    onOpenChange: handleClickChange,
+    arrow: false,
+    zIndex: 1065
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    arrow: false,
+    title: 'Cài đặt'
+  }, /*#__PURE__*/_react.default.createElement(_becoxyIcons.Settings, {
+    fontSize: 16,
+    style: {
+      cursor: 'pointer'
+    }
+  }))));
+};
+exports.ColumnsChoose = ColumnsChoose;

package/lib/group-component/ColumnsGroup/ColumnsGroup.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type IColumnsGroup = {
+    columns: any[];
+    dataSource?: string[];
+    onSubmit: (value: any) => void;
+    t?: any;
+    columnsGrouped?: string[];
+    unClearableLevel?: number;
+    defaultGroupColumns?: string[];
+};
+export declare const ColumnsGroup: (props: IColumnsGroup) => React.JSX.Element;
+export {};