pixel-react 1.1.8 → 1.2.0

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}
+      />
+    );
+  };
+};

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

@@ -0,0 +1,123 @@
+import * as React from "react";
+import classNames from "classnames";
+import * as Types from "./types";
+import * as Point from "./point";
+import * as Actions from "./actions";
+import useDispatch from "./use-dispatch";
+import useSelector from "./use-selector";
+
+const ColumnIndicator: Types.ColumnIndicatorComponent = ({
+  column,
+  label,
+  selected,
+  onSelect,
+}) => {
+  const dispatch = useDispatch();
+  const [width, setWidth] = React.useState(100);
+  
+  // Function to handle the start of the resize (mouse down)
+  const onMouseDown = (e: React.MouseEvent) => {
+    const startX = e.clientX;
+
+    // Function to handle mouse movement (resize)
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      const newWidth = width + (moveEvent.clientX - startX);
+      setWidth(newWidth);
+      
+      // const selectedAllRow = document.querySelector(".Spreadsheet__floating-rect--selected");
+      // const selectedSingleRow = document.querySelector(".Spreadsheet__active-cell");
+
+      // // If the element exists, update its height
+      // if (selectedAllRow instanceof HTMLElement&&selectedSingleRow instanceof HTMLElement) {
+      //   selectedAllRow.style.width = `${newWidth}px`; // Set the width
+      //   selectedSingleRow.style.width = `${newWidth}px`; // Set the width
+      // }
+    };
+
+    // Function to stop the resizing (mouse up)
+    const onMouseUp = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+
+    // Add event listeners for mouse move and mouse up
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+
+  const activate = React.useCallback(
+    (point: Point.Point) => dispatch(Actions.activate(point)),
+    [dispatch]
+  );
+
+  // Handle column header click
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      onSelect(column, event.shiftKey);
+    },
+    [onSelect, column]
+  );
+
+
+  return (
+    <th
+      style={{ minWidth: `${width}px`, position: "relative" }} // Use dynamic width
+      className={classNames("Spreadsheet__header", {
+        "Spreadsheet__header--selected": selected,
+      })}
+      onClick={handleClick}
+      tabIndex={0}
+    >
+      {label !== undefined ? label : columnIndexToLabel(column)}
+      <div
+        onMouseDown={onMouseDown}
+        onClick={()=>{activate}}
+        style={{
+          zIndex: "inherit",
+          width: "2px",
+          position: "absolute",
+          right: 0,
+          top: 0,
+          height: "100%",
+          cursor: "ew-resize",
+        }}
+      />
+    </th>
+  );
+};
+
+export default ColumnIndicator;
+
+export const enhance = (
+  ColumnIndicatorComponent: Types.ColumnIndicatorComponent
+): React.FC<Omit<Types.ColumnIndicatorProps, "selected" | "onSelect">> => {
+  return function ColumnIndicatorWrapper(props) {
+    const dispatch = useDispatch();
+    const selectEntireColumn = React.useCallback(
+      (column: number, extend: boolean) =>
+        dispatch(Actions.selectEntireColumn(column, extend)),
+      [dispatch]
+    );
+    const selected = useSelector((state) =>
+      state.selected.hasEntireColumn(props.column)
+    );
+    return (
+      <ColumnIndicatorComponent
+        {...props}
+        selected={selected}
+        onSelect={selectEntireColumn}
+      />
+    );
+  };
+};
+
+// Utility function to convert column index to label (e.g., 0 -> A, 1 -> B, etc.)
+function columnIndexToLabel(column: number): string {
+  let label = "";
+  let index = column;
+  while (index >= 0) {
+    label = String.fromCharCode(65 + (index % 26)) + label;
+    index = Math.floor(index / 26) - 1;
+  }
+  return label;
+}

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+import FloatingRect from "./FloatingRect";
+import { getRangeDimensions } from "./util";
+import useSelector from "./use-selector";
+
+const Copied: React.FC = () => {
+  const range = useSelector((state) => state.copied);
+  const dimensions = useSelector(
+    (state) =>
+      range &&
+      getRangeDimensions(state.rowDimensions, state.columnDimensions, range)
+  );
+  const hidden = range === null;
+
+  return (
+    <FloatingRect
+      variant="copied"
+      dimensions={dimensions}
+      hidden={hidden}
+      dragging={false}
+    />
+  );
+};
+
+export default Copied;

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

@@ -0,0 +1,49 @@
+import * as React from "react";
+import classNames from "classnames";
+import * as Actions from "./actions";
+import { EntireWorksheetSelection } from "./selection";
+import * as Types from "./types";
+import useDispatch from "./use-dispatch";
+import useSelector from "./use-selector";
+
+const CornerIndicator: Types.CornerIndicatorComponent = ({
+  selected,
+  onSelect,
+}) => {
+  const handleClick = React.useCallback(() => {
+    onSelect();
+  }, [onSelect]);
+  return (
+    <th
+      className={classNames("Spreadsheet__header", {
+        "Spreadsheet__header--selected": selected,
+      })}
+      onClick={handleClick}
+      tabIndex={0}
+    />
+  );
+};
+
+export default CornerIndicator;
+
+export const enhance = (
+  CornerIndicatorComponent: Types.CornerIndicatorComponent
+): React.FC<Omit<Types.CornerIndicatorProps, "selected" | "onSelect">> => {
+  return function CornerIndicatorWrapper(props) {
+    const dispatch = useDispatch();
+    const selectEntireWorksheet = React.useCallback(
+      () => dispatch(Actions.selectEntireWorksheet()),
+      [dispatch]
+    );
+    const selected = useSelector(
+      (state) => state.selected instanceof EntireWorksheetSelection
+    );
+    return (
+      <CornerIndicatorComponent
+        {...props}
+        selected={selected}
+        onSelect={selectEntireWorksheet}
+      />
+    );
+  };
+};

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import * as Types from "./types";
+import { moveCursorToEnd } from "./util";
+
+/** The default Spreadsheet DataEditor component */
+const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange({ ...cell, value: event.target.value,style:cell?.style});
+    },
+    [onChange, cell]
+  );
+
+  React.useEffect(() => {
+    if (inputRef.current) {
+      moveCursorToEnd(inputRef.current);
+    }
+  }, [inputRef]);
+
+  const value = cell?.value ?? "";
+
+  return (
+    <div className="Spreadsheet__data-editor">
+      <input
+        ref={inputRef}
+        type="text"
+        onChange={handleChange}
+        value={value}
+        autoFocus
+      />
+    </div>
+  );
+};
+
+export default DataEditor;