3.1 issue132 readonly tests

CHANGELOG.md

@@ -308,3 +308,7 @@ Derived properties allow the component to expose complex state that can be usefu
 ### Interaction between width, min-width and max-width
 
     Column min-width and max-width do not default to width value is not defined.
+
+## RC5 - Tests and fixes for editable/readonly
+
+    Issue: https://github.com/plotly/dash-table/issues/132

dash_table/package.json

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

demo/data.js

@@ -64,12 +64,32 @@ export const mockData = unpackIntoColumnsAndDataFrames([
         )
     },
 
+    {
+        id: 'bbb-readonly',
+        name: ['', 'Weather', 'Climate-RO'],
+        type: 'dropdown',
+        editable: false,
+        width: 200,
+        data: gendata(
+            i => ['Humid', 'Wet', 'Snowy', 'Tropical Beaches'][i % 4]
+        )
+    },
+
     {
         id: 'aaa',
         name: ['', 'Weather', 'Temperature'],
         type: 'numeric',
         width: 150,
         data: gendata(i => i + 1),
+    },
+
+    {
+        id: 'aaa-readonly',
+        name: ['', 'Weather', 'Temperature-RO'],
+        type: 'numeric',
+        editable: false,
+        width: 150,
+        data: gendata(i => i + 1),
     }
 ]);
 

package.json

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

src/dash-table/components/CellInput/index.tsx

@@ -40,14 +40,33 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
 
     private renderDropdown() {
         const {
+            active,
             clearable,
             dropdown,
+            editable,
+            focused,
             onChange,
+            onClick,
+            onDoubleClick,
             value
         } = this.propsWithDefaults;
 
-        return !dropdown ?
-            this.renderValue() :
+        const classes = [
+            ...(active ? ['input-active'] : []),
+            ...(focused ? ['focused'] : ['unfocused']),
+            ...['dash-cell-value']
+        ];
+
+        const attributes = {
+            className: classes.join(' '),
+            onClick: onClick,
+            onDoubleClick: onDoubleClick
+        };
+
+        const readonly = !editable;
+
+        return !dropdown || readonly ?
+            this.renderValue(attributes) :
             (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
                 {this.renderValue(
                     { className: 'dropdown-cell-value-shadow cell-value-shadow' },
@@ -70,6 +89,7 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
     private renderInput() {
         const {
             active,
+            editable,
             focused,
             onClick,
             onDoubleClick,
@@ -88,7 +108,7 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
             onDoubleClick: onDoubleClick
         };
 
-        const readonly = !active && this.state.value === this.props.value;
+        const readonly = (!active && this.state.value === this.props.value) || !editable;
 
         return readonly ?
             this.renderValue(attributes) :

src/dash-table/components/ControlledTable/index.tsx

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import * as R from 'ramda';
 import Stylesheet from 'core/Stylesheet';
-import { colIsEditable } from 'dash-table/components/derivedState';
 import {
     KEY_CODES,
     isCtrlMetaKey,
@@ -21,6 +20,7 @@ import dropdownHelper from 'dash-table/components/dropdownHelper';
 
 import derivedTable from 'dash-table/derived/table';
 import derivedTableFragments from 'dash-table/derived/table/fragments';
+import isEditable from 'dash-table/derived/cell/isEditable';
 
 const sortNumerical = R.sort<number>((a, b) => a - b);
 
@@ -208,7 +208,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
         if (
             e.keyCode === KEY_CODES.ENTER &&
             !is_focused &&
-            colIsEditable(editable, columns[active_cell[1]])
+            isEditable(editable, columns[active_cell[1]])
         ) {
             setProps({ is_focused: true });
             return;
@@ -235,7 +235,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
             // if we have any non-meta key enter editable mode
 
             !this.props.is_focused &&
-            colIsEditable(editable, columns[active_cell[1]]) &&
+            isEditable(editable, columns[active_cell[1]]) &&
             !isMetaKey(e.keyCode)
         ) {
             setProps({ is_focused: true });
@@ -378,7 +378,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
         );
 
         realCells.forEach(cell => {
-            if (colIsEditable(editable, columns[cell[1]])) {
+            if (isEditable(editable, columns[cell[1]])) {
                 newDataframe = R.set(
                     R.lensPath([cell[0], columns[cell[1]].id]),
                     '',
@@ -620,7 +620,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
             id,
             content_style,
             n_fixed_columns,
-            n_fixed_rows,
+            n_fixed_rows
         } = this.props;
 
         const classes = [

src/dash-table/derived/cell/inputs.tsx

@@ -14,6 +14,7 @@ import {
 import CellInput from 'dash-table/components/CellInput';
 import derivedCellEventHandlerProps from 'dash-table/derived/cell/eventHandlerProps';
 import isActiveCell from 'dash-table/derived/cell/isActive';
+import isEditable from './isEditable';
 
 const mapDataframe = R.addIndex<Datum, JSX.Element[]>(R.map);
 const mapRow = R.addIndex<IVisibleColumn, JSX.Element>(R.map);
@@ -43,7 +44,7 @@ const getter = (
                 clearable={column.clearable}
                 datum={datum}
                 dropdown={dropdown}
-                editable={editable}
+                editable={isEditable(editable, column)}
                 focused={isFocused}
                 property={column.id}
                 tableId={tableId}

src/dash-table/derived/cell/isEditable.ts

@@ -0,0 +1,6 @@
+import { IVisibleColumn } from 'dash-table/components/Table/props';
+
+export default (
+    editable: boolean,
+    column: IVisibleColumn
+): boolean => editable && (column.editable === undefined || column.editable);

src/dash-table/derived/cell/wrappers.tsx

@@ -7,6 +7,7 @@ import Cell from 'dash-table/components/Cell';
 import isActiveCell from 'dash-table/derived/cell/isActive';
 import isSelectedCell from 'dash-table/derived/cell/isSelected';
 import memoizerCache from 'core/memoizerCache';
+import isEditable from './isEditable';
 
 type Key = [number, number];
 type ElementCacheFn = (
@@ -35,7 +36,7 @@ function getter(
                     'dash-cell' +
                     ` column-${columnIndex}` +
                     (active ? ' focused' : '') +
-                    (!editable ? ' cell--uneditable' : '') +
+                    (!isEditable(editable, column) ? ' cell--uneditable' : '') +
                     (selected ? ' cell--selected' : '') +
                     (column.type === ColumnType.Dropdown ? ' dropdown' : '');
 
@@ -44,7 +45,7 @@ function getter(
             columns
         ),
         dataframe
-    )
+    );
 }
 
 function decorator(_id: string): ((

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 { colIsEditable } from 'dash-table/components/derivedState';
 import { ActiveCell, Columns, Dataframe, SelectedCells, ColumnType } from 'dash-table/components/Table/props';
+import isEditable from 'dash-table/derived/cell/isEditable';
 
 export default class TableClipboardHelper {
     public static toClipboard(e: any, selectedCells: SelectedCells, columns: Columns, dataframe: Dataframe) {
@@ -94,7 +94,7 @@ export default class TableClipboardHelper {
 
                 const jOffset = activeCell[1] + j;
                 const col = newColumns[jOffset];
-                if (col && colIsEditable(true, col)) {
+                if (col && isEditable(true, col)) {
                     newDataframe = R.set(
                         R.lensPath([iRealCell, col.id]),
                         cell,

tests/cypress/src/DashTable.ts

@@ -3,6 +3,10 @@ export default class DashTable {
         return cy.get(`#table tbody tr td.column-${column}`).eq(row);
     }
 
+    static getCellById(row: number, column: number | string) {
+        return cy.get(`#table tbody tr td[data-dash-column="${column}"]`).eq(row);
+    }
+
     static getDelete(row: number) {
         return cy.get(`#table tbody tr td.dash-delete-cell`).eq(row);
     }

tests/cypress/tests/standalone/edit_cell_test.ts

@@ -2,11 +2,31 @@ import DashTable from 'cypress/DashTable';
 import DOM from 'cypress/DOM';
 import Key from 'cypress/Key';
 
-describe('edit cell', () => {
+describe('edit', () => {
     beforeEach(() => {
         cy.visit('http://localhost:8080');
     });
 
+    describe('readonly cell', () => {
+        describe('with input', () => {
+            it('does not modify value', () => {
+                DashTable.getCellById(0, 'aaa-readonly').click();
+                DashTable.getCellById(0, 'aaa-readonly').within(() => {
+                    cy.get('input').should('not.exist');
+                });
+            });
+        });
+
+        describe('with dropdown', () => {
+            it('does not modify value', () => {
+                DashTable.getCellById(0, 'bbb-readonly').click();
+                DashTable.getCellById(0, 'bbb-readonly').within(() => {
+                    cy.get('.Select-value-label').should('not.exist');
+                });
+            });
+        });
+    });
+
     it('can delete dropdown', () => {
         DashTable.getCell(0, 6).trigger('mouseover');
         DashTable.getCell(0, 6).within(() => cy.get('.Select-clear').click());
@@ -63,27 +83,27 @@ describe('edit cell', () => {
     });
 
     it('can edit on 2nd page', () => {
-        DashTable.getCell(0, 0).click();
-        DashTable.getCell(0, 0).within(() => cy.get('input').should('have.value', '1'));
+        DashTable.getCell(0, 1).click();
+        DashTable.getCell(0, 1).within(() => cy.get('input').should('have.value', '1'));
         cy.get('button.next-page').click();
-        DashTable.getCell(0, 0).within(() => cy.get('input').should('have.value', '251'));
+        DashTable.getCell(0, 1).within(() => cy.get('input').should('have.value', '251'));
 
         DOM.focused.type(`abc${Key.Enter}`);
-        DashTable.getCell(0, 0).click();
-        DashTable.getCell(0, 0).within(() => cy.get('input').should('have.value', 'abc'));
+        DashTable.getCell(0, 1).click();
+        DashTable.getCell(0, 1).within(() => cy.get('input').should('have.value', 'abc'));
     });
 
     it('can delete then edit on 2nd page', () => {
-        DashTable.getCell(0, 0).click();
-        DashTable.getCell(0, 0).within(() => cy.get('input').should('have.value', '1'));
+        DashTable.getCell(0, 1).click();
+        DashTable.getCell(0, 1).within(() => cy.get('input').should('have.value', '1'));
         cy.get('button.next-page').click();
-        DashTable.getCell(0, 0).within(() => cy.get('input').should('have.value', '251'));
+        DashTable.getCell(0, 1).within(() => cy.get('input').should('have.value', '251'));
         DashTable.getDelete(0).click();
-        DashTable.getCell(0, 0).within(() => cy.get('input').should('have.value', '252'));
+        DashTable.getCell(0, 1).within(() => cy.get('input').should('have.value', '252'));
 
         DOM.focused.type(`abc${Key.Enter}`);
-        DashTable.getCell(0, 0).click();
-        DashTable.getCell(0, 0).within(() => cy.get('input').should('have.value', 'abc'));
+        DashTable.getCell(0, 1).click();
+        DashTable.getCell(0, 1).within(() => cy.get('input').should('have.value', 'abc'));
     });
 
     // https://github.com/plotly/dash-table/issues/50

tests/visual/percy-storybook/fixtures.ts

@@ -27,6 +27,7 @@ export default [
                 {'column-1': 'boston'}
             ],
             n_fixed_rows: 1,
+            editable: true,
             table_style: [{
                 selector: '.dash-spreadsheet.dash-freeze-top',
                 rule: 'height: 100px;'
@@ -150,6 +151,7 @@ export default [
                 {'column-1': 'mtl'},
                 {'column-1': 'boston'}
             ],
+            editable: true,
             id: 'table'
         }
     },
@@ -211,6 +213,7 @@ export default [
                 {'column-1': 'mtl', 'column-2': 'mtl', 'column-3': 'mtl'},
                 {'column-1': 'mtl', 'column-2': 'mtl', 'column-3': 'mtl'}
             ],
+            editable: true,
             id: 'table'
         }
     },
@@ -274,6 +277,7 @@ export default [
                     region: 'costa-rica'
                 }
             ],
+            editable: true,
             id: 'table'
         }
     },