es-grid-template 1.8.65 → 1.8.67

package/es/grid-component/ColumnsChoose.js

@@ -1,230 +0,0 @@
-import React, { Fragment, useEffect, useMemo, useState } from "react";
-import styled from "styled-components";
-import { Button, Input, Popover, Tooltip } from "antd";
-import { Settings } from "becoxy-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";
-const BoxAction = styled.div.withConfig({
-  displayName: "BoxAction",
-  componentId: "es-grid-template__sc-1ix8yky-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,
-    triggerChangeColumns,
-    triggerChangeKeys,
-    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([]);
-  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);
-    // setColumns(defaultColumns as TableColumnsType)
-  }, [propsColumns]);
-  useEffect(() => {
-    // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
-    const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
-    const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns);
-    if (!isManualUpdate) {
-      setSelectedKeys(defaultSelectedKeys);
-    }
-    setIsManualUpdate(false);
-  }, [propsColumns]);
-  const defaultSelectedKeys = useMemo(() => {
-    const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
-    return getVisibleColumnKeys(defaultColumns);
-  }, [columnsGroup, 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 => {
-    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);
-  };
-  const handleAccept = () => {
-    const rs1 = updateColumns(propsColumns, selectedKeys);
-    triggerChangeKeys?.(selectedKeys);
-    triggerChangeColumns?.(rs1, 'columnChoose');
-    hide();
-  };
-  const handleCancel = () => {
-    setSelectedKeys(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)),
-      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,
-      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
-  }))));
-};

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

@@ -1,12 +0,0 @@
-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

@@ -1,232 +0,0 @@
-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 "../hooks";
-const BoxAction = styled.div.withConfig({
-  displayName: "BoxAction",
-  componentId: "es-grid-template__sc-1uj3tyy-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);
-  console.log('columns', columns);
-  console.log('columnsGrouped', columnsGrouped);
-  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]);
-  console.log('rsCol', rsCol);
-  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,
-    style: {
-      cursor: 'pointer'
-    }
-  }))));
-};

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

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

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

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

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

@@ -1,8 +0,0 @@
-import React from "react";
-import type { CommandItem } from "./type";
-type Props = {
-    item: CommandItem;
-    onClick: (e: any) => void;
-};
-declare const Command: (props: Props) => React.JSX.Element;
-export default Command;

package/es/grid-component/Command.js

@@ -1,80 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useState } from "react";
-import classnames from "classnames";
-import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal
-// useClick
-} from "@floating-ui/react";
-// import {Button} from "antd";
-import styled from "styled-components";
-import { getTemplate } from "./hooks";
-const TooltipStyle = styled.div.withConfig({
-  displayName: "TooltipStyle",
-  componentId: "es-grid-template__sc-1iotu11-0"
-})(["width:max-content;background-color:#444;color:white;font-size:90%;padding:4px 8px;border-radius:4px;opacity:0.9;z-index:9999;max-width:450px;"]);
-const Command = props => {
-  const {
-    item,
-    onClick
-  } = props;
-  const [isOpen, setIsOpen] = useState(false);
-  const {
-    refs,
-    floatingStyles,
-    context
-  } = useFloating({
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    placement: "top",
-    whileElementsMounted: autoUpdate,
-    middleware: [offset(5), flip({
-      fallbackAxisSideDirection: "start"
-    }), shift()]
-  });
-  const hover = useHover(context, {
-    move: false
-  });
-  const focus = useFocus(context);
-  const dismiss = useDismiss(context);
-  const role = useRole(context, {
-    role: "tooltip"
-  });
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = useInteractions([hover, focus, dismiss, role]);
-  return /*#__PURE__*/React.createElement(Fragment, null, item.template ? /*#__PURE__*/React.createElement("div", _extends({
-    ref: refs.setReference
-  }, getReferenceProps(), {
-    id: item.id,
-    onClick: onClick
-  }), getTemplate(item.template)) : /*#__PURE__*/React.createElement("div", _extends({
-    ref: refs.setReference
-  }, getReferenceProps(), {
-    tabIndex: -1,
-    style: {
-      padding: '3px',
-      maxWidth: 45,
-      height: '100%',
-      display: 'flex',
-      cursor: 'pointer'
-    },
-    className: classnames('command-item', {
-      'btn-icon': item.title === ''
-    }),
-    color: item.color ? item.color : 'primary',
-    onClick: onClick
-  }), item.icon ? getTemplate(item.icon) : item.title)
-
-  // <span>{item.title}</span>
-  , isOpen && item.tooltip && /*#__PURE__*/React.createElement(FloatingPortal, {
-    root: document.body
-  }, /*#__PURE__*/React.createElement(TooltipStyle, _extends({
-    className: "Tooltip",
-    ref: refs.setFloating,
-    style: {
-      ...floatingStyles,
-      zIndex: 1999
-    }
-  }, getFloatingProps()), item.tooltip)));
-};
-export default Command;

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

@@ -1,20 +0,0 @@
-import * as React from "react";
-import type { ContextInfo } from "./type";
-import type { ContextMenuItem } from "./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;
-        y: number;
-        viewportWidth: number;
-        viewportHeight: number;
-    };
-};
-declare const ContextMenu: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
-export default ContextMenu;