pixel-react 1.10.15 → 1.10.16

package/src/components/Excel/ExcelFile/ExcelFile.tsx

@@ -1,627 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import Spreadsheet, { CellBase } from './ExcelFileComponents/index';
-import * as Matrix from './ExcelFileComponents/matrix';
-import './ExcelFile.scss';
-import Tooltip from '../../Tooltip';
-import Icon from '../../Icon';
-import Toastify from '../../Toastify';
-import { toast } from '../../Toastify/Toastify';
-import { ContextMenuState } from './ExcelFileComponents/types';
-import ExcelContextMenu from '../ExcelContextMenu/ExcelContextMenu';
-import Typography from '../../Typography';
-import {
-  convertStyleToBackend,
-  convertStyleToFrontend,
-} from '../dataConversion';
-import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
-import { debounce } from '../../../utils/debounce/debounce';
-
-interface ExcelFileProps {
-  /**
-   * The Excel data containing all the sheets and their respective content.
-   */
-  excelData: WorkSheet[];
-
-  /**
-   * Optional configuration for the context menu (usually shown on right-click).
-   * This allows customization of the context menu options with a label, value, icon, and action to be performed.
-   */
-  contextOption?: {
-    /**
-     * Whether the context menu should be enabled (open or not).
-     * If set to true, the context menu will be shown, otherwise, it will be disabled.
-     */
-    open: boolean;
-
-    /**
-     * Array of options available in the context menu. Each option contains a label (display name),
-     * value (identifier), iconName (icon to display), and action (function to be executed on click).
-     */
-    options: {
-      label: string;
-      value: string;
-      iconName: string;
-      action: () => void;
-    }[];
-  };
-
-  /**
-   * Controls whether the toolbar is shown or hidden.
-   * Possible values:
-   * - 'show' to display the toolbar
-   * - 'hide' to hide the toolbar
-   */
-  toolbar?: 'show' | 'hide';
-
-  /**
-   * Controls whether the sheet navigation bar (tabs) is shown or hidden.
-   * Possible values:
-   * - 'show' to display the sheet bar
-   * - 'hide' to hide the sheet bar
-   */
-  sheetBar?: 'show' | 'hide';
-
-  /**
-   * Optional: The total number of rows in the Excel sheet.
-   * This helps in determining the size and content of the sheet.
-   */
-  rowCount?: number;
-
-  /**
-   * Optional: The total number of columns in the Excel sheet.
-   * This helps in determining the structure of the sheet.
-   */
-  colCount?: number;
-
-  /**
-   * Callback function triggered when saving the Excel data.
-   */
-  onSave?: (saveData: any) => void;
-
-  /**
-   * Delay time (in milliseconds) before the onSave callback is executed.
-   */
-  onSaveDelay?: number;
-
-  /**
-   * Optional: Sets the vertical (Y-axis) positioning of the context menu.
-   * This allows precise control over where the context menu appears on the screen.
-   */
-  contextHeightPositioning?: number;
-
-  /**
-   * Optional: Sets the horizontal (X-axis) positioning of the context menu.
-   * This allows precise control over where the context menu appears on the screen.
-   */
-  contextWidthPositioning?: number;
-
-  /**
-   * Optional: Dynamically sets the height of the sheet view area.
-   * This can be useful if you want to change the height of the sheet display, e.g., when resizing or re-layouting.
-   */
-  sheetHeight?: string;
-
-  /**
-   * Optional: Enables or disables the context menu for columns.
-   * When set to true, column-related context menu actions are enabled.
-   */
-  columnContextEnable?: boolean;
-
-  /**
-   * Optional: Enables or disables the context menu for rows.
-   * When set to true, row-related context menu actions are enabled.
-   */
-  rowContextEnable?: boolean;
-}
-
-const ExcelFile: React.FC<ExcelFileProps> = ({
-  excelData,
-  contextOption,
-  toolbar = 'show',
-  sheetBar = 'show',
-  rowCount = 26,
-  colCount = 26,
-  sheetHeight = '100%',
-  contextHeightPositioning = 0,
-  contextWidthPositioning = 0,
-  onSave = (saveData) => {
-    saveData();
-  },
-  onSaveDelay = 0,
-  columnContextEnable = false,
-  rowContextEnable = false,
-}) => {
-  const [sheetNames, setSheetNames] = useState<string[]>([]);
-  const [contextMenu, setContextMenu] = React.useState<ContextMenuState>({
-    open: false,
-    position: { x: 0, y: 0 },
-    options: [{ label: '', value: '', iconName: '', action: () => {} }],
-  });
-
-  const EmptyRow: CellBase = {
-    value: '',
-    style: {
-      color: '#000000', // Needed hexacode for backend
-      backgroundColor: '#ffffff', // Needed hexacode for backend
-      borderColor: '#c9c9c9', // Needed hexacode for backend
-      textDecoration: 'none solid',
-      borderRight: `1px solid var(--excel-header-border)`,
-      borderLeft: `1px solid var(--excel-header-border)`,
-      borderTop: `1px solid var(--excel-header-border)`,
-      borderBottom: `1px solid var(--excel-header-border)`,
-      fontSize: '15px',
-      fontWeight: 'normal',
-      fontStyle: 'normal',
-      fontFamily: 'Times New Roman',
-      textAlign: 'left',
-    },
-  };
-
-  const [selectedSheet, setSelectedSheet] = useState<{
-    name: string;
-    index: number;
-  }>({ name: 'defaultSheet', index: 0 });
-
-  const [worksheetsData, setWorksheetsData] = useState<{
-    [key: string]: Matrix.Matrix<CellBase>;
-  }>({ defaultSheet: [[EmptyRow]] });
-
-  const [selectedSheetData, setSelectedSheetData] = useState<
-    Matrix.Matrix<CellBase>
-  >([[EmptyRow]]);
-
-  const [position, setPosition] = useState<{ x: number; y: number }>({
-    x: 0,
-    y: 0,
-  });
-
-  const pageRef = useRef<string>('');
-  const sheetRef = useRef<HTMLDivElement | null>(null);
-
-  const checkVal = (val: any) => {
-    if (val === undefined || val === null) {
-      return null;
-    }
-    return val;
-  };
-
-  const options = [
-    {
-      label: 'Add Sheet',
-      value: 'Add Sheet',
-      iconName: 'plus_icon',
-      action: () => {
-        handleAddSheet();
-      },
-      disable: false,
-    },
-    {
-      label: 'Delete Sheet',
-      value: 'Delete Sheet',
-      iconName: 'delete',
-      action: () => {
-        handleDeleteSheet();
-      },
-      disable: false,
-    },
-  ];
-
-  useEffect(() => {
-    const payload = excelData;
-    if (payload) {
-      const sheetNames = payload.map((e) => e.sheetName);
-      setSheetNames(sheetNames);
-
-      if (!checkEmpty(sheetNames.length)) {
-        pageRef.current = sheetNames[0] ? sheetNames[0] : ''; //Ternary is required, must use ''
-        setSelectedSheet({
-          name: sheetNames[0] ? sheetNames[0] : '', //Ternary is required, must use ''
-          index: 0,
-        });
-      }
-      const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
-      payload.forEach((sheet) => {
-        const sheetName = sheet.sheetName;
-        const json = sheet.data;
-        const maxRows = Math.max(rowCount, json.length + 2);
-        const maxCols = Math.max(
-          colCount,
-          Math.max(...json.map((row) => row.length)) + 2
-        );
-
-        let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
-          { length: maxRows },
-          () => Array.from({ length: maxCols }, () => EmptyRow)
-        );
-
-        json.forEach((row, rowIndex) => {
-          row.forEach((cell, colIndex) => {
-            if (rowIndex < maxRows && colIndex < maxCols) {
-              if (!spreadsheetData[rowIndex]) {
-                spreadsheetData[rowIndex] = [];
-              }
-              spreadsheetData[rowIndex][colIndex] = {
-                value: checkVal(cell.value),
-                style: convertStyleToFrontend(cell?.styles), //TODO remove 's' for Style
-                type: true,
-                isDisable: checkVal(cell.isDisable),
-              };
-            }
-          });
-        });
-        newWorksheetsData[sheetName] = spreadsheetData;
-      });
-      setWorksheetsData(newWorksheetsData);
-      const firstSheetName = Object.keys(newWorksheetsData)[0];
-      if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
-        setSelectedSheetData(newWorksheetsData[firstSheetName]);
-      }
-    }
-  }, [excelData]);
-
-  useEffect(() => {
-    debounceDispatch(handleSaveData());
-  }, [worksheetsData]);
-
-  const debounceDispatch = React.useCallback(
-    debounce((val) => {
-      onSave(val);
-    }, onSaveDelay),
-    [onSave]
-  );
-
-  const handleSave = React.useCallback(
-    (event: KeyboardEvent) => {
-      if (event.ctrlKey && event.key === 's') {
-        event.preventDefault();
-        event.stopPropagation();
-        debounceDispatch(handleSaveData());
-      }
-    },
-    [onSave]
-  );
-
-  React.useEffect(() => {
-    document.addEventListener('keydown', handleSave);
-    return () => {
-      document.removeEventListener('keydown', handleSave);
-    };
-  }, [handleSave]);
-
-  const handleSaveData = () => {
-    return sheetNames.map((sheetName) => {
-      const sheetData =
-        worksheetsData[sheetName]?.map((row) => {
-          const lastIndex = row.reduce((lastIdx, cell, i) => {
-            const hasValue = cell?.value.trim() !== '';
-            return hasValue ? i : lastIdx;
-          }, -1);
-
-          const filteredRow = row
-            .map((cell, index) => {
-              if (cell && cell.style && index <= lastIndex) {
-                return {
-                  value: cell.value,
-                  styles: convertStyleToBackend(cell.style),
-                };
-              }
-              return null;
-            })
-            .filter((cell) => cell !== null);
-
-          return filteredRow.length > 0 ? filteredRow : [];
-        }) || [];
-
-      const finalData = sheetData.filter((row, index) => {
-        const isNextRowNotEmpty = sheetData
-          .slice(index + 1)
-          .some((nextRow) => nextRow.length > 0);
-        return row.length > 0 || isNextRowNotEmpty;
-      });
-
-      return {
-        sheetName: sheetName,
-        data: checkEmpty(finalData.length) ? [[]] : finalData,
-      };
-    });
-  };
-
-  const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
-    setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
-  };
-
-  const [editingSheet, setEditingSheet] = useState<number | null>(null);
-
-  const handleAddSheet = () => {
-    const generateUniqueSheetName = (
-      baseName: string,
-      existingNames: string[]
-    ) => {
-      let newName = baseName;
-      let counter = 1;
-      while (existingNames.includes(newName)) {
-        newName = `${baseName}${counter}`;
-        counter++;
-      }
-      return newName;
-    };
-    const baseName = 'NewSheet';
-    const existingSheetNames = sheetNames;
-    const newSheetName = generateUniqueSheetName(baseName, existingSheetNames);
-    const newSheetData = Array.from({ length: rowCount }, () =>
-      Array.from({ length: colCount }, () => EmptyRow)
-    );
-    setSheetNames((prev) => [...prev, newSheetName]);
-    setSelectedSheet({ index: sheetNames?.length, name: newSheetName });
-    setWorksheetsData({ ...worksheetsData, [newSheetName]: newSheetData });
-    setSelectedSheetData(newSheetData);
-    pageRef.current = newSheetName;
-  };
-
-  useEffect(() => {
-    const selectedData = worksheetsData[selectedSheet.name];
-    if (selectedData !== undefined) {
-      setSelectedSheetData(selectedData);
-    } else {
-      setSelectedSheetData([]);
-    }
-  }, [selectedSheet.name]);
-
-  const handleDeleteSheet = () => {
-    const { index, name } = selectedSheet;
-
-    if (sheetNames.length > 1) {
-      let updatedSheetNames = sheetNames.slice();
-      updatedSheetNames.splice(index, 1);
-
-      const updatedWorksheetsData = { ...worksheetsData };
-
-      delete updatedWorksheetsData[name];
-      const newIndex = Math.min(index, updatedSheetNames.length - 1);
-
-      setSheetNames(updatedSheetNames);
-      setWorksheetsData(updatedWorksheetsData);
-      setSelectedSheet({
-        index: newIndex,
-        name: updatedSheetNames[newIndex] ? updatedSheetNames[newIndex] : '',
-      });
-    } else {
-      toast.warning('Cannot delete the last sheet.');
-    }
-  };
-
-  const handleNameChange = (
-    event: React.SyntheticEvent<HTMLDivElement>,
-    index: number,
-    name: string
-  ): void => {
-    const target = event.target as HTMLDivElement;
-    if (!target) {
-      setEditingSheet(null);
-      return;
-    }
-
-    const updatedSheetValue = target.textContent?.trim();
-
-    if (!updatedSheetValue) {
-      toast.warning('Sheet name cannot be empty.');
-      target.textContent = selectedSheet.name;
-      setEditingSheet(null);
-      return;
-    }
-
-    if (updatedSheetValue.length > 30) {
-      toast.warning('The sheet name cannot be greater than 30 characters');
-      target.textContent = selectedSheet.name;
-      setEditingSheet(null);
-      return;
-    }
-
-    if (
-      sheetNames.includes(updatedSheetValue) &&
-      sheetNames[index] !== updatedSheetValue
-    ) {
-      toast.warning('Sheet name already exists');
-      target.textContent = selectedSheet.name;
-      setEditingSheet(null);
-      return;
-    }
-
-    let updatedSheetNames = sheetNames;
-
-    updatedSheetNames.splice(index, 1, updatedSheetValue);
-
-    let remainingSheets = worksheetsData;
-
-    let updatedData = replaceKeyValueByKeyName(
-      remainingSheets,
-      name,
-      updatedSheetValue,
-      selectedSheetData
-    );
-    pageRef.current = updatedSheetValue;
-    setSelectedSheet((prev) => ({ ...prev, name: updatedSheetValue }));
-    setWorksheetsData(updatedData);
-    setEditingSheet(null);
-  };
-
-  function replaceKeyValueByKeyName(
-    obj: {
-      [key: string]: Matrix.Matrix<CellBase>;
-    },
-    oldKey: string,
-    newKey: string,
-    newValue: Matrix.Matrix<CellBase>
-  ) {
-    if (!(oldKey in obj)) {
-      throw new Error(`Key "${oldKey}" not found in object`);
-    }
-    delete obj[oldKey];
-    obj[newKey] = newValue;
-    return obj;
-  }
-
-  const handleSheetChange = (name: string, index: number) => {
-    if (name === selectedSheet.name || index === selectedSheet.index) {
-      return;
-    }
-    setSelectedSheet({ index, name });
-    setSheetNames((prev: string[]) => {
-      const updatedSheetNames = [...prev];
-      updatedSheetNames[index] = name;
-      return updatedSheetNames;
-    });
-
-    const selectedSheetData = worksheetsData[name];
-    if (selectedSheetData) {
-      setSelectedSheetData(selectedSheetData);
-    } else {
-      setSelectedSheetData([[EmptyRow]]);
-    }
-    pageRef.current = name;
-  };
-
-  const setCursorToEnd = (element: HTMLDivElement): void => {
-    const range = document.createRange();
-    const selection = window.getSelection();
-    range.selectNodeContents(element);
-    range.collapse(false);
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-  };
-
-  const handleClickOutside = React.useCallback(
-    (event: MouseEvent) => {
-      if (contextMenu.open) {
-        event.preventDefault();
-        event.stopPropagation();
-        setContextMenu({
-          open: false,
-          position: { x: 0, y: 0 },
-          options: [{ label: '', value: '', iconName: '', action: () => {} }],
-        });
-      }
-    },
-    [contextMenu.open]
-  );
-
-  React.useEffect(() => {
-    document.addEventListener('click', handleClickOutside);
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, [handleClickOutside]);
-
-  const contextClick = (event: React.MouseEvent) => {
-    event.preventDefault();
-    const target = event.target as HTMLElement;
-    const selectedSheetName = target.innerText;
-
-    sheetNames.map((name, index) => {
-      if (selectedSheetName === name) {
-        handleSheetChange(name, index);
-      }
-    });
-
-    setContextMenu({
-      open: true,
-      position: {
-        x: event.pageX,
-        y: event.pageY,
-      },
-      options: options,
-    });
-  };
-  const setContextPosition = (event: React.MouseEvent) => {
-    event.preventDefault();
-    setPosition({
-      x: event.pageX + contextWidthPositioning,
-      y: event.pageY + contextHeightPositioning,
-    });
-  };
-
-  return (
-    <>
-      {sheetNames.length > 0 && (
-        <div className="ff-excel" onContextMenu={setContextPosition}>
-          <div ref={sheetRef} className="ff-excel-sheet">
-            <Spreadsheet
-              toolbar={toolbar}
-              sheetHeight={sheetHeight}
-              setContextMenu={setContextMenu}
-              contextOption={contextOption}
-              data={selectedSheetData}
-              columnContextEnable={columnContextEnable}
-              rowContextEnable={rowContextEnable}
-              onEvaluatedDataChange={onEvaluateChange}
-            />
-          </div>
-          <div
-            className={
-              sheetBar === 'hide'
-                ? 'ff-excel-sheet-bar-hider'
-                : 'ff-excel-sheet-bar'
-            }
-          >
-            <div className="ff-excel-add-sheet-set">
-              <Tooltip title="Add Sheet" placement="top">
-                <Icon
-                  className="ff-excel-add-sheet-icon"
-                  hoverEffect={true}
-                  onClick={() => {
-                    handleAddSheet();
-                  }}
-                  name="plus_icon"
-                  height={20}
-                  width={20}
-                />
-              </Tooltip>
-            </div>
-            <div className="ff-excel-tab-container">
-              {sheetNames.map((name, index) => (
-                <div
-                  key={name}
-                  onContextMenu={contextClick}
-                  className={`ff-excel-tab-list ${
-                    name === selectedSheet.name ? 'active' : ''
-                  }`}
-                  onClick={() => {
-                    handleSheetChange(name, index);
-                  }}
-                  suppressContentEditableWarning={editingSheet === index}
-                  onDoubleClick={(e) => {
-                    setEditingSheet(index);
-                    if (editingSheet === null) {
-                      setTimeout(
-                        () => setCursorToEnd(e.target as HTMLDivElement),
-                        0
-                      );
-                    }
-                  }}
-                  contentEditable={editingSheet === index}
-                  onBlur={(e) => {
-                    handleNameChange(e, index, name);
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      e.preventDefault();
-                      handleNameChange(e, index, name);
-                    }
-                  }}
-                >
-                  <Typography>{name}</Typography>
-                </div>
-              ))}
-            </div>
-          </div>
-          {contextMenu.open && (
-            <ExcelContextMenu contextMenu={contextMenu} position={position} />
-          )}
-          <Toastify />
-        </div>
-      )}
-    </>
-  );
-};
-
-export default ExcelFile;