pixel-react 1.6.9 → 1.7.1

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import * as Types from './types';
+import useSelector from './use-selector';
+import { getCellDimensions } from './util';
 
 export type Props = {
   variant?: string;
@@ -15,7 +17,30 @@ const FloatingRect: React.FC<Props> = ({
   hidden,
   variant,
 }) => {
+  const active = useSelector((state) => state.active);
+  const autoFill = useSelector((state) => state.autoFill);
+  const FixedVal = useSelector((state) =>
+    active
+      ? getCellDimensions(active, state.rowDimensions, state.columnDimensions)
+      : undefined
+  );
+
   const { width, height, top, left } = dimensions || {};
+
+  let sampleHeight = FixedVal?.height ?? 0;
+  let sampleWidth = FixedVal?.width ?? 0;
+  let adjustedWidth = width;
+  let adjustedHeight = height;
+  if (autoFill.open && width && height && FixedVal) {
+    if (width - sampleWidth > height - sampleHeight) {
+      adjustedWidth = width;
+      adjustedHeight = FixedVal.height;
+    } else {
+      adjustedHeight = height;
+      adjustedWidth = FixedVal.width;
+    }
+  }
+
   return (
     <div
       className={classnames('ff-spreadsheet-floating-rect', {
@@ -23,7 +48,7 @@ const FloatingRect: React.FC<Props> = ({
         'ff-spreadsheet-floating-rect--dragging': dragging,
         'ff-spreadsheet-floating-rect--hidden': hidden,
       })}
-      style={{ width, height, top, left }}
+      style={{ width: adjustedWidth, height: adjustedHeight, top, left }}
     />
   );
 };

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

@@ -11,7 +11,7 @@
   --readonly-text-color: var(--toggle-strip-active);
   --outline-color: var(--toggle-strip-active);
   --outline-background-color: var(--overlay-bg);
-  --border-color: var(--toggle-strip-color);
+  --border-color: var(--excel-sheet-border);
   --header-background-color: var(--pop-up-background-blur);
   --elevation: var(--brand-color);
 
@@ -50,16 +50,16 @@
   z-index: 0;
 }
 
-.ff-spreadsheet-active-cell .Selection_dot {
+.ff-spreadsheet-active-cell .select_dot {
   background-color: var(--elevation);
-  height: 7px;
-  width: 7px;
+  height: 10px;
+  width: 10px;
   border-radius: 50%;
   position: absolute;
-  right: -3px;
-  z-index: 10;
-  bottom: -3px;
+  bottom: -5px;
+  right: -5px;
   cursor: crosshair;
+  z-index: 1000;
 }
 
 .ff-spreadsheet-cell--readonly {

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

@@ -46,11 +46,23 @@ export const DELETE_ROW = 'DELETE_ROW';
 export const DELETE_COLUMN = 'DELETE_COLUMN';
 export const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
 export const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
+export const SET_AUTO_FILL = 'SET_AUTO_FILL';
 
 export type BaseAction<T extends string> = {
   type: T;
 };
 
+export type SetAutoFill = BaseAction<typeof SET_AUTO_FILL> & {
+  payload: { autofill: boolean };
+};
+
+export function autoFill(autofill: boolean): SetAutoFill {
+  return {
+    type: SET_AUTO_FILL,
+    payload: { autofill },
+  };
+}
+
 export type SetRowHeight = BaseAction<typeof SET_ROW_HEIGHT> & {
   payload: { row: number; height: number };
 };
@@ -545,4 +557,5 @@ export type Action =
   | DeleteColumn
   | SetRowHeight
   | SetColumnPosition
+  | SetAutoFill
   | BlurAction;

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

@@ -26,6 +26,8 @@ import {
   blur,
   clear,
   commit,
+  dragEndAutoFill,
+  dragEndFormatePainter,
   edit,
   getKeyDownHandler,
   isActiveReadOnly,
@@ -41,6 +43,7 @@ export const INITIAL_STATE: Types.StoreState = {
   lastChanged: null,
   hasPasted: false,
   cut: false,
+  autoFill: { open: false, cellValue: { value: '', style: {} } },
   dragging: false,
   model: new Model(createFormulaParser, []),
   selected: new EmptySelection(),
@@ -56,6 +59,23 @@ export default function reducer(
   action: Actions.Action
 ): Types.StoreState {
   switch (action.type) {
+    case Actions.SET_AUTO_FILL: {
+      const { autofill } = action.payload;
+      const activeCell = state.active;
+      let currentCell: Types.CellBase<any> = { value: '', style: {} };
+      if (activeCell) {
+        currentCell =
+          Matrix.get(
+            { row: activeCell.row, column: activeCell.column },
+            state.model.data
+          ) || currentCell;
+      }
+      return {
+        ...state,
+        autoFill: { open: autofill, cellValue: currentCell },
+      };
+    }
+
     case Actions.ADD_ROW_TOP: {
       let { selectedRow, selectedColumn, model } = state;
       if (checkEmpty(selectedRow)) {
@@ -610,41 +630,48 @@ export default function reducer(
 
     case Actions.DRAG_END: {
       const selectedRange = state.selected.toRange(state.model.data);
-      let currentData = state.model.data;
-
-      if (!state.formattedStyle.open || !selectedRange) {
+      const activeCell = state.active;
+      let updatedData = state.model.data;
+      if (state.formattedStyle.open) {
+        updatedData = dragEndFormatePainter(
+          state.model.data,
+          selectedRange as PointRange,
+          state.formattedStyle
+        );
+      }
+      if (state.autoFill.open) {
+        updatedData = dragEndAutoFill(
+          state.model.data,
+          selectedRange as PointRange,
+          state.autoFill.cellValue,
+          activeCell
+        );
+        let { start, end } = selectedRange as PointRange;
+        const rowCount = start.row - end.row;
+        const columnCount = start.column - end.column;
+        let startPoint = { row: 0, column: 0 };
+        let endPoint = { row: 0, column: 0 };
+
+        if (rowCount > columnCount) {
+          startPoint = { row: activeCell?.row ?? 0, column: start.column };
+          endPoint = { row: activeCell?.row ?? 0, column: end.column };
+        } else {
+          startPoint = { row: start.row, column: activeCell?.column ?? 0 };
+          endPoint = { row: end.row, column: activeCell?.column ?? 0 };
+        }
         return {
           ...state,
           dragging: false,
+          autoFill: { open: false, cellValue: { value: '', style: {} } },
           formattedStyle: { open: false, style: undefined },
+          model: new Model(state.model.createFormulaParser, updatedData),
+          selected: new RangeSelection(new PointRange(startPoint, endPoint)),
         };
       }
-
-      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,
+        autoFill: { open: false, cellValue: { value: '', style: {} } },
         formattedStyle: { open: false, style: undefined },
         model: new Model(state.model.createFormulaParser, updatedData),
       };

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

@@ -12,7 +12,7 @@ import {
 
 export function applyBoldToCells(
   currentData: Matrix.Matrix<Types.CellBase<any>>,
-  selectedRange: PointRange,
+  selectedRange: PointRange
 ): Matrix.Matrix<Types.CellBase<any>> {
   if (!selectedRange) {
     return currentData;
@@ -217,10 +217,10 @@ export function applyBorderToCells(
         case 'border-none':
           updatedCell.style = {
             ...currentCell.style,
-            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)`,
+            borderRight: `1px solid var(--excel-sheet-border)`,
+            borderLeft: `1px solid var(--excel-sheet-border)`,
+            borderTop: `1px solid var(--excel-sheet-border)`,
+            borderBottom: `1px solid var(--excel-sheet-border)`,
           };
           break;
         case 'border-right':
@@ -333,8 +333,7 @@ export function applyUnderlineToCells(
           ...currentCell,
           style: {
             ...currentCell.style,
-            textDecoration: 'none',
-            textDecorationStyle: 'solid' as TextDecorationStyle,
+            textDecoration: 'none solid',
           },
         };
       } else {
@@ -342,11 +341,8 @@ export function applyUnderlineToCells(
           ...currentCell,
           style: {
             ...currentCell.style,
-            textDecoration: value === 'double_border' ? 'underline' : value,
-            textDecorationStyle:
-              value === 'double_border'
-                ? 'double'
-                : ('none' as TextDecorationStyle),
+            textDecoration:
+              value === 'double_border' ? 'underline double' : value,
           },
         };
       }
@@ -480,6 +476,79 @@ export function applyFormatePainter(
   return undefined;
 }
 
+export function dragEndFormatePainter(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange | null,
+  formattedStyle: Types.formattedStyle
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange || !formattedStyle.open) {
+    return currentData;
+  }
+
+  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: formattedStyle.style,
+      };
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+    }
+  }
+  return updatedData;
+}
+
+export function dragEndAutoFill(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange | null,
+  cellValue: Types.CellBase,
+  activeCell: Point.Point | null
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+  const { start, end } = selectedRange;
+  const rowCount = start.row - end.row;
+  const columnCount = start.column - end.column;
+  let startPoint = { row: 0, column: 0 };
+  let endPoint = { row: 0, column: 0 };
+
+  if (rowCount > columnCount) {
+    startPoint = { row: activeCell?.row ?? 0, column: start.column };
+    endPoint = { row: activeCell?.row ?? 0, column: end.column };
+  } else {
+    startPoint = { row: start.row, column: activeCell?.column ?? 0 };
+    endPoint = { row: end.row, column: activeCell?.column ?? 0 };
+  }
+
+  let updatedData = currentData;
+
+  for (let row = startPoint.row; row <= endPoint.row; row++) {
+    for (let col = startPoint.column; col <= endPoint.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+
+      if (!currentCell) {
+        continue;
+      }
+
+      const updatedCell = {
+        ...currentCell,
+        style: cellValue.style,
+        value: cellValue.value,
+      };
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+    }
+  }
+  return updatedData;
+}
+
 export function edit(state: Types.StoreState): Types.StoreState {
   if (isActiveReadOnly(state)) {
     return state;
@@ -567,8 +636,6 @@ function convertPtToPx(pt: number): string {
 
 // Key Bindings
 
-type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
-
 type TextAlign = 'left' | 'center' | 'right';
 
 export type KeyDownHandler = (

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

@@ -55,19 +55,30 @@ export type StoreState<Cell extends CellBase = CellBase> = {
   copied: PointRange | null;
   hasPasted: boolean;
   cut: boolean;
+  autoFill: { open: boolean; cellValue: Cell };
   active: Point | null;
   mode: Mode;
-  rowDimensions: Record<number, Pick<Dimensions, 'height' | 'top'> | undefined>;
-  columnDimensions: Record<
-    number,
-    Pick<Dimensions, 'width' | 'left'> | undefined
-  >;
+  rowDimensions: rowDimensions;
+  columnDimensions: columnDimensions;
   dragging: boolean;
   lastChanged: Point | null;
   lastCommit: null | CellChange<Cell>[];
   selectedRow: null | number;
   selectedColumn: null | number;
-  formattedStyle: { open: boolean; style: undefined | React.CSSProperties };
+  formattedStyle: formattedStyle;
+};
+
+export type rowDimensions = Record<
+  number,
+  Pick<Dimensions, 'height' | 'top'> | undefined
+>;
+export type columnDimensions = Record<
+  number,
+  Pick<Dimensions, 'width' | 'left'> | undefined
+>;
+export type formattedStyle = {
+  open: boolean;
+  style: undefined | React.CSSProperties;
 };
 
 export type CellChange<Cell extends CellBase = CellBase> = {

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

@@ -115,10 +115,10 @@ export const Default: Story = {
                   backgroundColor: 'C6E7FF', // Sample data from backend without #
                   borderColor: 'F2F2F2', // Sample data from backend without #
                   border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
+                    top: 'THIN',
+                    bottom: 'THIN',
+                    left: 'THIN',
+                    right: 'THIN',
                   },
                   alignment: {
                     horizontal: 'GENERAL',

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -51,22 +51,27 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   const data = useSelector((state) => state.model.data);
   const formattedStyle = useSelector((state) => state.formattedStyle.open);
 
-  const [cellStyle, setCellStyle] = useState(
-    cell?.style || {
-      color: 'var(--text-color)',
-      backgroundColor: 'var(--drawer-footer-bg)',
-      borderColor: 'var(--toggle-strip-color)',
-    }
-  );
+  // Default style to Excel
+  const basicStyle: React.CSSProperties = {
+    color: 'var(--input-hover-border-color)',
+    backgroundColor: 'var(--drawer-footer-bg)',
+    borderColor: 'var(--excel-sheet-border)',
+    textDecoration: 'none solid',
+    borderRight: `1px solid var(--excel-sheet-border)`,
+    borderLeft: `1px solid var(--excel-sheet-border)`,
+    borderTop: `1px solid var(--excel-sheet-border)`,
+    borderBottom: `1px solid var(--excel-sheet-border)`,
+    fontSize: '15px',
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    fontFamily: 'Times New Roman',
+    textAlign: 'center',
+  };
+
+  const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
 
   useEffect(() => {
-    setCellStyle(
-      cell?.style || {
-        color: 'var(--text-color)',
-        backgroundColor: 'var(--drawer-footer-bg)',
-        borderColor: 'var(--toggle-strip-color)',
-      }
-    );
+    setCellStyle(cell?.style || basicStyle);
   }, [cell]);
 
   useEffect(() => {
@@ -79,8 +84,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   }, [cell]);
 
   const styleBackend = convertStyleToBackend(cellStyle);
-  
-
   const [border, setBorder] = useState<string>('border-none');
   const [underLine, setUnderLine] = useState<string>('underline');
   const [selectedFontFamily, setSelectedFontFamily] = useState<{
@@ -93,7 +96,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   const [colorContainer, setColorPicker] = useState<ColorContainer>({
     color: 'var(--error-light)',
     backgroundColor: 'var(--error-light)',
-    borderColor: 'var(--text-color)',
+    borderColor: 'var(--input-hover-border-color)',
   });
 
   const borderTypeIcon = [
@@ -124,6 +127,18 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       label: 'Arial',
       value: 'Arial',
     },
+    {
+      label: 'fantasy',
+      value: 'fantasy',
+    },
+    {
+      label: 'cursive',
+      value: 'cursive',
+    },
+    {
+      label: 'Poppins',
+      value: 'Poppins',
+    },
     {
       label: 'Courier New',
       value: '"Courier New"',
@@ -283,7 +298,9 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Underline Type'}>
           <div className="ff-excel-toolbar-icon-underline">
             <Icon
-              variant={cellStyle.textDecoration===underLine?'dark' : 'light'}
+              variant={
+                cellStyle.textDecoration === underLine ? 'dark' : 'light'
+              }
               hoverEffect
               disabled={toolbar === 'disable'}
               onClick={() => setUnderlineType(data, underLine, true)}
@@ -308,7 +325,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       <div className="ff-excel-toolbar-icon">
         <Tooltip placement="top" title={'Format Painter'}>
           <Icon
-          variant={formattedStyle?'dark':'light'}
+            variant={formattedStyle ? 'dark' : 'light'}
             hoverEffect
             disabled={toolbar === 'disable'}
             onClick={() => {

package/src/components/Excel/dataConversion.ts

@@ -54,7 +54,7 @@ const getTextAlignmentBack = (
 
 export const getTextDecorationBack = (
   textDecoration: string
-): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {  
+): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {
   switch (textDecoration.toLowerCase()) {
     case 'solid':
       return 'solid';
@@ -74,6 +74,40 @@ export const getTextDecorationBack = (
 export function convertStyleToFrontend(
   backendStyle: BackendStyle
 ): React.CSSProperties {
+
+  const { border } = backendStyle;
+
+  let borderTop = '';
+  let borderRight = '';
+  let borderBottom = '';
+  let borderLeft = '';
+
+  if (border.top !== 'NONE') {
+    borderTop =
+      border.top === 'THIN'
+        ? '2px solid var(--input-hover-border-color)'
+        : '1px solid var(--excel-sheet-border)';
+  }
+  if (border.right !== 'NONE') {
+    borderRight =
+      border.right === 'THIN'
+        ? '2px solid var(--input-hover-border-color)'
+        : '1px solid var(--excel-sheet-border)';
+  }
+  if (border.bottom !== 'NONE') {
+    borderBottom =
+      border.bottom === 'THIN'
+        ? '2px solid var(--input-hover-border-color)'
+        : '1px solid var(--excel-sheet-border)';
+  }
+  if (border.left !== 'NONE') {
+    borderLeft =
+      border.left === 'THIN'
+        ? '2px solid var(--input-hover-border-color)'
+        : '1px solid var(--excel-sheet-border)';
+  }
+
+  // Return the converted styles
   return {
     fontSize: `${backendStyle.size}px`,
     fontFamily: backendStyle.name,
@@ -81,24 +115,13 @@ export function convertStyleToFrontend(
     backgroundColor: `#${backendStyle.backgroundColor}`,
     fontWeight: backendStyle.bold ? 'bold' : 'normal',
     fontStyle: backendStyle.italic ? 'italic' : 'normal',
-    textDecoration: backendStyle.underline ? 'underline' : 'value',
-    textDecorationStyle: getTextDecoration(backendStyle.underline),
-    borderTop:
-      backendStyle.border.top === 'NONE'
-        ? 'none'
-        : `1px solid ${backendStyle.borderColor}`,
-    borderRight:
-      backendStyle.border.right === 'NONE'
-        ? 'none'
-        : `1px solid ${backendStyle.borderColor}`,
-    borderBottom:
-      backendStyle.border.bottom === 'NONE'
-        ? 'none'
-        : `1px solid ${backendStyle.borderColor}`,
-    borderLeft:
-      backendStyle.border.left === 'NONE'
-        ? 'none'
-        : `1px solid ${backendStyle.borderColor}`,
+    textDecoration: backendStyle.underline
+      ? `underline ${getTextDecoration(backendStyle.underline)}`
+      : 'none',
+    borderTop: borderTop,
+    borderRight: borderRight,
+    borderBottom: borderBottom,
+    borderLeft: borderLeft,
     textAlign: getTextAlignment(backendStyle.alignment.horizontal),
   };
 }
@@ -133,7 +156,7 @@ export const convertStyleToBackend = (
     size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
     bold: frontendStyle.fontWeight === 'bold',
     italic: frontendStyle.fontStyle === 'italic',
-    underline:"solid",
+    underline: 'solid',
     color: frontendStyle.color?.replace('#', '') || '000000',
     backgroundColor:
       frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import FileDropzone from './FileDropzone';
 import Toaster from '../Toast';
@@ -109,7 +109,6 @@ export const WithRadioButton: Story = {
       useState<RadioOption>();
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
-    const fileInputRef = useRef<HTMLInputElement | null>(null);
 
     const drawerArgs = {
       primaryButtonProps: {
@@ -126,12 +125,6 @@ export const WithRadioButton: Story = {
       },
     };
 
-    useEffect(() => {
-      if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
-        fileInputRef.current.click();
-      }
-    }, [selectedRadioOption]);
-
     const radioOptions: RadioOption[] = [
       { value: 'Test Data', label: 'Test Data' },
       { value: 'Local File', label: 'Local File' },
@@ -146,10 +139,11 @@ export const WithRadioButton: Story = {
     };
     const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       const file = event.target.files?.[0];
+      
       if (file) {
         setSelectedFile(file);
       }
-    };
+    };    
 
     const handleRemoveFile = () => {
       setSelectedFile(null);
@@ -191,15 +185,7 @@ export const WithRadioButton: Story = {
             toastMessage={'Max 5 files can be uploaded'}
           />
         )}
-        {selectedRadioOption?.value === 'Local File' ? (
-          <input
-            ref={fileInputRef}
-            type="file"
-            className='ff-input-ref'
-            onChange={handleFileChange}
-            accept="image/png, image/jpeg, application/x-zip-compressed, application/zip"
-          />
-        ) : (
+        {selectedRadioOption?.value === 'Local File' &&
           <Drawer
             {...drawerArgs}
             isOpen={showModal}
@@ -210,7 +196,7 @@ export const WithRadioButton: Story = {
           >
             <Typography>Upload TestData Files Here</Typography>
           </Drawer>
-        )}
+        }
       </>
     );
   },