es-grid-template 0.1.0 → 0.1.2-1

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

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

package/es/grid-component/ColumnsChoose.js

@@ -1,14 +1,12 @@
 import React, { Fragment, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
-// import type { TreeDataNode} from "antd";
 import { Button, Input, Popover, Tooltip } from "antd";
 import { SettingOutlined } from "@ant-design/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 { Search } = Input;
-
 const BoxAction = styled.div.withConfig({
   displayName: "BoxAction",
   componentId: "es-grid-template__sc-1ix8yky-0"
@@ -16,7 +14,7 @@ const BoxAction = styled.div.withConfig({
 export const ColumnsChoose = props => {
   const {
     columns: propsColumns,
-    setColumns: changeHiddenColumn
+    triggerChangeColumns
     // t,
   } = props;
 
@@ -29,20 +27,32 @@ export const ColumnsChoose = props => {
   // const columnsChooseRef: any = useRef()
   // const searchRef: any = useRef()
 
-  const [columns, setColumns] = useState([]);
+  // 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.showColumnChoose !== false);
-    const defaultSelectedKeys = getVisibleColumnKeys(propsColumns);
-    setSelectedKeys(defaultSelectedKeys);
-    setColumns(defaultColumns);
+    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]);
-
-  // console.log('defaultSelectedKeys', defaultSelectedKeys)
-
   const [clicked, setClicked] = useState(false);
   const [autoExpandParent, setAutoExpandParent] = useState(true);
   // const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
@@ -123,10 +133,11 @@ export const ColumnsChoose = props => {
   };
   const onCheck = keys => {
     setSelectedKeys(keys);
+    setIsManualUpdate(true);
   };
   const handleAccept = () => {
     const rs1 = updateColumns(propsColumns, selectedKeys);
-    changeHiddenColumn(rs1);
+    triggerChangeColumns?.(rs1);
     hide();
   };
   const handleCancel = () => {
@@ -182,7 +193,9 @@ export const ColumnsChoose = props => {
       onCheck: keys => onCheck(keys),
       multiple: true,
       checkedKeys: selectedKeys,
-      defaultCheckedKeys: selectedKeys,
+      defaultCheckedKeys: selectedKeys
+      // defaultCheckedKeys={defaultSelectedKeys}
+      ,
       selectedKeys: [],
       height: window.innerHeight - 200
     }), /*#__PURE__*/React.createElement(BoxAction, {

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

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

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment, useState } from "react";
+// import {getTemplate} from "../../hooks"
+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: 99
+    }
+  }, getFloatingProps()), item.tooltip)));
+};
+export default Command;

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

@@ -1,10 +1,10 @@
 import * as React from "react";
-import type { MenuProps } from "antd";
 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: MenuProps["items"];
+    contextMenuItems: ContextMenuItem[];
     contextMenuClick?: (args: ContextInfo<RecordType>) => void;
     open: boolean;
     menuRef?: any;

package/es/grid-component/ContextMenu.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+// import type { MenuProps } from "antd";
 import { Dropdown, Menu } from "antd";
 export const findItemByKey = (array, key, value) => {
   for (let i = 0; i < array.length; i++) {