pixel-react-excel-sheet 1.0.11 → 1.0.13

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

@@ -4,24 +4,26 @@
   display: flex;
   flex-direction: column;
 
-  .ff-excel-toolbar{
+  .ff-excel-toolbar-container{
     position: static;
     top: 0;
+    background-color:var( --excel-toolbar-bg);
+    padding: 4px 8px;
   }
 
-  .ff-spreadsheet {
-    --background-color: var(--drawer-footer-bg);
-    --text-color: var(--text-color);
-    --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);
-    --header-background-color: var(--excel-sheet-header-background-color);
-    --elevation: var(--brand-color);
+.ff-spreadsheet {
+  --background-color: var(--drawer-footer-bg);
+  --text-color: var(--text-color);
+  --readonly-text-color: var(--toggle-strip-active);
+  --outline-color: var(--toggle-strip-active);
+  --outline-background-color: var(--overlay-bg);
+  --border-color: var(--excel-sheet-border);
+  --header-background-color: var(--pop-up-background-blur);
+  --elevation: var(--brand-color);
 
     position: relative;
     overflow: scroll;
-    max-height: calc(100vh - 70px);
+    height: 465px;
     background: var(--background-color);
     color: var(--text-color);
     scrollbar-width: none;
@@ -59,17 +61,17 @@
     z-index: 0;
   }
 
-  .ff-spreadsheet-active-cell .Selection_dot {
-    background-color: var(--elevation);
-    height: 7px;
-    width: 7px;
-    border-radius: 50%;
-    position: absolute;
-    right: -3px;
-    z-index: 10;
-    bottom: -3px;
-    cursor: crosshair;
-  }
+.ff-spreadsheet-active-cell .select_dot {
+  background-color: var(--elevation);
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  cursor: crosshair;
+  z-index: 1000;
+}
 
   .ff-spreadsheet-cell--readonly {
     color: var(--readonly-text-color);

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

@@ -443,9 +443,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const rootNode = React.useMemo(
     () => (
       <div className="ff-excel">
-      <div className="ff-excel-toolbar">
-
-
+      <div className="ff-excel-toolbar-container">
         <ExcelToolBar
           onBold={onBold}
           onItalic={onItalic}

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/FieldSet/FieldSet.scss

@@ -1,9 +1,10 @@
 .ff_fieldSet_container {
   .ff_fieldSet {
-    border-color: var(--ff-connecting-branch-modal-border);
+    border:1px solid var(--ff-select-border-color);
     border-radius: 5px;
     .ff_legend_container{
         display: flex;
+        margin-left: 8px
     }
   }
 }

package/src/components/FieldSet/FieldSet.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import FieldSet from './FieldSet';
+import Typography from '../Typography';
 
 const meta: Meta<typeof FieldSet> = {
   title: 'Components/FieldSet',
@@ -17,7 +18,7 @@ const defaultArgs = {
   legendName: 'Default Legend',
   height: '200px',
   width: '300px',
-  children: 'Default content inside the FieldSet.',
+  children: <Typography>'Default content inside the FieldSet.'</Typography>,
 };
 
 export const Default: Story = {