pixel-react 1.2.7 → 1.2.8

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

@@ -0,0 +1,312 @@
+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;

package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ActiveCell.tsx

@@ -107,8 +107,8 @@ const ActiveCell: React.FC<Props> = (props) => {
     <div
       ref={rootRef}
       className={classnames(
-        'Spreadsheet__active-cell',
-        `Spreadsheet__active-cell--${mode}`
+        'ff-spreadsheet-active-cell',
+        `ff-spreadsheet-active-cell--${mode}`
       )}
       style={dimensions}
       onClick={mode === 'view' && !readOnly ? edit : undefined}

package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Cell.tsx

@@ -102,9 +102,9 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   return (
     <td
       ref={rootRef}
-      // style={data?.style}
-      className={classnames('Spreadsheet__cell', data?.className, {
-        'Spreadsheet__active-cell': active || dragging,
+      style={data?.style}
+      className={classnames('ff-spreadsheet-cell', data?.className, {
+        'ff-spreadsheet-active-cell': active || dragging,
       })}
       onMouseEnter={handleMouseOver}
       onMouseDown={handleMouseDown}

package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ColumnIndicator.tsx

@@ -25,10 +25,10 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       setWidth(newWidth);
 
       const selectedAllRow = document.querySelector(
-        '.Spreadsheet__floating-rect--selected'
+        'ff-spreadsheet-floating-rect--selected'
       );
       const selectedSingleRow = document.querySelector(
-        '.Spreadsheet__active-cell'
+        'ff-spreadsheet-active-cell'
       );
 
       // If the element exists, update its height
@@ -68,8 +68,8 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
   return (
     <th
       style={{ minWidth: `${width}px`, position: 'relative' }} // Use dynamic width
-      className={classNames('Spreadsheet__header', {
-        'Spreadsheet__header--selected': selected,
+      className={classNames('ff-spreadsheet-header', {
+        'ff-spreadsheet-header--selected': selected,
       })}
       onClick={handleClick}
       tabIndex={0}

package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/CornerIndicator.tsx

@@ -15,8 +15,8 @@ const CornerIndicator: Types.CornerIndicatorComponent = ({
   }, [onSelect]);
   return (
     <th
-      className={classNames('Spreadsheet__header', {
-        'Spreadsheet__header--selected': selected,
+      className={classNames('ff-spreadsheet-header', {
+        'ff-spreadsheet-header--selected': selected,
       })}
       onClick={handleClick}
       tabIndex={0}

package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataEditor.tsx

@@ -22,7 +22,7 @@ const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
   const value = cell?.value ?? '';
 
   return (
-    <div className="Spreadsheet__data-editor">
+    <div className="ff-spreadsheet-data-editor">
       <input
         ref={inputRef}
         type="text"

package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataViewer.tsx

@@ -14,13 +14,13 @@ const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
   const value = getValue(cell, evaluatedCell);
 
   return typeof value === 'boolean' ? (
-    <span className="Spreadsheet__data-viewer Spreadsheet__data-viewer--boolean">
+    <span className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
       {convertBooleanToText(value)}
     </span>
   ) : (
     <span
-      className={classNames('Spreadsheet__data-viewer', {
-        'Spreadsheet__data-viewer--preserve-breaks': hasLineBreaker(value),
+      className={classNames('ff-spreadsheet-data-viewer', {
+        'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value),
       })}
     >
       {value}

package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/FloatingRect.tsx

@@ -18,10 +18,10 @@ const FloatingRect: React.FC<Props> = ({
   const { width, height, top, left } = dimensions || {};
   return (
     <div
-      className={classnames('Spreadsheet__floating-rect', {
-        [`Spreadsheet__floating-rect--${variant}`]: variant,
-        'Spreadsheet__floating-rect--dragging': dragging,
-        'Spreadsheet__floating-rect--hidden': hidden,
+      className={classnames('ff-spreadsheet-floating-rect', {
+        [`ff-spreadsheet-floating-rect--${variant}`]: variant,
+        'ff-spreadsheet-floating-rect--dragging': dragging,
+        'ff-spreadsheet-floating-rect--hidden': hidden,
       })}
       style={{ width, height, top, left }}
     />

package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/RowIndicator.tsx

@@ -23,10 +23,10 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       setHeight(newHeight);
       // Fetch the floating rectangle element from the DOM
       const selectedAllRow = document.querySelector(
-        '.Spreadsheet__floating-rect--selected'
+        '.ff-spreadsheet-floating-rect--selected'
       );
       const selectedSingleRow = document.querySelector(
-        '.Spreadsheet__active-cell'
+        '.ff-spreadsheet-active-cell'
       );
 
       // If the element exists, update its height
@@ -60,8 +60,8 @@ const RowIndicator: Types.RowIndicatorComponent = ({
   return (
     <th
       style={{ height: `${height}px`, minWidth: '60px', position: 'relative' }}
-      className={classNames('Spreadsheet__header', {
-        'Spreadsheet__header--selected': selected,
+      className={classNames('ff-spreadsheet-header', {
+        'ff-spreadsheet-header--selected': selected,
       })}
       onClick={handleClick}
       tabIndex={0}

package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Spreadsheet.scss

@@ -1,4 +1,4 @@
-.Spreadsheet {
+.ff-spreadsheet{
   --background-color: var(--drawer-footer-bg);
   --text-color: var(--text-color);
   --readonly-text-color: var(--toggle-strip-active);
@@ -15,28 +15,30 @@
   display: inline-block;
 }
 
-.Spreadsheet__active-cell {
+.ff-spreadsheet-active-cell {
   position: absolute;
   border: 2px solid var(--outline-color);
   box-sizing: border-box;
 }
 
-.Spreadsheet__active-cell--edit {
+.ff-spreadsheet-active-cell--edit {
   background: var(--background-color);
   box-shadow: var(--elevation);
 }
 
-.Spreadsheet__table {
+.ff-spreadsheet-table {
+  margin-top: 20px;
   border-collapse: collapse;
   table-layout: fixed;
 }
 
-.Spreadsheet__cell {
+.ff-spreadsheet-cell {
   outline: none;
   position: relative;
+  z-index:0;
 }
 
-.Spreadsheet__active-cell .Selection_dot {
+.ff-spreadsheet-active-cell .Selection_dot {
   background-color: var(--elevation);
   height: 7px;
   width: 7px;
@@ -48,12 +50,12 @@
   cursor: crosshair;
 }
 
-.Spreadsheet__cell--readonly {
+.ff-spreadsheet-cell--readonly {
   color: var(--readonly-text-color);
 }
 
-.Spreadsheet__cell,
-.Spreadsheet__header {
+.ff-spreadsheet-cell,
+.ff-spreadsheet-header {
   border: 0.1px solid var(--border-color);
   overflow: hidden;
   word-break: keep-all;
@@ -63,35 +65,35 @@
   user-select: none;
 }
 
-.Spreadsheet__header {
+.ff-spreadsheet-header {
   background: var(--header-background-color);
   color: var(--readonly-text-color);
   text-align: center;
 }
 
-.Spreadsheet__header--selected {
+.ff-spreadsheet-header--selected {
   background: var(--brand-color);
   color: var(--tooltip-text-color);
 }
 
-.Spreadsheet__header,
-.Spreadsheet__data-viewer,
-.Spreadsheet__data-editor input {
+.ff-spreadsheet-header,
+.ff-spreadsheet-data-viewer,
+.ff-spreadsheet-data-editor input {
   padding: 4px;
   box-sizing: border-box;
 }
 
-.Spreadsheet__data-viewer--preserve-breaks {
+.ff-spreadsheet-data-viewer--preserve-breaks {
   white-space: pre-wrap;
 }
 
-.Spreadsheet__data-editor,
-.Spreadsheet__data-editor input {
+.ff-spreadsheet-data-editor,
+.ff-spreadsheet-data-editor input {
   width: 100%;
   height: 100%;
 }
 
-.Spreadsheet__data-editor input {
+.ff-spreadsheet-data-editor input {
   font: inherit;
   color: inherit;
   background: none;
@@ -100,29 +102,29 @@
   margin: 0;
 }
 
-.Spreadsheet__data-viewer--boolean {
+.ff-spreadsheet-data-viewer--boolean {
   text-align: center;
 }
 
-.Spreadsheet__floating-rect {
+.ff-spreadsheet-floating-rect {
   position: absolute;
   pointer-events: none;
   box-sizing: border-box;
 }
 
-.Spreadsheet__floating-rect--hidden {
+.ff-spreadsheet-floating-rect--hidden {
   display: none;
 }
 
-.Spreadsheet__floating-rect--selected {
+.ff-spreadsheet-floating-rect--selected {
   background: var(--outline-background-color);
   border: 2px var(--outline-color) solid;
 }
 
-.Spreadsheet__floating-rect--dragging {
+.ff-spreadsheet-floating-rect--dragging {
   border: none;
 }
 
-.Spreadsheet__floating-rect--copied {
+.ff-spreadsheet-floating-rect--copied {
   border: 2px var(--outline-color) dashed;
 }