Issue 280 - Refactor cell content

.gitignore

@@ -8,7 +8,7 @@
 
 # testing
 /coverage
-/tests/e2e/cypress/screenshots/**
+/tests/cypress/screenshots/**
 /storybook-static/**
 
 # misc
@@ -36,4 +36,4 @@ dist
 *__pycache__*
 __pycache__/
 
-*.pyc
+*.pyc

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [3.1.9-rc1] - 2018-12-03
+### Changed
+- Refactoring in preparation for data types
+
 ## [3.1.8] - 2018-12-04
 ### Added
 - Virtualization [#234](https://github.com/plotly/dash-table/issues/234)
@@ -12,6 +16,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Update dependencies [#274](https://github.com/plotly/dash-table/pull/274)
 - Update dependencies [#251](https://github.com/plotly/dash-table/pull/251)
 
+
 ## [3.1.7] - 2018-11-19
 ### Fixed
 - Visual offset with vertical scroll [#216](https://github.com/plotly/dash-table/issues/216)

dash_table/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.1.8",
+  "version": "3.1.9-rc1",
   "description": "Dash table",
   "main": "dash_table/bundle.js",
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.1.8",
+  "version": "3.1.9-rc1",
   "description": "Dash table",
   "main": "dash_table/bundle.js",
   "scripts": {

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

@@ -0,0 +1,78 @@
+import React, {
+    ChangeEvent,
+    PureComponent
+} from 'react';
+import Dropdown from 'react-select';
+
+import DOM from 'core/browser/DOM';
+
+import dropdownHelper from 'dash-table/components/dropdownHelper';
+
+import { IDropdownOptions } from './types';
+
+interface IProps {
+    active: boolean;
+    clearable?: boolean;
+    dropdown: IDropdownOptions;
+    onChange: (e: ChangeEvent) => void;
+    value: any;
+}
+
+export default class CellDropdown extends PureComponent<IProps> {
+    render() {
+        const {
+            clearable,
+            dropdown,
+            onChange,
+            value
+        } = this.props;
+
+        return (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
+            <div className='dropdown-cell-value-shadow cell-value-shadow'>
+                {(dropdown.find(entry => entry.value === value) || { label: undefined }).label}
+            </div>
+            <Dropdown
+                ref='dropdown'
+                clearable={clearable}
+                onChange={(newValue: any) => {
+                    onChange(newValue ? newValue.value : newValue);
+                }}
+                onOpen={this.handleOpenDropdown}
+                options={dropdown}
+                placeholder={''}
+                value={value}
+            />
+        </div>);
+    }
+
+    componentDidUpdate() {
+        this.setFocus();
+    }
+
+    componentDidMount() {
+        this.setFocus();
+    }
+
+    private setFocus() {
+        const { active } = this.props;
+        if (!active) {
+            return;
+        }
+
+        const dropdown = this.refs.dropdown as any;
+
+        if (dropdown && document.activeElement !== dropdown) {
+            // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
+            const tdParent = DOM.getFirstParentOfType(dropdown.wrapper, 'td');
+            if (tdParent) {
+                tdParent.focus();
+            }
+        }
+    }
+
+    private handleOpenDropdown = () => {
+        const { dropdown }: { [key: string]: any } = this.refs;
+
+        dropdownHelper(dropdown.wrapper.querySelector('.Select-menu-outer'));
+    }
+}

src/dash-table/components/CellFactory.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { ICellFactoryProps } from 'dash-table/components/Table/props';
 import derivedCellWrappers from 'dash-table/derived/cell/wrappers';
-import derivedCellInputs from 'dash-table/derived/cell/inputs';
+import derivedCellContents from 'dash-table/derived/cell/contents';
 import derivedCellOperations from 'dash-table/derived/cell/operations';
 import derivedCellStyles from 'dash-table/derived/cell/wrapperStyles';
 import derivedDropdowns from 'dash-table/derived/cell/dropdowns';
@@ -12,7 +12,7 @@ import { matrixMap3 } from 'core/math/matrixZipMap';
 import { arrayMap } from 'core/math/arrayZipMap';
 
 export default class CellFactory {
-    private readonly cellInputs = derivedCellInputs();
+    private readonly cellContents = derivedCellContents();
     private readonly cellOperations = derivedCellOperations();
     private readonly cellDropdowns = derivedDropdowns();
 
@@ -92,23 +92,22 @@ export default class CellFactory {
             dropdown_properties
         );
 
-        const inputs = this.cellInputs(
+        const contents = this.cellContents(
             active_cell,
             columns,
             virtualized.data,
             virtualized.offset,
             editable,
             !!is_focused,
-            id,
             dropdowns,
             this.propsFn
         );
 
         const cells = matrixMap3(
             wrappers,
             wrapperStyles,
-            inputs,
-            (w, s, i) => React.cloneElement(w, { children: [i], style: s })
+            contents,
+            (w, s, c) => React.cloneElement(w, { children: [c], style: s })
         );
 
         return arrayMap(