es-grid-template 1.2.0 → 1.2.2

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

@@ -2,6 +2,7 @@ import React from "react";
 import type { ColumnsTable } from "./type";
 export type IColumnsChoose<RecordType> = {
     columns: ColumnsTable<RecordType>;
+    columnsGroup?: string[];
     triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
     t?: any;
 };

package/es/grid-component/ColumnsChoose.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useMemo, useState } from "react";
+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";
@@ -7,6 +7,7 @@ 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 useMergedState from "rc-util/es/hooks/useMergedState";
 const BoxAction = styled.div.withConfig({
   displayName: "BoxAction",
   componentId: "es-grid-template__sc-1ix8yky-0"
@@ -15,7 +16,8 @@ export const ColumnsChoose = props => {
   const {
     columns: propsColumns,
     triggerChangeColumns,
-    t
+    t,
+    columnsGroup
   } = props;
 
   // const dataList: { key: React.Key; title: string }[] = [];
@@ -28,8 +30,10 @@ export const ColumnsChoose = props => {
   // const searchRef: any = useRef()
 
   // const [columns, setColumns] = useState<TableColumnsType>([])
-  const [selectedKeys, setSelectedKeys] = useState([]);
-  const [isManualUpdate, setIsManualUpdate] = useState(false);
+
+  // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
+  // const [isManualUpdate, setIsManualUpdate] = useState(false);
 
   // useEffect(() => {
   //
@@ -39,24 +43,42 @@ export const ColumnsChoose = props => {
   // }, [propsColumns])
 
   const columns = useMemo(() => {
-    return propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
+    // 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)
-  }, [propsColumns]);
-  useEffect(() => {
-    const defaultColumns = propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
-    const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns);
-    if (!isManualUpdate) {
-      setSelectedKeys(defaultSelectedKeys);
-    }
-    setIsManualUpdate(false);
-  }, [propsColumns]);
-  const defaultSelectedKeys = useMemo(() => {
-    return getVisibleColumnKeys(propsColumns);
-  }, [propsColumns]);
+  }, [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));
+    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 [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
-  // const [searchValue, setSearchValue] = useState('');
 
   // const treeData = useMemo(() => {
   //   const loop = (data: TreeDataNode[]): TreeDataNode[] =>
@@ -132,16 +154,19 @@ export const ColumnsChoose = props => {
     setAutoExpandParent(true);
   };
   const onCheck = keys => {
-    setSelectedKeys(keys);
-    setIsManualUpdate(true);
+    console.log('keys', keys);
+    // setSelectedKeys(keys)
+    setMergedSelectedKeys(keys);
+    // setIsManualUpdate(true)
   };
   const handleAccept = () => {
-    const rs1 = updateColumns(propsColumns, selectedKeys);
+    // const rs1  =  updateColumns(propsColumns, selectedKeys)
+    const rs1 = updateColumns(propsColumns, mergedSelectedKeys);
     triggerChangeColumns?.(rs1, 'columnChoose');
     hide();
   };
   const handleCancel = () => {
-    setSelectedKeys(defaultSelectedKeys);
+    // setSelectedKeys(defaultSelectedKeys)
     hide();
   };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Popover, {
@@ -188,12 +213,15 @@ export const ColumnsChoose = props => {
       // }}
       ,
       onCheck: keys => onCheck(keys),
-      multiple: true,
-      checkedKeys: selectedKeys,
-      defaultCheckedKeys: selectedKeys
+      multiple: true
+      // checkedKeys={selectedKeys}
+      ,
+
+      defaultCheckedKeys: mergedSelectedKeys
       // defaultCheckedKeys={defaultSelectedKeys}
+      // selectedKeys={[]}
       ,
-      selectedKeys: [],
+
       height: window.innerHeight - 200
     }), /*#__PURE__*/React.createElement(BoxAction, {
       className: 'px-1'
@@ -215,5 +243,12 @@ export const ColumnsChoose = props => {
   }, /*#__PURE__*/React.createElement(Tooltip, {
     arrow: false,
     title: 'Cài đặt'
-  }, /*#__PURE__*/React.createElement(SettingOutlined, null))));
+  }, /*#__PURE__*/React.createElement(SettingOutlined, {
+    size: 16,
+    color: '#555555',
+    style: {
+      fontSize: 16,
+      color: '#555555'
+    }
+  }))));
 };

package/es/grid-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/grid-component/ColumnsGroup/ColumnsGroup.js

@@ -0,0 +1,223 @@
+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";
+const BoxAction = styled.div.withConfig({
+  displayName: "BoxAction",
+  componentId: "es-grid-template__sc-1uj3tyy-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 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.hidden !== true && !tempGroup.includes(it.field));
+  }, [columns, tempGroup]);
+  const options = React.useMemo(() => {
+    return rsCol.map(it => ({
+      ...it,
+      value: it.field,
+      label: t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title
+    }));
+  }, [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 => {
+    console.log('open', 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%'
+      }
+      // 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.title) : it.columnGroupText ?? it.headerText ?? it.title;
+      }
+      // 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, {
+      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.title) : it.columnGroupText ?? it.headerText ?? it.title;
+      }
+    })), /*#__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,
+      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.title) : it.columnGroupText ?? it.headerText ?? it.title;
+      }
+    }))), /*#__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,
+    style: {
+      cursor: 'pointer'
+    }
+  }))));
+};

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

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

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { GridTableProps } from "./type";
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
+import './styles.scss';
+declare const ConvertColumnTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
+export default ConvertColumnTable;

package/es/grid-component/ConvertColumnTable.js

@@ -0,0 +1,143 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useMemo } from 'react';
+// import classNames from "classnames";
+
+import { Resizable } from "react-resizable";
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import dayjs from "dayjs";
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
+import en from 'rc-master-ui/es/date-picker/locale/en_US';
+import vi from 'rc-master-ui/es/date-picker/locale/vi_VN';
+import "./styles.scss";
+import InternalTable from "./InternalTable";
+import useColumns from "./hooks/useColumns";
+import { updateArrayByKey } from "./hooks";
+// import useMergedState from "rc-util/lib/hooks/useMergedState";
+
+dayjs.extend(customParseFormat);
+
+// const ASCEND = 'ascend';
+// const DESCEND = 'descend';
+
+const ResizableTitle = props => {
+  const {
+    onResize,
+    width,
+    ...restProps
+  } = props;
+  if (!width) {
+    return /*#__PURE__*/React.createElement("th", restProps);
+  }
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement(Resizable, {
+      width: width,
+      height: 0,
+      handle: /*#__PURE__*/React.createElement("span", {
+        className: "react-resizable-handle",
+        onClick: e => {
+          e.stopPropagation();
+        }
+      }),
+      onResize: onResize,
+      draggableOpts: {
+        enableUserSelectHack: false
+      }
+    }, /*#__PURE__*/React.createElement("th", restProps))
+  );
+};
+const ConvertColumnTable = props => {
+  const {
+    t,
+    columns: propsColumns,
+    dataSource,
+    lang,
+    locale,
+    format,
+    allowResizing,
+    dataSourceFilter: propDataSourceFilter,
+    onFilterClick,
+    editAble,
+    rowKey: propRowKey,
+    sortMultiple,
+    groupAble,
+    groupSetting,
+    groupColumns,
+    ...rest
+  } = props;
+  const local = lang && lang === 'en' ? en : vi;
+  const buddhistLocale = {
+    ...local,
+    lang: {
+      ...local.lang
+    }
+  };
+  const rowKey = useMemo(() => {
+    return editAble ? 'rowId' : propRowKey ?? 'id';
+  }, [editAble, propRowKey]);
+  const [columns, setColumns] = React.useState([]);
+
+  // ========================= Keys =========================
+  // const [columns, setColumns] = useMergedState(
+  //   propsColumns || [],
+  //   {
+  //     value: propsColumns,
+  //   },
+  // );
+
+  React.useEffect(() => {
+    setColumns(propsColumns);
+  }, [propsColumns]);
+  const handleResize = column => (e, {
+    size
+  }) => {
+    const newColumn = {
+      ...column,
+      width: size.width
+    };
+    const newColumns = updateArrayByKey(columns, newColumn, 'field');
+    setColumns(newColumns);
+  };
+  const [transformSelectionColumns] = useColumns({
+    locale,
+    t,
+    buddhistLocale,
+    dataSourceFilter: propDataSourceFilter,
+    format,
+    sortMultiple,
+    groupAble,
+    groupSetting,
+    groupColumns,
+    handleResize
+  });
+  const mergedColumns = React.useMemo(() => {
+    return transformSelectionColumns(columns);
+  }, [columns, transformSelectionColumns]);
+  const mergerdData = React.useMemo(() => {
+    return dataSource;
+  }, [dataSource]);
+  return /*#__PURE__*/React.createElement(InternalTable, _extends({}, rest, {
+    t: t,
+    editAble: editAble,
+    dataSource: mergerdData,
+    format: format,
+    locale: locale,
+    components: {
+      header: {
+        cell: allowResizing ? ResizableTitle : undefined
+      }
+    }
+    // columns={mergedColumns}
+    ,
+    columns: mergedColumns ?? [],
+    showSorterTooltip: {
+      target: 'sorter-icon'
+    },
+    rowKey: rowKey,
+    groupAble: groupAble,
+    groupSetting: groupSetting
+  }));
+};
+export default ConvertColumnTable;

package/es/grid-component/EditableCell.js

@@ -39,7 +39,7 @@ const EditableCell = props => {
     t,
     editing,
     dataIndex,
-    title,
+    // title,
     editType,
     record,
     index,

package/es/grid-component/GridStyle.js

@@ -2,4 +2,4 @@ import styled from "styled-components";
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;z-index:-1;}&.pagination-template{&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;z-index:-1;}}}.react-resizable{position:relative;background-clip:padding-box;}.react-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : '50px', props => props.heightTable ? `${props.heightTable}px` : '50px');
+})([".ui-rc-table-container{min-height:", ";}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;z-index:-1;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;z-index:-1;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;z-index:-1;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'react-resizable/css/styles.css';
 import type { GridTableProps } from "./type";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';