- rename selected_cell to selected_cells (#181)

Author: Marc-Andre-Rivet

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 - Rename selected_cell -> selected_cells
+
+    Issue: https://github.com/plotly/dash-table/issues/177

dash_table/bundle.js

@@ -310,7 +310,7 @@
           "computed": false
         }
       },
-      "selected_cell": {
+      "selected_cells": {
         "type": {
           "name": "arrayOf",
           "value": {
@@ -321,7 +321,7 @@
           }
         },
         "required": false,
-        "description": "`selected_cell` represents the set of cells that are selected.\nThis is similar to `active_cell` except that it contains multiple\ncells. Multiple cells can be selected by holding down shift and\nclicking on a different cell or holding down shift and navigating\nwith the arrow keys.\n\nNOTE - This property may change in the future, subscribe to\n[https://github.com/plotly/dash-table/issues/177](https://github.com/plotly/dash-table/issues/177)\nfor more details.",
+        "description": "`selected_cells` represents the set of cells that are selected.\nThis is similar to `active_cell` except that it contains multiple\ncells. Multiple cells can be selected by holding down shift and\nclicking on a different cell or holding down shift and navigating\nwith the arrow keys.\n\nNOTE - This property may change in the future, subscribe to\n[https://github.com/plotly/dash-table/issues/177](https://github.com/plotly/dash-table/issues/177)\nfor more details.",
         "defaultValue": {
           "value": "[[]]",
           "computed": false

dash_table/demo.js

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

dash_table/metadata.json

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

dash_table/package.json

@@ -75,7 +75,7 @@ export const defaultProps = {
     columns: [],
     editable: false,
     active_cell: [],
-    selected_cell: [[]],
+    selected_cells: [[]],
     selected_rows: [],
     row_selectable: false,
 
@@ -365,7 +365,7 @@ export const propTypes = {
     row_selectable: PropTypes.oneOf(['single', 'multi', false]),
 
     /**
-     * `selected_cell` represents the set of cells that are selected.
+     * `selected_cells` represents the set of cells that are selected.
      * This is similar to `active_cell` except that it contains multiple
      * cells. Multiple cells can be selected by holding down shift and
      * clicking on a different cell or holding down shift and navigating
@@ -375,7 +375,7 @@ export const propTypes = {
      * [https://github.com/plotly/dash-table/issues/177](https://github.com/plotly/dash-table/issues/177)
      * for more details.
      */
-    selected_cell: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
+    selected_cells: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
 
     /**
      * `selected_rows` contains the indices of the rows that

package.json

@@ -40,7 +40,7 @@ export default class CellFactory {
             is_focused,
             row_deletable,
             row_selectable,
-            selected_cell,
+            selected_cells,
             selected_rows,
             setProps,
             style_cell,
@@ -66,7 +66,7 @@ export default class CellFactory {
             columns,
             viewport.data,
             editable,
-            selected_cell
+            selected_cells
         );
 
         const relevantStyles = this.relevantStyles(

src/dash-table/Table.js

@@ -64,10 +64,10 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
 
     componentDidMount() {
         if (
-            this.props.selected_cell.length &&
-            !R.contains(this.props.active_cell, this.props.selected_cell)
+            this.props.selected_cells.length &&
+            !R.contains(this.props.active_cell, this.props.selected_cells)
         ) {
-            this.props.setProps({ active_cell: this.props.selected_cell[0] });
+            this.props.setProps({ active_cell: this.props.selected_cells[0] });
         }
 
         this.applyStyle();
@@ -251,7 +251,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
         const {
             active_cell,
             columns,
-            selected_cell,
+            selected_cells,
             setProps,
             viewport
         } = this.props;
@@ -268,7 +268,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
         // with the "is_focused" prop. We should find the better way.
         this.$el.focus();
 
-        const hasSelection = selected_cell.length > 1;
+        const hasSelection = selected_cells.length > 1;
         const isEnterOrTab =
             e.keyCode === KEY_CODES.ENTER || e.keyCode === KEY_CODES.TAB;
 
@@ -294,7 +294,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
             });
             setProps({
                 is_focused: false,
-                selected_cell: [nextCell],
+                selected_cells: [nextCell],
                 active_cell: nextCell
             });
             return;
@@ -304,8 +304,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
         // with shift.
         let targetCells: any[] = [];
         let removeCells: any[] = [];
-        const selectedRows = sortNumerical(R.uniq(R.pluck(0, selected_cell)));
-        const selectedCols = sortNumerical(R.uniq(R.pluck(1, selected_cell)));
+        const selectedRows = sortNumerical(R.uniq(R.pluck(0, selected_cells)));
+        const selectedCols = sortNumerical(R.uniq(R.pluck(1, selected_cells)));
 
         const minRow = selectedRows[0];
         const minCol = selectedCols[0];
@@ -352,11 +352,11 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
 
         const newSelectedCell = R.without(
             removeCells,
-            R.uniq(R.concat(targetCells, selected_cell))
+            R.uniq(R.concat(targetCells, selected_cells))
         );
         setProps({
             is_focused: false,
-            selected_cell: newSelectedCell
+            selected_cells: newSelectedCell
         });
     }
 
@@ -365,7 +365,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
             columns,
             data,
             editable,
-            selected_cell,
+            selected_cells,
             setProps,
             viewport
         } = this.props;
@@ -376,7 +376,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
 
         const realCells: [number, number][] = R.map(
             cell => [viewport.indices[cell[0]], cell[1]] as [number, number],
-            selected_cell
+            selected_cells
         );
 
         realCells.forEach(cell => {
@@ -395,7 +395,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
     }
 
     getNextCell = (event: any, { restrictToSelection, currentCell }: any) => {
-        const { columns, selected_cell, viewport } = this.props;
+        const { columns, selected_cells, viewport } = this.props;
 
         const e = event;
 
@@ -404,7 +404,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
                 return restrictToSelection
                     ? selectionCycle(
                         [currentCell[0], currentCell[1] - 1],
-                        selected_cell
+                        selected_cells
                     )
                     : [
                         currentCell[0],
@@ -416,7 +416,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
                 return restrictToSelection
                     ? selectionCycle(
                         [currentCell[0], currentCell[1] + 1],
-                        selected_cell
+                        selected_cells
                     )
                     : [
                         currentCell[0],
@@ -427,7 +427,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
                 return restrictToSelection
                     ? selectionCycle(
                         [currentCell[0] - 1, currentCell[1]],
-                        selected_cell
+                        selected_cells
                     )
                     : [R.max(0, currentCell[0] - 1), currentCell[1]];
 
@@ -436,7 +436,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
                 return restrictToSelection
                     ? selectionCycle(
                         [currentCell[0] + 1, currentCell[1]],
-                        selected_cell
+                        selected_cells
                     )
                     : [
                         R.min(viewport.data.length - 1, currentCell[0] + 1),
@@ -453,11 +453,11 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
     onCopy = (e: any) => {
         const {
             columns,
-            selected_cell,
+            selected_cells,
             viewport
         } = this.props;
 
-        TableClipboardHelper.toClipboard(e, selected_cell, columns, viewport.data);
+        TableClipboardHelper.toClipboard(e, selected_cells, columns, viewport.data);
         this.$el.focus();
     }
 

src/dash-table/components/CellFactory.tsx

@@ -136,7 +136,7 @@ export default class Table extends Component<PropsWithDefaultsAndDerived> {
 
         if (invalidateSelection) {
             newProps.active_cell = undefined;
-            newProps.selected_cell = undefined;
+            newProps.selected_cells = undefined;
             newProps.selected_rows = undefined;
         }
 

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

@@ -129,7 +129,7 @@ interface IProps {
     n_fixed_rows?: number;
     row_deletable?: boolean;
     row_selectable?: RowSelection;
-    selected_cell?: SelectedCells;
+    selected_cells?: SelectedCells;
     selected_rows?: number[];
     setProps?: SetProps;
     sorting?: Sorting;
@@ -171,7 +171,7 @@ interface IDefaultProps {
     n_fixed_rows: number;
     row_deletable: boolean;
     row_selectable: RowSelection;
-    selected_cell: SelectedCells;
+    selected_cells: SelectedCells;
     selected_rows: number[];
     sorting: Sorting;
     sorting_settings: SortSettings;
@@ -229,7 +229,7 @@ export interface ICellFactoryOptions {
     paginator: IPaginator;
     row_deletable: boolean;
     row_selectable: RowSelection;
-    selected_cell: SelectedCells;
+    selected_cells: SelectedCells;
     selected_rows: number[];
     setProps: SetProps;
     style_cell: Style;

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

@@ -9,11 +9,11 @@ export const handleClick = (propsFn: () => ICellFactoryOptions, idx: number, i:
     const {
         editable,
         is_focused,
-        selected_cell,
+        selected_cells,
         setProps
     } = propsFn();
 
-    const selected = isCellSelected(selected_cell, idx, i);
+    const selected = isCellSelected(selected_cells, idx, i);
 
     if (!editable) {
         return;
@@ -34,13 +34,13 @@ export const handleClick = (propsFn: () => ICellFactoryOptions, idx: number, i:
         active_cell: cellLocation
     };
 
-    const selectedRows = R.uniq(R.pluck(0, selected_cell)).sort((a, b) => a - b);
-    const selectedCols = R.uniq(R.pluck(1, selected_cell)).sort((a, b) => a - b);
+    const selectedRows = R.uniq(R.pluck(0, selected_cells)).sort((a, b) => a - b);
+    const selectedCols = R.uniq(R.pluck(1, selected_cells)).sort((a, b) => a - b);
     const minRow = selectedRows[0];
     const minCol = selectedCols[0];
 
     if (e.shiftKey) {
-        newProps.selected_cell = R.xprod(
+        newProps.selected_cells = R.xprod(
             R.range(
                 R.min(minRow, cellLocation[0]),
                 R.max(minRow, cellLocation[0]) + 1
@@ -51,7 +51,7 @@ export const handleClick = (propsFn: () => ICellFactoryOptions, idx: number, i:
             )
         ) as any;
     } else {
-        newProps.selected_cell = [cellLocation];
+        newProps.selected_cells = [cellLocation];
     }
 
     setProps(newProps);
@@ -73,7 +73,7 @@ export const handleDoubleClick = (propsFn: () => ICellFactoryOptions, idx: numbe
     if (!is_focused) {
         e.preventDefault();
         const newProps = {
-            selected_cell: [cellLocation],
+            selected_cells: [cellLocation],
             active_cell: cellLocation,
             is_focused: true
         };

src/dash-table/components/Table/props.ts

@@ -45,7 +45,7 @@ export function deleteColumn(column, columns, headerRowIndex, props) {
         // trying to delete
         active_cell: [],
         end_cell: [],
-        selected_cell: [],
+        selected_cells: [],
         start_cell: [0]
     }
 }

src/dash-table/handlers/cellEvents.ts

@@ -1,8 +1,8 @@
 import * as R from 'ramda';
 
-export function selectionCycle(nextCell, selected_cell) {
-    const selectedRows = R.uniq(R.pluck(0, selected_cell)).sort((a, b) => a - b);
-    const selectedCols = R.uniq(R.pluck(1, selected_cell)).sort((a, b) => a - b);
+export function selectionCycle(nextCell, selected_cells) {
+    const selectedRows = R.uniq(R.pluck(0, selected_cells)).sort((a, b) => a - b);
+    const selectedCols = R.uniq(R.pluck(1, selected_cells)).sort((a, b) => a - b);
 
     const minRow = selectedRows[0];
     const minCol = selectedCols[0];

src/dash-table/utils/actions.js

@@ -181,7 +181,7 @@ storiesOf('DashTable/Hidden Columns', module)
         id='table'
         data={data}
         columns={hiddenColumns}
-        selected_cell={[[1, 1], [1, 2], [2, 1], [2, 2]]}
+        selected_cells={[[1, 1], [1, 2], [2, 1], [2, 2]]}
         style_data_conditional={style_data_conditional}
     />));