Merge branch 'master' into 576-hidden-edits

Author: alexcjohnson

CHANGELOG.md

@@ -14,6 +14,19 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 [#18](https://github.com/plotly/dash-table/issues/18)
 - Fix row selection vertical and horizontal alignment
 
+[#103](https://github.com/plotly/dash-table/issues/103)
+- Simplify usage for multi-line cells and ellipsis. The cell's content now inherits the value of
+`white-space`, `overflow` and `text-overflow` from its parent, making it possible to style
+multi-line & ellipsis with `style_data` and other style props.
+
+[#583](https://github.com/plotly/dash-table/issues/583)
+- Fix regression when editing the content of a cell in a scrolled virtualized table
+
+### Added
+[#319](https://github.com/plotly/dash-table/issues/319)
+- New 'loading_state' prop that contains information about which prop, if any, is being computed.
+- Table no longer allows for editing while the `data` prop is loading.
+
 ## [4.2.0] - 2019-08-27
 ### Added
 [#317](https://github.com/plotly/dash-table/issues/317)

package-lock.json

@@ -25,12 +25,16 @@
     "private::host_dash8081": "python tests/cypress/dash/v_be_page.py",
     "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
     "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
+    "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
+    "private::host_dash8085": "python tests/cypress/dash/v_default.py",
     "private::host_js": "http-server ./dash_table -c-1 --silent",
     "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
     "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
     "private::wait_dash8081": "wait-on http://localhost:8081",
     "private::wait_dash8082": "wait-on http://localhost:8082",
     "private::wait_dash8083": "wait-on http://localhost:8083",
+    "private::wait_dash8084": "wait-on http://localhost:8084",
+    "private::wait_dash8085": "wait-on http://localhost:8085",
     "private::wait_js": "wait-on http://localhost:8080",
     "private::opentests": "cypress open",
     "private::test.python": "python -m unittest tests/unit/format_test.py",
@@ -52,10 +56,10 @@
   "license": "MIT",
   "dependencies": {},
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/polyfill": "^7.4.4",
-    "@babel/preset-env": "^7.5.5",
+    "@babel/cli": "^7.6.0",
+    "@babel/core": "^7.6.0",
+    "@babel/polyfill": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
     "@cypress/webpack-preprocessor": "^4.1.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.22",
@@ -75,13 +79,13 @@
     "core-js": "^3.2.1",
     "css-loader": "^3.2.0",
     "cypress": "^3.4.1",
-    "d3-format": "^1.3.2",
+    "d3-format": "^1.4.1",
     "fast-isnumeric": "^1.1.3",
     "file-loader": "^4.2.0",
     "http-server": "^0.11.1",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
-    "npm": "^6.11.2",
+    "npm": "^6.11.3",
     "npm-run-all": "^4.1.5",
     "papaparse": "^5.0.2",
     "ramda": "^0.26.1",
@@ -93,12 +97,12 @@
     "remarkable": "^2.0.0",
     "sheetclip": "^0.3.0",
     "style-loader": "^1.0.0",
-    "ts-loader": "^6.0.4",
-    "tslint": "^5.19.0",
-    "typescript": "^3.6.2",
+    "ts-loader": "^6.1.0",
+    "tslint": "^5.20.0",
+    "typescript": "^3.6.3",
     "wait-on": "^3.3.0",
-    "webpack": "^4.39.3",
-    "webpack-cli": "^3.3.7",
+    "webpack": "^4.40.0",
+    "webpack-cli": "^3.3.8",
     "webpack-dev-server": "^3.8.0",
     "webpack-preprocessor": "^0.1.12",
     "xlsx": "^0.15.1"

package.json

@@ -55,19 +55,6 @@ class StylesheetFacade {
 export default class Stylesheet {
     private stylesheet: StylesheetFacade;
 
-    static unit(dimension: any, defaultUnit: 'em' | 'rem' | 'px' | '%' = 'px') {
-        if (Stylesheet.hasUnit(dimension)) {
-            return dimension;
-        } else {
-            return `${dimension}${defaultUnit}`;
-        }
-    }
-
-    static hasUnit(dimension: any) {
-        return typeof dimension === 'string' &&
-            /^\d+(\.\d+)?(px|em|rem|%)$/.test(dimension);
-    }
-
     constructor(private readonly prefix: string) {
         this.stylesheet = new StylesheetFacade(`${prefix}-dynamic-inline.css`);
     }

src/core/Stylesheet.ts

@@ -23,6 +23,8 @@ export default class Cell extends Component<ICellProps> {
         const {
             attributes,
             classes,
+            onClick,
+            onDoubleClick,
             onMouseEnter,
             onMouseLeave,
             onMouseMove,
@@ -34,6 +36,8 @@ export default class Cell extends Component<ICellProps> {
             children={(this as any).props.children}
             tabIndex={-1}
             className={classes}
+            onClick={onClick}
+            onDoubleClick={onDoubleClick}
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
             onMouseMove={onMouseMove}

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

@@ -8,6 +8,8 @@ export interface ICellProps {
     active: boolean;
     attributes: IAttributes;
     classes: string;
+    onClick: (e: MouseEvent) => void;
+    onDoubleClick: (e: MouseEvent) => void;
     onMouseEnter: (e: MouseEvent) => void;
     onMouseLeave: (e: MouseEvent) => void;
     onMouseMove: (e: MouseEvent) => void;

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

@@ -16,6 +16,7 @@ interface IProps {
     dropdown?: IDropdownValue[];
     onChange: (e: ChangeEvent) => void;
     value: any;
+    disabled?: boolean;
 }
 
 export default class CellDropdown extends PureComponent<IProps> {
@@ -24,10 +25,14 @@ export default class CellDropdown extends PureComponent<IProps> {
             clearable,
             dropdown,
             onChange,
-            value
+            value,
+            disabled
         } = this.props;
 
-        return (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
+        return (<div
+            className='dash-dropdown-cell-value-container dash-cell-value-container'
+            onClick={this.handleClick}
+        >
             <div className='dropdown-cell-value-shadow cell-value-shadow'>
                 {(dropdown && dropdown.find(entry => entry.value === value) || { label: undefined }).label}
             </div>
@@ -41,6 +46,7 @@ export default class CellDropdown extends PureComponent<IProps> {
                 options={dropdown}
                 placeholder={''}
                 value={value}
+                disabled={disabled}
             />
         </div>);
     }
@@ -53,6 +59,10 @@ export default class CellDropdown extends PureComponent<IProps> {
         this.setFocus();
     }
 
+    private handleClick(e: React.MouseEvent) {
+        e.stopPropagation();
+    }
+
     private setFocus() {
         const { active } = this.props;
         if (!active) {

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

@@ -15,6 +15,8 @@ import { IEdgesMatrices } from 'dash-table/derived/edges/type';
 import { memoizeOne } from 'core/memoizer';
 import memoizerCache from 'core/cache/memoizer';
 
+import dataLoading from 'dash-table/derived/table/data_loading';
+
 export default class CellFactory {
 
     private get props() {
@@ -51,7 +53,8 @@ export default class CellFactory {
             style_data,
             style_data_conditional,
             virtualized,
-            visibleColumns
+            visibleColumns,
+            loading_state
         } = this.props;
 
         const relevantStyles = this.relevantStyles(
@@ -113,12 +116,15 @@ export default class CellFactory {
             selected_cells
         );
 
+        const data_loading = dataLoading(loading_state);
+
         const partialCellContents = this.cellContents.partialGet(
             visibleColumns,
             virtualized.data,
             virtualized.offset,
             !!is_focused,
-            dropdowns
+            dropdowns,
+            data_loading
         );
 
         const cellContents = this.cellContents.get(
@@ -128,7 +134,8 @@ export default class CellFactory {
             virtualized.data,
             virtualized.offset,
             !!is_focused,
-            dropdowns
+            dropdowns,
+            data_loading
         );
 
         const ops = this.getDataOpCells(

src/dash-table/components/CellFactory.tsx

@@ -15,8 +15,6 @@ interface ICellProps {
     className: string;
     focused: boolean;
     onChange: (e: ChangeEvent) => void;
-    onClick: (e: MouseEvent) => void;
-    onDoubleClick: (e: MouseEvent) => void;
     onMouseUp: (e: MouseEvent) => void;
     onPaste: (e: ClipboardEvent<Element>) => void;
     type?: string;
@@ -40,8 +38,6 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
     render() {
         const {
             className,
-            onClick,
-            onDoubleClick,
             onMouseUp,
             onPaste,
             value
@@ -62,8 +58,6 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
                 className={className}
                 onBlur={this.propagateChange}
                 onChange={this.handleChange}
-                onClick={onClick}
-                onDoubleClick={onDoubleClick}
                 onKeyDown={this.handleKeyDown}
                 onMouseUp={onMouseUp}
                 onPaste={onPaste}

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

@@ -1,28 +1,21 @@
 import React, {
-    MouseEvent,
     PureComponent
 } from 'react';
 
 interface IProps {
     className: string;
-    onClick: (e: MouseEvent) => void;
-    onDoubleClick: (e: MouseEvent) => void;
     value: any;
 }
 
 export default class CellLabel extends PureComponent<IProps> {
     render() {
         const {
             className,
-            onClick,
-            onDoubleClick,
             value
         } = this.props;
 
         return (<div
             className={className}
-            onClick={onClick}
-            onDoubleClick={onDoubleClick}
         >
             {value}
         </div>);