3.1 issue142 copy paste

CHANGELOG.md

@@ -399,7 +399,7 @@ Derived properties allow the component to expose complex state that can be usefu
 
 ## RC8 - Improve props typing
 
-    Issue: https://github.com/plotly/dash-table/issues/143    
+    Issue: https://github.com/plotly/dash-table/issues/143
 
 ## RC9 - Sort ascending on first click
 
@@ -410,7 +410,11 @@ Derived properties allow the component to expose complex state that can be usefu
 ## RC10 - Improved props docstrings
 
     Issue: https://github.com/plotly/dash-table/issues/163
-    
+
 ## RC11 - Style as list view
 
     - Fix regressions linked to the style_as_list_view feature / prop
+
+## RC12 - Fix copy/paste behavior when copied rows larger than data
+
+    Issue: https://github.com/plotly/dash-table/issues/142

dash_table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.1.0rc11",
+  "version": "3.1.0rc12",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.1.0rc11",
+  "version": "3.1.0rc12",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

src/dash-table/utils/TableClipboardHelper.ts

@@ -4,8 +4,8 @@ import SheetClip from 'sheetclip';
 import Clipboard from 'core/Clipboard';
 import Logger from 'core/Logger';
 
-import { ActiveCell, Columns, Data, SelectedCells, ColumnType } from 'dash-table/components/Table/props';
-import isEditable from 'dash-table/derived/cell/isEditable';
+import { ActiveCell, Columns, Data, SelectedCells } from 'dash-table/components/Table/props';
+import applyClipboardToData from './applyClipboardToData';
 
 export default class TableClipboardHelper {
     public static toClipboard(e: any, selectedCells: SelectedCells, columns: Columns, data: Data) {
@@ -36,74 +36,23 @@ export default class TableClipboardHelper {
         overflowColumns: boolean = true,
         overflowRows: boolean = true
     ): { data: Data, columns: Columns } | void {
-        const text = Clipboard.get(ev);
+        const text = Clipboard.get(ev as ClipboardEvent);
         Logger.trace('TableClipboard -- get clipboard data: ', text);
 
         if (!text) {
             return;
         }
 
-        if (!overflowRows) {
-            Logger.debug(`Clipboard -- Sorting or filtering active, do not create new rows`);
-        }
-
-        if (!overflowColumns) {
-            Logger.debug(`Clipboard -- Do not create new columns`);
-        }
-
         const values = SheetClip.prototype.parse(text);
 
-        let newData = data;
-        const newColumns = columns;
-
-        if (overflowColumns && values[0].length + activeCell[1] >= columns.length) {
-            for (
-                let i = columns.length;
-                i < values[0].length + activeCell[1];
-                i++
-            ) {
-                newColumns.push({
-                    id: `Column ${i + 1}`,
-                    name: `Column ${i + 1}`,
-                    type: ColumnType.Text
-                });
-                newData.forEach(row => (row[`Column ${i}`] = ''));
-            }
-        }
-
-        const realActiveRow = derived_viewport_indices[activeCell[0]];
-        if (overflowRows && values.length + realActiveRow >= data.length) {
-            const emptyRow: any = {};
-            columns.forEach(c => (emptyRow[c.id] = ''));
-            newData = R.concat(
-                newData,
-                R.repeat(
-                    emptyRow,
-                    values.length + realActiveRow - data.length
-                )
-            );
-        }
-
-        values.forEach((row: string[], i: number) =>
-            row.forEach((cell: string, j: number) => {
-                const iOffset = activeCell[0] + i;
-                if (derived_viewport_indices.length <= activeCell[0] + i) {
-                    return;
-                }
-                const iRealCell = derived_viewport_indices[iOffset];
-
-                const jOffset = activeCell[1] + j;
-                const col = newColumns[jOffset];
-                if (col && isEditable(true, col)) {
-                    newData = R.set(
-                        R.lensPath([iRealCell, col.id]),
-                        cell,
-                        newData
-                    );
-                }
-            })
+        return applyClipboardToData(
+            values,
+            activeCell,
+            derived_viewport_indices,
+            columns,
+            data,
+            overflowColumns,
+            overflowRows
         );
-
-        return { data: newData, columns: newColumns };
     }
 }

src/dash-table/utils/applyClipboardToData.ts

@@ -0,0 +1,86 @@
+import * as R from 'ramda';
+
+import Logger from 'core/Logger';
+
+import { ActiveCell, Columns, Data, ColumnType } from 'dash-table/components/Table/props';
+import isEditable from 'dash-table/derived/cell/isEditable';
+
+export default (
+    values: string[][],
+    activeCell: ActiveCell,
+    derived_viewport_indices: number[],
+    columns: Columns,
+    data: Data,
+    overflowColumns: boolean = true,
+    overflowRows: boolean = true
+): { data: Data, columns: Columns } | void => {
+    if (!overflowRows) {
+        Logger.debug(`Clipboard -- Sorting or filtering active, do not create new rows`);
+    }
+
+    if (!overflowColumns) {
+        Logger.debug(`Clipboard -- Do not create new columns`);
+    }
+
+    let newData = data;
+    const newColumns = columns;
+
+    if (overflowColumns && values[0].length + activeCell[1] >= columns.length) {
+        for (
+            let i = columns.length;
+            i < values[0].length + activeCell[1];
+            i++
+        ) {
+            newColumns.push({
+                id: `Column ${i + 1}`,
+                name: `Column ${i + 1}`,
+                type: ColumnType.Text
+            });
+            newData.forEach(row => (row[`Column ${i}`] = ''));
+        }
+    }
+
+    const realActiveRow = derived_viewport_indices[activeCell[0]];
+    if (overflowRows && values.length + realActiveRow >= data.length) {
+        const emptyRow: any = {};
+        columns.forEach(c => (emptyRow[c.id] = ''));
+        newData = R.concat(
+            newData,
+            R.repeat(
+                emptyRow,
+                values.length + realActiveRow - data.length
+            )
+        );
+    }
+
+    const lastEntry = derived_viewport_indices.slice(-1)[0] || 0;
+    const viewportSize = derived_viewport_indices.length;
+
+    values.forEach((row: string[], i: number) =>
+        row.forEach((cell: string, j: number) => {
+            const viewportIndex = activeCell[0] + i;
+
+            let iRealCell: number | undefined = viewportSize > viewportIndex ?
+                derived_viewport_indices[viewportIndex] :
+                overflowRows ?
+                    lastEntry + (viewportIndex - viewportSize + 1) :
+                    undefined;
+
+            if (iRealCell === undefined) {
+                return;
+            }
+
+            const jOffset = activeCell[1] + j;
+            const col = newColumns[jOffset];
+            if (col && isEditable(true, col)) {
+                newData = R.set(
+                    R.lensPath([iRealCell, col.id]),
+                    cell,
+                    newData
+                );
+            }
+        })
+    );
+
+    return { data: newData, columns: newColumns };
+};

tests/cypress/tests/unit/clipboard_test.ts

@@ -0,0 +1,172 @@
+import * as R from 'ramda';
+
+import applyClipboardToData from 'dash-table/utils/applyClipboardToData';
+
+describe('clipboard', () => {
+    describe('with column/row overflow allowed', () => {
+        it('pastes one line at [0, 0] in one line df', () => {
+            const res = applyClipboardToData(
+                R.range(0, 1).map(value => [`${value}`]),
+                [0, 0],
+                R.range(0, 1),
+                ['c1'].map(id => ({ id: id, name: id })),
+                R.range(0, 1).map(() => ({ c1: 'c1' })),
+                true,
+                true
+            );
+
+            expect(res).to.not.equal(undefined);
+
+            if (res) {
+                expect(res.data.length).to.equal(1);
+                expect(res.data[0].c1).to.equal('0');
+            }
+        });
+
+        it('pastes two lines at [0, 0] in one line df', () => {
+            const res = applyClipboardToData(
+                R.range(0, 2).map(value => [`${value}`]),
+                [0, 0],
+                R.range(0, 1),
+                ['c1'].map(id => ({ id: id, name: id })),
+                R.range(0, 1).map(() => ({ c1: 'c1' })),
+                true,
+                true
+            );
+
+            expect(res).to.not.equal(undefined);
+
+            if (res) {
+                expect(res.data.length).to.equal(2);
+                expect(res.data[0].c1).to.equal('0');
+                expect(res.data[1].c1).to.equal('1');
+            }
+        });
+
+        it('pastes ten lines at [0, 0] in three line df', () => {
+            const res = applyClipboardToData(
+                R.range(0, 10).map(value => [`${value}`]),
+                [0, 0],
+                R.range(0, 3),
+                ['c1'].map(id => ({ id: id, name: id })),
+                R.range(0, 3).map(() => ({ c1: 'c1' })),
+                true,
+                true
+            );
+
+            expect(res).to.not.equal(undefined);
+
+            if (res) {
+                expect(res.data.length).to.equal(10);
+                for (let i = 0; i < 10; ++i) {
+                    expect(res.data[i].c1).to.equal(`${i}`);
+                }
+            }
+        });
+
+        it('pastes ten lines at [1, 0] in three line df', () => {
+            const res = applyClipboardToData(
+                R.range(0, 10).map(value => [`${value}`]),
+                [1, 0],
+                R.range(0, 3),
+                ['c1'].map(id => ({ id: id, name: id })),
+                R.range(0, 3).map(() => ({ c1: 'c1' })),
+                true,
+                true
+            );
+
+            expect(res).to.not.equal(undefined);
+
+            if (res) {
+                expect(res.data.length).to.equal(11);
+                expect(res.data[0].c1).to.equal('c1');
+                for (let i = 0; i < 10; ++i) {
+                    expect(res.data[i + 1].c1).to.equal(`${i}`);
+                }
+            }
+        });
+    });
+
+    describe('with column overflow allowed', () => {
+        it('pastes one line at [0, 0] in one line df', () => {
+            const res = applyClipboardToData(
+                R.range(0, 1).map(value => [`${value}`]),
+                [0, 0],
+                R.range(0, 1),
+                ['c1'].map(id => ({ id: id, name: id })),
+                R.range(0, 1).map(() => ({ c1: 'c1' })),
+                true,
+                false
+            );
+
+            expect(res).to.not.equal(undefined);
+
+            if (res) {
+                expect(res.data.length).to.equal(1);
+                expect(res.data[0].c1).to.equal('0');
+            }
+        });
+
+        it('pastes two lines at [0, 0] in one line df', () => {
+            const res = applyClipboardToData(
+                R.range(0, 2).map(value => [`${value}`]),
+                [0, 0],
+                R.range(0, 1),
+                ['c1'].map(id => ({ id: id, name: id })),
+                R.range(0, 1).map(() => ({ c1: 'c1' })),
+                true,
+                false
+            );
+
+            expect(res).to.not.equal(undefined);
+
+            if (res) {
+                expect(res.data.length).to.equal(1);
+                expect(res.data[0].c1).to.equal('0');
+            }
+        });
+
+        it('pastes ten lines at [0, 0] in three line df', () => {
+            const res = applyClipboardToData(
+                R.range(0, 10).map(value => [`${value}`]),
+                [0, 0],
+                R.range(0, 3),
+                ['c1'].map(id => ({ id: id, name: id })),
+                R.range(0, 3).map(() => ({ c1: 'c1' })),
+                true,
+                false
+            );
+
+            expect(res).to.not.equal(undefined);
+
+            if (res) {
+                expect(res.data.length).to.equal(3);
+                for (let i = 0; i < 3; ++i) {
+                    expect(res.data[i].c1).to.equal(`${i}`);
+                }
+            }
+        });
+
+        it('pastes ten lines at [1, 0] in three line df', () => {
+            const res = applyClipboardToData(
+                R.range(0, 10).map(value => [`${value}`]),
+                [1, 0],
+                R.range(0, 3),
+                ['c1'].map(id => ({ id: id, name: id })),
+                R.range(0, 3).map(() => ({ c1: 'c1' })),
+                true,
+                false
+            );
+
+            expect(res).to.not.equal(undefined);
+
+            if (res) {
+                expect(res.data.length).to.equal(3);
+                expect(res.data[0].c1).to.equal('c1');
+                for (let i = 0; i < 2; ++i) {
+                    expect(res.data[i + 1].c1).to.equal(`${i}`);
+                }
+            }
+        });
+    });
+});