pixel-react-excel-sheet 1.0.10 → 1.0.12

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

@@ -24,8 +24,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   setCellData,
   setContextMenu,
 }): React.ReactElement => {
-  const [isDotDragging, setIsDotDragging] = React.useState(false);
-  const [first, setFirst] = React.useState(true);
   const rootRef = React.useRef<HTMLTableCellElement | null>(null);
   const point = React.useMemo(
     (): Point.Point => ({
@@ -69,37 +67,12 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
 
   const handleMouseOver = React.useCallback(
     (event: React.MouseEvent<HTMLTableCellElement>) => {
-      if (dragging && first && !isDotDragging) {
+      if (dragging) {
         setCellDimensions(point, getOffsetRect(event.currentTarget));
         select(point);
       }
     },
-    [setCellDimensions, select, dragging, point, first, isDotDragging]
-  );
-
-  const handleDotDown = React.useCallback(
-    (event: React.MouseEvent<HTMLTableCellElement>) => {
-      setIsDotDragging(true);
-      setCellDimensions(point, getOffsetRect(event.currentTarget));
-
-      if (event.shiftKey) {
-        select(point);
-      } else {
-        activate(point);
-      }
-    },
-    [setCellDimensions, point, select, activate]
-  );
-
-  const handleDotOver = React.useCallback(
-    (event: React.MouseEvent<HTMLTableCellElement>) => {
-      setFirst(false);
-      if (dragging && isDotDragging) {
-        setCellDimensions(point, getOffsetRect(event.currentTarget));
-        select(point);
-      }
-    },
-    [setCellDimensions, select, dragging, point, isDotDragging]
+    [setCellDimensions, select, dragging, point]
   );
 
   const contextClick = React.useCallback(
@@ -153,11 +126,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
         evaluatedCell={evaluatedData}
         setCellData={setCellData}
       />
-      <div
-        // className="Selection_dot" TODO
-        onMouseOver={handleDotOver}
-        onMouseDown={handleDotDown}
-      ></div>
     </td>
   );
 };

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/RowIndicator.tsx

@@ -102,7 +102,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
 
   return (
     <th
-      style={{ height: `${rowHeight}px` ,minWidth:'60px' }} //Dynamic value, Inline Styling required
+      style={{ height: `${rowHeight}px` ,minWidth:'60px' ,position:'relative' }} //Dynamic value, Inline Styling required
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}

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

@@ -4,23 +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);
     background: var(--background-color);
     color: var(--text-color);
     scrollbar-width: none;
@@ -58,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);
@@ -86,6 +89,7 @@
   }
 
   .ff-spreadsheet-header {
+    border: 0.1px solid var(--border-color);
     background-color: var(--header-background-color);
     color: var(--readonly-text-color);
     text-align: center;

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={() => {