es-grid-template 0.0.13 → 0.1.1

package/es/grid-component/table/Grid.js

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment, useMemo } from 'react';
+import { GridStyle } from "../GridStyle";
+import TableGrid from "../TableGrid";
+import EditableCell from "../EditableCell";
+import Command from "../Command";
+const Grid = props => {
+  const {
+    columns,
+    height,
+    tableRef,
+    className,
+    components,
+    style,
+    ...rest
+  } = props;
+  const transformColumns = React.useCallback(cols => {
+    // @ts-ignore
+    return cols.map(column => {
+      if (!column?.field && !column?.key) {
+        return column;
+      }
+
+      // Xử lý đệ quy cho children
+      if (column.children?.length) {
+        return {
+          ...column,
+          children: transformColumns(column.children)
+        };
+      }
+      const transformedColumn = {
+        ...column,
+        dataIndex: column.field ?? column.dataIndex,
+        title: column.headerText ?? column.title,
+        ellipsis: column.ellipsis !== false,
+        align: column.textAlign ?? column.align,
+        fixed: column.frozen ? column.frozen.toLowerCase() : column.fixed
+      };
+      // @ts-ignore
+      if (["index", "#"].includes(transformedColumn.dataIndex)) {
+        return {
+          ...transformedColumn,
+          render: (_, __, rowIndex) => rowIndex + 1
+        };
+      }
+      if (transformedColumn.dataIndex === "command") {
+        return {
+          ...transformedColumn,
+          onCell: () => ({
+            className: "ui-rc-cell-command"
+          }),
+          render: () => /*#__PURE__*/React.createElement("div", {
+            className: "ui-rc-cell-command__content"
+          }, column.commandItems?.map((item, index) => item.visible !== false ? /*#__PURE__*/React.createElement(Command, {
+            key: `command-${index}`,
+            item: item,
+            onClick: e => e.preventDefault()
+          }) : null))
+        };
+      }
+      return transformedColumn;
+    });
+  }, []);
+  const mergedColumns = useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
+    heightTable: height,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
+    tableRef: tableRef,
+    components: {
+      ...components,
+      body: {
+        cell: EditableCell
+      }
+    },
+    columns: mergedColumns,
+    style: {
+      ...style,
+      minHeight: height
+    }
+  }))));
+};
+export default Grid;

package/{lib/grid-component/rc-table → es/grid-component/table}/GridEdit.d.ts

@@ -2,8 +2,12 @@ import React from 'react';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import type { TableEditProps } from "../type";
+import type { GetRowKey } from "../type";
 type Props<RecordType> = TableEditProps<RecordType> & {
     tableRef: any;
+    triggerChangeColumns?: () => void;
+    triggerChangeData?: () => void;
+    getRowKey: GetRowKey<RecordType>;
 };
 declare const GridEdit: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default GridEdit;

package/es/grid-component/{rc-table → table}/GridEdit.js

@@ -14,7 +14,8 @@ import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
 import { getEditType, isObjEmpty, totalFixedWidth } from "../hooks";
-import Message from "./../Message/Message";
+import Message from "../../Message/Message";
+import Command from "../Command";
 dayjs.extend(customParseFormat);
 const toast = 'top-right';
 const GridEdit = props => {
@@ -23,6 +24,7 @@ const GridEdit = props => {
     t,
     columns,
     dataSource,
+    components,
     allowResizing,
     rowKey = 'id',
     selectionSettings,
@@ -31,9 +33,13 @@ const GridEdit = props => {
     onDataChange,
     onCellPaste,
     onCellChange,
-    components,
+    style,
+    getRowKey,
     ...rest
   } = props;
+
+  // const forceUpdate = useForceUpdate();
+  const [updateKey, setUpdateKey] = useState(0);
   const isSelecting = useRef(false);
   const startCell = useRef(null);
   const isSelectingRow = useRef(false);
@@ -116,6 +122,30 @@ const GridEdit = props => {
     }
     setSelectedCells(newSelectedCells);
   };
+  const handleClickRowHeader = (row, col) => {
+    const newSelectedCells = new Set();
+    for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
+      for (let c = Math.min(columns.length, col) + 1; c <= Math.max(columns.length, col); c++) {
+        newSelectedCells.add(`${r}-${c}`);
+      }
+    }
+    setSelectedCells(newSelectedCells);
+  };
+  const handleClickColHeader = (column, indexColumn) => {
+    const newSelectedCells = new Set();
+    for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
+      for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
+        newSelectedCells.add(`${r}-${c}`);
+      }
+    }
+
+    // console.log('newSelectedCells', newSelectedCells)
+    // setSelectedCells(newSelectedCells)
+
+    setSelectedCells(new Set(newSelectedCells));
+    // forceUpdate();
+    setUpdateKey(prev => prev + 1); // Cập nhật key để trigger re-render
+  };
   const handleMouseDownColIndex = (row, col, e) => {
     if (e.button === 2) {
       e.stopPropagation();
@@ -338,15 +368,15 @@ const GridEdit = props => {
       record,
       type,
       newState,
-      prevState
+      prevState,
+      option
     } = args;
 
     // console.log('newState', newState)
     //
     // console.log('getValues()', getValues())
 
-    // const record = getValues()
-
+    const newRecord = getValues();
     if (type === 'enter') {
       console.log('aaaaaa enter');
     }
@@ -357,7 +387,16 @@ const GridEdit = props => {
         // const newDataUpdate  = updateData(data, callbackData, rowKey as any)
 
         console.log('callbackData', callbackData);
-        const newRecord = callbackData;
+        const callbackRecord = callbackData;
+        Object.entries(callbackRecord).forEach(([name, value]) => {
+          setValue(name, value);
+
+          // if (listObjectDate.includes(name) && value) {
+          //   setValue(name, new Date(value))
+          // }  else {
+          //   setValue(name, value)
+          // }
+        });
         onSubmit(newRecord);
       };
       if (onCellChange) {
@@ -367,8 +406,8 @@ const GridEdit = props => {
             field: '',
             indexCol: 1,
             type: 'onChange',
-            rows: [],
             value: newState,
+            option,
             indexRow: 1,
             rowData: record,
             rowId: '',
@@ -376,12 +415,14 @@ const GridEdit = props => {
             sumValue: []
           }, handleChangeCallback);
         } else {
+          // const aaaa  = updateData(dataSource, newRecord, rowKey as any)
+
           console.log('onCellChange');
           onCellChange({
             field: '',
             indexCol: 1,
             type: 'onChange',
-            rows: [],
+            option,
             value: newState,
             indexRow: 1,
             rowData: record,
@@ -546,6 +587,7 @@ const GridEdit = props => {
       if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.dataIndex === '#') {
         return {
           ...col,
+          className: 'rc-ui-cell-editable',
           render: (value, record, rowIndex) => {
             return /*#__PURE__*/React.createElement("div", {
               className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {
@@ -553,13 +595,45 @@ const GridEdit = props => {
                 focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowIndex}-`))
               }),
               onMouseDown: event => handleMouseDownColIndex(rowIndex, colIndex, event),
-              onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event)
+              onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event),
+              onClick: () => handleClickRowHeader(rowIndex, colIndex)
             }, /*#__PURE__*/React.createElement("div", {
               className: 'ui-rc_content'
             }, rowIndex + 1));
           }
         };
       }
+      if (col.dataIndex === 'command' || col.field === 'command') {
+        return {
+          ...col,
+          title: col.headerText ?? col.title,
+          ellipsis: col.ellipsis !== false,
+          onCell: () => ({
+            className: 'ui-rc-cell-command'
+          }),
+          // render: (value: any, record: any, rowIndex: number) => {
+          render: () => {
+            return /*#__PURE__*/React.createElement("div", {
+              className: classNames('ui-rc-cell-command__content', {})
+            }, col.commandItems && col.commandItems?.map((item, indexComm) => {
+              if (item.visible !== false) {
+                // return  (
+                //   <span>{item.title}</span>
+                // )
+
+                return /*#__PURE__*/React.createElement(Command, {
+                  key: `command-${indexComm}`,
+                  item: item,
+                  onClick: e => {
+                    e.preventDefault();
+                    // handleCommandClick({command: item, rowData: record, index: rowIndex})
+                  }
+                });
+              }
+            }));
+          }
+        };
+      }
       return {
         ...col,
         onCell: (record, rowIndex) => ({
@@ -624,7 +698,7 @@ const GridEdit = props => {
               setEditingKey('');
             }
           },
-          className: isEditing(record) ? 'cell-editing' : 'cell-editable',
+          className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
           record,
           column: col,
           editType: getEditType(col, record),
@@ -632,20 +706,25 @@ const GridEdit = props => {
           title: col.title,
           'data-col-index': colIndex,
           'data-row-index': rowIndex,
-          colIndex: colIndex,
+          // colIndex: colIndex,
           indexCol: colIndex,
           indexRow: rowIndex,
           editing: isEditing(record),
           tabIndex: (rowIndex ?? 0) * columns.length + colIndex
         }),
+        onHeaderCell: data => ({
+          ...col.onHeaderCell(),
+          onClick: () => {
+            handleClickColHeader(data, colIndex);
+          }
+        }),
         render: (value, record, rowIndex) => {
           return /*#__PURE__*/React.createElement("div", {
             className: classNames('ui-rc_cell-content', {
               selected: selectedCells.has(`${rowIndex}-${colIndex}`)
             }),
             onMouseDown: event => handleMouseDown(rowIndex, colIndex, event),
-            onMouseEnter: () => handleMouseEnter(rowIndex, colIndex),
-            onMouseLeave: () => {}
+            onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
           }, /*#__PURE__*/React.createElement("div", {
             className: 'ui-rc_content'
           }, renderContent(col, value, record, rowIndex)));
@@ -668,12 +747,14 @@ const GridEdit = props => {
       control,
       trigger,
       getValues,
-      handleCellChange
+      handleCellChange,
+      getRowKey
     }
   }, /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     t: t,
+    key: updateKey,
     tableRef: tableRef,
     dataSource: dataSource,
     components: {
@@ -694,8 +775,10 @@ const GridEdit = props => {
       checkboxOnly: true
     } : undefined,
     style: {
+      ...style,
       minHeight: height
-    }
+    },
+    rowHoverable: false
   }))))), /*#__PURE__*/React.createElement(Toaster, {
     position: toast,
     toastOptions: {

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

@@ -10,6 +10,7 @@ export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file"
 export type AnyObject = Record<PropertyKey, any>;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
+export type Frozen = 'left' | 'right' | 'Left' | 'Right';
 export type ITemplateColumn = {
     value: any;
     column: any;
@@ -39,6 +40,7 @@ export type ColumnSelectTable = {
 };
 export type IEditSelectSettings = {
     fieldKey?: string;
+    options: any[];
     /**  get value form other field **/
     fieldValue?: string;
     /** get label form other field **/
@@ -46,7 +48,6 @@ export type IEditSelectSettings = {
     inputKey?: string;
     filterKey?: string[];
     selectMode?: SelectMode;
-    options: any[];
     getPasteValue?: (value: any) => Record<string, any> | null;
     validateOption?: (rowData: any, field: string) => any[];
     defaultOptions?: any[];
@@ -84,14 +85,18 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     format?: IFormat;
     allowFiltering?: boolean;
     operator?: FilterOperator;
+    hideOperator?: boolean;
     placeholder?: string;
     showInColumnChoose?: boolean;
     typeFilter?: TypeFilter;
     headerText?: string;
+    textAlign?: ITextAlign;
+    frozen?: Frozen;
     template?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
     showTooltip?: boolean;
     tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
     headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnType<RecordType>) => React.ReactNode | React.ReactElement);
+    commandItems?: CommandItem[];
     children?: ColumnType<RecordType>[];
 };
 export type ColumnEditType<RecordType> = ColumnType<RecordType> & {
@@ -140,7 +145,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
         direction: 'Ascending' | 'Descending' | null;
     }) => void;
     selectionSettings?: SelectionSettings;
-    rowKey?: string;
+    rowKey?: string | keyof RecordType | GetRowKey<RecordType>;
     rowSelection?: RowSelection<RecordType>;
     rowSelected?: (args: {
         type: string;
@@ -156,15 +161,27 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
 export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
     columns: ColumnsTable<RecordType>;
     onCellPaste?: ICellPasteModel<RecordType>;
-    onCellChange?: (args: CellChangeArgs, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
+    onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
 }
 export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType> | TableEditProps<RecordType>;
-export type CellChangeArgs = {
+export interface CommandItem {
+    id: string;
+    type?: string;
+    visible?: boolean;
+    title: string;
+    color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
+    tooltip?: string;
+    icon?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    template?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    client?: boolean;
+    confirmDialog?: boolean;
+}
+export type CellChangeArgs<T> = {
     type: 'onPaste' | 'onChange' | 'onCellPaste';
     value: any;
-    rowData: any;
-    rows: any[];
-    rowsData: any[];
+    option: AnyObject;
+    rowData: T;
+    rowsData: T[];
     indexRow: number;
     rowId?: string;
     field: string;
@@ -188,13 +205,10 @@ export type SourceFilter = {
     loadOptions?: (search: string, callback: (newOptions: any[]) => void) => void;
 };
 export type RowSelection<RecordType> = Omit<TableRowSelection<RecordType>, 'type' | 'columnWidth' | 'hideSelectAll' | 'defaultSelectedRowKeys'>;
-export type SelectionSettings = {
+export type SelectionSettings = Omit<TableRowSelection, 'type' | 'onChange' | 'onSelect' | 'onSelectAll' | 'onSelectNone' | 'onSelectMultiple'> & {
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';
     checkboxOnly?: boolean;
-    hideSelectAll?: boolean;
-    columnWidth?: number | string;
-    defaultSelectedRowKeys?: Key[];
 };
 export type RecordDoubleClickEventArgs<RecordType> = {
     rowData: RecordType;
@@ -223,3 +237,4 @@ export type IFormat = {
     monthFormat?: string;
     yearFormat?: string;
 };
+export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;

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

@@ -1,12 +1,13 @@
 /// <reference types="react" />
-import type { IFormat } from "./type";
+import type { AnyObject, IFormat } from "./type";
 import type { SubmitHandler } from "react-hook-form";
-export interface IContext {
+import type { GetRowKey } from "./type";
+export interface IContext<RecordType> {
     searchValue?: any;
     setSearchValue?: any;
     open?: boolean;
     setOpen?: any;
-    rowKey: string;
+    rowKey: string | keyof RecordType | GetRowKey<RecordType>;
     onSave?: any;
     form?: any;
     format?: IFormat;
@@ -15,13 +16,15 @@ export interface IContext {
     handleSubmit?: any;
     onSubmit?: SubmitHandler<any>;
     getValues?: any;
-    handleCellChange?: ({ key, record, type }: ContextCellChange) => void;
+    handleCellChange?: ({ key, record, type, option }: ContextCellChange<RecordType>) => void;
+    getRowKey?: GetRowKey<RecordType>;
 }
-export type ContextCellChange = {
-    key: string;
+export type ContextCellChange<RecordType = AnyObject> = {
+    key: string | keyof RecordType | GetRowKey<RecordType>;
     record: any;
+    option: any;
     newState?: any;
     prevState?: any;
     type: 'enter' | 'blur' | 'outClick';
 };
-export declare const TableContext: import("react").Context<IContext>;
+export declare const TableContext: import("react").Context<IContext<any>>;

package/es/grid-component/useContext.js

@@ -1,4 +1,7 @@
 import { createContext } from 'react';
+
+// import {AnyObject} from "antd/es/_util/type";
+
 export const TableContext = /*#__PURE__*/createContext({
   rowKey: 'id'
 });

package/es/index.d.ts

@@ -1 +1,2 @@
-export { default as GridTable } from './grid-component';
+export { default as GridComponent } from './grid-component';
+export type { ColumnsTable, TableProps, ColumnTable } from './grid-component';

package/es/index.js

@@ -1,2 +1 @@
-export { default as GridTable } from "./grid-component";
-// export type { CheckboxOptionType, CheckboxProps, CheckboxRef } from './checkbox';
+export { default as GridComponent } from "./grid-component";

package/lib/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/lib/grid-component/ColumnsChoose.js

@@ -14,10 +14,6 @@ var _tree = _interopRequireDefault(require("rc-master-ui/es/tree"));
 var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// import type { TreeDataNode} from "antd";
-
-// const { Search } = Input;
-
 const BoxAction = _styledComponents.default.div.withConfig({
   displayName: "BoxAction",
   componentId: "es-grid-template__sc-1ix8yky-0"
@@ -25,7 +21,7 @@ const BoxAction = _styledComponents.default.div.withConfig({
 const ColumnsChoose = props => {
   const {
     columns: propsColumns,
-    setColumns: changeHiddenColumn
+    triggerChangeColumns
     // t,
   } = props;
 
@@ -41,7 +37,7 @@ const ColumnsChoose = props => {
   const [columns, setColumns] = (0, _react.useState)([]);
   const [selectedKeys, setSelectedKeys] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {
-    const defaultColumns = propsColumns.filter(it => it.key || it.dataIndex && it.showColumnChoose !== false);
+    const defaultColumns = propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
     const defaultSelectedKeys = (0, _hooks.getVisibleColumnKeys)(propsColumns);
     setSelectedKeys(defaultSelectedKeys);
     setColumns(defaultColumns);
@@ -135,7 +131,7 @@ const ColumnsChoose = props => {
   };
   const handleAccept = () => {
     const rs1 = (0, _hooks.updateColumns)(propsColumns, selectedKeys);
-    changeHiddenColumn(rs1);
+    triggerChangeColumns?.(rs1);
     hide();
   };
   const handleCancel = () => {

package/lib/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/lib/grid-component/Command.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react2 = require("@floating-ui/react");
+var _antd = require("antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _hooks = require("./hooks");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import {getTemplate} from "../../hooks"
+
+const TooltipStyle = _styledComponents.default.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] = (0, _react.useState)(false);
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = (0, _react2.useFloating)({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: "top",
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: [(0, _react2.offset)(5), (0, _react2.flip)({
+      fallbackAxisSideDirection: "start"
+    }), (0, _react2.shift)()]
+  });
+  const hover = (0, _react2.useHover)(context, {
+    move: false
+  });
+  const focus = (0, _react2.useFocus)(context);
+  const dismiss = (0, _react2.useDismiss)(context);
+  const role = (0, _react2.useRole)(context, {
+    role: "tooltip"
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = (0, _react2.useInteractions)([hover, focus, dismiss, role]);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.template ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: refs.setReference
+  }, getReferenceProps(), {
+    id: item.id,
+    onClick: onClick
+  }), (0, _hooks.getTemplate)(item.template)) : /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: refs.setReference
+  }, getReferenceProps()), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    id: 'tooltip',
+    tabIndex: -1,
+    style: {
+      padding: '3px',
+      maxWidth: 45,
+      height: '100%'
+    },
+    className: (0, _classnames.default)('command-item', {
+      'btn-icon': item.title === ''
+    }),
+    color: item.color ? item.color : 'primary',
+    onClick: onClick
+  }, item.icon ? (0, _hooks.getTemplate)(item.icon) : item.title))
+
+  // <span>{item.title}</span>
+  , isOpen && item.tooltip && /*#__PURE__*/_react.default.createElement(_react2.FloatingPortal, {
+    root: document.body
+  }, /*#__PURE__*/_react.default.createElement(TooltipStyle, (0, _extends2.default)({
+    className: "Tooltip",
+    ref: refs.setFloating,
+    style: {
+      ...floatingStyles,
+      zIndex: 99
+    }
+  }, getFloatingProps()), item.tooltip)));
+};
+var _default = exports.default = Command;