es-grid-template 0.0.8 → 0.0.13

package/es/grid-component/rc-table/GridEdit.js

@@ -0,0 +1,706 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment, useEffect, useRef, useState } from 'react';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import classNames from "classnames";
+import { Form } from "antd";
+import { useForm } from 'react-hook-form';
+import { Toaster } from "react-hot-toast";
+import { renderContent } from "../hooks/useColumns";
+import EditableCell from "../EditableCell";
+import { GridStyle } from "../GridStyle";
+import { TableContext } from "../useContext";
+import dayjs from "dayjs";
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
+import TableGrid from "../TableGrid";
+import { getEditType, isObjEmpty, totalFixedWidth } from "../hooks";
+import Message from "./../Message/Message";
+dayjs.extend(customParseFormat);
+const toast = 'top-right';
+const GridEdit = props => {
+  const {
+    tableRef,
+    t,
+    columns,
+    dataSource,
+    allowResizing,
+    rowKey = 'id',
+    selectionSettings,
+    height,
+    format,
+    onDataChange,
+    onCellPaste,
+    onCellChange,
+    components,
+    ...rest
+  } = props;
+  const isSelecting = useRef(false);
+  const startCell = useRef(null);
+  const isSelectingRow = useRef(false);
+  const rowStart = useRef(null);
+  const [form] = Form.useForm();
+  const [editingKey, setEditingKey] = useState('');
+  const [selectedCells, setSelectedCells] = useState(new Set());
+  const [rowsSelected, setRowsSelected] = useState(new Set());
+  const [selectedCell, setSelectedCell] = useState(null);
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    trigger,
+    getValues
+    // formState: { errors }
+  } = useForm({
+    mode: 'onChange'
+    // defaultValues,
+    // resolver: yupResolver(formSchema)
+  });
+
+  // @ts-ignore
+  const isEditing = record => record[rowKey] === editingKey;
+  useEffect(() => {
+    const handleClickOutside = event => {
+      const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
+      const element = event.target;
+      const container = document.querySelector(".be-popup-container");
+      // const containerHidden = document.querySelector(".be-popup-container.ant-picker-dropdown-hidden")
+
+      const isInsideContainer = element.closest(".be-popup-container") && container;
+      if (isInsideContainer) {
+        return;
+      }
+      if (tableBodies.length > 0) {
+        const tableBody = tableBodies[0]; // Chọn tbody đầu tiên (nếu có nhiều)
+
+        if (!tableBody.contains(event.target)) {
+          setEditingKey('');
+          // isSelecting.current = false;
+          // startCell.current = null;
+          setSelectedCells(new Set());
+        } else {}
+      }
+    };
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
+  const handleMouseDown = (row, col, e) => {
+    if (e.button === 2) {
+      e.stopPropagation();
+      return;
+    }
+    setSelectedCell({
+      row,
+      col
+    });
+    isSelecting.current = true;
+    startCell.current = {
+      row,
+      col
+    };
+    setSelectedCells(new Set([`${row}-${col}`]));
+    setRowsSelected(new Set());
+  };
+  const handleMouseEnter = (row, col) => {
+    if (!isSelecting.current || !startCell.current) return;
+    const {
+      row: startRow,
+      col: startCol
+    } = startCell.current;
+    const newSelectedCells = new Set();
+    for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
+      for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
+        newSelectedCells.add(`${r}-${c}`);
+      }
+    }
+    setSelectedCells(newSelectedCells);
+  };
+  const handleMouseDownColIndex = (row, col, e) => {
+    if (e.button === 2) {
+      e.stopPropagation();
+      return;
+    }
+    isSelectingRow.current = true;
+    rowStart.current = {
+      row,
+      col
+    };
+    setRowsSelected(new Set([`${row}-${col}`]));
+  };
+  const handleMouseEnterColIndex = (row, col, e) => {
+    // dừng sự kiện kéo để chọn từ các column khác khi vừa gặp column index
+    if (isSelecting) {
+      startCell.current = null;
+      e.stopPropagation();
+    }
+    if (!isSelectingRow.current || !rowStart.current) return;
+    // const { row: startRow, col: startCol } = rowStart.current;
+    const {
+      row: startRow,
+      col: startCol
+    } = rowStart.current;
+    const newSelectedRows = new Set();
+    for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
+      for (let c = Math.min(startCol, col); c <= Math.max(startCol, col); c++) {
+        newSelectedRows.add(`${r}-${c}`);
+      }
+    }
+    const newSelectedCells = new Set();
+    for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
+      for (let c = Math.min(columns.length, col) + 1; c <= Math.max(columns.length, col); c++) {
+        newSelectedCells.add(`${r}-${c}`);
+      }
+    }
+    setRowsSelected(newSelectedRows);
+    setSelectedCells(newSelectedCells);
+  };
+  const handleMouseUp = () => {
+    isSelecting.current = false;
+    startCell.current = null;
+    isSelectingRow.current = false;
+    rowStart.current = null;
+  };
+  const handleCopy = e => {
+    const selectedArray = Array.from(selectedCells).map(key => {
+      const [row, col] = key.split("-").map(Number);
+      // @ts-ignore
+      const columnKey = columns[col].dataIndex;
+      // @ts-ignore
+      return {
+        row,
+        col,
+        value: data[row][columnKey]
+      };
+    });
+
+    // Xác định min/max row và col để sắp xếp dữ liệu
+    const minRow = Math.min(...selectedArray.map(cell => cell.row));
+    const maxRow = Math.max(...selectedArray.map(cell => cell.row));
+    const minCol = Math.min(...selectedArray.map(cell => cell.col));
+    const maxCol = Math.max(...selectedArray.map(cell => cell.col));
+
+    // Tạo dữ liệu dạng bảng (mảng 2D)
+    const table = Array.from({
+      length: maxRow - minRow + 1
+    }, () => Array(maxCol - minCol + 1).fill(""));
+
+    // Gán giá trị vào bảng
+    selectedArray.forEach(({
+      row,
+      col,
+      value
+    }) => {
+      table[row - minRow][col - minCol] = value;
+    });
+
+    // Chuyển mảng 2D thành chuỗi định dạng Excel
+    const copyText = table.map(row => row.join("\t")).join("\n");
+
+    // Copy vào clipboard
+    e.preventDefault();
+    e.clipboardData.setData("text/plain", copyText);
+    Message(t ? t('CopySuccessful') : 'Copy Successful');
+  };
+  const handlePaste = (e, indexCol, indexRow) => {
+    // const clipboard: any = (e.clipboardData || (window && window?.Clipboard)).getData("text")
+    const pasteData = e.clipboardData.getData("text/plain").trim();
+
+    // Chuyển đổi dữ liệu từ clipboard thành mảng
+    const rows = pasteData.split("\n").map(row => row.replace(/\r/g, "").split("\t"));
+
+    // Lấy vị trí bắt đầu
+    // const { row: startRow, col: startCol } = selectedCell;
+    const startRow = indexRow;
+    const startCol = indexCol;
+
+    // Cập nhật data mới
+    const newData = [...dataSource];
+    const pastedRows = [];
+    const pastedColumns = new Set();
+    rows.forEach((rowValues, rowIndex) => {
+      const targetRow = startRow + rowIndex;
+
+      // Nếu vượt quá số dòng hiện có, thêm dòng mới
+      if (targetRow >= newData.length) {
+        // @ts-ignore
+        // newData.push({ id: newGuid()});
+        newData.push({
+          id: newGuid()
+        });
+      }
+      rowValues.forEach((cellValue, colIndex) => {
+        const targetCol = startCol + colIndex;
+        if (targetCol >= columns.length) return; // Không vượt quá số cột
+
+        // @ts-ignore
+        const columnKey = columns[targetCol].dataIndex;
+        // @ts-ignore
+        newData[targetRow] = {
+          ...newData[targetRow],
+          [columnKey]: cellValue.trim()
+        };
+        pastedColumns.add(columnKey);
+      });
+
+      // Lưu dòng được paste
+      pastedRows.push(newData[targetRow]);
+    });
+    const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+    console.log(pastedColumnsArray);
+    console.log(pastedRows);
+
+    //  // trigger DataChange + trigger paste
+
+    // const handlePasteCallback = (callbackData: RecordType[]) => {
+    //
+    //   const newDataUpdate  = updateData(dataSource, callbackData, rowKey as any)
+    //
+    //   // setData(newDataUpdate)
+    //   // onDataChange?.(newData)
+    //   onCellPaste?.dataChange?.(newDataUpdate)
+    // }
+    //
+    //
+    // if (onCellPaste && onCellPaste.onPasted) {
+    //
+    //   if (onCellPaste.onPasted.length > 1) {
+    //     onCellPaste.onPasted({
+    //       pasteData: pastedRows,
+    //       type: 'onPaste',
+    //       data: dataSource,
+    //       pastedColumns: pastedColumnsArray as string[]
+    //     }, handlePasteCallback)
+    //
+    //   } else {
+    //     onCellPaste.onPasted({
+    //       pasteData: pastedRows,
+    //       type: 'onPaste',
+    //       data: dataSource,
+    //       pastedColumns: ['']
+    //     }, handlePasteCallback)
+    //
+    //     onCellPaste.dataChange?.(newData)
+    //
+    //     // setData(newData);
+    //     // onDataChange?.(newData)
+    //   }
+    //
+    // }
+  };
+  const onSubmit = formData => {
+    console.log('onSubmit', formData);
+    try {
+      // const record = (await form.validateFields()) as RecordType;
+      const row = {
+        ...formData
+      };
+      // const rowData = { ...record };
+
+      // columns.forEach(column => {
+      //
+      //   // @ts-ignore
+      //   if (column.editType === 'date' && rowData[column.dataIndex]) {
+      //     // @ts-ignore
+      //     rowData[column.dataIndex] = !isEmpty(record[column.dataIndex]) ? moment(row[column.dataIndex]).format() : null
+      //   }
+      // });
+
+      const newData = [...dataSource];
+      // @ts-ignore
+      const index = newData.findIndex(item => formData[rowKey] === item[rowKey]);
+
+      // setIsManualUpdate(true);
+
+      if (index > -1) {
+        const item = newData[index];
+        newData.splice(index, 1, {
+          ...item,
+          ...row
+        });
+
+        // trigger DataChange
+        // setData(newData);
+        // onDataChange?.(newData)
+      } else {
+        newData.push(row);
+        // trigger DataChange
+
+        // setData(newData);
+        // onDataChange?.(newData)
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
+  const handleCellChange = args => {
+    const {
+      record,
+      type,
+      newState,
+      prevState
+    } = args;
+
+    // console.log('newState', newState)
+    //
+    // console.log('getValues()', getValues())
+
+    // const record = getValues()
+
+    if (type === 'enter') {
+      console.log('aaaaaa enter');
+    }
+    if (type === 'blur') {
+      // onCellChange
+
+      const handleChangeCallback = callbackData => {
+        // const newDataUpdate  = updateData(data, callbackData, rowKey as any)
+
+        console.log('callbackData', callbackData);
+        const newRecord = callbackData;
+        onSubmit(newRecord);
+      };
+      if (onCellChange) {
+        if (onCellChange.length > 1) {
+          console.log('onCellChange Callback');
+          onCellChange({
+            field: '',
+            indexCol: 1,
+            type: 'onChange',
+            rows: [],
+            value: newState,
+            indexRow: 1,
+            rowData: record,
+            rowId: '',
+            rowsData: [],
+            sumValue: []
+          }, handleChangeCallback);
+        } else {
+          console.log('onCellChange');
+          onCellChange({
+            field: '',
+            indexCol: 1,
+            type: 'onChange',
+            rows: [],
+            value: newState,
+            indexRow: 1,
+            rowData: record,
+            rowId: '',
+            rowsData: [],
+            sumValue: []
+          }, handleChangeCallback);
+          onSubmit(record);
+        }
+      }
+      console.log('aaaaaa blur');
+    }
+    if (prevState && newState && prevState !== newState && type === 'enter') {
+      console.log('enter');
+      onSubmit(record);
+    }
+  };
+  const handleEdit = (record, col, editType, e) => {
+    // @ts-ignore
+    setEditingKey(record[rowKey]);
+
+    // const formattedRecord = { ...record };
+
+    if (!isObjEmpty(record)) {
+      Object.entries(record).forEach(([name, value]) => {
+        setValue(name, value);
+
+        // if (listObjectDate.includes(name) && value) {
+        //   setValue(name, new Date(value))
+        // }  else {
+        //   setValue(name, value)
+        // }
+      });
+    }
+
+    // columns.forEach(column => {
+    //
+    //   const dateFormat  = getDatepickerFormat(editType, column)
+    //
+    //   // @ts-ignore
+    //   if ((column.editType === 'date' || column.editType === 'datetime') && record[column.dataIndex]) {
+    //
+    //     // @ts-ignore
+    //     formattedRecord[column.dataIndex] = !isEmpty(record[column.dataIndex]) ? convertDateToDayjs(new Date(record[column.dataIndex]), dateFormat) : null
+    //   }
+    //
+    // });
+
+    if (e.key === 'Enter' || editType === 'date' || e.type === 'dblclick') {} else {
+      setValue(col.dataIndex, e.key);
+    }
+    if (editType === 'select') {
+      // setSearchValue(e.key)
+      // setOpen(true)
+    }
+    if (selectedCell?.row !== undefined && selectedCell?.col !== undefined) {
+      setTimeout(() => {
+        // const input = document.querySelector(`.ui-rc-table-row[data-row-key="${selectedCell.row}"] .cell-editing[data-col-index="${selectedCell.col}"] input`) as HTMLInputElement;
+        const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${selectedCell.row}"].cell-editing[data-col-index="${selectedCell.col}"] input`);
+        // const input =  document.getElementById(`col${selectedCell.col}-record${selectedCell.row}`) as HTMLInputElement;
+
+        const select = document.querySelector(`div.cell-editing[tabindex="${selectedCell?.col}"] .ant-select-selection-search input`);
+        if (input) {
+          input.focus();
+        }
+        if (select) {
+          // @ts-ignore
+          select.searchValue = e.key;
+          // @ts-ignore
+          select.focus();
+        }
+      }, 0);
+    }
+  };
+  useEffect(() => {
+    const tableBody = document.querySelector(".ui-rc-table-tbody");
+    const tableHeader = document.querySelector(".ui-rc-table-header");
+    if (tableBody && tableHeader) {
+      tableBody.addEventListener("scroll", () => {
+        tableHeader.scrollLeft = tableBody.scrollLeft;
+      });
+    }
+  }, []);
+  const scrollToCell = (rowIndex, colIndex, cell, type) => {
+    const fixedWidth = totalFixedWidth(columns, 'left', selectionSettings);
+    if (type === 'horizontal') {
+      if (tableRef.current) {
+        tableRef.current.scrollTo({
+          left: cell.offsetLeft - fixedWidth,
+          behavior: "smooth"
+        });
+
+        // Cuộn header
+        // const tableHeader = document?.querySelector(".ui-rc-table-header");
+        // if (tableHeader) {
+        //   tableHeader.scrollLeft = cell.offsetLeft - fixedWidth
+        // }
+      }
+    } else {
+      tableRef?.current?.scrollTo({
+        index: rowIndex,
+        behavior: 'smooth'
+      });
+    }
+  };
+  const handleFocusCell = (rowIndex, colIndex, col, type, e) => {
+    const isEdit = editingKey !== '';
+    // const cellEdit: any = document.querySelector(`.ui-rc-table-row[data-row-key="${rowIndex}"] .cell-editing[data-col-index="${colIndex}"]`);
+    // const cell: any = document.querySelector(`.ui-rc-table-row[data-row-key="${rowIndex}"] .cell-editable[data-col-index="${colIndex}"]`);
+
+    const cellEdit = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowIndex}"].cell-editing[data-col-index="${colIndex}"]`);
+    const cell = document.querySelector(`.ui-rc-table-row .cell-editable[data-row-index="${rowIndex}"].cell-editable[data-col-index="${colIndex}"]`);
+    const updateSelection = () => {
+      setSelectedCell({
+        row: rowIndex,
+        col: colIndex
+      });
+      setSelectedCells(new Set([`${rowIndex}-${colIndex}`]));
+    };
+    if (isEdit) {
+      if (cellEdit) {
+        updateSelection();
+        if (e?.key !== 'Tab') {
+          cellEdit.focus();
+        }
+      }
+      if (type === 'horizontal' && cellEdit) {
+        scrollToCell(rowIndex, colIndex, cellEdit, 'horizontal');
+      }
+      if (type === 'vertical' && cell) {
+        setEditingKey('');
+        updateSelection();
+        scrollToCell(rowIndex, colIndex, cellEdit, 'vertical');
+        if (e?.key !== 'Tab') {
+          cell.focus();
+        }
+      }
+    } else {
+      if (cell) {
+        updateSelection();
+        if (e?.key !== 'Tab') {
+          cell.focus();
+        }
+      }
+      if (cell) {
+        scrollToCell(rowIndex, colIndex, cell, type);
+      }
+    }
+  };
+  const addResizeHandlers = (cols, parentPath = []) => {
+    return cols.map((col, colIndex) => {
+      const currentPath = [...parentPath, colIndex];
+      if (!col?.dataIndex && !col.key) {
+        return col;
+      }
+      if (col.children) {
+        return {
+          ...col,
+          children: addResizeHandlers(col.children, currentPath)
+        };
+      }
+      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.dataIndex === '#') {
+        return {
+          ...col,
+          render: (value, record, rowIndex) => {
+            return /*#__PURE__*/React.createElement("div", {
+              className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {
+                selected: rowsSelected.has(`${rowIndex}-${colIndex}`),
+                focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowIndex}-`))
+              }),
+              onMouseDown: event => handleMouseDownColIndex(rowIndex, colIndex, event),
+              onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event)
+            }, /*#__PURE__*/React.createElement("div", {
+              className: 'ui-rc_content'
+            }, rowIndex + 1));
+          }
+        };
+      }
+      return {
+        ...col,
+        onCell: (record, rowIndex) => ({
+          onKeyDown: event => {
+            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
+              if (!isEditing(record) && record[rowKey] !== editingKey) {
+                handleEdit(record, col, col.editType, event);
+              }
+              if (editingKey && editingKey !== '' && (rowIndex ?? 0) + 1 < dataSource.length && event.key === 'Enter') {
+                handleFocusCell((rowIndex ?? 0) + 1, colIndex, col, 'vertical', event);
+              }
+            }
+            if (event.key === 'Tab') {
+              if (colIndex + 1 !== cols.length) {
+                handleFocusCell(rowIndex, colIndex + 1, col, 'horizontal', event);
+              } else {
+                event.stopPropagation();
+                event.preventDefault();
+              }
+            }
+            if (event.key === 'ArrowRight' && colIndex + 1 !== cols.length) {
+              if (editingKey !== '') {} else {
+                handleFocusCell(rowIndex, colIndex + 1, col, 'horizontal', event);
+              }
+            }
+            if (event.key === 'ArrowLeft' && colIndex > 0) {
+              if (!col.dataIndex && !col.key || col.field === 'index' || col.field === '#' || col.dataIndex === 'index' || col.dataIndex === '#') {
+                event.stopPropagation();
+                event.preventDefault();
+              } else {
+                if (editingKey !== '') {} else {
+                  handleFocusCell(rowIndex, colIndex - 1, col, 'horizontal', event);
+                }
+              }
+            }
+            if (event.key === 'ArrowDown' && (rowIndex ?? 0) + 1 < dataSource.length) {
+              handleFocusCell((rowIndex ?? 0) + 1, colIndex, col, 'vertical', event);
+            }
+            if (event.key === 'ArrowUp' && (rowIndex ?? 0) > 0) {
+              handleFocusCell((rowIndex ?? 0) - 1, colIndex, col, 'vertical', event);
+            }
+          },
+          onPaste: event => {
+            if (editingKey === '') {
+              handlePaste(event, colIndex, rowIndex);
+              event.preventDefault();
+            }
+          },
+          onCopy: e => {
+            if (editingKey === '') {
+              handleCopy(e);
+              e.preventDefault();
+            }
+          },
+          onDoubleClick: event => {
+            if (!isEditing(record) && record[rowKey] !== editingKey) {
+              handleEdit(record, col, col.editType, event);
+            }
+          },
+          onClick: () => {
+            if (record[rowKey] !== editingKey && editingKey !== '') {
+              setEditingKey('');
+            }
+          },
+          className: isEditing(record) ? 'cell-editing' : 'cell-editable',
+          record,
+          column: col,
+          editType: getEditType(col, record),
+          dataIndex: col.dataIndex,
+          title: col.title,
+          'data-col-index': colIndex,
+          'data-row-index': rowIndex,
+          colIndex: colIndex,
+          indexCol: colIndex,
+          indexRow: rowIndex,
+          editing: isEditing(record),
+          tabIndex: (rowIndex ?? 0) * columns.length + 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: () => {}
+          }, /*#__PURE__*/React.createElement("div", {
+            className: 'ui-rc_content'
+          }, renderContent(col, value, record, rowIndex)));
+        }
+      };
+    });
+  };
+  const resizableColumns = addResizeHandlers(columns);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
+    heightTable: height,
+    style: {
+      position: 'relative'
+    },
+    onMouseUp: handleMouseUp
+  }, /*#__PURE__*/React.createElement(TableContext.Provider, {
+    value: {
+      rowKey,
+      form,
+      format,
+      control,
+      trigger,
+      getValues,
+      handleCellChange
+    }
+  }, /*#__PURE__*/React.createElement("form", {
+    onSubmit: handleSubmit(onSubmit)
+  }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
+    t: t,
+    tableRef: tableRef,
+    dataSource: dataSource,
+    components: {
+      ...components,
+      body: {
+        cell: EditableCell
+      }
+    },
+    className: 'grid-editable',
+    rowKey: rowKey,
+    columns: resizableColumns,
+    showSorterTooltip: {
+      target: 'sorter-icon'
+    },
+    format: format,
+    selectionSettings: selectionSettings ? {
+      ...selectionSettings,
+      checkboxOnly: true
+    } : undefined,
+    style: {
+      minHeight: height
+    }
+  }))))), /*#__PURE__*/React.createElement(Toaster, {
+    position: toast,
+    toastOptions: {
+      className: 'react-hot-toast'
+    }
+  }));
+};
+export default GridEdit;