Add onPaste event and a flag to control the missing rows addition when pasting a data

src/Spreadsheet.tsx

@@ -70,6 +70,11 @@ export type Props<CellType extends Types.CellBase> = {
    * Defaults to: `false`.
    */
   hideColumnIndicators?: boolean;
+  /**
+   * If set to true, automatically creates missing rows when pasting from clipboard
+   * Defaults to: `true`
+   */
+  autoPadRowsOnPaste?: boolean;
   // Custom Components
   /** Component rendered above each column. */
   ColumnIndicator?: Types.ColumnIndicatorComponent;
@@ -105,6 +110,8 @@ export type Props<CellType extends Types.CellBase> = {
   onSelect?: (selected: Point.Point[]) => void;
   /** Callback called when Spreadsheet's active cell changes. */
   onActivate?: (active: Point.Point) => void;
+  /** Callback called when Spreadhseet data pasted */
+  onPaste?: (selected: Point.Point[]) => void;
   /** Callback called when the Spreadsheet loses focus */
   onBlur?: () => void;
   onCellCommit?: (
@@ -127,6 +134,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     rowLabels,
     hideColumnIndicators,
     hideRowIndicators,
+    autoPadRowsOnPaste = true,
     onKeyDown,
     Table = DefaultTable,
     Row = DefaultRow,
@@ -140,6 +148,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     onChange = () => {},
     onModeChange = () => {},
     onSelect = () => {},
+    onPaste = () => {},
     onActivate = () => {},
     onBlur = () => {},
     onCellCommit = () => {},
@@ -168,6 +177,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const prevStateRef = React.useRef<Types.StoreState<CellType>>({
     ...INITIAL_STATE,
     data: props.data,
+    pasted: null,
     selected: null,
     copied: PointMap.from([]),
     bindings: PointMap.from([]),
@@ -177,8 +187,8 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const copy = React.useCallback(() => dispatch(Actions.copy()), [dispatch]);
   const cut = React.useCallback(() => dispatch(Actions.cut()), [dispatch]);
   const paste = React.useCallback(
-    (data) => dispatch(Actions.paste(data)),
-    [dispatch]
+    (data) => dispatch(Actions.paste(data, autoPadRowsOnPaste)),
+    [dispatch, autoPadRowsOnPaste]
   );
   const onKeyDownAction = React.useCallback(
     (event) => dispatch(Actions.keyDown(event)),
@@ -228,6 +238,13 @@ const Spreadsheet = <CellType extends Types.CellBase>(
       onSelect(points);
     }
 
+    if (state.pasted !== prevState.pasted) {
+      const points = state.pasted
+        ? Array.from(PointRange.iterate(state.pasted))
+        : [];
+      onPaste(points);
+    }
+
     if (state.active !== prevState.active) {
       if (state.active) {
         onActivate(state.active);
@@ -250,6 +267,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     onChange,
     onModeChange,
     onSelect,
+    onPaste,
     rowLabels,
     columnLabels,
   ]);

src/actions.ts

@@ -47,9 +47,14 @@ export const setCellDimensions = createAction<
 export const copy = createAction("COPY");
 export const cut = createAction("CUT");
 export const paste = createAction<
-  (data: string) => { payload: { data: string } },
+  (
+    data: string,
+    autoPadRowsOnPaste: boolean
+  ) => { payload: { data: string; autoPadRowsOnPaste: boolean } },
   "PASTE"
->("PASTE", (data) => ({ payload: { data } }));
+>("PASTE", (data, autoPadRowsOnPaste) => ({
+  payload: { data, autoPadRowsOnPaste },
+}));
 export const edit = createAction("EDIT");
 export const view = createAction("VIEW");
 export const clear = createAction("CLEAR");

src/reducer.ts

@@ -26,6 +26,7 @@ export const INITIAL_STATE: Types.StoreState = {
   dragging: false,
   data: [],
   selected: null,
+  pasted: null,
   copied: PointMap.from([]),
   bindings: PointMap.from([]),
   lastCommit: null,
@@ -110,7 +111,7 @@ const reducer = createReducer(INITIAL_STATE, (builder) => {
     };
   });
   builder.addCase(Actions.paste, (state, action) => {
-    const { data: text } = action.payload;
+    const { data: text, autoPadRowsOnPaste } = action.payload;
     const { active } = state;
     if (!active) {
       return;
@@ -126,8 +127,11 @@ const reducer = createReducer(INITIAL_STATE, (builder) => {
     };
 
     const copiedSize = Matrix.getSize(copiedMatrix);
-    const requiredRows = active.row + copiedSize.rows;
-    const paddedData = Matrix.padRows(state.data, requiredRows);
+    const paddedRowsCount = active.row + copiedSize.rows;
+    const requiredRowsCount = !autoPadRowsOnPaste
+      ? Math.min(paddedRowsCount, state.data.length)
+      : paddedRowsCount;
+    const paddedData = Matrix.padRows(state.data, requiredRowsCount);
 
     const { data, commit } = PointMap.reduce<Accumulator, Types.CellBase>(
       (acc, value, point) => {
@@ -165,13 +169,17 @@ const reducer = createReducer(INITIAL_STATE, (builder) => {
       copied,
       { data: paddedData, commit: [] }
     );
+
+    const selectedRange = PointRange.create(active, {
+      row: autoPadRowsOnPaste ? paddedRowsCount - 1 : requiredRowsCount - 1,
+      column: active.column + copiedSize.columns - 1,
+    });
+
     return {
       ...state,
       data,
-      selected: PointRange.create(active, {
-        row: active.row + copiedSize.rows - 1,
-        column: active.column + copiedSize.columns - 1,
-      }),
+      selected: selectedRange,
+      pasted: selectedRange,
       cut: false,
       hasPasted: true,
       mode: "view",

src/types.ts

@@ -47,6 +47,7 @@ export type Dimensions = {
 export type StoreState<Cell extends CellBase = CellBase> = {
   data: Matrix<Cell>;
   selected: PointRange | null;
+  pasted: PointRange | null;
   copied: PointMap<Cell>;
   hasPasted: boolean;
   cut: boolean;

src/util.test.ts

@@ -60,6 +60,7 @@ const EXAMPLE_STATE: Types.StoreState = {
   dragging: false,
   data: EXAMPLE_DATA,
   selected: null,
+  pasted: null,
   copied: PointMap.from([]),
   bindings: PointMap.from([]),
   lastCommit: null,