pixel-react 1.4.3 → 1.4.4

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

@@ -10,18 +10,41 @@ const RowIndicator: Types.RowIndicatorComponent = ({
   label,
   selected,
   onSelect,
+  setContextMenu,
+  addRowTop,
+  deleteRow,
+  data,
 }) => {
   const [height, setHeight] = React.useState(0);
 
-  // Function to handle the start of the resize (mouse down)
+  let options = [
+    {
+      label: 'Add Row',
+      value: 'Add Row',
+      iconName: 'plus_icon',
+      action: () => {
+        addRowTop(data);
+      },
+      disable: false,
+    },
+    {
+      label: 'Delete Row',
+      value: 'Delete Row',
+      iconName: 'delete',
+      action: () => {
+        deleteRow(data);
+      },
+      disable: false,
+    },
+  ];
+
   const onMouseDown = (e: React.MouseEvent) => {
     const startY = e.clientY;
 
-    // Function to handle mouse movement (resize)
     const onMouseMove = (moveEvent: MouseEvent) => {
       const newHeight = height + (moveEvent.clientY - startY);
       setHeight(newHeight);
-      // Fetch the floating rectangle element from the DOM
+
       const selectedAllRow = document.querySelector(
         '.ff-spreadsheet-floating-rect--selected'
       );
@@ -29,7 +52,6 @@ const RowIndicator: Types.RowIndicatorComponent = ({
         '.ff-spreadsheet-active-cell'
       );
 
-      // If the element exists, update its height
       if (
         selectedAllRow instanceof HTMLElement &&
         selectedSingleRow instanceof HTMLElement
@@ -39,13 +61,11 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       }
     };
 
-    // Function to stop the resizing (mouse up)
     const onMouseUp = () => {
       document.removeEventListener('mousemove', onMouseMove);
       document.removeEventListener('mouseup', onMouseUp);
     };
 
-    // Add event listeners for mouse move and mouse up
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
   };
@@ -57,6 +77,24 @@ const RowIndicator: Types.RowIndicatorComponent = ({
     [onSelect, row]
   );
 
+  const contextClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+
+      onSelect(row, event.shiftKey);
+
+      setContextMenu({
+        open: true,
+        position: {
+          x: event.clientX,
+          y: event.clientY,
+        },
+        options: options,
+      });
+    },
+    [onSelect, row, setContextMenu]
+  );
+
   return (
     <th
       style={{ height: `${height}px`, minWidth: '60px', position: 'relative' }}
@@ -64,6 +102,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
         'ff-spreadsheet-header--selected': selected,
       })}
       onClick={handleClick}
+      onContextMenu={contextClick}
       tabIndex={0}
     >
       {label !== undefined ? label : row + 1}

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

@@ -1,4 +1,6 @@
-.ff-spreadsheet{
+@use '../../../../assets/styles/fonts';
+
+.ff-spreadsheet {
   --background-color: var(--drawer-footer-bg);
   --text-color: var(--text-color);
   --readonly-text-color: var(--toggle-strip-active);
@@ -35,7 +37,7 @@
 .ff-spreadsheet-cell {
   outline: none;
   position: relative;
-  z-index:0;
+  z-index: 0;
 }
 
 .ff-spreadsheet-active-cell .Selection_dot {
@@ -63,6 +65,35 @@
   text-align: left;
   box-sizing: border-box;
   user-select: none;
+
+  .ff-option-card {
+    position: absolute;
+    border: 1px solid var(--option-card-border-color);
+    background: var(--option-card-bg-color);
+    border-radius: 4px;
+    margin: 2px;
+    min-height: 32px;
+    min-width: 111px;
+    z-index: 100000;
+    white-space: nowrap;
+
+    .ff-options {
+      @extend .fontSm;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      line-height: 16px;
+      gap: 8px;
+      &:hover {
+        background-color: var(--hover-color);
+      }
+      label {
+        cursor: pointer;
+      }
+    }
+  }
 }
 
 .ff-spreadsheet-header {
@@ -71,6 +102,10 @@
   text-align: center;
 }
 
+.corner_indicator {
+  margin: 0px 0px 0px 15px;
+}
+
 .ff-spreadsheet-header--selected {
   background: var(--brand-color);
   color: var(--tooltip-text-color);

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

@@ -38,6 +38,7 @@ 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> = {
@@ -45,19 +46,7 @@ export type Props<CellType extends Types.CellBase> = {
   data: Matrix.Matrix<CellType>;
   /** Class name to be added to the spreadsheet's root element */
   className?: string;
-  /**
-   * Use dark colors that complement dark mode
-   * @defaultValue `false`
-   */
-  /**
-   * Function used to create the formula parser (instance of
-   * "fast-formula-parser") used by the Spreadsheet by getting the spreadsheet's
-   * data.
-   * @defaultValue function which creates a formula parser bound to the
-   * Spreadsheet's data.
-   * @see `createFormulaParser`
-   * @see https://www.npmjs.com/package/fast-formula-parser
-   */
+
   createFormulaParser?: Types.CreateFormulaParser;
   /**
    * Labels to use in column indicators.
@@ -117,6 +106,12 @@ 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,
@@ -186,6 +181,11 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const setBackgroundColor = useAction(Actions.backgroundStyle);
   const setFormatePainter = useAction(Actions.formatePainter);
 
+  const addRowTop = useAction(Actions.addRowTop);
+  const addColumnLeft = useAction(Actions.addColumnLeft);
+  const deleteRow = useAction(Actions.deleteRow);
+  const deleteColumn = useAction(Actions.deleteColumn);
+
   const prevEvaluatedDataRef = React.useRef<Matrix.Matrix<CellType>>(
     state.model.evaluatedData
   );
@@ -287,6 +287,21 @@ 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();
@@ -346,17 +361,29 @@ 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]);
+  }, [handleCut, handleCopy, handlePaste, handleClickOutside]);
 
   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) =>
@@ -364,14 +391,25 @@ const Spreadsheet = <CellType extends Types.CellBase>(
               <ColumnIndicator
                 key={columnNumber}
                 column={columnNumber}
+                setContextMenu={setContextMenu}
                 label={
                   columnNumber in columnLabels
                     ? columnLabels[columnNumber]
                     : null
                 }
+                deleteColumn={deleteColumn}
+                addColumnLeft={addColumnLeft}
+                data={props.data}
               />
             ) : (
-              <ColumnIndicator key={columnNumber} column={columnNumber} />
+              <ColumnIndicator
+                key={columnNumber}
+                column={columnNumber}
+                setContextMenu={setContextMenu}
+                deleteColumn={deleteColumn}
+                addColumnLeft={addColumnLeft}
+                data={props.data}
+              />
             )
           )}
         </HeaderRow>
@@ -380,17 +418,29 @@ const Spreadsheet = <CellType extends Types.CellBase>(
             {rowLabels ? (
               <RowIndicator
                 key={rowNumber}
-                row={rowNumber}
                 label={rowNumber in rowLabels ? rowLabels[rowNumber] : null}
+                row={rowNumber}
+                addRowTop={addRowTop}
+                setContextMenu={setContextMenu}
+                deleteRow={deleteRow}
+                data={props.data}
               />
             ) : (
-              <RowIndicator key={rowNumber} row={rowNumber} />
+              <RowIndicator
+                key={rowNumber}
+                row={rowNumber}
+                addRowTop={addRowTop}
+                setContextMenu={setContextMenu}
+                deleteRow={deleteRow}
+                data={props.data}
+              />
             )}
             {range(size.columns).map((columnNumber) => (
               <Cell
                 key={columnNumber}
                 row={rowNumber}
                 column={columnNumber}
+                setContextMenu={setContextMenu}
                 // @ts-ignore
                 DataViewer={DataViewer}
               />
@@ -412,6 +462,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
       RowIndicator,
       Cell,
       DataViewer,
+      contextMenu,
     ]
   );
 
@@ -454,13 +505,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
         </div>
       </>
     ),
-    [
-      className,
-      handleKeyDown,
-      handleMouseMove,
-      tableNode,
-      activeCellNode,
-    ]
+    [className, handleKeyDown, handleMouseMove, tableNode, activeCellNode]
   );
 
   return (

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

@@ -40,6 +40,10 @@ export const BORDER_TYPE = 'BORDER_TYPE';
 export const COLOR = 'COLOR';
 export const BACKGROUND_COLOR = 'BACKGROUND_COLOR';
 export const FORMATE_PAINTER = 'FORMATE_PAINTER';
+export const ADD_ROW_TOP = 'ADD_ROW_TOP';
+export const ADD_COLUMN_LEFT = 'ADD_COLUMN_LEFT';
+export const DELETE_ROW = 'DELETE_ROW';
+export const DELETE_COLUMN = 'DELETE_COLUMN';
 
 export type BaseAction<T extends string> = {
   type: T;
@@ -198,6 +202,57 @@ export function formatePainter(data: Matrix<CellBase>): FormatePainterStyle {
   };
 }
 
+export type AddRowTop = BaseAction<typeof ADD_ROW_TOP> & {
+  payload: {
+    data: Matrix<CellBase>;
+  };
+};
+
+export function addRowTop(data: Matrix<CellBase>): AddRowTop {
+  return {
+    type: ADD_ROW_TOP,
+    payload: { data },
+  };
+}
+export type AddColumnLeft = BaseAction<typeof ADD_COLUMN_LEFT> & {
+  payload: {
+    data: Matrix<CellBase>;
+  };
+};
+
+export function addColumnLeft(data: Matrix<CellBase>): AddColumnLeft {
+  return {
+    type: ADD_COLUMN_LEFT,
+    payload: { data },
+  };
+}
+
+export type DeleteRow = BaseAction<typeof DELETE_ROW> & {
+  payload: {
+    data: Matrix<CellBase>;
+  };
+};
+
+export function deleteRow(data: Matrix<CellBase>): DeleteRow {
+  return {
+    type: DELETE_ROW,
+    payload: { data },
+  };
+}
+
+export type DeleteColumn = BaseAction<typeof DELETE_COLUMN> & {
+  payload: {
+    data: Matrix<CellBase>;
+  };
+};
+
+export function deleteColumn(data: Matrix<CellBase>): DeleteColumn {
+  return {
+    type: DELETE_COLUMN,
+    payload: { data },
+  };
+}
+
 export type SetDataAction = BaseAction<typeof SET_DATA> & {
   payload: {
     data: Matrix<CellBase>;
@@ -457,4 +512,8 @@ export type Action =
   | ColorStyle
   | BackgroundStyle
   | FormatePainterStyle
+  | AddRowTop
+  | AddColumnLeft
+  | DeleteRow
+  | DeleteColumn
   | BlurAction;

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

@@ -1,4 +1,3 @@
-import FormulaParser, { FormulaError, Value } from 'fast-formula-parser';
 import * as Matrix from '../matrix';
 import { Point } from '../point';
 import { CellBase, CreateFormulaParser } from '../types';
@@ -20,10 +19,9 @@ export class Model<Cell extends CellBase> {
   ) {
     this.createFormulaParser = createFormulaParser;
     this.data = data;
-    this.referenceGraph = referenceGraph || createReferenceGraph(data);
+    this.referenceGraph = referenceGraph || createReferenceGraph();
     this.evaluatedData =
-      evaluatedData ||
-      createEvaluatedData(data, this.referenceGraph, this.createFormulaParser);
+      evaluatedData || createEvaluatedData(data, this.referenceGraph);
   }
 }
 
@@ -34,17 +32,15 @@ export function updateCellValue<Cell extends CellBase>(
 ): Model<Cell> {
   const nextData = Matrix.set(point, cell, model.data);
   const nextReferenceGraph = Formula.isFormulaValue(cell.value)
-    ? updateReferenceGraph(model.referenceGraph, point, cell, nextData)
+    ? updateReferenceGraph(model.referenceGraph)
     : model.referenceGraph;
 
-  const formulaParser = model.createFormulaParser(nextData);
   const nextEvaluatedData = evaluateCell(
     model.evaluatedData,
     nextData,
     nextReferenceGraph,
     point,
-    cell,
-    formulaParser
+    cell
   );
   return new Model(
     model.createFormulaParser,
@@ -54,19 +50,8 @@ export function updateCellValue<Cell extends CellBase>(
   );
 }
 
-function updateReferenceGraph(
-  referenceGraph: PointGraph,
-  point: Point,
-  cell: CellBase<string>,
-  data: Matrix.Matrix<CellBase>
-): PointGraph {
-  const references = Formula.getReferences(
-    Formula.extractFormula(cell.value),
-    point,
-    data
-  );
-  const nextReferenceGraph = referenceGraph.set(point, references);
-  return nextReferenceGraph;
+function updateReferenceGraph(referenceGraph: PointGraph): PointGraph {
+  return referenceGraph;
 }
 
 function evaluateCell<Cell extends CellBase>(
@@ -74,14 +59,13 @@ function evaluateCell<Cell extends CellBase>(
   data: Matrix.Matrix<Cell>,
   referenceGraph: PointGraph,
   point: Point,
-  cell: Cell,
-  formulaParser: FormulaParser
+  cell: Cell
 ): Matrix.Matrix<Cell> {
   if (referenceGraph.hasCircularDependency(point)) {
     let visited = PointSet.from([point]);
     let nextEvaluatedData = Matrix.set(
       point,
-      { ...cell, value: FormulaError.REF },
+      { ...cell, value: 'TODO' }, // TODO For Formula Evaluation
       prevEvaluatedData
     );
     for (const referrer of referenceGraph.getBackwardsRecursive(point)) {
@@ -95,7 +79,7 @@ function evaluateCell<Cell extends CellBase>(
       }
       nextEvaluatedData = Matrix.set(
         referrer,
-        { ...referrerCell, value: FormulaError.REF },
+        { ...referrerCell, value: 'TODO' }, // TODO For Formula Evaluation
         nextEvaluatedData
       );
     }
@@ -105,7 +89,7 @@ function evaluateCell<Cell extends CellBase>(
   let nextEvaluatedData = prevEvaluatedData;
 
   const evaluatedValue = Formula.isFormulaValue(cell.value)
-    ? getFormulaComputedValue(cell.value, point, formulaParser)
+    ? getFormulaComputedValue()
     : cell.value;
 
   const evaluatedCell = { ...cell, value: evaluatedValue };
@@ -119,7 +103,7 @@ function evaluateCell<Cell extends CellBase>(
       continue;
     }
     const evaluatedValue = Formula.isFormulaValue(referrerCell.value)
-      ? getFormulaComputedValue(referrerCell.value, point, formulaParser)
+      ? getFormulaComputedValue()
       : referrerCell.value;
     const evaluatedCell = { ...referrerCell, value: evaluatedValue };
     nextEvaluatedData = Matrix.set(referrer, evaluatedCell, nextEvaluatedData);
@@ -128,35 +112,17 @@ function evaluateCell<Cell extends CellBase>(
   return nextEvaluatedData;
 }
 
-/**
- *
- * @param data - the spreadsheet data
- * @returns the spreadsheet reference graph
- */
-export function createReferenceGraph(
-  data: Matrix.Matrix<CellBase>
-): PointGraph {
+export function createReferenceGraph(): PointGraph {
   const entries: Array<[Point, PointSet]> = [];
-  for (const [point, cell] of Matrix.entries(data)) {
-    if (cell && Formula.isFormulaValue(cell.value)) {
-      const references = Formula.getReferences(
-        Formula.extractFormula(cell.value),
-        point,
-        data
-      );
-      entries.push([point, references]);
-    }
-  }
+
   return PointGraph.from(entries);
 }
 
 export function createEvaluatedData<Cell extends CellBase>(
   data: Matrix.Matrix<Cell>,
-  referenceGraph: PointGraph,
-  createFormulaParser: CreateFormulaParser
+  referenceGraph: PointGraph
 ): Matrix.Matrix<Cell> {
   let evaluatedData = data;
-  let formulaParser = createFormulaParser(evaluatedData);
 
   // Iterate over the points in the reference graph, starting from the leaves
   for (const point of referenceGraph.traverseBFSBackwards()) {
@@ -168,17 +134,12 @@ export function createEvaluatedData<Cell extends CellBase>(
 
     // If the cell is a formula cell, evaluate it
     if (Formula.isFormulaValue(cell.value)) {
-      const evaluatedValue = getFormulaComputedValue(
-        cell.value,
-        point,
-        formulaParser
-      );
+      const evaluatedValue = getFormulaComputedValue();
       evaluatedData = Matrix.set(
         point,
         { ...cell, value: evaluatedValue },
         evaluatedData
       );
-      formulaParser = createFormulaParser(evaluatedData);
     }
   }
 
@@ -186,15 +147,7 @@ export function createEvaluatedData<Cell extends CellBase>(
 }
 
 /** Get the computed value of a formula cell */
-export function getFormulaComputedValue(
-  value: string,
-  point: Point,
-  formulaParser: FormulaParser
-): Value {
-  const formula = Formula.extractFormula(value);
-  try {
-    return Formula.evaluate(formula, point, formulaParser);
-  } catch (e) {
-    return FormulaError.REF;
-  }
+//TODO Function need to be Evaluate
+export function getFormulaComputedValue() {
+  return 'TODO'; // TODO For Formula Evaluation
 }