pixel-react 1.5.4 → 1.5.6

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

@@ -1,312 +1,422 @@
-import React, { useState, useRef, useEffect } from 'react';
-import Spreadsheet, { CellBase } from './ExcelFileComponents/index';
-import * as Matrix from './ExcelFileComponents/matrix';
-import './ExcelFile.scss';
-import { Col, Row } from '../../GridLayout/GridLayout';
-import Tooltip from '../../Tooltip';
-import Icon from '../../Icon';
-import Toastify from '../../Toastify';
-import { toast } from '../../Toastify/Toastify';
-
-interface ExcelFileProps {
-  /** The Excel data containing sheets and their content */
-  excelData: {
-    sheets: WorkSheet[];
-  };
-
-  /** Optional: Provide context menu options for actions like right-click */
-  contextOption?: {
-    name: string;
-    title: React.ReactNode;
-    action: () => void;
-  }[];
-
-  /** Controls whether the toolbar is shown, disabled, or hidden */
-  toolbar?: 'show' | 'disable' | 'hide';
-
-  /** Callback function to save the Excel data */
-  onSave?: (excelData?: any) => void;
-}
-
-const ExcelFile: React.FC<ExcelFileProps> = ({
-  excelData,
-  onSave = () => {},
-}) => {
-  const [sheetNames, setSheetNames] = useState<string[]>([]);
-  const EmptyRow: CellBase = {
-    value: '',
-    style: {
-      color: 'var(--text-color)',
-      backgroundColor: 'var(--drawer-footer-bg)',
-      borderColor: 'var(--toggle-strip-color)',
-    },
-  };
-  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]]);
-
-  let pageRef = useRef<string>('');
-  const sheetRef = useRef<HTMLDivElement | null>(null);
-
-  let checkVal = (val: any) => {
-    if (val === undefined || val === null) {
-      return null;
-    }
-    return val;
-  };
-  useEffect(() => {
-    const payload = excelData;
-    const sheetNames = payload.sheets.map((e) => e.sheetName);
-    setSheetNames(sheetNames);
-    if (sheetNames.length > 0) {
-      pageRef.current = sheetNames[0] ? sheetNames[0] : '';
-      setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
-    }
-    const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
-    payload.sheets.forEach((sheet) => {
-      const sheetName = sheet.sheetName;
-      const json = sheet.data;
-      const maxRows = Math.max(15, json.length + 2);
-      const maxCols = Math.max(
-        15,
-        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: cell.style,
-              type: true,
-            };
-          }
-        });
-      });
-
-      newWorksheetsData[sheetName] = spreadsheetData;
-    });
-    setWorksheetsData(newWorksheetsData);
-    const firstSheetName = Object.keys(newWorksheetsData)[0];
-    if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
-      setSelectedSheetData(newWorksheetsData[firstSheetName]);
-    }
-  }, []);
-
-  const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
-    setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
-    onSave()
-  };
-
-  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: 15 }, () =>
-      Array.from({ length: 15 }, () => EmptyRow)
-    );
-    setSheetNames((prev) => [...prev, newSheetName]);
-    setSelectedSheet({ index: sheetNames?.length, name: newSheetName });
-    setWorksheetsData({ ...worksheetsData, [newSheetName]: newSheetData });
-    setSelectedSheetData(newSheetData);
-    pageRef.current = newSheetName;
-  };
-
-  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) => {
-    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);
-  };
-
-  return (
-    <div className="excel-page">
-      {sheetNames.length > 0 && (
-        <div className="excel-book">
-          <div ref={sheetRef} className="excel-sheet">
-            <Spreadsheet
-              data={selectedSheetData}
-              onEvaluatedDataChange={onEvaluateChange}
-            />
-          </div>
-          <Row className="sheet-bar">
-            <Col size={0} className="add-sheet-icon">
-              <Tooltip title="Add Sheet" placement="top">
-                <Icon
-                  className="cursor-pointer ml-1"
-                  hoverEffect={true}
-                  onClick={() => {
-                    handleAddSheet();
-                  }}
-                  name="plus_icon"
-                  height={20}
-                  width={20}
-                />
-              </Tooltip>
-            </Col>
-            <Col size={10}>
-              <div className="excel-tab-container">
-                {sheetNames.map((name, index) => (
-                  <div
-                    key={name}
-                    className={`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);
-                      }
-                    }}
-                  >
-                    {name}
-                  </div>
-                ))}
-              </div>
-            </Col>
-          </Row>
-        </div>
-      )}
-      <Toastify />
-    </div>
-  );
-};
-
-export default ExcelFile;
+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';
+
+interface ExcelFileProps {
+  /** The Excel data containing sheets and their content */
+  excelData: {
+    sheets: WorkSheet[];
+  };
+
+  /** Optional: Provide context menu options for actions like right-click */
+  contextOption?: {
+    name: string;
+    title: React.ReactNode;
+    action: () => void;
+  }[];
+
+  /** Controls whether the toolbar is shown, disabled, or hidden */
+  toolbar?: 'show' | 'disable' | 'hide';
+
+  /** Callback function to save the Excel data */
+  onSave?: (excelData?: any) => void;
+}
+
+const ExcelFile: React.FC<ExcelFileProps> = ({
+  excelData,
+  onSave = () => {},
+}) => {
+  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: 'var(--text-color)',
+      backgroundColor: 'var(--drawer-footer-bg)',
+      borderColor: 'var(--toggle-strip-color)',
+    },
+  };
+
+  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 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;
+    const sheetNames = payload.sheets.map((e) => e.sheetName);
+    setSheetNames(sheetNames);
+    if (sheetNames.length > 0) {
+      pageRef.current = sheetNames[0] ? sheetNames[0] : '';
+      setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
+    }
+    const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
+    payload.sheets.forEach((sheet) => {
+      const sheetName = sheet.sheetName;
+      const json = sheet.data;
+      const maxRows = Math.max(15, json.length + 2);
+      const maxCols = Math.max(
+        15,
+        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: cell.style,
+              type: true,
+            };
+          }
+        });
+      });
+
+      newWorksheetsData[sheetName] = spreadsheetData;
+    });
+    setWorksheetsData(newWorksheetsData);
+    const firstSheetName = Object.keys(newWorksheetsData)[0];
+    if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
+      setSelectedSheetData(newWorksheetsData[firstSheetName]);
+    }
+  }, []);
+
+  const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
+    setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
+    onSave();
+  };
+
+  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: 15 }, () =>
+      Array.from({ length: 15 }, () => 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, worksheetsData]);
+
+  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 - 50,
+        y: event.pageY - 350,
+      },
+      options: options,
+    });
+  };
+
+  return (
+    <div className="ff-excel-page">
+      {sheetNames.length > 0 && (
+        <div className="ff-excel-book">
+          {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} />}
+          <div ref={sheetRef} className="ff-excel-sheet">
+            <Spreadsheet
+              setContextMenu={setContextMenu}
+              data={selectedSheetData}
+              onEvaluatedDataChange={onEvaluateChange}
+            />
+          </div>
+          <div className="ff-excel-sheet-bar">
+            <div className="ff-excel-add-sheet-icon">
+              <Tooltip title="Add Sheet" placement="top">
+                <Icon
+                  className="cursor-pointer ml-1"
+                  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>
+        </div>
+      )}
+      <Toastify />
+    </div>
+  );
+};
+
+export default ExcelFile;