pixel-react 1.4.2 → 1.4.4

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

@@ -11,15 +11,37 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
   label,
   selected,
   onSelect,
+  setContextMenu,
+  deleteColumn,
+  addColumnLeft,
+  data,
 }) => {
   const dispatch = useDispatch();
   const [width, setWidth] = React.useState(100);
+  let options = [
+    {
+      label: 'Add Column',
+      value: 'Add Column',
+      iconName: 'plus_icon',
+      action: () => {
+        addColumnLeft(data);
+      },
+      disable: false,
+    },
+    {
+      label: 'Delete Column',
+      value: 'Delete Column',
+      iconName: 'delete',
+      action: () => {
+        deleteColumn(data);
+      },
+      disable: false,
+    },
+  ];
 
-  // Function to handle the start of the resize (mouse down)
   const onMouseDown = (e: React.MouseEvent) => {
     const startX = e.clientX;
 
-    // Function to handle mouse movement (resize)
     const onMouseMove = (moveEvent: MouseEvent) => {
       const newWidth = width + (moveEvent.clientX - startX);
       setWidth(newWidth);
@@ -31,7 +53,6 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
         'ff-spreadsheet-active-cell'
       );
 
-      // If the element exists, update its height
       if (
         selectedAllRow instanceof HTMLElement &&
         selectedSingleRow instanceof HTMLElement
@@ -41,13 +62,11 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       }
     };
 
-    // 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,7 +76,6 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
     [dispatch]
   );
 
-  // Handle column header click
   const handleClick = React.useCallback(
     (event: React.MouseEvent) => {
       onSelect(column, event.shiftKey);
@@ -65,13 +83,32 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
     [onSelect, column]
   );
 
+  const contextClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+
+      onSelect(column, event.shiftKey);
+
+      setContextMenu({
+        open: true,
+        position: {
+          x: event.clientX,
+          y: event.clientY - 50,
+        },
+        options: options,
+      });
+    },
+    [onSelect, column, setContextMenu]
+  );
+
   return (
     <th
-      style={{ minWidth: `${width}px`, position: 'relative' }} // Use dynamic width
+      style={{ minWidth: `${width}px`, position: 'relative' }}
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}
       onClick={handleClick}
+      onContextMenu={contextClick}
       tabIndex={0}
     >
       {label !== undefined ? label : columnIndexToLabel(column)}

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

@@ -5,6 +5,7 @@ import { EntireWorksheetSelection } from './selection';
 import * as Types from './types';
 import useDispatch from './use-dispatch';
 import useSelector from './use-selector';
+import Icon from '../../../Icon';
 
 const CornerIndicator: Types.CornerIndicatorComponent = ({
   selected,
@@ -20,7 +21,13 @@ const CornerIndicator: Types.CornerIndicatorComponent = ({
       })}
       onClick={handleClick}
       tabIndex={0}
-    />
+    >
+      <Icon
+        variant={selected ? 'dark' : 'light'}
+        className="corner_indicator"
+        name="excel_corner_menu"
+      />
+    </th>
   );
 };
 

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;