3.0 fixed columns and rows (#56)

* - refactor: isolate dash component layer from component implementation
- duplicate component contract in TS

* update for build js/py

* - fix python component packaging regression
- bump version to rc6

* Fix visual tests regression

* (wip) refactor controlled table

* @types

* refactor table clipboard usage

* clean up

* rename

* pr review fixes

* fix bug in test script

* fix test

* update test script

* fix tests

* fix tests

* tests -- remove async/await syntax

* fix tests

* - remove row component
- 3 tables for fixed rows/columns and content
- update TS props

* remove test code

* fix test

* remove test / broken by Cypress.io

* cypress version

* fix cell selection test

* fix percy tests

* prevent useless cell updates once again

* styling, copy/paste, navigation regressions

* build, variables renamed

* fix next/previous regression

* fix test regressions

* table styling regression

* - fixed rows/columns regression testing + fixes
- percy tests for fixed rows/columns

* fix test?

* fix test?

* revert percy removal

* - add runtime logger configuration override
- fix scrolling issue in prod environment

* - fix merged cells / hidden cells w/ fixed col & rows
- additional visual tests for merged, fixed, hidden combo

Author: Marc-Andre-Rivet

packages/dash-table/@Types/modules.d.ts

@@ -0,0 +1,4 @@
+declare module 'sheetclip' {
+    const value: any;
+    export default value;
+}

packages/dash-table/dash_table/bundle.js

@@ -1,5 +1,5 @@
 {
-  "src/dash-table/components/Table.js": {
+  "src/dash-table/Table.js": {
     "description": "",
     "displayName": "Table",
     "methods": [],
@@ -134,6 +134,10 @@
             {
               "value": "'multi'",
               "computed": false
+            },
+            {
+              "value": "false",
+              "computed": false
             }
           ]
         },
@@ -236,7 +240,11 @@
               "computed": false
             },
             {
-              "value": "'none'",
+              "value": "true",
+              "computed": false
+            },
+            {
+              "value": "false",
               "computed": false
             }
           ]
@@ -639,7 +647,7 @@
       },
       "base_styles": {
         "defaultValue": {
-          "value": "{\n    numeric: {\n        'text-align': 'right',\n        'font-family': \"'Droid Sans Mono', Courier, monospace\",\n    },\n\n    string: {\n        'text-align': 'left',\n    },\n\n    input: {\n        padding: 0,\n        margin: 0,\n        width: '80px',\n        border: 'none',\n        'font-size': '1rem',\n    },\n\n    'input-active': {\n        outline: '#7FDBFF auto 3px',\n    },\n\n    table: {},\n\n    thead: {},\n\n    th: {},\n\n    td: {},\n}",
+          "value": "{\n    numeric: {\n        'text-align': 'right',\n        'font-family': `'Droid Sans Mono', Courier, monospace`\n    },\n\n    string: {\n        'text-align': 'left'\n    },\n\n    input: {\n        padding: 0,\n        margin: 0,\n        width: '80px',\n        border: 'none',\n        'font-size': '1rem'\n    },\n\n    'input-active': {\n        outline: '#7FDBFF auto 3px'\n    },\n\n    table: {},\n\n    thead: {},\n\n    th: {},\n\n    td: {}\n}",
           "computed": false
         },
         "required": false

packages/dash-table/dash_table/demo.js

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc5",
+  "version": "3.0.0rc6",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {
@@ -16,14 +16,15 @@
     "private::lint.js": "eslint src",
     "private::lint.ts": "tslint --project . src/**/*.ts",
     "private::opentests": "cypress open",
-    "private::runtests": "cypress run",
-    "private::snapshots": "build-storybook && percy-storybook",
+    "private::runtests": "cypress run --browser chrome",
+    "private::test-e2e": "run-p --race private::host* private::runtests",
+    "private::test-visual": "build-storybook && percy-storybook",
     "build.watch": "webpack-dev-server --content-base dash_table --mode development",
     "build:js-dev": "run-s \"private::build -- --mode development\"",
     "build:js": "run-s \"private::build -- --mode production\"",
-    "build:py": "./extract-meta src/dash-table/components/Table.js > dash_table/metadata.json && cp package.json dash_table",
+    "build:py": "./extract-meta src/dash-table/Table.js > dash_table/metadata.json && cp package.json dash_table",
     "lint": "run-s private::lint.js private::lint.ts",
-    "test": "run-p --race private::host* private::runtests private::snapshots",
+    "test": "run-s private::test-*",
     "test.watch": "run-p --race \"private::build -- --mode development --watch\" --race private::host* private::opentests"
   },
   "author": "Chris P <[email protected]",
@@ -42,13 +43,14 @@
     "@storybook/cli": "^4.0.0-alpha.16",
     "@storybook/react": "^4.0.0-alpha.16",
     "@types/ramda": "^0.25.36",
+    "@types/react-select": "^1.2.1",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.11",
-    "cypress": "^3.0.3",
+    "cypress": "^3.1.0",
     "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.12.0",

packages/dash-table/dash_table/metadata.json

@@ -2,12 +2,13 @@
 import * as R from 'ramda';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {Table} from 'dash-table';
+import { Table } from 'dash-table';
 import {mockData} from './data';
 import { memoizeOne } from 'core/memoizer';
 
 const clone = o => JSON.parse(JSON.stringify(o));
 
+
 class App extends Component {
     constructor() {
         super();
@@ -27,9 +28,9 @@ class App extends Component {
                 editable: true,
                 filtering: true,
                 sorting: true,
-                // n_fixed_rows: 3,
-                // n_fixed_columns: 2,
-                merge_duplicate_headers: true,
+                n_fixed_rows: 3,
+                n_fixed_columns: 2,
+                merge_duplicate_headers: false,
                 row_deletable: true,
                 row_selectable: 'single',
                 column_static_dropdown: [
@@ -41,6 +42,9 @@ class App extends Component {
                         }))
                     }
                 ],
+                table_style: [
+                    { selector: '.dash-spreadsheet.freeze-left', rule: 'width: 1000px' }
+                ]
             }
         };
 

packages/dash-table/dash_table/package.json

@@ -4,7 +4,7 @@ import App from './App';
 
 import Logger, { DebugLevel, LogLevel } from 'core/Logger';
 
-Logger.setDebugLevel(DebugLevel.NONE);
+Logger.setDebugLevel(DebugLevel.DEBUG);
 Logger.setLogLevel(LogLevel.WARNING);
 
 ReactDOM.render(<App />, document.getElementById('root'));

packages/dash-table/demo/App.js

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc5",
+  "version": "3.0.0rc6",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {
@@ -16,14 +16,15 @@
     "private::lint.js": "eslint src",
     "private::lint.ts": "tslint --project . src/**/*.ts",
     "private::opentests": "cypress open",
-    "private::runtests": "cypress run",
-    "private::snapshots": "build-storybook && percy-storybook",
+    "private::runtests": "cypress run --browser chrome",
+    "private::test-e2e": "run-p --race private::host* private::runtests",
+    "private::test-visual": "build-storybook && percy-storybook",
     "build.watch": "webpack-dev-server --content-base dash_table --mode development",
     "build:js-dev": "run-s \"private::build -- --mode development\"",
     "build:js": "run-s \"private::build -- --mode production\"",
-    "build:py": "./extract-meta src/dash-table/components/Table.js > dash_table/metadata.json && cp package.json dash_table",
+    "build:py": "./extract-meta src/dash-table/Table.js > dash_table/metadata.json && cp package.json dash_table",
     "lint": "run-s private::lint.js private::lint.ts",
-    "test": "run-p --race private::host* private::runtests private::snapshots",
+    "test": "run-s private::test-*",
     "test.watch": "run-p --race \"private::build -- --mode development --watch\" --race private::host* private::opentests"
   },
   "author": "Chris P <[email protected]",
@@ -42,13 +43,14 @@
     "@storybook/cli": "^4.0.0-alpha.16",
     "@storybook/react": "^4.0.0-alpha.16",
     "@types/ramda": "^0.25.36",
+    "@types/react-select": "^1.2.1",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.11",
-    "cypress": "^3.0.3",
+    "cypress": "^3.1.0",
     "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.12.0",

packages/dash-table/demo/index.js

@@ -0,0 +1,42 @@
+export default class Clipboard {
+    public static set(value: string): void {
+        const el = document.createElement('textarea');
+        el.value = value;
+
+        // (Adapted from https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f)
+        // Make it readonly to be tamper-proof
+        el.setAttribute('readonly', '');
+        // el.style.position = 'absolute';
+        // Move outside the screen to make it invisible
+        // el.style.left = '-9999px';
+        // Append the <textarea> element to the HTML document
+        document.body.appendChild(el);
+
+        // Check if there is any content selected previously
+        let selected;
+        if (document.getSelection().rangeCount > 0) {
+            // Store selection if found
+            selected = document.getSelection().getRangeAt(0);
+        }
+
+        // Select the <textarea> content
+        el.select();
+        // Copy - only works as a result of a user action (e.g. click events)
+        document.execCommand('copy');
+        // Remove the <textarea> element
+        document.body.removeChild(el);
+        // If a selection existed before copying
+        if (selected) {
+            // Unselect everything on the HTML document
+            document.getSelection().removeAllRanges();
+            // Restore the original selection
+            document.getSelection().addRange(selected);
+        }
+    }
+
+    public static get(ev: ClipboardEvent) {
+        return ev.clipboardData ?
+            ev.clipboardData.getData('text/plain') :
+            undefined;
+    }
+}

packages/dash-table/npm-shrinkwrap.json

@@ -1,3 +1,5 @@
+import Logger from 'core/Logger';
+
 interface IRule {
     cssText: string;
     selectorText: string;
@@ -84,13 +86,15 @@ export default class Stylesheet {
 
         const result = this.stylesheet.findRule(selector);
         if (result) {
-            if (result.rule.cssText === css) {
+
+            if (result.rule.cssText === css || result.rule.cssText === `${selector} { ${css} }`) {
                 return;
             } else {
                 this.stylesheet.deleteRule(result.index);
             }
         }
 
         this.stylesheet.addRule(selector, css);
+        Logger.debug('stylesheet', selector, css);
     }
 }

packages/dash-table/package.json

@@ -0,0 +1,27 @@
+import { DebugLevel, LogLevel } from 'core/Logger';
+import CookieStorage from 'core/storage/Cookie';
+
+const DASH_DEBUG = 'dash_debug';
+const DASH_LOG = 'dash_log';
+
+export default class Environment {
+    private static get searchParams() {
+        return new URL(window.location.href).searchParams;
+    }
+
+    public static get debugLevel(): DebugLevel {
+        const debug = this.searchParams.get(DASH_DEBUG) || CookieStorage.get(DASH_DEBUG);
+
+        return debug ?
+            (DebugLevel as any)[debug] || DebugLevel.NONE :
+            DebugLevel.NONE;
+    }
+
+    public static get logLevel(): LogLevel {
+        const log = this.searchParams.get(DASH_LOG) || CookieStorage.get(DASH_LOG);
+
+        return log ?
+            (LogLevel as any)[log] || LogLevel.ERROR :
+            LogLevel.ERROR;
+    }
+}

packages/dash-table/src/core/Clipboard.ts

@@ -0,0 +1,7 @@
+export default (seed: number | undefined = undefined) => {
+    let lcg = (a: number) => a * 48271 % 2147483647;
+
+    let safeSeed = seed !== undefined ? lcg(seed) : lcg(Math.random());
+
+    return () => (safeSeed = lcg(safeSeed)) / 2147483648;
+};

packages/dash-table/src/core/Stylesheet.ts

@@ -0,0 +1,41 @@
+const __1day = 86400 * 1000;
+const __20years = 86400 * 1000 * 365 * 20;
+
+export default class CookieStorage {
+    public static delete(id: string, domain: string = '', path: string = '/') {
+        let expires = new Date((new Date().getTime() - __1day)).toUTCString();
+
+        document.cookie = `${id}=;expires=${expires};domain=${domain};path=${path}`;
+    }
+
+    public static get(id: string) {
+        if (!id.length) {
+            return;
+        }
+
+        id = id.toLowerCase();
+
+        let cookies = document.cookie.split(';').map(cookie => {
+            let fragments = cookie.split('=');
+
+            return {
+                id: fragments[0].trim(),
+                value: fragments[1]
+            };
+        });
+
+        return (cookies.find(cookie => id === cookie.id.toLocaleLowerCase()) || {} as any).value;
+    }
+
+    public static set(id: string, value: string, domain: string = '', path: string = '/') {
+        let expires = new Date((new Date().getTime() + __20years)).toUTCString();
+
+        let entry = `${id}=${value};expires=${expires};domain=${domain};path=${path}`;
+
+        if (CookieStorage.get(id)) {
+            CookieStorage.delete(id, domain, path);
+        }
+
+        document.cookie = entry;
+    }
+}