pixel-react-excel-sheet 1.2.0

package/src/components/Drawer/index.ts

@@ -0,0 +1 @@
+export { default } from './Drawer';

package/src/components/ExcelFile/ChangeExcelStyles.tsx

@@ -0,0 +1,66 @@
+import { CellBase } from "./ExcelFile/Excel";
+
+interface ChangeExcelStylesOptions {
+  sheetName: string;
+  styleType: string;
+  value: string;  
+  selectedCell: { row: number; column: number }[];
+}
+
+export default function ChangeExcelStyles(
+  setWorksheetsData: React.Dispatch<React.SetStateAction<{ [key: string]: Matrix<CellBase>; }>>,
+  options: ChangeExcelStylesOptions
+) {
+  const { sheetName, styleType, value, selectedCell } = options;
+
+  setWorksheetsData((prev) => {
+    if (!prev[sheetName]) {
+      return prev;
+    }
+
+    const sheetData = prev[sheetName]!;
+    const selectedCells = new Set(
+      selectedCell.map(({ row, column }) => `${row}-${column}`)
+    );
+
+    const updatedSheetData: Matrix<CellBase> = sheetData.map((row, rowIndex) =>
+      row.map((cell, columnIndex) => {
+        const isSelected = selectedCells.has(`${rowIndex}-${columnIndex}`);
+        if (isSelected&&cell!==undefined) {
+          let newStyle = { ...cell.style };
+    
+          switch (styleType) {
+            case 'color':
+              newStyle = handleColorChange(newStyle, value);              
+              break;
+            case 'backgroundColor':
+              newStyle = handleBackgroundColorChange(newStyle, value);
+              break;
+            default:
+              break;
+          }
+    
+          const newValue = cell.value ?? "";
+          
+          return { ...cell, style: newStyle, value: newValue };
+        }
+        return cell;
+      })
+    );
+    
+    
+
+    return { ...prev, [sheetName]: updatedSheetData };
+  });
+}
+
+function handleColorChange(style:any, value: string) {
+  return { ...style, color: `#${value}` };
+}
+
+function handleBackgroundColorChange(
+  style: any,
+  value: string
+) {
+  return { ...style, backgroundColor: `#${value}` };
+}

package/src/components/ExcelFile/ColorBarSelector/ColorBarSelector.scss

@@ -0,0 +1,13 @@
+@use '../../../assets/styles/colors';
+
+.color-bar {
+  background-color: var(--error_light);
+  width: 100%;
+  height: 4px;
+  .colorPicker {
+    width: 100%;
+    height: 0;
+    padding: 0;
+    visibility: hidden;
+  }
+}

package/src/components/ExcelFile/ColorBarSelector/ColorBarSelector.tsx

@@ -0,0 +1,43 @@
+import React, { useRef, useState } from 'react';
+import './ColorBarSelector.scss';
+
+interface ColorBarSelectorProps {
+  getColorValue: (color: string) => void;
+  disabled: boolean;
+}
+const ColorBarSelector: React.FC<ColorBarSelectorProps> = ({
+  getColorValue,
+  disabled,
+}) => {
+  const colorInputRef = useRef<HTMLInputElement | null>(null);
+  const [color, setColor] = useState<string>('var(--error-light)');
+
+  const handleColorClick = () => {
+    if (colorInputRef.current) {
+      colorInputRef.current.click();
+    }
+  };
+
+  return (
+    <div
+      className="color-bar"
+      style={{
+        backgroundColor: `${color}`,
+      }}
+      onClick={handleColorClick}
+    >
+      <input
+        type="color"
+        disabled={disabled}
+        className="colorPicker"
+        ref={colorInputRef}
+        onChange={(e) => {
+          setColor(e.target.value);
+          getColorValue(e.target.value.replace('#', ''));
+        }}
+      />
+    </div>
+  );
+};
+
+export default ColorBarSelector;

package/src/components/ExcelFile/ContextMenu/ContextMenu.scss

@@ -0,0 +1,102 @@
+@import '../../../assets/styles/colors';
+@import '../../../assets/styles/fonts';
+
+.context-menu {
+  position: absolute;
+  z-index: 1;
+  outline: none;
+  background-color: var(--brand-color);
+  // box-shadow: 0px 0px 6px $shadow;
+  border-radius: 5px;
+  opacity: 1;
+  padding: 16px 0;
+  .menu-options {
+    overflow: auto;
+    min-height: 20px;
+    max-height: 175px;
+    min-width: 250px;
+    opacity: 1;
+    .options {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      padding: 0 8px;
+      line-height: 35px;
+      gap: 16px;
+      .sheet-context-menu {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      &:hover {
+        // background-color: $primary;
+        .options-label {
+          background: var(--option-card-bg-color);
+        }
+      }
+    }
+  }
+}
+
+.ff-icon-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  .ff-menuicon-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--brand-color);
+    }
+  }
+
+  .ff-menuicon-container-clicked {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--brand-color);
+    cursor: pointer;
+    &:hover {
+      background-color: var(--brand-color);
+    }
+  }
+}
+
+.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-disable-option {
+    opacity: 0.5;
+    cursor: no-drop;
+    label {
+      cursor: no-drop;
+    }
+  }
+}

package/src/components/ExcelFile/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import './ContextMenu.scss';
+import Icon from '../../Icon';
+// import { colors } from '../../../colors/colorConstants';
+
+const ContextMenu: React.FC<ContextMenuProps> = ({
+  customContext,
+  contextAction,
+  contextData,
+  setContextData,
+}) => {
+  const contextOptions: ContextOption[] = [
+    {
+      name: 'cell',
+      value: customContext || [],
+    },
+    {
+      name: 'row',
+      value: [
+        { name: 'Add Row', title: 'Add Row', action: contextAction.addRow },
+        {
+          name: 'Delete Row',
+          title: 'Delete Row',
+          action: contextAction.deleteRow,
+        },
+      ],
+    },
+    {
+      name: 'column',
+      value: [
+        {
+          name: 'Add Column',
+          title: 'Add Column',
+          action: contextAction.addColumn,
+        },
+        {
+          name: 'Delete Column',
+          title: 'Delete Column',
+          action: contextAction.deleteColumn,
+        },
+      ],
+    },
+    {
+      name: 'sheet_options',
+      value: [
+        {
+          name: 'Add Sheet',
+          title: (
+            <span className="sheet-context-menu">
+              <Icon  name="plus_icon" /> Add
+              Sheet
+            </span>
+          ),
+          action: contextAction.addSheet,
+        },
+        {
+          name: 'Delete Sheet',
+          title: (
+            <span className="sheet-context-menu">
+              <Icon name="delete" /> Delete Sheet
+            </span>
+          ),
+          action: contextAction.deleteSheet,
+        },
+      ],
+    },
+  ];
+
+  return (
+    contextData.visible &&
+    contextOptions.some(
+      (contextType) =>
+        contextType.name === contextData.type && contextType.value.length > 0
+    ) && (
+      <div
+        className="context-menu"
+        style={{ top: contextData.y, left: contextData.x }}
+      >
+        <div className="menu-options">
+          {contextOptions
+            .filter((contextType) => contextType.name === contextData.type)
+            .map((contextType) =>
+              contextType.value.length > 0
+                ? contextType.value.map((item) => (
+                    <div
+                      className="options"
+                      key={item.name}
+                      onClick={() => {
+                        item.action();
+                        setContextData((prev) => ({ ...prev, visible: false }));
+                      }}
+                    >
+                      <label className="options-label">{item.title}</label>
+                    </div>
+                  ))
+                : null
+            )}
+        </div>
+      </div>
+    )
+  );
+};
+
+export default ContextMenu;

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

@@ -0,0 +1,131 @@
+import * as React from "react";
+import classnames from "classnames";
+import * as Actions from "./actions";
+import * as Types from "./types";
+import * as Point from "./point";
+import useSelector from "./use-selector";
+import useDispatch from "./use-dispatch";
+import { getCellDimensions } from "./util";
+import * as Matrix from "./matrix";
+
+type Props = {
+  DataEditor: Types.DataEditorComponent;
+};
+
+const ActiveCell: React.FC<Props> = (props) => {
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const dispatch = useDispatch();
+  const setCellData = React.useCallback(
+    (active: Point.Point, data: Types.CellBase) =>
+      dispatch(Actions.setCellData(active, data)),
+    [dispatch]
+  );
+  const edit = React.useCallback(() => dispatch(Actions.edit()), [dispatch]);
+  const commit = React.useCallback(
+    (changes: Types.CommitChanges<Types.CellBase>) =>
+      dispatch(Actions.commit(changes)),
+    [dispatch]
+  );
+  const view = React.useCallback(() => {
+    dispatch(Actions.view());
+  }, [dispatch]);
+  const active = useSelector((state) => state.active);
+  const mode = useSelector((state) => state.mode);
+  const cell = useSelector((state) =>
+    state.active ? Matrix.get(state.active, state.model.data) : undefined
+  );
+  const dimensions = useSelector((state) =>
+    active
+      ? getCellDimensions(active, state.rowDimensions, state.columnDimensions)
+      : undefined
+  );
+  const hidden = React.useMemo(
+    () => !active || !dimensions,
+    [active, dimensions]
+  );
+
+  const initialCellRef = React.useRef<Types.CellBase | undefined>(undefined);
+  const prevActiveRef = React.useRef<Point.Point | null>(null);
+  const prevCellRef = React.useRef<Types.CellBase | undefined>(undefined);
+
+  const handleChange = React.useCallback(
+    (cell: Types.CellBase) => {
+      if (!active) {
+        return;
+      }
+      setCellData(active, cell);
+    },
+    [setCellData, active]
+  );
+
+  React.useEffect(() => {
+    const root = rootRef.current;
+    if (!hidden && root) {
+      root.focus();
+    }
+  }, [rootRef, hidden]);
+
+  React.useEffect(() => {
+    const prevActive = prevActiveRef.current;
+    const prevCell = prevCellRef.current;
+    prevActiveRef.current = active;
+    prevCellRef.current = cell;
+
+    if (!prevActive || !prevCell) {
+      return;
+    }
+
+    const coordsChanged =
+      active?.row !== prevActive.row || active?.column !== prevActive.column;
+    const exitedEditMode = mode !== "edit";
+
+    if (coordsChanged || exitedEditMode) {
+      const initialCell = initialCellRef.current;
+      if (prevCell !== initialCell) {
+        commit([
+          {
+            prevCell: initialCell || null,
+            nextCell: prevCell,
+          },
+        ]);
+      } else if (!coordsChanged && cell !== prevCell) {
+        commit([
+          {
+            prevCell,
+            nextCell: cell || null,
+          },
+        ]);
+      }
+      initialCellRef.current = cell;
+    }
+  });
+
+  const DataEditor = (cell && cell.DataEditor) || props.DataEditor;
+  const readOnly = cell && cell.readOnly;
+
+  return hidden ? null : (
+    <div
+      ref={rootRef}
+      className={classnames(
+        "Spreadsheet__active-cell",
+        `Spreadsheet__active-cell--${mode}`
+      )}
+      style={dimensions}
+      onClick={mode === "view" && !readOnly ? edit : undefined}
+      tabIndex={0}
+    >
+      {mode === "edit" && active && (
+        <DataEditor
+          row={active.row}
+          column={active.column}
+          cell={cell}
+          // @ts-ignore
+          onChange={handleChange}
+          exitEditMode={view}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ActiveCell;

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

@@ -0,0 +1,201 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import * as Matrix from './matrix';
+import * as Types from './types';
+import * as Point from './point';
+import * as Actions from './actions';
+import { isActive, getOffsetRect } from './util';
+import useDispatch from './use-dispatch';
+import useSelector from './use-selector';
+
+export const Cell: React.FC<Types.CellComponentProps> = ({
+  row,
+  column,
+  DataViewer,
+  selected,
+  active,
+  dragging,
+  mode,
+  data,
+  evaluatedData,
+  select,
+  activate,
+  setCellDimensions,
+  setCellData,
+}): 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 => ({
+      row,
+      column,
+    }),
+    [row, column]
+  );
+
+  const handleMouseDown = React.useCallback(
+    (event: React.MouseEvent<HTMLTableCellElement>) => {
+      if (mode === 'view') {
+        setCellDimensions(point, getOffsetRect(event.currentTarget));
+
+        if (event.shiftKey) {
+          select(point);
+        } else {
+          activate(point);
+        }
+      }
+    },
+    [mode, setCellDimensions, point, select, activate]
+  );
+
+  const handleMouseOver = React.useCallback(
+    (event: React.MouseEvent<HTMLTableCellElement>) => {
+      if (dragging && first && !isDotDragging) { 
+        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]
+  );
+
+  React.useEffect(() => {
+    const root = rootRef.current;
+    if (selected && root) {
+      setCellDimensions(point, getOffsetRect(root));
+    }
+    if (root && active && mode === 'view') {
+      root.focus();
+    }
+  }, [setCellDimensions, selected, active, mode, point, data]);
+
+  if (data && data.DataViewer) {
+    // @ts-ignore
+    DataViewer = data.DataViewer;
+  }
+
+  return (
+    <td
+      ref={rootRef}
+      className={classnames('Spreadsheet__cell', data?.className, {
+        'Spreadsheet__active-cell': active || dragging,
+      })}
+      onMouseEnter={handleMouseOver} // Handle drag when mouse enters
+      onMouseDown={handleMouseDown}
+      tabIndex={0}
+    >
+      <DataViewer
+        row={row}
+        column={column}
+        cell={data}
+        evaluatedCell={evaluatedData}
+        setCellData={setCellData}
+      />
+      <div
+        className="Selection_dot"
+        onMouseOver={handleDotOver}
+        onMouseDown={handleDotDown}
+      ></div>
+    </td>
+  );
+};
+
+export const enhance = (
+  CellComponent: React.ComponentType<Types.CellComponentProps>
+): React.FC<
+  Omit<
+    Types.CellComponentProps,
+    | "selected"
+    | "active"
+    | "copied"
+    | "dragging"
+    | "mode"
+    | "data"
+    | "select"
+    | "activate"
+    | "setCellDimensions"
+  >
+> => {
+  return function CellWrapper(props) {
+    const { row, column } = props;
+    const dispatch = useDispatch();
+    const point = React.useMemo(
+      (): Point.Point => ({
+        row,
+        column,
+      }),
+      [row, column]
+    );
+    const setCellData = React.useCallback(
+      (data: Types.CellBase) => dispatch(Actions.setCellData(point, data)),
+      [dispatch, point]
+    );
+    const select = React.useCallback(
+      (point: Point.Point) => dispatch(Actions.select(point)),
+      [dispatch]
+    );
+    const activate = React.useCallback(
+      (point: Point.Point) => dispatch(Actions.activate(point)),
+      [dispatch]
+    );
+    const setCellDimensions = React.useCallback(
+      (point: Point.Point, dimensions: Types.Dimensions) =>
+        dispatch(Actions.setCellDimensions(point, dimensions)),
+      [dispatch]
+    );
+    const active = useSelector((state) => isActive(state.active, point));
+    const mode = useSelector((state) => (active ? state.mode : "view"));
+    const data = useSelector((state) => Matrix.get(point, state.model.data));
+    const evaluatedData = useSelector((state) =>
+      Matrix.get(point, state.model.evaluatedData)
+    );
+
+    const selected = useSelector((state) =>
+      state.selected.has(state.model.data, point)
+    );
+    const dragging = useSelector((state) => state.dragging);
+    const copied = useSelector((state) => state.copied?.has(point) || false);
+
+    return (
+      <CellComponent
+        {...props}
+        selected={selected}
+        active={active}
+        copied={copied}
+        dragging={dragging}
+        mode={mode}
+        evaluatedData={evaluatedData}
+        data={data}
+        select={select}
+        activate={activate}
+        setCellDimensions={setCellDimensions}
+        setCellData={setCellData}
+      />
+    );
+  };
+};