es-grid-template 1.8.70 → 1.8.72

package/es/grid-component/TempTable.js

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Table from "../table-component";
 import TableGroup from "../table-virtuoso";
+import TableGroupEdit from "../group-component";
 const TempTable = props => {
   const {
     groupAble,
     editAble,
     ...rest
   } = props;
-  const TabComponent = groupAble ? TableGroup : Table;
+  const TabComponent = groupAble ? editAble ? TableGroupEdit : TableGroup : Table;
   return /*#__PURE__*/React.createElement(TabComponent, _extends({}, rest, {
     groupAble: groupAble,
     editAble: editAble

package/es/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/es/group-component/ColumnsChoose.js

@@ -0,0 +1,211 @@
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import React, { Fragment, useState } from "react";
+import styled from "styled-components";
+import { Button, Input, Popover, Tooltip } from "antd";
+import Tree from "rc-master-ui/es/tree";
+import SearchOutlined from "@ant-design/icons/SearchOutlined";
+import { convertColumnsToTreeData, getVisibleColumnKeys1, updateColumns1 } from "./hook/utils";
+import { Settings } from "becoxy-icons";
+const BoxAction = styled.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;}}"]);
+export const ColumnsChoose = props => {
+  const {
+    columns: propsColumns,
+    originColumns,
+    columnHidden,
+    triggerChangeColumns,
+    // triggerChangeKeys,
+    t,
+    columnsGroup
+  } = props;
+  const treeColumns = React.useMemo(() => {
+    return convertColumnsToTreeData(propsColumns, columnsGroup);
+  }, [propsColumns, columnsGroup]);
+  const defaultSelectedKeys = React.useMemo(() => {
+    const defaultColumns = originColumns.filter(it => it.field && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
+    const aa = Object.keys(columnHidden);
+    return getVisibleColumnKeys1(defaultColumns).filter(it => !aa.includes(it));
+  }, [columnHidden, columnsGroup, originColumns]);
+  const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined, {
+    value: undefined
+  });
+  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 => {
+    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 = updateColumns1(originColumns, mergedSelectedKeys ?? []);
+    triggerChangeColumns?.(rs1, mergedSelectedKeys ?? [], 'columnChoose');
+    hide();
+  };
+  const handleCancel = () => {
+    setMergedSelectedKeys(defaultSelectedKeys);
+    hide();
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Popover, {
+    placement: 'bottomLeft',
+    content: /*#__PURE__*/React.createElement("div", {
+      style: {
+        minWidth: 250,
+        maxWidth: 320
+      }
+    }, /*#__PURE__*/React.createElement(Input, {
+      style: {
+        marginBottom: 8
+      },
+      placeholder: t ? t("Search") : 'Search',
+      prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
+      onChange: onChange
+    }), /*#__PURE__*/React.createElement(Tree, {
+      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.createElement(BoxAction, {
+      className: 'px-1'
+    }, /*#__PURE__*/React.createElement(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.createElement(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.createElement(Tooltip, {
+    arrow: false,
+    title: 'Cài đặt'
+  }, /*#__PURE__*/React.createElement(Settings, {
+    fontSize: 16,
+    style: {
+      cursor: 'pointer'
+    }
+  }))));
+};

package/es/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 {};

package/es/group-component/ColumnsGroup/ColumnsGroup.js

@@ -0,0 +1,230 @@
+import { Group } from "becoxy-icons";
+import React, { useRef, useState } from "react";
+// import {
+//   // groupArrayByColumns,
+//   // ungroupArray,
+//   // useOnClickOutside
+// } from "../../hooks"
+
+import { Button, Popover, Tooltip } from "antd";
+// import {SettingOutlined} from "@ant-design/icons";
+import { Select } from "rc-master-ui";
+import styled from "styled-components";
+import { customFilterOption } from "../../grid-component/hooks";
+const BoxAction = styled.div.withConfig({
+  displayName: "BoxAction",
+  componentId: "es-grid-template__sc-9e0ekv-0"
+})(["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 const ColumnsGroup = props => {
+  const {
+    columns,
+    columnsGrouped,
+    onSubmit,
+    unClearableLevel,
+    defaultGroupColumns,
+    t
+  } = props;
+  const menuRef = useRef();
+  const [tempGroup, setTempGroup] = useState([]);
+  const [clicked, setClicked] = useState(false);
+  const rsCol = React.useMemo(() => {
+    return columns.filter(it => it.visible !== false && !tempGroup.includes(it.field) && it.field !== '#' && it.field !== 'selection_column' && it.field !== 'command');
+  }, [columns, tempGroup]);
+  const options = React.useMemo(() => {
+    return rsCol.map(it => ({
+      ...it,
+      value: it.field,
+      label: t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText
+    }));
+  }, [rsCol, t]);
+
+  // React.useEffect(() => {
+  //   if(columnsGrouped) {
+  //     setTempGroup([...columnsGrouped])
+  //   }
+  //
+  // }, [!!columnsGrouped])
+
+  const onChangeGroupColumns = (option, index) => {
+    // if (option) {
+    //   tempGroup[index] = option
+    // } else {
+    //   tempGroup.splice(index, 1)
+    // }
+    // setTempGroup([...tempGroup])
+
+    const cloneTemp = [...tempGroup];
+    if (option) {
+      cloneTemp[index] = option;
+    } else {
+      cloneTemp.splice(index, 1);
+    }
+    setTempGroup([...cloneTemp]);
+  };
+  const handleGroup = () => {
+    // setColumnsGrouped([...tempGroup])
+    setClicked(false);
+    // const dt = ungroupArray(dataSource)
+
+    // const rs = groupArrayByColumns(dt, [...tempGroup])
+
+    // setResource([...rs])
+    onSubmit([...tempGroup]);
+  };
+  const handleClear = () => {
+    // setColumnsGrouped([])
+    setTempGroup(defaultGroupColumns ? defaultGroupColumns : []);
+    // setIsOpen(false)
+    setClicked(false);
+    // const dt = ungroupArray(dataSource)
+
+    // const rs = groupArrayByColumns(dt, [])
+
+    // setResource([...rs])
+    onSubmit(defaultGroupColumns ? defaultGroupColumns : []);
+  };
+  const handleClickChange = open => {
+    setClicked(open);
+    if (open) {
+      if (columnsGrouped) {
+        setTempGroup([...columnsGrouped]);
+      }
+    }
+    if (!open) {
+      setTempGroup([]);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover, {
+    placement: 'bottomLeft',
+    content: /*#__PURE__*/React.createElement("div", {
+      style: {
+        minWidth: 250
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: menuRef,
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: 'fw-bold'
+    }, "Nh\xF3m d\u1EEF li\u1EC7u theo c\u1ED9t"), /*#__PURE__*/React.createElement("div", {
+      className: 'mb-1',
+      style: {
+        marginBottom: '1rem'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: 'm-0',
+      style: {
+        margin: 0
+      }
+    }, "M\u1EE9c 1"), /*#__PURE__*/React.createElement(Select, {
+      style: {
+        width: '100%'
+      },
+      showSearch: true
+      // labelInValue={true}
+      // options={columns.filter((it: any) => !tempGroup.includes(it.field))}
+      // options={columns && columns.length > 0 ? options : []}
+      ,
+      options: options,
+      value: tempGroup?.[0],
+      onChange: val => onChangeGroupColumns(val, 0),
+      allowClear: !tempGroup?.[1] && !(unClearableLevel && unClearableLevel - 1 >= 0)
+      // fieldNames={{
+      //   value: 'field',
+      //   label: 'headerText'
+      // }}
+      ,
+      labelRender: labelProps => {
+        const it = columns.find(col => col.field === labelProps.value);
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
+      },
+      filterOption: customFilterOption
+      // hideSelectedOptions
+    })), /*#__PURE__*/React.createElement("div", {
+      className: 'mb-1',
+      style: {
+        marginBottom: '1rem'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: 'm-0',
+      style: {
+        margin: 0
+      }
+    }, "M\u1EE9c 2"), /*#__PURE__*/React.createElement(Select, {
+      showSearch: true,
+      style: {
+        width: '100%'
+      },
+      options: options,
+      value: tempGroup?.[1],
+      onChange: val => onChangeGroupColumns(val, 1),
+      allowClear: !tempGroup?.[2] && !(unClearableLevel && unClearableLevel - 2 >= 0)
+      // hideSelectedOptions
+      // fieldNames={{
+      //   value: 'field',
+      //   label: 'headerText'
+      // }}
+      ,
+      labelRender: labelProps => {
+        const it = columns.find(col => col.field === labelProps.value);
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
+      },
+      filterOption: customFilterOption
+    })), /*#__PURE__*/React.createElement("div", {
+      className: 'mb-1',
+      style: {
+        marginBottom: '1rem'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: 'm-0',
+      style: {
+        margin: 0
+      }
+    }, "M\u1EE9c 3"), /*#__PURE__*/React.createElement(Select, {
+      style: {
+        width: '100%'
+      },
+      options: options,
+      showSearch: true,
+      value: tempGroup?.[2],
+      onChange: val => onChangeGroupColumns(val, 2),
+      allowClear: !!tempGroup?.[2] && !(unClearableLevel && unClearableLevel - 3 >= 0)
+      // fieldNames={{
+      //   value: 'field',
+      //   label: 'headerText'
+      // }}
+      ,
+      labelRender: labelProps => {
+        const it = columns.find(col => col.field === labelProps.value);
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
+      },
+      filterOption: customFilterOption
+    }))), /*#__PURE__*/React.createElement(BoxAction, {
+      className: 'px-1'
+    }, /*#__PURE__*/React.createElement(Button
+    // className={classnames('btn-action btn-action-submit', {
+    //   // disable: !columns.find((item) => item.visible !== false || item.visible)
+    // })}
+    , {
+      onClick: handleGroup
+      // disabled={!columns.find((item) => item.visible !== false || item.visible)}
+    }, t ? t('Thực hiện') : 'Thực hiện'), /*#__PURE__*/React.createElement(Button, {
+      className: 'btn-action btn-action-cancel',
+      onClick: handleClear
+    }, t ? t('Clear') : 'Clear'))),
+    trigger: "click",
+    open: clicked,
+    onOpenChange: handleClickChange,
+    arrow: false
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    arrow: false,
+    title: 'Nhóm dữ liệu'
+  }, /*#__PURE__*/React.createElement(Group, {
+    fontSize: 18,
+    color: "#555555",
+    style: {
+      cursor: 'pointer'
+    }
+  }))));
+};

package/es/group-component/ColumnsGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './ColumnsGroup';

package/es/group-component/ColumnsGroup/index.js

@@ -0,0 +1 @@
+export * from "./ColumnsGroup";

package/es/group-component/ContextMenu.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { ContextInfo, ContextMenuItem } from "./../grid-component/type";
+export declare const findItemByKey: (array: any[], key: string, value: any) => any;
+type Props<RecordType> = {
+    rowData: RecordType | null;
+    contextMenuItems: ContextMenuItem[];
+    contextMenuClick?: (args: ContextInfo<RecordType>) => void;
+    open: boolean;
+    menuRef?: any;
+    setOpen: (open: boolean) => void;
+    pos: {
+        x: number | undefined;
+        y: number | undefined;
+        viewportWidth: number;
+        viewportHeight: number;
+    };
+};
+declare const ContextMenu: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default ContextMenu;

package/es/group-component/ContextMenu.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { Dropdown, Menu } from "antd";
+export const findItemByKey = (array, key, value) => {
+  for (let i = 0; i < array.length; i++) {
+    const item = array[i];
+    if (item[key] === value) {
+      return item;
+    }
+    if (item.children && item.children.length > 0) {
+      const foundInChildren = findItemByKey(item.children, key, value);
+      if (foundInChildren) {
+        return foundInChildren;
+      }
+    }
+  }
+  return null;
+};
+const ContextMenu = props => {
+  const {
+    menuRef,
+    open,
+    setOpen,
+    pos,
+    contextMenuClick,
+    contextMenuItems,
+    rowData
+  } = props;
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    placement: 'topRight',
+    open: open,
+    overlayClassName: 'be-popup-container',
+    overlayStyle: {
+      left: `${pos.x}px`,
+      top: `${pos.y}px`
+    },
+    dropdownRender: () => {
+      return /*#__PURE__*/React.createElement("div", {
+        ref: menuRef
+      }, /*#__PURE__*/React.createElement(Menu, {
+        items: contextMenuItems,
+        style: {
+          minWidth: 200,
+          maxHeight: pos.viewportHeight - 20,
+          width: 'fit-content'
+        },
+        rootClassName: 'popup-context-menu'
+        // rootClassName={'be-popup-container'}
+        ,
+
+        onClick: e => {
+          setOpen(false);
+          contextMenuClick?.({
+            rowInfo: {
+              rowData
+            },
+            event: e.domEvent,
+            item: {
+              ...findItemByKey(contextMenuItems, 'key', e.key),
+              id: e.key
+            }
+          });
+
+          // if (!open) {
+          //   document.addEventListener(`click`, function onClickOutside() {
+          //     setOpen(false);
+          //     document.removeEventListener(`click`, onClickOutside);
+          //   });
+          // }
+        }
+      }));
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null));
+};
+export default ContextMenu;

package/es/group-component/InternalTable.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import 'react-resizable/css/styles.css';
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
+import './style.scss';
+import type { TableProps } from './../grid-component/type';
+declare const InternalTable: <RecordType extends object>(props: TableProps<RecordType>) => React.JSX.Element;
+export default InternalTable;