pixel-react 1.5.5 → 1.5.6

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

@@ -2,11 +2,13 @@ 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';
+import { ContextMenuState } from './ExcelFileComponents/types';
+import ExcelContextMenu from '../ExcelContextMenu/ExcelContextMenu';
+import Typography from '../../Typography';
 
 interface ExcelFileProps {
   /** The Excel data containing sheets and their content */
@@ -33,6 +35,12 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   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: {
@@ -41,6 +49,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       borderColor: 'var(--toggle-strip-color)',
     },
   };
+
   const [selectedSheet, setSelectedSheet] = useState<{
     name: string;
     index: number;
@@ -54,15 +63,37 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     Matrix.Matrix<CellBase>
   >([[EmptyRow]]);
 
-  let pageRef = useRef<string>('');
+  const pageRef = useRef<string>('');
   const sheetRef = useRef<HTMLDivElement | null>(null);
 
-  let checkVal = (val: any) => {
+  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);
@@ -111,7 +142,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
 
   const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
     setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
-    onSave()
+    onSave();
   };
 
   const [editingSheet, setEditingSheet] = useState<number | null>(null);
@@ -142,6 +173,38 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     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,
@@ -214,6 +277,9 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   }
 
   const handleSheetChange = (name: string, index: number) => {
+    if (name === selectedSheet.name || index === selectedSheet.index) {
+      return;
+    }
     setSelectedSheet({ index, name });
     setSheetNames((prev: string[]) => {
       const updatedSheetNames = [...prev];
@@ -239,18 +305,63 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     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="excel-page">
+    <div className="ff-excel-page">
       {sheetNames.length > 0 && (
-        <div className="excel-book">
-          <div ref={sheetRef} className="excel-sheet">
+        <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>
-          <Row className="sheet-bar">
-            <Col size={0} className="add-sheet-icon">
+          <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"
@@ -263,45 +374,44 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
                   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) => {
+            </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);
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') {
-                        e.preventDefault();
-                        handleNameChange(e, index, name);
-                      }
-                    }}
-                  >
-                    {name}
-                  </div>
-                ))}
-              </div>
-            </Col>
-          </Row>
+                    }
+                  }}
+                >
+                  <Typography>{name}</Typography>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       )}
       <Toastify />

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

@@ -109,13 +109,13 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
       setContextMenu({
         open: true,
         position: {
-          x: event.clientX,
-          y: event.clientY - 50,
+          x: event.pageX - 50,
+          y: event.pageY - 260,
         },
         options: options,
       });
     },
-    [setContextMenu]
+    [setContextMenu, select, point]
   );
 
   React.useEffect(() => {
@@ -147,13 +147,14 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
     >
       <DataViewer
         row={row}
+        setContextMenu={setContextMenu}
         column={column}
         cell={data}
         evaluatedCell={evaluatedData}
         setCellData={setCellData}
       />
       <div
-        className="Selection_dot"
+        // className="Selection_dot" TODO
         onMouseOver={handleDotOver}
         onMouseDown={handleDotDown}
       ></div>

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

@@ -18,7 +18,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
 }) => {
   const dispatch = useDispatch();
   const [width, setWidth] = React.useState(100);
-  let options = [
+  const options = [
     {
       label: 'Add Column',
       value: 'Add Column',
@@ -92,8 +92,8 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       setContextMenu({
         open: true,
         position: {
-          x: event.clientX,
-          y: event.clientY - 50,
+          x: event.pageX - 50,
+          y: event.pageY - 260,
         },
         options: options,
       });

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

@@ -10,15 +10,54 @@ export const FALSE_TEXT = 'FALSE';
 const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
   cell,
   evaluatedCell,
+  setContextMenu,//Todo
 }: Types.DataViewerProps<Cell>): React.ReactElement => {
+
   const value = getValue(cell, evaluatedCell);
 
+  const options = [
+    {
+      label: 'Dynamic Cell One',
+      value: 'Dynamic Cell One',
+      iconName: 'plus_icon',
+      action: () => {
+      },
+      disable: false,
+    },
+    {
+      label: 'Dynamic Cell Two',
+      value: 'Dynamic Cell Two',
+      iconName: 'plus_icon',
+      action: () => {
+      },
+      disable: false,
+    },
+  ];
+  
+  const contextClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+
+      setContextMenu({
+        open: true,
+        position: {
+          x: event.pageX - 50,
+          y: event.pageY - 260,
+        },
+        options: options,
+      });
+    },
+    [ setContextMenu]
+  );
+
   return typeof value === 'boolean' ? (
-    <span className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
+    <span
+      className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
       {convertBooleanToText(value)}
     </span>
   ) : (
     <span
+    onContextMenu={contextClick}
       className={classNames('ff-spreadsheet-data-viewer', {
         'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value),
       })}

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

@@ -17,7 +17,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
 }) => {
   const [height, setHeight] = React.useState(0);
 
-  let options = [
+  const options = [
     {
       label: 'Add Row',
       value: 'Add Row',
@@ -86,8 +86,8 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       setContextMenu({
         open: true,
         position: {
-          x: event.clientX,
-          y: event.clientY,
+          x: event.pageX - 50,
+          y: event.pageY - 260,
         },
         options: options,
       });

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss

@@ -1,5 +1,10 @@
 @use '../../../../assets/styles/fonts';
 
+.ff-excel {
+  display: flex;
+  flex-direction: column;
+}
+
 .ff-spreadsheet {
   --background-color: var(--drawer-footer-bg);
   --text-color: var(--text-color);
@@ -29,6 +34,11 @@
 }
 
 .ff-spreadsheet-table {
+  overflow: scroll;
+  &::-webkit-scrollbar {
+    height: 0px;
+  }
+
   margin-top: 20px;
   border-collapse: collapse;
   table-layout: fixed;

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

@@ -38,7 +38,6 @@ import Copied from './Copied';
 import './Spreadsheet.scss';
 import ExcelToolBar from '../../ExcelToolBar/ExcelToolBar';
 import { hasKeyDownHandler } from './reducerFunctions';
-import ExcelContextMenu from '../../ExcelContextMenu/ExcelContextMenu';
 
 /** The Spreadsheet component props */
 export type Props<CellType extends Types.CellBase> = {
@@ -98,6 +97,7 @@ export type Props<CellType extends Types.CellBase> = {
   onActivate?: (active: Point.Point) => void;
   /** Callback called when the Spreadsheet's evaluated data changes. */
   onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
+  setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
 };
 
 /**
@@ -106,12 +106,6 @@ export type Props<CellType extends Types.CellBase> = {
 const Spreadsheet = <CellType extends Types.CellBase>(
   props: Props<CellType>
 ): React.ReactElement => {
-  const [contextMenu, setContextMenu] = React.useState<Types.ContextMenuState>({
-    open: false,
-    position: { x: 0, y: 0 },
-    options: [{ label: '', value: '', iconName: '', action: () => {} }],
-  });
-
   const {
     className,
     columnLabels,
@@ -287,30 +281,13 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     [mode, paste]
   );
 
-  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]
-  );
-
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent) => {
       event.persist();
       if (onKeyDown) {
         onKeyDown(event);
       }
-      // Do not use event in case preventDefault() was called inside onKeyDown
       if (!event.defaultPrevented) {
-        // Only disable default behavior if an handler exist
         if (hasKeyDownHandler(state, event)) {
           event.nativeEvent.preventDefault();
         }
@@ -361,29 +338,17 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     document.addEventListener('cut', handleCut);
     document.addEventListener('copy', handleCopy);
     document.addEventListener('paste', handlePaste);
-    document.addEventListener('click', handleClickOutside);
 
     return () => {
       document.removeEventListener('cut', handleCut);
       document.removeEventListener('copy', handleCopy);
       document.removeEventListener('paste', handlePaste);
-      document.removeEventListener('click', handleClickOutside);
     };
-  }, [handleCut, handleCopy, handlePaste, handleClickOutside]);
+  }, [handleCut, handleCopy, handlePaste]);
 
   const tableNode = React.useMemo(
     () => (
       <Table columns={size.columns}>
-        {contextMenu.open && (
-          <ExcelContextMenu
-            contextMenu={contextMenu}
-            data={props.data}
-            addRowTop={addRowTop}
-            addColumnLeft={addColumnLeft}
-            deleteRow={deleteRow}
-            deleteColumn={deleteColumn}
-          />
-        )}
         <HeaderRow>
           {<CornerIndicator />}
           {range(size.columns).map((columnNumber) =>
@@ -391,7 +356,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
               <ColumnIndicator
                 key={columnNumber}
                 column={columnNumber}
-                setContextMenu={setContextMenu}
+                setContextMenu={props.setContextMenu}
                 label={
                   columnNumber in columnLabels
                     ? columnLabels[columnNumber]
@@ -405,7 +370,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
               <ColumnIndicator
                 key={columnNumber}
                 column={columnNumber}
-                setContextMenu={setContextMenu}
+                setContextMenu={props.setContextMenu}
                 deleteColumn={deleteColumn}
                 addColumnLeft={addColumnLeft}
                 data={props.data}
@@ -421,7 +386,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
                 label={rowNumber in rowLabels ? rowLabels[rowNumber] : null}
                 row={rowNumber}
                 addRowTop={addRowTop}
-                setContextMenu={setContextMenu}
+                setContextMenu={props.setContextMenu}
                 deleteRow={deleteRow}
                 data={props.data}
               />
@@ -430,7 +395,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
                 key={rowNumber}
                 row={rowNumber}
                 addRowTop={addRowTop}
-                setContextMenu={setContextMenu}
+                setContextMenu={props.setContextMenu}
                 deleteRow={deleteRow}
                 data={props.data}
               />
@@ -440,7 +405,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
                 key={columnNumber}
                 row={rowNumber}
                 column={columnNumber}
-                setContextMenu={setContextMenu}
+                setContextMenu={props.setContextMenu}
                 // @ts-ignore
                 DataViewer={DataViewer}
               />
@@ -462,7 +427,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
       RowIndicator,
       Cell,
       DataViewer,
-      contextMenu,
     ]
   );
 
@@ -478,7 +442,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
 
   const rootNode = React.useMemo(
     () => (
-      <>
+      <div className="ff-excel">
         <ExcelToolBar
           data={props.data}
           onBold={onBold}
@@ -503,7 +467,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
           <Selected />
           <Copied />
         </div>
-      </>
+      </div>
     ),
     [className, handleKeyDown, handleMouseMove, tableNode, activeCellNode]
   );

package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts

@@ -19,6 +19,7 @@ import {
   applyColorToCells,
   applyFontFamily,
   applyFontSize,
+  applyFormatePainter,
   applyItalicToCells,
   applyTextAlign,
   applyUnderlineToCells,
@@ -47,6 +48,7 @@ export const INITIAL_STATE: Types.StoreState = {
   lastCommit: null,
   selectedColumn: null,
   selectedRow: null,
+  formattedStyle: { open: false, style: undefined },
 };
 
 export default function reducer(
@@ -278,9 +280,10 @@ export default function reducer(
     }
 
     case Actions.FORMATE_PAINTER: {
+      const copiedStyle = applyFormatePainter(state.model.data, state.active);
       return {
         ...state,
-        model: new Model(state.model.createFormulaParser, state.model.data),
+        formattedStyle: { open: true, style: copiedStyle },
       };
     }
 
@@ -573,7 +576,45 @@ export default function reducer(
     }
 
     case Actions.DRAG_END: {
-      return { ...state, dragging: false };
+      const selectedRange = state.selected.toRange(state.model.data);
+      let currentData = state.model.data;
+
+      if (!state.formattedStyle.open || !selectedRange) {
+        return {
+          ...state,
+          dragging: false,
+          formattedStyle: { open: false, style: undefined },
+        };
+      }
+
+      const { start, end } = selectedRange;
+
+      let updatedData = currentData;
+
+      for (let row = start.row; row <= end.row; row++) {
+        for (let col = start.column; col <= end.column; col++) {
+          const currentCell = Matrix.get({ row, column: col }, updatedData);
+          if (!currentCell) {
+            continue;
+          }
+          const updatedCell = {
+            ...currentCell,
+            style: state.formattedStyle.style,
+          };
+
+          updatedData = Matrix.set(
+            { row, column: col },
+            updatedCell,
+            updatedData
+          );
+        }
+      }
+      return {
+        ...state,
+        dragging: false,
+        formattedStyle: { open: false, style: undefined },
+        model: new Model(state.model.createFormulaParser, updatedData),
+      };
     }
 
     case Actions.COMMIT: {