es-grid-template 1.8.64 → 1.8.66

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/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;

package/es/grid-component/ContextMenu.js

@@ -1,130 +0,0 @@
-import * as React from "react";
-// import type { MenuProps } from "antd";
-import { Dropdown, Menu } from "rc-master-ui";
-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;
-
-  // const addPopupOffset = (items: MenuProps["items"]) : any => {
-  //   return items?.map(item =>
-  //     item && "children" in item
-  //       ? {
-  //     ...item,
-  //         // popupOffset: [0, 30],
-  //         children: addPopupOffset(item.children) }
-  //       : item
-  //   );
-  // };
-
-  // const newItems = React.useMemo(() => {
-  //   return addPopupOffset(items)
-  // }, [items])
-
-  return (
-    /*#__PURE__*/
-    // <div>
-    //   {open && (
-    //     <div
-    //       ref={menuRef}
-    //       style={{
-    //         position: "absolute",
-    //         top: pos.y,
-    //         left: pos.x,
-    //         zIndex: 1000,
-    //         background: "white",
-    //         border: "1px solid #ddd",
-    //         boxShadow: "2px 2px 5px rgba(0,0,0,0.2)",
-    //       }}
-    //       // onClick={() => setOpen(false)}
-    //     >
-    //       <Menu
-    //         items={contextMenuItems}
-    //         style={{ minWidth: 200, maxWidth: 400, maxHeight: pos.viewportHeight  - 20 , width: 200 }}
-    //         rootClassName={'popup-context-menu'}
-    //
-    //         onClick={(e) => {
-    //           contextMenuClick?.({
-    //             rowInfo: {
-    //               rowData
-    //             },
-    //             event: e.domEvent,
-    //             item: {
-    //               ...findItemByKey(contextMenuItems as any[], 'key', e.key ),
-    //               id: e.key
-    //             }
-    //           })
-    //         }} >
-    //       </Menu>
-    //     </div>
-    //   )}
-    // </div>
-    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/grid-component/ConvertColumnTable.d.ts

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

@@ -1,144 +0,0 @@
-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,
-    dataSource,
-    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/EditForm/EditForm.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-type Props = {
-    id?: string;
-    externalClick?: any;
-    menuPortalTarget?: any;
-    value: any;
-    onChange: (props: any) => void;
-    filterKey?: string;
-    customRender?: any;
-    filterHeaderKey?: string;
-    placeholder?: string;
-    invalid?: any;
-    menuHeight?: number;
-    menuWidth?: number;
-    classNamePrefix?: string;
-    cellFocus?: boolean;
-    t?: any;
-    column: any;
-    fieldKey?: any;
-    rowData: any;
-    indexRow: any;
-    template?: any;
-    onKeyDown?: (event: any) => void;
-};
-export declare const SelectStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const EditForm: (props: Props) => React.JSX.Element;
-export {};