pixel-react-excel-sheet 1.2.0

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

@@ -0,0 +1,494 @@
+import * as React from "react";
+import classNames from "classnames";
+import * as Types from "./types";
+import * as Actions from "./actions";
+import * as Matrix from "./matrix";
+import * as Point from "./point";
+import { Selection } from "./selection";
+import reducer, { INITIAL_STATE, hasKeyDownHandler } from "./reducer";
+import context from "./context";
+import { Model, createFormulaParser } from "./engine";
+import {
+  range,
+  readTextFromClipboard,
+  writeTextToClipboard,
+  calculateSpreadsheetSize,
+  getCSV,
+  shouldHandleClipboardEvent,
+  isFocusedWithin,
+} from "./util";
+
+import DefaultTable from "./Table";
+import DefaultRow from "./Row";
+import DefaultHeaderRow from "./HeaderRow";
+import DefaultCornerIndicator, {
+  enhance as enhanceCornerIndicator,
+} from "./CornerIndicator";
+import DefaultColumnIndicator, {
+  enhance as enhanceColumnIndicator,
+} from "./ColumnIndicator";
+import DefaultRowIndicator, {
+  enhance as enhanceRowIndicator,
+} from "./RowIndicator";
+import { Cell as DefaultCell, enhance as enhanceCell } from "./Cell";
+import DefaultDataViewer from "./DataViewer";
+import DefaultDataEditor from "./DataEditor";
+import ActiveCell from "./ActiveCell";
+import Selected from "./Selected";
+import Copied from "./Copied";
+// import "./Spreadsheet.css";
+
+/** The Spreadsheet component props */
+export type Props<CellType extends Types.CellBase> = {
+  /** The spreadsheet's data */
+  data: Matrix.Matrix<CellType>;
+  /** Class name to be added to the spreadsheet's root element */
+  className?: string;
+  /**
+   * Use dark colors that complement dark mode
+   * @defaultValue `false`
+   */
+  darkMode?: boolean;
+  /**
+   * Function used to create the formula parser (instance of
+   * "fast-formula-parser") used by the Spreadsheet by getting the spreadsheet's
+   * data.
+   * @defaultValue function which creates a formula parser bound to the
+   * Spreadsheet's data.
+   * @see `createFormulaParser`
+   * @see https://www.npmjs.com/package/fast-formula-parser
+   */
+  createFormulaParser?: Types.CreateFormulaParser;
+  /**
+   * Labels to use in column indicators.
+   * @defaultValue alphabetical labels.
+   */
+  columnLabels?: string[];
+  /**
+   * Labels to use in row indicators.
+   * @defaultValue row index labels.
+   */
+  rowLabels?: string[];
+  /**
+   * If set to true, hides the row indicators of the spreadsheet.
+   * @defaultValue `false`.
+   */
+  hideRowIndicators?: boolean;
+  /**
+   * If set to true, hides the column indicators of the spreadsheet.
+   * @defaultValue `false`.
+   */
+  hideColumnIndicators?: boolean;
+  /** The selected cells in the worksheet. */
+  selected?: Selection;
+  // Custom Components
+  /** Component rendered above each column. */
+  ColumnIndicator?: Types.ColumnIndicatorComponent;
+  /** Component rendered in the corner of row and column indicators. */
+  CornerIndicator?: Types.CornerIndicatorComponent;
+  /** Component rendered next to each row. */
+  RowIndicator?: Types.RowIndicatorComponent;
+  /** The Spreadsheet's table component. */
+  Table?: Types.TableComponent;
+  /** The Spreadsheet's row component. */
+  Row?: Types.RowComponent;
+  /** The spreadsheet's header row component */
+  HeaderRow?: Types.HeaderRowComponent;
+  /** The Spreadsheet's cell component. */
+  Cell?: Types.CellComponent<CellType>;
+  /** Component rendered for cells in view mode. */
+  DataViewer?: Types.DataViewerComponent<CellType>;
+  /** Component rendered for cells in edit mode. */
+  DataEditor?: Types.DataEditorComponent<CellType>;
+  // Handlers
+  /** Callback called on key down inside the spreadsheet. */
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+  /** Callback called when the Spreadsheet's selection changes. */
+  onSelect?: (selected: Selection) => void;
+  /** Callback called when Spreadsheet's active cell changes. */
+  onActivate?: (active: Point.Point) => void;
+  /** Callback called when the Spreadsheet's evaluated data changes. */
+  onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
+};
+
+/**
+ * The Spreadsheet component
+ */
+const Spreadsheet = <CellType extends Types.CellBase>(
+  props: Props<CellType>
+): React.ReactElement => {
+  const {
+    className,
+    darkMode,
+    columnLabels,
+    rowLabels,
+    // hideColumnIndicators,
+    // hideRowIndicators,
+    onKeyDown,
+    Table = DefaultTable,
+    Row = DefaultRow,
+    HeaderRow = DefaultHeaderRow,
+    DataEditor = DefaultDataEditor,
+    DataViewer = DefaultDataViewer,
+    // onChange = () => {},
+    // onModeChange = () => {},
+    onSelect = () => {},
+    onActivate = () => {},
+    // onBlur = () => {},
+    // onCellCommit = () => {},
+    onEvaluatedDataChange = () => {},
+  } = props;
+  type State = Types.StoreState<CellType>;
+
+  const initialState = React.useMemo(() => {
+    const createParser = (props.createFormulaParser ||
+      createFormulaParser) as Types.CreateFormulaParser;
+    const model = new Model(createParser, props.data);
+    return {
+      ...INITIAL_STATE,
+      model,
+      selected: props.selected || INITIAL_STATE.selected,
+    } as State;
+  }, [props.createFormulaParser, props.data, props.selected]);
+
+  const reducerElements = React.useReducer(
+    reducer as unknown as React.Reducer<State, Actions.Action>,
+    initialState
+  );
+  const [state, dispatch] = reducerElements;
+
+  const size = React.useMemo(() => {
+    return calculateSpreadsheetSize(state.model.data, rowLabels, columnLabels);
+  }, [state.model.data, rowLabels, columnLabels]);
+
+  const mode = state.mode;
+
+  const rootRef = React.useRef<HTMLDivElement>(null);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const useAction = <T extends (...args: any[]) => Actions.Action>(
+    action: T
+  ) => {
+    return React.useCallback(
+      (...args: Parameters<T>) => dispatch(action(...args)),
+      [action]
+    );
+  };
+
+  const cut = useAction(Actions.cut);
+  const copy = useAction(Actions.copy);
+  const paste = useAction(Actions.paste);
+  const onKeyDownAction = useAction(Actions.keyDown);
+  const onKeyPress = useAction(Actions.keyPress);
+  const onDragStart = useAction(Actions.dragStart);
+  const onDragEnd = useAction(Actions.dragEnd);
+  const setData = useAction(Actions.setData);
+  const setCreateFormulaParser = useAction(Actions.setCreateFormulaParser);
+  const setSelection = useAction(Actions.setSelection);
+
+  // Track active
+  const prevActiveRef = React.useRef<Point.Point | null>(state.active);
+  React.useEffect(() => {
+    if (state.active !== prevActiveRef.current) {
+      if (state.active) {
+        onActivate(state.active);
+      } else {
+        const root = rootRef.current;
+        if (root && isFocusedWithin(root) && document.activeElement) {
+          (document.activeElement as HTMLElement).blur();
+        }
+      }
+    }
+
+    prevActiveRef.current = state.active;
+  }, [onActivate, state.active]);
+
+  const prevEvaluatedDataRef = React.useRef<Matrix.Matrix<CellType>>(
+    state.model.evaluatedData
+  );
+  React.useEffect(() => {
+    if (state?.model?.evaluatedData !== prevEvaluatedDataRef?.current) {
+      onEvaluatedDataChange(state?.model?.evaluatedData);
+    }
+
+    prevEvaluatedDataRef.current = state.model.evaluatedData;
+  }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
+
+  // Listen to selection changes
+  const prevSelectedRef = React.useRef<Selection>(state.selected);
+  React.useEffect(() => {
+    if (!state.selected.equals(prevSelectedRef.current)) {
+      // Call on select only if the selection change internal
+      if (!props.selected || !state.selected.equals(props.selected)) {
+        onSelect(state.selected);
+      }
+    }
+
+    prevSelectedRef.current = state.selected;
+  }, [state.selected, onSelect, props.selected]);
+
+  // Update selection when props.selected changes
+  const prevSelectedPropRef = React.useRef<Selection | undefined>(
+    props.selected
+  );
+  React.useEffect(() => {
+    if (
+      props.selected &&
+      prevSelectedPropRef.current &&
+      !props.selected.equals(prevSelectedPropRef.current)
+    ) {
+      setSelection(props.selected);
+    }
+    prevSelectedPropRef.current = props.selected;
+  }, [props.selected, setSelection]);
+
+  // Update data when props.data changes
+  const prevDataPropRef = React.useRef<Matrix.Matrix<CellType> | undefined>(
+    props.data
+  );
+  React.useEffect(() => {
+    if (props.data !== prevDataPropRef.current) {
+      setData(props.data);
+    }
+    prevDataPropRef.current = props.data;
+  }, [props.data, setData]);
+
+  // Update createFormulaParser when props.createFormulaParser changes
+  const prevCreateFormulaParserPropRef = React.useRef<
+    Types.CreateFormulaParser | undefined
+  >(props.createFormulaParser);
+  React.useEffect(() => {
+    if (
+      props.createFormulaParser !== prevCreateFormulaParserPropRef.current &&
+      props.createFormulaParser
+    )
+      setCreateFormulaParser(props.createFormulaParser);
+    prevCreateFormulaParserPropRef.current = props.createFormulaParser;
+  }, [props.createFormulaParser, setCreateFormulaParser]);
+
+  const writeDataToClipboard = React.useCallback(
+    (event: ClipboardEvent): void => {
+      const { model, selected } = state;
+      const { data } = model;
+      const range = selected.toRange(data);
+      if (range) {
+        const selectedData = Matrix.slice(range.start, range.end, data);
+        const csv = getCSV(selectedData);
+        writeTextToClipboard(event, csv);
+      }
+    },
+    [state]
+  );
+
+  const handleCut = React.useCallback(
+    (event: ClipboardEvent) => {
+      if (shouldHandleClipboardEvent(rootRef.current, mode)) {
+        event.preventDefault();
+        event.stopPropagation();
+        writeDataToClipboard(event);
+        cut();
+      }
+    },
+    [mode, writeDataToClipboard, cut]
+  );
+
+  const handleCopy = React.useCallback(
+    (event: ClipboardEvent) => {
+      if (shouldHandleClipboardEvent(rootRef.current, mode)) {
+        event.preventDefault();
+        event.stopPropagation();
+        writeDataToClipboard(event);
+        copy();
+      }
+    },
+    [mode, writeDataToClipboard, copy]
+  );
+
+  const handlePaste = React.useCallback(
+    (event: ClipboardEvent) => {
+      if (shouldHandleClipboardEvent(rootRef.current, mode)) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.clipboardData) {
+          const text = readTextFromClipboard(event);
+          paste(text);
+        }
+      }
+    },
+    [mode, paste]
+  );
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      event.persist();
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+      // Do not use event in case preventDefault() was called inside onKeyDown
+      if (!event.defaultPrevented) {
+        // Only disable default behavior if an handler exist
+        if (hasKeyDownHandler(state, event)) {
+          event.nativeEvent.preventDefault();
+        }
+        onKeyDownAction(event);
+      }
+    },
+    [state, onKeyDown, onKeyDownAction]
+  );
+
+  const handleMouseUp = React.useCallback(() => {
+    onDragEnd();
+    document.removeEventListener("mouseup", handleMouseUp);
+  }, [onDragEnd]);
+
+  const handleMouseMove = React.useCallback(
+    (event: React.MouseEvent) => {
+      if (!state.dragging && event.buttons === 1) {
+        onDragStart();
+        document.addEventListener("mouseup", handleMouseUp);
+      }
+    },
+    [state, onDragStart, handleMouseUp]
+  );
+
+  const Cell = React.useMemo(() => {
+    // @ts-ignore
+    return enhanceCell(props.Cell || DefaultCell);
+  }, [props.Cell]);
+
+  const CornerIndicator = React.useMemo(
+    () =>
+      enhanceCornerIndicator(props.CornerIndicator || DefaultCornerIndicator),
+    [props.CornerIndicator]
+  );
+
+  const RowIndicator = React.useMemo(
+    () => enhanceRowIndicator(props.RowIndicator || DefaultRowIndicator),
+    [props.RowIndicator]
+  );
+
+  const ColumnIndicator = React.useMemo(
+    () =>
+      enhanceColumnIndicator(props.ColumnIndicator || DefaultColumnIndicator),
+    [props.ColumnIndicator]
+  );
+
+  React.useEffect(() => {
+    document.addEventListener("cut", handleCut);
+    document.addEventListener("copy", handleCopy);
+    document.addEventListener("paste", handlePaste);
+
+    return () => {
+      document.removeEventListener("cut", handleCut);
+      document.removeEventListener("copy", handleCopy);
+      document.removeEventListener("paste", handlePaste);
+    };
+  }, [handleCut, handleCopy, handlePaste]);
+
+  const tableNode = React.useMemo(
+    () => (
+      <Table columns={size.columns}>
+        <HeaderRow>
+          {<CornerIndicator />}
+          {
+            range(size.columns).map((columnNumber) =>
+              columnLabels ? (
+                <ColumnIndicator
+                  key={columnNumber}
+                  column={columnNumber}
+                  label={
+                    columnNumber in columnLabels
+                      ? columnLabels[columnNumber]
+                      : null
+                  }
+                />
+              ) : (
+                <ColumnIndicator key={columnNumber} column={columnNumber} />
+              )
+            )}
+        </HeaderRow>
+        {range(size.rows).map((rowNumber) => (
+          <Row key={rowNumber} row={rowNumber}>
+            {
+              (rowLabels ? (
+                <RowIndicator
+                  key={rowNumber}
+                  row={rowNumber}
+                  label={rowNumber in rowLabels ? rowLabels[rowNumber] : null}
+                />
+              ) : (
+                <RowIndicator key={rowNumber} row={rowNumber} />
+              ))}
+            {range(size.columns).map((columnNumber) => (
+              <Cell
+                key={columnNumber}
+                row={rowNumber}
+                column={columnNumber}
+                // @ts-ignore
+                DataViewer={DataViewer}
+              />
+            ))}
+          </Row>
+        ))}
+      </Table>
+    ),
+    [
+      Table,
+      size.rows,
+      size.columns,
+      Row,
+      HeaderRow,
+      CornerIndicator,
+      columnLabels,
+      ColumnIndicator,
+      rowLabels,
+      RowIndicator,
+      Cell,
+      DataViewer,
+    ]
+  );
+
+  const activeCellNode = React.useMemo(
+    () => (
+      <ActiveCell
+        // @ts-ignore
+        DataEditor={DataEditor}
+      />
+    ),
+    [DataEditor]
+  );
+
+  const rootNode = React.useMemo(
+    () => (
+      <div
+        ref={rootRef}
+        className={classNames("Spreadsheet", className, {
+          "Spreadsheet--dark-mode": darkMode,
+        })}
+        onKeyPress={onKeyPress}
+        onKeyDown={handleKeyDown}
+        onMouseMove={handleMouseMove}
+      >
+        {tableNode}
+        {activeCellNode}
+        <Selected />
+        <Copied />
+      </div>
+    ),
+    [
+      className,
+      darkMode,
+      onKeyPress,
+      handleKeyDown,
+      handleMouseMove,
+      tableNode,
+      activeCellNode,
+    ]
+  );
+
+  return (
+    <context.Provider value={reducerElements}>{rootNode}</context.Provider>
+  );
+};
+
+export default Spreadsheet;

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

@@ -0,0 +1,19 @@
+import * as Types from "./types";
+import { range } from "./util";
+
+const Table: Types.TableComponent = ({
+  children,
+  columns,
+  hideColumnIndicators,
+}) => {
+  const columnCount = columns + (hideColumnIndicators ? 0 : 1);
+  const columnNodes = range(columnCount).map((i) => <col key={i} />);
+  return (
+    <table className="Spreadsheet__table">
+      <colgroup>{columnNodes}</colgroup>
+      <tbody>{children}</tbody>
+    </table>
+  );
+};
+
+export default Table;