es-grid-template 0.0.4 → 0.0.7

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+
+## 0.0.1 /  20-02-2025
+
+add package

package/LICENSE

@@ -0,0 +1,19 @@
+The MIT License (MIT)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,6 +1 @@
-#
-
-## Quick Features
-
-
-<!-- Force 1 -->
+# es-grid-template

package/{dist/components/GridTable → es}/CheckboxFilter.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { TableLocale } from "antd/es/table/interface";
+import type { TableLocale } from "ui-rc/dist/table/interface";
 type Props = {
     options: any[];
     filterSearch?: boolean;

package/es/CheckboxFilter.js

@@ -0,0 +1,249 @@
+import * as React from "react";
+import classNames from "classnames";
+import FilterSearch from "./FilterSearch";
+import { Checkbox, Menu, Radio } from "ui-rc";
+import { Empty, Tree } from "antd";
+
+// import {flattenKeys} from "ui-rc/dist/table/hooks/useFilter";
+
+import { flattenKeys } from "antd/es/table/hooks/useFilter";
+// import Empty from "ui-rc/dist/empty";
+// import Tree from "ui-rc/dist/tree";
+
+function searchValueMatched(searchValue, text) {
+  if (typeof text === 'string' || typeof text === 'number') {
+    return text?.toString().toLowerCase().includes(searchValue.trim().toLowerCase());
+  }
+  return false;
+}
+function renderFilterItems({
+  filters,
+  prefixCls,
+  filteredKeys,
+  filterMultiple,
+  searchValue,
+  filterSearch
+}) {
+  return filters.map((filter, index) => {
+    const key = String(filter.value);
+    if (filter.children) {
+      return {
+        key: key || index,
+        label: filter.text,
+        popupClassName: `${prefixCls}-dropdown-submenu`,
+        children: renderFilterItems({
+          filters: filter.children,
+          prefixCls,
+          filteredKeys,
+          filterMultiple,
+          searchValue,
+          filterSearch
+        })
+      };
+    }
+    const Component = filterMultiple ? Checkbox : Radio;
+    const item = {
+      key: filter.value !== undefined ? key : index,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Component, {
+        checked: filteredKeys.includes(key)
+      }), /*#__PURE__*/React.createElement("span", null, filter.text))
+    };
+    if (searchValue.trim()) {
+      if (typeof filterSearch === 'function') {
+        return filterSearch(searchValue, filter) ? item : null;
+      }
+      return searchValueMatched(searchValue, filter.text) ? item : null;
+    }
+    return item;
+  });
+}
+function hasSubMenu(filters) {
+  return filters.some(({
+    children
+  }) => children);
+}
+const CheckboxFilter = props => {
+  const {
+    // column,
+    filterSearch = true,
+    tablePrefixCls = 'ui-rc-table',
+    prefixCls = 'ui-rc-table-filter',
+    dropdownPrefixCls = 'ui-rc-dropdown',
+    filterMultiple,
+    selectedKeys,
+    locale,
+    options,
+    filterMode = 'tree',
+    // open,
+    searchValue,
+    setSearchValue,
+    onSelect
+  } = props;
+
+  // const [searchValue, setSearchValue] = React.useState('');
+
+  const [openKeys, setOpenKeys] = React.useState([]);
+
+  // clear search value after close filter dropdown
+  // React.useEffect(() => {
+  //   // if (visible) {
+  //     setSearchValue('');
+  //   // }
+  // }, [open]);
+
+  const onOpenChange = keys => {
+    setOpenKeys(keys);
+  };
+  const items = renderFilterItems({
+    // filters: column.filters || [],
+    filters: options || [],
+    filterSearch,
+    prefixCls,
+    filteredKeys: selectedKeys ?? [],
+    filterMultiple,
+    searchValue
+  });
+  const dropdownMenuClass = classNames({
+    // [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(column.filters || []),
+    [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(options || [])
+  });
+  console.log('selectedKeys', selectedKeys);
+  const empty = /*#__PURE__*/React.createElement(Empty, {
+    image: Empty.PRESENTED_IMAGE_SIMPLE,
+    description: locale.filterEmptyText,
+    imageStyle: {
+      height: 24
+    },
+    style: {
+      margin: 0,
+      padding: '16px 0'
+    }
+  });
+  const isEmpty = items.every(item => item === null);
+  const onSearch = e => {
+    const {
+      value
+    } = e.target;
+    setSearchValue(value);
+  };
+
+  // if ((column.filters || []).length === 0) {
+  //   return empty;
+  // }
+
+  const getTreeData = ({
+    filters
+  }) => (filters || []).map((filter, index) => {
+    const key = String(filter.value);
+    const item = {
+      title: filter.text,
+      key: filter.value !== undefined ? key : String(index)
+    };
+    if (filter.children) {
+      item.children = getTreeData({
+        filters: filter.children
+      });
+    }
+    return item;
+  });
+  const getFilterData = node => ({
+    ...node,
+    text: node.title,
+    value: node.key,
+    children: node.children?.map(item => getFilterData(item)) || []
+  });
+  const onCheckAll = e => {
+    console.log('e.target.checked', e.target.checked);
+    if (e.target.checked) {
+      const allFilterKeys = flattenKeys(options).map(key => String(key));
+      console.log('allFilterKeys', allFilterKeys);
+      // setFilteredKeysSync(allFilterKeys);
+      onSelect?.(allFilterKeys);
+    } else {
+      onSelect?.([]);
+      // setFilteredKeysSync([]);
+    }
+  };
+  const onCheck = (keys, {
+    node,
+    checked
+  }) => {
+    if (!filterMultiple) {
+      // onSelectKeys({ selectedKeys: checked && node.key ? [node.key] : [] });
+      onSelect?.(checked && node.key ? [node.key] : []);
+    } else {
+      // onSelectKeys({ selectedKeys: keys });
+      onSelect?.(keys);
+    }
+  };
+  if (filterMode === 'tree') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilterSearch, {
+      filterSearch: filterSearch,
+      value: searchValue,
+      onChange: onSearch,
+      tablePrefixCls: tablePrefixCls,
+      locale: locale
+    }), /*#__PURE__*/React.createElement("div", {
+      className: `${tablePrefixCls}-filter-dropdown-tree`
+    }, filterMultiple ? /*#__PURE__*/React.createElement(Checkbox
+    // checked={selectedKeys.length === flattenKeys(column.filters).length}
+    , {
+      checked: selectedKeys.length === flattenKeys(options).length
+      // indeterminate={
+      //   selectedKeys.length > 0 &&
+      //   selectedKeys.length < flattenKeys(column.filters).length
+      // }
+      ,
+
+      indeterminate: selectedKeys.length > 0 && selectedKeys.length < flattenKeys(options).length,
+      className: `${tablePrefixCls}-filter-dropdown-checkall`,
+      onChange: onCheckAll
+    }, locale.filterCheckall) : null, /*#__PURE__*/React.createElement(Tree, {
+      checkable: true,
+      selectable: false,
+      blockNode: true,
+      multiple: filterMultiple,
+      checkStrictly: !filterMultiple,
+      className: `${dropdownPrefixCls}-menu`,
+      onCheck: onCheck,
+      checkedKeys: selectedKeys,
+      selectedKeys: selectedKeys,
+      showIcon: false
+      // treeData={getTreeData({ filters: column.filters })}
+      ,
+      treeData: getTreeData({
+        filters: options
+      }),
+      autoExpandParent: true,
+      defaultExpandAll: true,
+      filterTreeNode: searchValue.trim() ? node => {
+        if (typeof filterSearch === 'function') {
+          // @ts-ignore
+          return filterSearch(searchValue, getFilterData(node));
+        }
+        return searchValueMatched(searchValue, node.title);
+      } : undefined
+    })));
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilterSearch, {
+    filterSearch: filterSearch,
+    value: searchValue,
+    onChange: onSearch,
+    tablePrefixCls: tablePrefixCls,
+    locale: locale
+  }), isEmpty ? empty : /*#__PURE__*/React.createElement(Menu, {
+    selectable: true,
+    multiple: filterMultiple,
+    prefixCls: `${dropdownPrefixCls}-menu`,
+    className: dropdownMenuClass,
+    onSelect: onSelect,
+    onDeselect: onSelect,
+    selectedKeys: selectedKeys
+    // getPopupContainer={getPopupContainer}
+    ,
+    openKeys: openKeys,
+    onOpenChange: onOpenChange,
+    items: items
+  }));
+};
+export default CheckboxFilter;

package/{dist/components/GridTable → es}/ColumnsChoose.d.ts

@@ -1,5 +1,6 @@
-import React, { Dispatch, SetStateAction } from "react";
-import { TableColumnsType } from "ui-rc";
+import type { Dispatch, SetStateAction } from "react";
+import React from "react";
+import type { TableColumnsType } from "ui-rc";
 export declare const BoxInputFilterColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export type IColumnsChoose<RecordType> = {
     columns: any[];

package/es/ColumnsChoose.js

@@ -0,0 +1,213 @@
+import React, { Fragment, useMemo, useState } from "react";
+import styled from "styled-components";
+import { Button, Input, Popover, Tooltip, Tree } from "antd";
+import { SettingOutlined } from "@ant-design/icons";
+import { getVisibleColumnKeys, updateColumns } from "./hooks";
+const {
+  Search
+} = Input;
+
+// const RowStyle = styled.div`
+//   padding: 6px 0;
+//
+//   height: 35px;
+//
+//   .ellipsis {
+//     overflow: hidden;
+//     white-space: nowrap;
+//     text-overflow: ellipsis;
+//     word-break: keep-all;
+//   }
+// `
+
+const BoxAction = styled.div.withConfig({
+  displayName: "BoxAction",
+  componentId: "es-grid-template__sc-1k89i9w-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 BoxInputFilterColumn = styled.div.withConfig({
+  displayName: "BoxInputFilterColumn",
+  componentId: "es-grid-template__sc-1k89i9w-1"
+})(["display:flex;position:relative;align-items:center;.input__value{z-index:1;border-radius:0;border-top:0;border-left:0;border-right:0;&:focus{box-shadow:none !important;}&.is-clearable{padding-right:25px !important;}}.input__clear-icon{cursor:pointer;position:absolute;right:5px;z-index:10;}"]);
+export const ColumnsChoose = props => {
+  const {
+    columns: propsColumns,
+    setColumns: changeHiddenColumn
+    // t,
+    // columnsGrouped,
+    // onChangeDisplay
+    // frozen
+  } = props;
+
+  // const dataList: { key: React.Key; title: string }[] = [];
+
+  const defaultColumns = useMemo(() => {
+    const rs = propsColumns.filter(it => it.key || it.dataIndex);
+    return rs;
+  }, [propsColumns]);
+  const defaultSelectedKeys = useMemo(() => {
+    return getVisibleColumnKeys(propsColumns);
+  }, [propsColumns]);
+
+  // const columnsChooseRef: any = useRef()
+  // const searchRef: any = useRef()
+
+  const [columns] = useState(defaultColumns);
+  const [clicked, setClicked] = useState(false);
+  const [autoExpandParent, setAutoExpandParent] = useState(true);
+  // const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [searchValue, setSearchValue] = useState('');
+  const [selectedKeys, setSelectedKeys] = useState(defaultSelectedKeys);
+  const treeData = useMemo(() => {
+    const loop = data => data.map(item => {
+      const strTitle = item.title;
+      const index = strTitle.indexOf(searchValue);
+      const beforeStr = strTitle.substring(0, index);
+      const afterStr = strTitle.slice(index + searchValue.length);
+      const title = index > -1 ? /*#__PURE__*/React.createElement("span", {
+        key: item.key
+      }, beforeStr, /*#__PURE__*/React.createElement("span", {
+        className: "site-tree-search-value"
+      }, searchValue), afterStr) : /*#__PURE__*/React.createElement("span", {
+        key: item.key
+      }, strTitle);
+      if (item.children) {
+        return {
+          title,
+          key: item.key,
+          children: loop(item.children)
+        };
+      }
+      return {
+        title,
+        key: item.key
+      };
+    });
+
+    // return loop(defaultData);
+    return loop(columns);
+  }, [searchValue]);
+  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 => {
+    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);
+  };
+  const handleAccept = () => {
+    const rs1 = updateColumns(columns, selectedKeys);
+    changeHiddenColumn(rs1);
+    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
+      }
+    }, /*#__PURE__*/React.createElement(Search, {
+      style: {
+        marginBottom: 8
+      },
+      placeholder: "Search",
+      onChange: onChange
+    }), /*#__PURE__*/React.createElement(Tree, {
+      onExpand: onExpand
+      // expandedKeys={expandedKeys}
+      ,
+      autoExpandParent: autoExpandParent,
+      treeData: treeData,
+      defaultExpandAll: true,
+      checkable: true
+      // onSelect={(keys, info) => {
+      //   const key = info.node.key
+      //   console.log('selectedKeys', keys)
+      //   console.log('info', info)
+      //
+      //   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]]
+      //
+      //     // console.log('rs', rs)
+      //     // setSelectedKeys(keys)
+      //   // }
+      // }}
+      ,
+      onCheck: keys => onCheck(keys),
+      multiple: true,
+      checkedKeys: selectedKeys,
+      defaultCheckedKeys: selectedKeys,
+      selectedKeys: [],
+      height: window.innerHeight - 200
+    }), /*#__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)}
+    }, 'OK'), /*#__PURE__*/React.createElement(Button, {
+      className: 'btn-action btn-action-cancel',
+      onClick: handleCancel
+    }, 'Cancel'))),
+    trigger: "click",
+    open: clicked,
+    onOpenChange: handleClickChange,
+    arrow: false
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    arrow: false,
+    title: 'Cài đặt'
+  }, /*#__PURE__*/React.createElement(SettingOutlined, null))));
+};

package/{dist/components/GridTable → es}/ContextMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { MenuProps } from "antd";
-import { ContextInfo } from "../../type";
+import type { ContextInfo } from "./type";
 export declare const findItemByKey: (array: any[], key: string, value: any) => any;
 type Props<RecordType> = {
     rowData: RecordType | null;

package/es/ContextMenu.js

@@ -0,0 +1,126 @@
+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;
+
+  // 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,
+      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,
+            maxWidth: 400,
+            maxHeight: pos.viewportHeight - 20,
+            width: 200
+          },
+          rootClassName: 'popup-context-menu',
+          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/{dist/components/GridTable → es}/FilterSearch.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { AnyObject } from "../../type";
-import { FilterSearchType, TableLocale } from "antd/es/table/interface";
+import type { FilterSearchType, TableLocale } from "antd/es/table/interface";
+import type { AnyObject } from "./type";
 interface FilterSearchProps<RecordType = AnyObject> {
     value: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -8,5 +8,5 @@ interface FilterSearchProps<RecordType = AnyObject> {
     tablePrefixCls: string;
     locale: TableLocale;
 }
-declare const FilterSearch: <RecordType extends AnyObject = AnyObject>(props: FilterSearchProps<RecordType>) => React.JSX.Element | null;
+declare const FilterSearch: <RecordType extends AnyObject = AnyObject>(props: FilterSearchProps<RecordType>) => React.JSX.Element;
 export default FilterSearch;