es-grid-template 1.8.58 → 1.8.60

package/es/grid-component/table/GridEdit.js

@@ -249,7 +249,7 @@ const GridEdit = props => {
     contextMenuItems: propsContext,
     showDefaultContext,
     validate,
-    setTooltipContent,
+    // setTooltipContent,
     onBlur,
     locale,
     mergedFilterKeys,
@@ -1908,7 +1908,8 @@ const GridEdit = props => {
   };
   const handleEdit = (record, col, editType, rowIndex, e) => {
     onRemoveBorderSelectedCell(selectedCells.current, id);
-    setTooltipContent('');
+
+    // setTooltipContent('')
 
     // @ts-ignore
     // setEditingKey(record[rowKey])
@@ -2377,7 +2378,9 @@ const GridEdit = props => {
         const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
         const cellFormat = getFormat(colFormat, format);
         const rowError = dataErrors.find(it => it.index === rowNumber);
-        const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null;
+
+        // const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null
+
         const handleClick = event => {
           if (!(record[rowKey] === editingKey.current) && record[rowKey] !== editingKey.current && isEditable(column, record)) {
             handleEdit(record, column, getEditType(column, record), rowNumber, event);
@@ -2393,7 +2396,8 @@ const GridEdit = props => {
           }),
           onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
           onMouseEnter: event => {
-            setTooltipContent(cellError ? cellError.message : '');
+            // setTooltipContent(cellError ? cellError.message : '')
+
             handleMouseEnter(rowNumber, colIndex, event);
 
             // hoveredRow.current = rowNumber

package/es/grid-component/table/Group.js

@@ -6,6 +6,7 @@ import { findAllChildrenKeys } from "../hooks";
 import { ColumnsGroup } from "../ColumnsGroup/ColumnsGroup";
 import { flatColumns2 } from "../hooks/columns";
 import { Collapse2, Expand2 } from "becoxy-icons";
+import { ConfigProvider } from 'rc-master-ui';
 const Group = props => {
   const {
     t,
@@ -42,11 +43,12 @@ const Group = props => {
     return [];
   });
   React.useEffect(() => {
-    if (defaultExpandedRowKeys) {
-      setInnerExpandedKeys(defaultExpandedRowKeys);
-    }
     if (defaultExpandAllRows) {
       setInnerExpandedKeys(findAllChildrenKeys(dataSource, getRowKey, childrenColumnName) ?? []);
+    } else {
+      if (defaultExpandedRowKeys) {
+        setInnerExpandedKeys(defaultExpandedRowKeys);
+      }
     }
   }, [defaultExpandedRowKeys, defaultExpandAllRows, dataSource]);
   const mergedExpandedKeys = React.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
@@ -96,11 +98,11 @@ const Group = props => {
       columnsGrouped: groupColumns,
       onSubmit: handleOnGroup
     }), /*#__PURE__*/React.createElement(Fragment, null, innerExpandedKeys.length > 0 ? /*#__PURE__*/React.createElement(Collapse2, {
-      fontSize: 18,
+      fontSize: 16,
       color: '#555555',
       onClick: handleCollapseAllGroup
     }) : /*#__PURE__*/React.createElement(Expand2, {
-      fontSize: 18,
+      fontSize: 16,
       color: '#555555',
       onClick: handleExpandAllGroup
     })));
@@ -113,6 +115,20 @@ const Group = props => {
       position: 'relative'
     },
     id: id
+  }, /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: {
+      components: {
+        Table: {
+          rowHoverBg: '#eb461912',
+          rowSelectedBg: '#eb4619',
+          rowSelectedHoverBg: '#eb4619',
+          cellFontSize: 12,
+          cellFontSizeSM: 13,
+          headerBg: '#ffffff',
+          cellPaddingBlockSM: 7
+        }
+      }
+    }
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     t: t,
     id: id,
@@ -174,6 +190,6 @@ const Group = props => {
     groupToolbar: groupToolbar,
     groupColumns: groupColumns,
     isFullScreen: isFullScreen
-  }))));
+  })))));
 };
 export default Group;

package/es/grid-component/table/InfiniteTable.js

@@ -92,7 +92,7 @@ const InfiniteTable = props => {
     id: id,
     dataSource: dataSource,
     pagination: false,
-    virtual: true,
+    virtualRow: true,
     onScroll: handleScroll,
     loading: loading,
     isFullScreen: isFullScreen

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

@@ -118,7 +118,10 @@ export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>,
     headerTextAlign?: ITextAlign;
     template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
     showTooltip?: boolean;
-    tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
+    tooltipDescription?: ReactNode | ReactElement | ((args: {
+        value: any;
+        record: RecordType;
+    }) => ReactNode | ReactElement);
     headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnTable<RecordType>) => React.ReactNode | React.ReactElement);
     commandItems?: CommandItem[];
     children?: ColumnTable<RecordType>[];
@@ -136,6 +139,7 @@ export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>,
     editFromSettings?: IEditFromSettings;
     fixedType?: FixedType;
     headerTextWrap?: boolean;
+    sumGroup?: boolean;
     allowSelection?: boolean | ((rowData: RecordType) => boolean);
     onCellStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Cell<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
     onCellHeaderStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
@@ -195,7 +199,7 @@ export type Sort = {
     field: string;
     order: 'ascend' | 'descend' | null;
 };
-export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination' | 'locale'> {
+export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination' | 'locale' | 'virtual'> {
     editAble?: boolean;
     infiniteScroll?: boolean;
     theme?: {
@@ -203,6 +207,8 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
         backgroundColor?: string;
         color?: string;
     };
+    virtualRow?: boolean;
+    virtualColumns?: boolean;
     next?: () => void;
     locale?: Locale;
     groupAble?: boolean;

package/es/table-component/body/TableBody.js

@@ -65,33 +65,6 @@ const TableBody = ({
   })))) : /*#__PURE__*/React.createElement(Fragment, null, virtualRows.map(virtualRow => {
     const row = rows[virtualRow.index];
     const isEditing = row.id === editingKey;
-
-    // return (
-    //   <tr key={row.id}>
-    //     {row.getVisibleCells().map((cell) => (
-    //       <td
-    //         key={cell.id}
-    //         style={{
-    //           padding: '12px',
-    //           whiteSpace: 'nowrap',
-    //           fontSize: '0.875rem',
-    //           color: '#6b7280',
-    //           border: '1px solid #e5e7eb',
-    //           width: cell.column.getSize(),
-    //           maxWidth: cell.column.getSize(),
-    //           overflow: "hidden",
-    //           ...getCommonPinningStyles(cell.column)
-    //         }}>
-
-    //           {cell.column.id}
-
-    //         {/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */}
-
-    //       </td>
-    //     ))}
-    //   </tr>
-    // )
-
     return /*#__PURE__*/React.createElement(TableBodyRow, _extends({}, rest, {
       table: table,
       tableId: tableId,

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

@@ -208,7 +208,7 @@ export const toggleRowSelection = props => {
         isChange: true,
         type: 'rowSelected',
         rowData: row.original,
-        rowsData: checkedRows
+        rowsData: selectionSettings?.type === 'single' ? [row] : checkedRows
       });
     }
     return;
@@ -284,8 +284,11 @@ export const toggleRowSelection = props => {
       } else {
         // chỉ thêm vào row hiện tại
 
-        const isInclude = prevSelected.find(it => it.id === cell.row.id);
-        if (isInclude) {
+        const isInclude = prevSelected.findIndex(it => it.id === cell.row.id);
+        if (isInclude > -1) {
+          // cập nhật data row hiện tại
+
+          prevSelected[isInclude] = row;
           checkedRows = [...prevSelected];
         } else {
           checkedRows = [...prevSelected, row];

package/lib/grid-component/ColumnsChoose.js

@@ -8,331 +8,12 @@ exports.ColumnsChoose = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
-var _icons = require("@ant-design/icons");
+var _becoxyIcons = require("becoxy-icons");
 var _hooks = require("./hooks");
 var _tree = _interopRequireDefault(require("rc-master-ui/es/tree"));
 var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
 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 React, {Fragment, useMemo, useState} from "react"
-//
-// import styled from "styled-components"
-// import {Button, Input, Popover, Tooltip} from "antd";
-// import {SettingOutlined} from "@ant-design/icons";
-// import {
-//   getVisibleColumnKeys,
-//   updateColumns
-// } from "./hooks";
-//
-// // import type {TableColumnsType} from "rc-master-ui";
-// import Tree from "rc-master-ui/es/tree";
-// import SearchOutlined from "@ant-design/icons/SearchOutlined";
-// import type {ColumnsTable} from "./type";
-// import useMergedState from "rc-util/lib/hooks/useMergedState";
-//
-//
-// const  BoxAction = styled.div`
-//   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;
-//     }
-//   }
-// `
-//
-// export type IColumnsChoose<RecordType> = {
-//   columns: ColumnsTable<RecordType>
-//   columnsGroup?: string[]
-//   triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void
-//   t?: any
-//
-// }
-//
-//
-// export const ColumnsChoose = <RecordType extends object>(props: IColumnsChoose<RecordType>) => {
-//   const {
-//     columns: propsColumns,
-//     triggerChangeColumns,
-//     t,
-//     columnsGroup,
-//   } = props
-//
-//   // const dataList: { key: React.Key; title: string }[] = [];
-//
-//   // const defaultColumns = useMemo(() => {
-//   //   return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
-//   // }, [propsColumns])
-//
-//
-//   // const columnsChooseRef: any = useRef()
-//   // const searchRef: any = useRef()
-//
-//
-//
-//   // const [columns, setColumns] = useState<TableColumnsType>([])
-//
-//   // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
-//
-//   // const [isManualUpdate, setIsManualUpdate] = useState(false);
-//
-//
-//   // useEffect(() => {
-//   //
-//   //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
-//   //   setColumns(defaultColumns as TableColumnsType)
-//   //
-//   // }, [propsColumns])
-//
-//   const columns  = useMemo(() => {
-//
-//     // return  propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
-//     return  propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false)
-//     // setColumns(defaultColumns as TableColumnsType)
-//   }, [columnsGroup, propsColumns])
-//
-//
-//   // useEffect(() => {
-//   //
-//   //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
-//   //
-//   //   const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns)
-//   //
-//   //   if (!isManualUpdate) {
-//   //     setSelectedKeys(defaultSelectedKeys)
-//   //   }
-//   //   setIsManualUpdate(false);
-//   //
-//   //
-//   // }, [isManualUpdate, propsColumns])
-//
-//   const defaultSelectedKeys =  React.useMemo(() => {
-//
-//     const rs = propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
-//     return getVisibleColumnKeys(rs)
-//
-//   },  [columnsGroup, propsColumns])
-//
-//   const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
-//     defaultSelectedKeys || [],
-//     {
-//       value: defaultSelectedKeys,
-//     },
-//   );
-//
-//   //
-//   // const defaultSelectedKeys = useMemo(() => {
-//   //
-//   //   return getVisibleColumnKeys(propsColumns)
-//   //
-//   // }, [propsColumns])
-//
-//
-//   const [clicked, setClicked] = useState(false);
-//   const [autoExpandParent, setAutoExpandParent] = 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: boolean) => {
-//     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: string[]) => {
-//
-//     // setSelectedKeys(keys)
-//     setMergedSelectedKeys(keys)
-//     // setIsManualUpdate(true)
-//
-//   }
-//
-//   const handleAccept = () => {
-//
-//
-//     // const rs1  =  updateColumns(propsColumns, selectedKeys)
-//     const rs1  =  updateColumns(propsColumns, mergedSelectedKeys)
-//
-//
-//     triggerChangeColumns?.(rs1, 'columnChoose')
-//
-//     hide()
-//
-//   }
-//
-//   const handleCancel = () => {
-//     // setSelectedKeys(defaultSelectedKeys)
-//     hide()
-//   }
-//
-//
-//   return (
-//     <Fragment>
-//       <Popover
-//         placement={'bottomLeft'}
-//         content={
-//           <div style={{minWidth: 250}}>
-//             <Input style={{ marginBottom: 8 }} placeholder={t ? t("Search") : 'Search'} prefix={<SearchOutlined />} onChange={onChange} />
-//
-//             <Tree
-//               onExpand={onExpand}
-//               // expandedKeys={expandedKeys}
-//               autoExpandParent={autoExpandParent}
-//               // treeData={treeData}
-//               treeData={columns}
-//               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 as string[])}
-//
-//
-//               multiple={true}
-//               // checkedKeys={selectedKeys}
-//
-//               defaultCheckedKeys={mergedSelectedKeys}
-//               // defaultCheckedKeys={defaultSelectedKeys}
-//               // selectedKeys={[]}
-//
-//               height={window.innerHeight - 200}
-//
-//             />
-//
-//
-//             <BoxAction className={'px-1'}>
-//               <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'}
-//                 {/*{'OK'}*/}
-//               </Button>
-//
-//               {/*<Button className={'btn-action btn-action-cancel'} onClick={hide}  >{('Cancel') }</Button>*/}
-//               <Button className={'btn-action btn-action-cancel'} onClick={handleCancel}  >{t ? t('Cancel') : 'Cancel' }</Button>
-//             </BoxAction>
-//           </div>
-//         }
-//         trigger="click"
-//         open={clicked}
-//         onOpenChange={handleClickChange}
-//         arrow={false}
-//       >
-//         <Tooltip arrow={false} title={'Cài đặt'} >
-//           <SettingOutlined size={16} color={'#555555'} style={{fontSize: 16, color: '#555555'}} />
-//         </Tooltip>
-//
-//       </Popover>
-//     </Fragment>
-//   )
-// }
-
 // import type {TableColumnsType} from "rc-master-ui";
 
 const BoxAction = _styledComponents.default.div.withConfig({
@@ -552,6 +233,8 @@ const ColumnsChoose = props => {
   }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
     arrow: false,
     title: 'Cài đặt'
-  }, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, null))));
+  }, /*#__PURE__*/_react.default.createElement(_becoxyIcons.Settings, {
+    fontSize: 16
+  }))));
 };
 exports.ColumnsChoose = ColumnsChoose;