pixel-react 1.5.5 → 1.5.7

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: {

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

@@ -34,7 +34,8 @@ export function applyBoldToCells(
         ...currentCell,
         style: {
           ...currentCell.style,
-          fontWeight: 'bold',
+          fontWeight:
+            currentCell.style?.fontWeight !== 'bold' ? 'bold' : 'normal',
         },
       };
 
@@ -69,7 +70,8 @@ export function applyItalicToCells(
         ...currentCell,
         style: {
           ...currentCell.style,
-          fontStyle: 'italic',
+          fontStyle:
+            currentCell.style?.fontStyle !== 'italic' ? 'italic' : 'normal',
         },
       };
 
@@ -188,13 +190,19 @@ export function applyBorderToCells(
         case 'border-all-sides':
           updatedCell.style = {
             ...currentCell.style,
-            border: `2px solid ${color}`,
+            borderRight: `2px solid ${color}`,
+            borderLeft: `2px solid ${color}`,
+            borderTop: `2px solid ${color}`,
+            borderBottom: `2px solid ${color}`,
           };
           break;
         case 'border-none':
           updatedCell.style = {
             ...currentCell.style,
-            border: `1px solid var(--toggle-strip-color)`,
+            borderRight: `1px solid var(--toggle-strip-color)`,
+            borderLeft: `1px solid var(--toggle-strip-color)`,
+            borderTop: `1px solid var(--toggle-strip-color)`,
+            borderBottom: `1px solid var(--toggle-strip-color)`,
           };
           break;
         case 'border-right':
@@ -274,6 +282,10 @@ export function applyUnderlineToCells(
   value: string,
   active: boolean
 ): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+
   const { start, end } = selectedRange;
 
   let updatedData = currentData;
@@ -377,6 +389,10 @@ export function applyBackgroundColorToCells(
   selectedRange: PointRange | null,
   backgroundColor: string
 ): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+
   if (selectedRange) {
     const { start, end } = selectedRange;
 
@@ -415,6 +431,26 @@ export function applyBackgroundColorToCells(
   return currentData;
 }
 
+export function applyFormatePainter(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  activePoint: Point.Point | null
+): React.CSSProperties | undefined {
+  if (!activePoint) {
+    return undefined;
+  }
+
+  const { row, column } = activePoint;
+  let updatedData = { ...currentData };
+
+  const currentCell = Matrix.get({ row, column }, updatedData);
+
+  if (currentCell && currentCell.style) {
+    return currentCell.style;
+  }
+
+  return undefined;
+}
+
 export function edit(state: Types.StoreState): Types.StoreState {
   if (isActiveReadOnly(state)) {
     return state;
@@ -593,7 +629,6 @@ export function getKeyDownHandler(
 ): KeyDownHandler | undefined {
   const { key } = event;
   let handlers;
-  // Order matters
   if (state.mode === 'edit') {
     if (event.shiftKey) {
       handlers = editShiftKeyDownHandlers;

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

@@ -67,6 +67,7 @@ export type StoreState<Cell extends CellBase = CellBase> = {
   lastCommit: null | CellChange<Cell>[];
   selectedRow: null | number;
   selectedColumn: null | number;
+  formattedStyle: { open: boolean; style: undefined | React.CSSProperties };
 };
 
 export type CellChange<Cell extends CellBase = CellBase> = {
@@ -122,6 +123,7 @@ export type DataViewerProps<Cell extends CellBase = CellBase> =
   DataComponentProps<Cell> & {
     /** Set data of the cell */
     setCellData: (cell: Cell) => void;
+    setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
     evaluatedCell: Cell | undefined;
   };
 
@@ -250,4 +252,4 @@ export type CommitChanges<Cell extends CellBase = CellBase> = Array<{
   nextCell: Cell | null;
 }>;
 
-export type CreateFormulaParser = (data: Matrix<CellBase>) =>void;
+export type CreateFormulaParser = (data: Matrix<CellBase>) => void;

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

@@ -30,91 +30,91 @@ export const Default: Story = {
     excelData: {
       sheets: [
         {
-          sheetName: "Sheet1",
+          sheetName: 'Sheet1',
           data: [
             [
               {
-                value: "A1",
+                value: 'A1',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--text-bg-highlight)",
-                  backgroundColor: "var(--tooltip-bg-color)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--drawer-footer-bg)',
+                  backgroundColor: 'var(--text-bg-highlight)',
                 },
               },
               {
-                value: "SUM(A1+B1)",
+                value: 'SUM(A1+B1)',
                 // isFormula:true,
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--text-bg-highlight)",
-                  backgroundColor: "var(--brand-color)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--text-bg-highlight)',
+                  backgroundColor: 'var(--ff-card-passed-status-bg-color)',
                 },
               },
             ],
             [
               {
-                value: "A2",
+                value: 'A2',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--drawer-footer-bg)",
-                  backgroundColor: "var(--brand-color)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--drawer-footer-bg)',
+                  backgroundColor: 'var(--ff-card-passed-status-bg-color)',
                 },
               },
               {
-                value: "B2",
+                value: 'B2',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--brand-color)",
-                  backgroundColor: "var(--text-bg-highlight)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--ff-card-passed-status-bg-color)',
+                  backgroundColor: 'var(--text-bg-highlight)',
                 },
               },
             ],
           ],
         },
         {
-          sheetName: "Sheet2",
+          sheetName: 'Sheet2',
           data: [
             [
               {
-                value: "Thanesh",
+                value: 'Thaneshwaran',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--text-bg-highlight)",
-                  backgroundColor: "var(--tooltip-bg-color)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--text-bg-highlight)',
+                  backgroundColor: 'var(--tooltip-bg-color)',
                 },
               },
               {
-                value: "waran",
+                value: 'waran',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--text-bg-highlight)",
-                  backgroundColor: "var(--brand-color)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--text-bg-highlight)',
+                  backgroundColor: 'var(--ff-card-passed-status-bg-color)',
                 },
               },
             ],
             [
               {
-                value: "Sheet",
+                value: 'Sheet',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--drawer-footer-bg)",
-                  backgroundColor: "var(--brand-color)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--drawer-footer-bg)',
+                  backgroundColor: 'var(--ff-card-passed-status-bg-color)',
                 },
               },
               {
-                value: "Two",
+                value: 'Two',
                 style: {
-                  fontSize: "12px",
-                  fontFamily: "Arial",
-                  color: "var(--brand-color)",
-                  backgroundColor: "var(--text-bg-highlight)",
+                  fontSize: '12px',
+                  fontFamily: 'Arial',
+                  color: 'var(--ff-card-passed-status-bg-color)',
+                  backgroundColor: 'var(--text-bg-highlight)',
                 },
               },
             ],
@@ -154,5 +154,4 @@ export const Default: Story = {
   },
 };
 
-
 export default meta;