pixel-priya 0.0.1

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

@@ -0,0 +1,542 @@
+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 } 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.scss';
+import ExcelToolBar from '../../ExcelToolBar/ExcelToolBar';
+import { hasKeyDownHandler } from './reducerFunctions';
+
+/** 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;
+
+  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;
+  setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
+  /** Set your dynamic sheet Height*/
+  sheetHeight: string;
+  contextOption?: {
+    open: boolean;
+    options: {
+      label: string;
+      value: string;
+      iconName: string;
+      action: () => void;
+    }[];
+  };
+};
+
+/**
+ * The Spreadsheet component
+ */
+const Spreadsheet = <CellType extends Types.CellBase>(
+  props: Props<CellType>
+): React.ReactElement => {
+  const {
+    className,
+    columnLabels,
+    rowLabels,
+    onKeyDown,
+    Table = DefaultTable,
+    Row = DefaultRow,
+    sheetHeight,
+    HeaderRow = DefaultHeaderRow,
+    DataEditor = DefaultDataEditor,
+    DataViewer = DefaultDataViewer,
+    onSelect = () => {},
+    onActivate = () => {},
+    onEvaluatedDataChange = () => {},
+    contextOption,
+  } = 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);
+  const onBold = useAction(Actions.bold);
+  const onItalic = useAction(Actions.italic);
+  const setUnderlineType = useAction(Actions.underlineType);
+  const setTextAlign = useAction(Actions.textAlign);
+  const setFontSize = useAction(Actions.fontSize);
+  const setFontFamily = useAction(Actions.fontFamily);
+  const setBorderType = useAction(Actions.borderType);
+  const setColor = useAction(Actions.color);
+  const setBackgroundColor = useAction(Actions.backgroundStyle);
+  const setFormatePainter = useAction(Actions.formatePainter);
+
+  const addRowTop = useAction(Actions.addRowTop);
+  const addColumnLeft = useAction(Actions.addColumnLeft);
+  const deleteRow = useAction(Actions.deleteRow);
+  const deleteColumn = useAction(Actions.deleteColumn);
+
+  // 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]);
+
+  const prevSelectedRef = React.useRef<Selection>(state.selected);
+  React.useEffect(() => {
+    if (!state.selected.equals(prevSelectedRef.current)) {
+      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
+  let 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]);
+
+  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);
+      }
+      if (!event.defaultPrevented) {
+        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}
+                setContextMenu={props.setContextMenu}
+                label={
+                  columnNumber in columnLabels
+                    ? columnLabels[columnNumber]
+                    : null
+                }
+                deleteColumn={deleteColumn}
+                addColumnLeft={addColumnLeft}
+                data={props.data}
+              />
+            ) : (
+              <ColumnIndicator
+                key={columnNumber}
+                column={columnNumber}
+                setContextMenu={props.setContextMenu}
+                deleteColumn={deleteColumn}
+                addColumnLeft={addColumnLeft}
+                data={props.data}
+              />
+            )
+          )}
+        </HeaderRow>
+        {range(size.rows).map((rowNumber) => (
+          <Row key={rowNumber} row={rowNumber}>
+            {rowLabels ? (
+              <RowIndicator
+                key={rowNumber}
+                label={rowNumber in rowLabels ? rowLabels[rowNumber] : null}
+                row={rowNumber}
+                addRowTop={addRowTop}
+                setContextMenu={props.setContextMenu}
+                deleteRow={deleteRow}
+                data={props.data}
+              />
+            ) : (
+              <RowIndicator
+                key={rowNumber}
+                row={rowNumber}
+                addRowTop={addRowTop}
+                setContextMenu={props.setContextMenu}
+                deleteRow={deleteRow}
+                data={props.data}
+              />
+            )}
+            {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
+        contextOption={contextOption}
+        setContextMenu={props.setContextMenu}
+        // @ts-ignore
+        DataEditor={DataEditor}
+      />
+    ),
+    [DataEditor]
+  );
+
+  const rootNode = React.useMemo(
+    () => (
+      <div className="ff-excel">
+        <div className="ff-excel-header-hider ff-excel-header-column-hider"></div>
+        <div className="ff-excel-header-hider ff-excel-header-row-hider"></div>
+        <div className="ff-excel-toolbar-container">
+          <ExcelToolBar
+            onBold={onBold}
+            onItalic={onItalic}
+            setUnderlineType={setUnderlineType}
+            setColor={setColor}
+            setBorderType={setBorderType}
+            setFontSize={setFontSize}
+            setFontFamily={setFontFamily}
+            setTextAlign={setTextAlign}
+            setBackgroundColor={setBackgroundColor}
+            setFormatePainter={setFormatePainter}
+          />
+        </div>
+        <div
+          ref={rootRef}
+          style={{ height: sheetHeight }}
+          className={classNames('ff-excel-spreadsheet', className)}
+          onKeyPress={(e) => {
+            onKeyPress(e);
+          }}
+          onKeyDown={(e) => {
+            handleKeyDown(e);
+          }}
+          onMouseMove={handleMouseMove}
+        >
+          {tableNode}
+          {activeCellNode}
+          <Selected />
+          <Copied />
+        </div>
+      </div>
+    ),
+    [
+      className,
+      onKeyPress,
+      handleKeyDown,
+      handleMouseMove,
+      tableNode,
+      activeCellNode,
+    ]
+  );
+
+  return (
+    <context.Provider value={reducerElements}>{rootNode}</context.Provider>
+  );
+};
+
+export default Spreadsheet;

package/src/components/Excel/ExcelFile/ExcelFileComponents/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="ff-spreadsheet-table">
+      <colgroup>{columnNodes}</colgroup>
+      <tbody>{children}</tbody>
+    </table>
+  );
+};
+
+export default Table;