es-grid-template 0.0.13 → 0.1.1

package/CHANGELOG.md

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

package/README.md

@@ -1 +1 @@
-# es-grid-template
+# es-grid-template

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,10 @@
 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 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 +12,7 @@ const BoxAction = styled.div.withConfig({
 export const ColumnsChoose = props => {
   const {
     columns: propsColumns,
-    setColumns: changeHiddenColumn
+    triggerChangeColumns
     // t,
   } = props;
 
@@ -32,7 +28,7 @@ export const ColumnsChoose = props => {
   const [columns, setColumns] = useState([]);
   const [selectedKeys, setSelectedKeys] = useState([]);
   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 = getVisibleColumnKeys(propsColumns);
     setSelectedKeys(defaultSelectedKeys);
     setColumns(defaultColumns);
@@ -126,7 +122,7 @@ export const ColumnsChoose = props => {
   };
   const handleAccept = () => {
     const rs1 = updateColumns(propsColumns, selectedKeys);
-    changeHiddenColumn(rs1);
+    triggerChangeColumns?.(rs1);
     hide();
   };
   const handleCancel = () => {

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,80 @@
+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()), /*#__PURE__*/React.createElement(Button, {
+    id: 'tooltip',
+    tabIndex: -1,
+    style: {
+      padding: '3px',
+      maxWidth: 45,
+      height: '100%'
+    },
+    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/EditableCell.js

@@ -52,7 +52,8 @@ const EditableCell = props => {
     format,
     control,
     getValues,
-    handleCellChange
+    handleCellChange,
+    getRowKey
   } = useContext(TableContext);
   const datePickerRef = React.useRef(null);
   const dateTimePickerRef = React.useRef(null);
@@ -70,38 +71,33 @@ const EditableCell = props => {
     const minDate = convertDateToDayjs(column.minDate, dateFormat) ?? undefined;
     switch (editType) {
       case 'date':
-        return /*#__PURE__*/React.createElement(DatePicker
-        // id={`col${indexCol}-record${indexRow}`}
-        , {
+        return /*#__PURE__*/React.createElement(DatePicker, {
           ref: datePickerRef,
           format: {
             format: dateFormat,
             type: 'mask'
           }
-
           // locale={buddhistLocale}
           ,
           style: {
             width: '100%',
             height: '100%'
           },
-          value: date
-          // defaultValue={date}
-          ,
-
+          value: date,
           onBlur: () => {
             const formState = getValues();
             const itemState = getValues(dataIndex);
             // @ts-ignore
             const prevState = record[dataIndex];
             const newState = itemState;
+            const key = getRowKey?.(record, index);
             if (newState !== prevState) {
-              // @ts-ignore
               handleCellChange?.({
-                key: record[rowKey],
+                key: key,
                 record: formState,
                 prevState,
                 newState,
+                option: newState,
                 type: 'blur'
               });
             }
@@ -158,6 +154,7 @@ const EditableCell = props => {
           minDate: minDate,
           onChange: (newDate, dateString) => {
             const newDateValue = dateString ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
+            // console.log('newDateValue', newDateValue)
             onChange(newDateValue);
             setTimeout(() => {
               // @ts-ignore
@@ -170,13 +167,14 @@ const EditableCell = props => {
             // @ts-ignore
             const prevState = record[dataIndex];
             const newState = itemState;
+            const key = getRowKey?.(record, index);
             if (prevState !== newState) {
-              // @ts-ignore
               handleCellChange?.({
-                key: record[rowKey],
+                key: key,
                 record: formState,
                 prevState,
                 newState,
+                option: newState,
                 type: 'blur'
               });
             }
@@ -187,8 +185,6 @@ const EditableCell = props => {
       case 'quarter':
       case 'year':
         const pickerFormat = getDatepickerFormat(editType, column);
-        // @ts-ignore
-        // const dateValue = !isEmpty(record[column.dataIndex]) ? dayjs(record[column.key], pickerFormat) : null
         const maxDateValue1 = !isEmpty(column.maxDate) ? dayjs(column.maxDate, pickerFormat) : undefined;
         const minDateValue1 = !isEmpty(column.minDate) ? dayjs(column.minDate, pickerFormat) : undefined;
         return /*#__PURE__*/React.createElement(DatePicker, {
@@ -200,28 +196,16 @@ const EditableCell = props => {
           style: {
             width: '100%',
             height: '100%'
-          }
-          // defaultValue={dateValue}
-          ,
+          },
           picker: editType,
           placeholder: column.placeholder,
           disabled: isDisable(column, record) ?? false,
           maxDate: maxDateValue1,
-          minDate: minDateValue1
-          // onChange={(dValue, dateString) => {
-          //   const newDateValue = dateString ? dateString : null
-          //
-          //   // record[column.dataIndex] = newDateValue
-          //   // handleCellChange(newDateValue, newDateValue,  record, col, indexRow, indexCol)
-          // }}
-          ,
+          minDate: minDateValue1,
           popupClassName: 'be-popup-container'
         });
       case 'week':
         const weekFormat = getDatepickerFormat(editType, column);
-
-        // @ts-ignore
-        // const weekValue = !isEmpty(record[column.dataIndex]) ? dayjs(record[column.dataIndex], weekFormat) : null
         const maxWeekValue = !isEmpty(column.maxDate) ? dayjs(column.maxDate, weekFormat) : undefined;
         const minWeekValue = !isEmpty(column.minDate) ? dayjs(column.minDate, weekFormat) : undefined;
         return /*#__PURE__*/React.createElement(DatePicker, {
@@ -229,21 +213,12 @@ const EditableCell = props => {
           style: {
             width: '100%',
             height: '100%'
-          }
-          // defaultValue={weekValue}
-          ,
+          },
           picker: editType,
           placeholder: column.placeholder,
           disabled: isDisable(column, record) ?? false,
           maxDate: maxWeekValue,
-          minDate: minWeekValue
-          // onChange={(dateValue, dateString) => {
-          //   const newDateValue = dateString ? dateString : null
-          //
-          //   record[column.dataIndex] = newDateValue
-          //   handleCellChange(newDateValue, newDateValue,  record, col, indexRow, indexCol)
-          // }}
-          ,
+          minDate: minWeekValue,
           popupClassName: 'be-popup-container'
         });
       case 'time':
@@ -259,22 +234,10 @@ const EditableCell = props => {
           format: {
             format: timeFormat,
             type: 'mask'
-          }
-          // defaultValue={timeValue}
-          ,
+          },
           maxDate: maxTime,
           minDate: minTime,
-          disabled: isDisable(column, record) ?? false
-          // onChange={(values: any, timeString) => {
-          //   const newTimeValue = timeString ? timeString : null
-          //   const newrecordData = {
-          //     ...record,
-          //     // [column.dataIndex]: newTimeValue
-          //   }
-          //
-          //   // handleCellChange(newTimeValue, newTimeValue, newrecordData, col, indexRow, indexCol)
-          // }}
-          ,
+          disabled: isDisable(column, record) ?? false,
           style: {
             width: '100%',
             height: '100%'
@@ -337,21 +300,31 @@ const EditableCell = props => {
           // @ts-ignore
           valueSelectTable = column?.editSelectSettings?.defaultValue(record[column.dataIndex], record);
         }
+        console.log('valueSelectTable', valueSelectTable);
         return /*#__PURE__*/React.createElement(AsyncTableSelect, {
           id: `col${indexCol}-record${indexRow}`,
           columns: columnsTable,
           options: options,
           defaultOptions: options
-          // onChange={(val: any, option) => {
-          //   // const newValue = val && (column?.editSelectSettings?.isMulti || column?.editSelectSettings?.selectMode === 'checkbox') ? (val?.map((item: any) => item[keySelect]) ?? []) : (val ? val[keySelect] : null)
-          //   const newrecordData = {
-          //     ...record,
-          //     [column.dataIndex]: val
-          //   }
-          //
-          //   // handleCellChange(option, val, newrecordData, col, indexRow, indexCol)
-          // }}
+          // value={valueSelectTable}
           ,
+          value: value,
+          onChange: (val, option) => {
+            onChange(val);
+            const formState = getValues();
+            // const itemState = getValues(dataIndex)
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              key: getRowKey?.(record, index),
+              record: formState,
+              prevState,
+              newState,
+              option: option,
+              type: 'blur'
+            });
+          },
           showSearch: true,
           mode: column?.editSelectSettings?.isMulti || column?.editSelectSettings?.selectMode === 'checkbox' ? 'multiple' : undefined,
           focusToSelectAll: true,
@@ -360,16 +333,13 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          value: valueSelectTable,
           placeholder: t ? t('Select') : 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
           rowKey: keySelect,
           popupMatchSelectWidth: column?.editSelectSettings?.menuWidth ? column?.editSelectSettings?.menuWidth + 10 : undefined,
           optionFilterProp: "label",
-          popupClassName: 'be-popup-container'
-          // onPaste={(e: any) => handleOnCellPaste(e, indexRow, indexCol)}
-          ,
+          popupClassName: 'be-popup-container',
           loadOptions: column?.editSelectSettings?.loadOptions,
           status: isInvalid ? 'error' : undefined,
           dropdownRender: menu => {
@@ -457,27 +427,26 @@ const EditableCell = props => {
           onChange: (val, item) => {
             console.log('item', item);
             onChange(val);
-          },
-          onBlur: () => {
-            const formState = getValues();
-            // const itemState = getValues(dataIndex)
-
-            // @ts-ignore
-            const prevState = record[dataIndex];
-            // const newState = value
+          }
 
-            // console.log('prevState', prevState)
-            // console.log('newState', newState)
-            // console.log('itemState', itemState)
-            if (value !== prevState) {
-              // @ts-ignore
-              handleCellChange?.({
-                key: record[rowKey],
-                record: formState,
-                type: 'blur'
-              });
-            }
-          },
+          // onBlur={() => {
+          //   const formState = getValues()
+          //   // const itemState = getValues(dataIndex)
+          //
+          //   // @ts-ignore
+          //   const prevState = record[dataIndex]
+          //   // const newState = value
+          //
+          //   // console.log('prevState', prevState)
+          //   // console.log('newState', newState)
+          //   // console.log('itemState', itemState)
+          //
+          //   if (value !== prevState) {
+          //     // @ts-ignore
+          //     handleCellChange?.({key: record[rowKey], record: formState, type: 'blur'})
+          //   }
+          // }}
+          ,
           popupClassName: 'be-popup-container'
         });
       case 'treeSelect':

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

@@ -2,5 +2,6 @@ import React from 'react';
 import type { GridTableProps } from "./type";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
+import './styles.scss';
 declare const InternalTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;

package/es/grid-component/InternalTable.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Select, Table } from "rc-master-ui";
 import { Button, Space } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
-import styled from "styled-components";
 import { Resizable } from "react-resizable";
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { numberOperator, translateOption, updateArrayByKey } from "./hooks";
@@ -14,8 +13,9 @@ 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 GridEdit from "./rc-table/GridEdit";
-import Grid from "./rc-table/Grid";
+import "./styles.scss";
+import GridEdit from "./table/GridEdit";
+import Grid from "./table/Grid";
 dayjs.extend(customParseFormat);
 const ResizableTitle = props => {
   const {
@@ -45,20 +45,17 @@ const ResizableTitle = props => {
     }, /*#__PURE__*/React.createElement("th", restProps))
   );
 };
-const GridStyle = styled.div.withConfig({
-  displayName: "GridStyle",
-  componentId: "es-grid-template__sc-1awgu8w-0"
-})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined, props => props.heightTable ? `${props.heightTable}px` : undefined);
 const InternalTable = props => {
   const {
     t,
     columns: propsColumns,
     lang,
     dataSource,
-    allowResizing = true,
+    allowResizing,
     dataSourceFilter: propDataSourceFilter,
     onFilterClick,
     editAble,
+    rowKey,
     ...rest
   } = props;
   const locale = lang && lang === 'en' ? en : vi;
@@ -83,6 +80,17 @@ const InternalTable = props => {
     }
     setIsManualUpdate(false);
   }, [dataSource]);
+
+  // ============================ RowKey ============================
+  const getRowKey = React.useMemo(() => {
+    if (typeof rowKey === 'function') {
+      return rowKey;
+    }
+
+    // @ts-ignore
+    return record => record?.[rowKey];
+  }, [rowKey]);
+  console.log('getRowKey', getRowKey);
   const handleSearch = (selectedKeys, confirm) => {
     confirm();
   };
@@ -244,11 +252,14 @@ const InternalTable = props => {
       return {
         ...getColumnSearchProps(col),
         ...col,
+        dataIndex: col.field ?? col.dataIndex,
         title: col.headerText ?? col.title,
         ellipsis: col.ellipsis !== false,
+        align: col.textAlign ?? col.align,
+        fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed,
         onFilter: (value, record) => {
           // @ts-ignore
-          return record[column?.dataIndex];
+          return record[col.field ?? col.dataIndex];
         },
         onHeaderCell: () => ({
           width: col.width,
@@ -260,13 +271,13 @@ const InternalTable = props => {
   const mergedColumns = React.useMemo(() => {
     return transformColumns(columns);
   }, [transformColumns, columns]);
+
+  // console.log('mergedColumns', mergedColumns)
+
+  const triggerChangeColumns = () => {};
+  const triggerChangeData = () => {};
   const TableComponent = editAble ? GridEdit : Grid;
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
-    heightTable: props.style?.minHeight,
-    style: {
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
     tableRef: tableRef,
     dataSource: data,
     components: {
@@ -274,10 +285,16 @@ const InternalTable = props => {
         cell: allowResizing ? ResizableTitle : undefined
       }
     },
-    columns: mergedColumns,
+    columns: mergedColumns
+    // columns={columns}
+    ,
     showSorterTooltip: {
       target: 'sorter-icon'
-    }
-  }))));
+    },
+    triggerChangeColumns: triggerChangeColumns,
+    triggerChangeData: triggerChangeData,
+    rowKey: rowKey,
+    getRowKey: getRowKey
+  }));
 };
 export default InternalTable;

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

@@ -3,7 +3,8 @@ import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import type { GridTableProps } from "./type";
 type GridProps<T> = GridTableProps<T> & {
-    setColumns?: any;
+    triggerChangeColumns?: () => void;
+    triggerChangeData?: () => void;
     tableRef: any;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;