pixel-react-excel-sheet 1.2.0 → 1.2.2

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

@@ -1,494 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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;