es-grid-template 0.0.7 → 0.0.13

package/LICENSE

@@ -1,19 +1,21 @@
-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.
+MIT License
+
+Copyright (c) 2025 taonv
+
+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/es/{CheckboxFilter.d.ts → grid-component/CheckboxFilter.d.ts}

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

package/es/{CheckboxFilter.js → grid-component/CheckboxFilter.js}

@@ -1,14 +1,10 @@
 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";
+import { Checkbox, Menu, Radio, Empty } from "rc-master-ui";
+import { Tree } from "antd";
+import { flattenKeys } from "rc-master-ui/es/table/hooks/useFilter";
+// import Tree from "rc-master-ui/es/tree";
 
 function searchValueMatched(searchValue, text) {
   if (typeof text === 'string' || typeof text === 'number') {
@@ -107,7 +103,6 @@ const CheckboxFilter = props => {
     // [`${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,
@@ -153,10 +148,11 @@ const CheckboxFilter = props => {
     children: node.children?.map(item => getFilterData(item)) || []
   });
   const onCheckAll = e => {
-    console.log('e.target.checked', e.target.checked);
+    // console.log('e.target.checked', e.target.checked)
     if (e.target.checked) {
       const allFilterKeys = flattenKeys(options).map(key => String(key));
-      console.log('allFilterKeys', allFilterKeys);
+
+      // console.log('allFilterKeys', allFilterKeys)
       // setFilteredKeysSync(allFilterKeys);
       onSelect?.(allFilterKeys);
     } else {

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

@@ -0,0 +1,9 @@
+import type { Dispatch, SetStateAction } from "react";
+import React from "react";
+import type { ColumnsType } from "./type";
+export type IColumnsChoose<RecordType> = {
+    columns: any[];
+    setColumns: Dispatch<SetStateAction<ColumnsType<RecordType>>>;
+    t?: any;
+};
+export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;

package/es/{ColumnsChoose.js → grid-component/ColumnsChoose.js}

@@ -1,91 +1,84 @@
-import React, { Fragment, useMemo, useState } from "react";
+import React, { Fragment, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
-import { Button, Input, Popover, Tooltip, Tree } from "antd";
+// import type { TreeDataNode} from "antd";
+import { Button, Input, Popover, Tooltip } from "antd";
 import { SettingOutlined } from "@ant-design/icons";
 import { getVisibleColumnKeys, updateColumns } from "./hooks";
-const {
-  Search
-} = Input;
+import Tree from "rc-master-ui/es/tree";
+import SearchOutlined from "@ant-design/icons/SearchOutlined";
 
-// const RowStyle = styled.div`
-//   padding: 6px 0;
-//
-//   height: 35px;
-//
-//   .ellipsis {
-//     overflow: hidden;
-//     white-space: nowrap;
-//     text-overflow: ellipsis;
-//     word-break: keep-all;
-//   }
-// `
+// const { Search } = Input;
 
 const BoxAction = styled.div.withConfig({
   displayName: "BoxAction",
-  componentId: "es-grid-template__sc-1k89i9w-0"
+  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 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;
+  // 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([]);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  useEffect(() => {
+    const defaultColumns = propsColumns.filter(it => it.key || it.dataIndex && it.showColumnChoose !== false);
+    const defaultSelectedKeys = getVisibleColumnKeys(propsColumns);
+    setSelectedKeys(defaultSelectedKeys);
+    setColumns(defaultColumns);
   }, [propsColumns]);
   const defaultSelectedKeys = useMemo(() => {
     return getVisibleColumnKeys(propsColumns);
   }, [propsColumns]);
 
-  // const columnsChooseRef: any = useRef()
-  // const searchRef: any = useRef()
+  // console.log('defaultSelectedKeys', defaultSelectedKeys)
 
-  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
-      };
-    });
+  // const [searchValue, setSearchValue] = useState('');
+
+  // 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]);
 
-    // return loop(defaultData);
-    return loop(columns);
-  }, [searchValue]);
   const hide = () => {
     setClicked(false);
   };
@@ -112,10 +105,9 @@ export const ColumnsChoose = props => {
   //   return parentKey!
   // }
 
-  const onChange = e => {
-    const {
-      value
-    } = e.target;
+  // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onChange = () => {
+    // const { value } = e.target
     // const newExpandedKeys = dataList
     //   .map((item) => {
     //     if (item.title.indexOf(value) > -1) {
@@ -125,14 +117,15 @@ export const ColumnsChoose = props => {
     //   })
     //   .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
     // setExpandedKeys(newExpandedKeys)
-    setSearchValue(value);
+
+    // setSearchValue(value)
     setAutoExpandParent(true);
   };
   const onCheck = keys => {
     setSelectedKeys(keys);
   };
   const handleAccept = () => {
-    const rs1 = updateColumns(columns, selectedKeys);
+    const rs1 = updateColumns(propsColumns, selectedKeys);
     changeHiddenColumn(rs1);
     hide();
   };
@@ -146,18 +139,21 @@ export const ColumnsChoose = props => {
       style: {
         minWidth: 250
       }
-    }, /*#__PURE__*/React.createElement(Search, {
+    }, /*#__PURE__*/React.createElement(Input, {
       style: {
         marginBottom: 8
       },
       placeholder: "Search",
+      prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
       onChange: onChange
     }), /*#__PURE__*/React.createElement(Tree, {
       onExpand: onExpand
       // expandedKeys={expandedKeys}
       ,
-      autoExpandParent: autoExpandParent,
-      treeData: treeData,
+      autoExpandParent: autoExpandParent
+      // treeData={treeData}
+      ,
+      treeData: columns,
       defaultExpandAll: true,
       checkable: true
       // onSelect={(keys, info) => {

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

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ColumnEditType, IFormat } from "./type";
+import type { EditType } from "rc-master-ui";
+interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
+    t?: any;
+    editing: boolean;
+    dataIndex: string;
+    title: any;
+    editType: EditType;
+    record: DataType;
+    index: number;
+    format?: IFormat;
+    column: ColumnEditType<DataType>;
+    indexRow: number;
+    indexCol: number;
+    rowKey: any;
+}
+declare const EditableCell: <T>(props: React.PropsWithChildren<EditableCellProps<T>>) => React.JSX.Element;
+export default EditableCell;