From 55120b1a57f7bf97945a7e0b3371e1a9a74e64e5 Mon Sep 17 00:00:00 2001 From: dmt0 Date: Mon, 25 Feb 2019 17:02:18 -0500 Subject: [PATCH 01/17] Package updates --- .eslintrc | 8 +- package.json | 82 +++++++++---------- src/components/PanelMenuWrapper.js | 14 ++-- src/components/fields/AxesSelector.js | 15 ++-- src/components/fields/MarkerColor.js | 4 +- src/components/fields/derived.js | 4 +- src/components/widgets/DateTimePicker.js | 8 +- src/components/widgets/TraceTypeSelector.js | 29 ++++--- .../text_editors/RichText/DraftCommands.js | 6 +- .../text_editors/RichText/LinkEditor.js | 6 +- .../text_editors/RichText/configuration.js | 16 ++-- .../widgets/text_editors/RichText/index.js | 36 ++++---- 12 files changed, 115 insertions(+), 113 deletions(-) diff --git a/.eslintrc b/.eslintrc index 913b8e07a..df9b28c46 100644 --- a/.eslintrc +++ b/.eslintrc @@ -17,6 +17,12 @@ "jsx": true } }, + "settings": { + "react": { + "pragma": "React", + "version": "detect" + } + }, "env": { "browser": true, "es6": true, @@ -115,7 +121,7 @@ "yoda": ["error"], "spaced-comment": ["error", "always", { "block": { - exceptions: ["*"] + "exceptions": ["*"] } }], "no-unused-vars": ["error", { diff --git a/package.json b/package.json index 2a8c293f0..b0f64836a 100644 --- a/package.json +++ b/package.json @@ -8,36 +8,36 @@ }, "dependencies": { "@plotly/draft-js-export-html": "1.2.0", - "classnames": "^2.2.5", - "draft-js": "^0.10.4", - "draft-js-import-html": "^1.2.1", - "draft-js-utils": "^1.2.0", - "fast-isnumeric": "^1.1.1", - "immutability-helper": "^2.7.1", - "plotly-icons": "1.2.3", + "classnames": "^2.2.6", + "draft-js": "^0.10.5", + "draft-js-import-html": "^1.3.2", + "draft-js-utils": "^1.3.2", + "fast-isnumeric": "^1.1.2", + "immutability-helper": "^3.0.0", + "plotly-icons": "1.3.4", "plotly.js": "1.44.4", - "prop-types": "^15.5.10", - "raf": "^3.4.0", - "react-color": "^2.13.8", + "prop-types": "^15.7.2", + "raf": "^3.4.1", + "react-color": "^2.17.0", "react-colorscales": "0.7.3", - "react-day-picker": "^7.2.4", - "react-dropzone": "^5.0.1", - "react-plotly.js": "^2.2.0", + "react-day-picker": "^7.3.0", + "react-dropzone": "^7.0.0", + "react-plotly.js": "^2.3.0", "react-rangeslider": "^2.2.0", - "react-resizable-rotatable-draggable": "^0.1.8", + "react-resizable-rotatable-draggable": "^0.2.0", "react-select": "^1.3.0", "react-tabs": "^2.2.1", - "styled-components": "^3.3.3", + "styled-components": "^4.1.3", "tinycolor2": "^1.4.1" }, "devDependencies": { - "@percy/react": "^0.4.3", - "autoprefixer": "^9.1.3", + "@percy/react": "^0.4.6", + "autoprefixer": "^9.4.9", "babel-cli": "^6.26.0", - "babel-core": "^6.26.0", + "babel-core": "^6.26.3", "babel-eslint": "^8.0.2", "babel-loader": "^7.1.2", - "babel-plugin-module-resolver": "^3.0.0", + "babel-plugin-module-resolver": "^3.2.0", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-polyfill": "^6.26.0", "babel-preset-es2015": "^6.24.1", @@ -45,35 +45,35 @@ "babel-preset-stage-2": "^6.24.1", "babel-traverse": "^6.26.0", "css-loader": "^0.28.11", - "cssnano": "^3.10.0", - "enzyme": "3.8.0", - "enzyme-adapter-react-16": "1.7.1", - "eslint": "^5.4.0", - "eslint-config-prettier": "^3.0.1", - "eslint-plugin-import": "^2.8.0", - "eslint-plugin-react": "^7.4.0", - "eslint-plugin-react-percy": "^0.2.1", + "cssnano": "^4.1.10", + "enzyme": "3.9.0", + "enzyme-adapter-react-16": "1.10.0", + "eslint": "^5.14.1", + "eslint-config-prettier": "^4.1.0", + "eslint-plugin-import": "^2.16.0", + "eslint-plugin-react": "^7.12.0", + "eslint-plugin-react-percy": "^0.2.4", "fs": "^0.0.1-security", - "gl": "^4.0.4", - "glob": "^7.1.2", + "gl": "^4.1.1", + "glob": "^7.1.3", "jest": "^23.5.0", "jest-cli": "^23.5.0", "mkdirp": "^0.5.1", - "node-sass": "^4.7.2", - "postcss": "^6.0.23", - "postcss-combine-duplicated-selectors": "^6.0.2", - "postcss-custom-properties": "^6.3.1", + "node-sass": "^4.11.0", + "postcss": "^7.0.14", + "postcss-combine-duplicated-selectors": "^7.0.0", + "postcss-custom-properties": "^8.0.9", "postcss-remove-root": "^0.0.2", - "prettier": "1.14.2", - "react": "^16.0.0", + "prettier": "1.16.4", + "react": "^16.8.3", "react-ace": "^6.1.4", - "react-dom": "^16.0.0", - "react-hot-loader": "^4.0.0-beta.21", - "react-inspector": "^2.2.2", - "react-test-renderer": "^16.2.0", - "rimraf": "2.6.2", + "react-dom": "^16.8.3", + "react-hot-loader": "^4.7.1", + "react-inspector": "^2.3.1", + "react-test-renderer": "^16.8.3", + "rimraf": "2.6.3", "sass-loader": "^7.1.0", - "style-loader": "^0.23.0", + "style-loader": "^0.23.1", "webpack": "^3.10.0", "webpack-dev-server": "^2.11.1" }, diff --git a/src/components/PanelMenuWrapper.js b/src/components/PanelMenuWrapper.js index 31ea5d911..536e51b5e 100644 --- a/src/components/PanelMenuWrapper.js +++ b/src/components/PanelMenuWrapper.js @@ -87,14 +87,12 @@ class PanelsWithSidebar extends Component { return (
{menuOpts.map(this.renderSection)}
- {React.Children.map( - this.props.children, - (child, i) => - child === null || - this.state.group !== child.props.group || - this.state.panel !== child.props.name - ? null - : cloneElement(child, {key: i}) + {React.Children.map(this.props.children, (child, i) => + child === null || + this.state.group !== child.props.group || + this.state.panel !== child.props.name + ? null + : cloneElement(child, {key: i}) )}
); diff --git a/src/components/fields/AxesSelector.js b/src/components/fields/AxesSelector.js index 4f06a7895..665d47623 100644 --- a/src/components/fields/AxesSelector.js +++ b/src/components/fields/AxesSelector.js @@ -26,14 +26,13 @@ class AxesSelector extends Component { Object.values(fullLayout._subplots).some(s => s.length > 1); const options = multipleSublots - ? axesOptions.map( - option => - option.value === 'allaxes' - ? option - : { - label: option.title, - value: option.value, - } + ? axesOptions.map(option => + option.value === 'allaxes' + ? option + : { + label: option.title, + value: option.value, + } ) : axesOptions; diff --git a/src/components/fields/MarkerColor.js b/src/components/fields/MarkerColor.js index 4b0312efd..f929c0b75 100644 --- a/src/components/fields/MarkerColor.js +++ b/src/components/fields/MarkerColor.js @@ -174,8 +174,8 @@ class UnconnectedMarkerColor extends Component { {!type ? null : type === 'constant' - ? this.renderConstantControls() - : this.renderVariableControls()} + ? this.renderConstantControls() + : this.renderVariableControls()} {type === 'constant' ? null : ( diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js index 73bff7f37..6fe38850a 100644 --- a/src/components/fields/derived.js +++ b/src/components/fields/derived.js @@ -128,8 +128,8 @@ export const BinningDropdown = connectToContainer(UnconnectedDropdown, { plotProps.fullContainer.type === 'histogram2d' ? 'Z' : plotProps.fullContainer.orientation === 'v' - ? 'Y' - : 'X'; + ? 'Y' + : 'X'; plotProps.options = [ {label: _('Count ') + axis, value: 'count'}, {label: _('Sum ') + axis, value: 'sum'}, diff --git a/src/components/widgets/DateTimePicker.js b/src/components/widgets/DateTimePicker.js index eacb27b7a..72ce7ccd0 100644 --- a/src/components/widgets/DateTimePicker.js +++ b/src/components/widgets/DateTimePicker.js @@ -141,10 +141,10 @@ export default class DateTimePicker extends Component { return !isValidDateTime || time === '' || JSDate.toDateString() === 'Invalid Date' ? '' : localeTime[1] === 'PM' - ? isNoon - ? _('noon') - : 'PM' - : 'AM'; + ? isNoon + ? _('noon') + : 'PM' + : 'AM'; } adjustedTime(time) { diff --git a/src/components/widgets/TraceTypeSelector.js b/src/components/widgets/TraceTypeSelector.js index d249d19b2..394b1a9db 100644 --- a/src/components/widgets/TraceTypeSelector.js +++ b/src/components/widgets/TraceTypeSelector.js @@ -7,21 +7,20 @@ import {TRACES_WITH_GL} from 'lib/constants'; const renderActionItems = (actionItems, item) => actionItems - ? actionItems(item).map( - (action, i) => - !action.onClick ? null : ( - - {action.icon} - - ) + ? actionItems(item).map((action, i) => + !action.onClick ? null : ( + + {action.icon} + + ) ) : null; diff --git a/src/components/widgets/text_editors/RichText/DraftCommands.js b/src/components/widgets/text_editors/RichText/DraftCommands.js index 9cc997daf..888657805 100644 --- a/src/components/widgets/text_editors/RichText/DraftCommands.js +++ b/src/components/widgets/text_editors/RichText/DraftCommands.js @@ -145,9 +145,9 @@ export function insertSoftNewline(editorState) { */ export function toggleInlineStyle(editorState, inlineStyle) { /* - * TODO tech-debt. Link toggles should not go via toggleInlineStyle. - * https://github.com/plotly/streambed/issues/6354 - */ + * TODO tech-debt. Link toggles should not go via toggleInlineStyle. + * https://github.com/plotly/streambed/issues/6354 + */ if (inlineStyle === LINK) { return toggleLink(editorState); diff --git a/src/components/widgets/text_editors/RichText/LinkEditor.js b/src/components/widgets/text_editors/RichText/LinkEditor.js index 6b0b2cebd..0708374b6 100644 --- a/src/components/widgets/text_editors/RichText/LinkEditor.js +++ b/src/components/widgets/text_editors/RichText/LinkEditor.js @@ -59,9 +59,9 @@ class LinkEditor extends Component { onInputKeyDown(ev) { /* - * `KeyboardEvent.key` enjoys excellent cross-browser support. - * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key - */ + * `KeyboardEvent.key` enjoys excellent cross-browser support. + * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key + */ const {key} = ev; if (key === RETURN_KEY) { diff --git a/src/components/widgets/text_editors/RichText/configuration.js b/src/components/widgets/text_editors/RichText/configuration.js index 4f756305a..b303e1def 100644 --- a/src/components/widgets/text_editors/RichText/configuration.js +++ b/src/components/widgets/text_editors/RichText/configuration.js @@ -26,10 +26,10 @@ export const STYLE_MAP = { }, [SUBSCRIPT]: { /* - * Can't use text-align; IE renders `text-bottom` properly, but - * FF doesn't (same height as `bottom`). Chrome doesn't understand - * `text-align: bottom`. Use relative positioning instead. - */ + * Can't use text-align; IE renders `text-bottom` properly, but + * FF doesn't (same height as `bottom`). Chrome doesn't understand + * `text-align: bottom`. Use relative positioning instead. + */ lineHeight: 0, fontSize: '65%', position: 'relative', @@ -37,10 +37,10 @@ export const STYLE_MAP = { }, [SUPERSCRIPT]: { /* - * Can't use text-align; IE renders `text-top` properly, but - * FF doesn't (same height as `top`). Chrome doesn't understand - * `text-align: top`. Use relative positioning instead. - */ + * Can't use text-align; IE renders `text-top` properly, but + * FF doesn't (same height as `top`). Chrome doesn't understand + * `text-align: top`. Use relative positioning instead. + */ lineHeight: 0, fontSize: '65%', position: 'relative', diff --git a/src/components/widgets/text_editors/RichText/index.js b/src/components/widgets/text_editors/RichText/index.js index d6255af77..bc062db0a 100644 --- a/src/components/widgets/text_editors/RichText/index.js +++ b/src/components/widgets/text_editors/RichText/index.js @@ -37,12 +37,12 @@ class RichText extends Component { super(props, context); /* - * Initially set state based on the plotly.js annotation content. - * After this, as long as this component is mounted, it owns the source - * of truth for the annotation value via `this.state.editorState`. - * This state may be updated externally via a prop update. - * See `componentWillReceiveProps`. - */ + * Initially set state based on the plotly.js annotation content. + * After this, as long as this component is mounted, it owns the source + * of truth for the annotation value via `this.state.editorState`. + * This state may be updated externally via a prop update. + * See `componentWillReceiveProps`. + */ this.state = { editorState: props.value.toString().trim().length ? this.createEditorStateFromHTML(props.value) @@ -71,13 +71,13 @@ class RichText extends Component { const {linkEditorFocus, editorFocus} = this.state; /* - * Don't worry about what plotly.js thinks the annotation value - * should be while we're using our editor, for these reasons: - * - * 1. The editor should be considered the source of truth, unless the - * user is actually editing the annotation inline, in the chart. - * 2. Sometimes we get updates with stale values. - */ + * Don't worry about what plotly.js thinks the annotation value + * should be while we're using our editor, for these reasons: + * + * 1. The editor should be considered the source of truth, unless the + * user is actually editing the annotation inline, in the chart. + * 2. Sometimes we get updates with stale values. + */ if (linkEditorFocus || editorFocus) { return; } @@ -241,11 +241,11 @@ class RichText extends Component { */ onLinkEditorClose() { /* - * Focus on editor immediately to avoid error that occurs when - * `selection.extend` is called and another element has focus. - * https://bugzilla.mozilla.org/show_bug.cgi?id=921444 - * https://github.com/facebook/draft-js/blob/342576bf7186d07c82a41d9ca8169130669747d6/src/component/selection/setDraftEditorSelection.js#L128-L134 - */ + * Focus on editor immediately to avoid error that occurs when + * `selection.extend` is called and another element has focus. + * https://bugzilla.mozilla.org/show_bug.cgi?id=921444 + * https://github.com/facebook/draft-js/blob/342576bf7186d07c82a41d9ca8169130669747d6/src/component/selection/setDraftEditorSelection.js#L128-L134 + */ this.focus(); // Hide the editor. From 15588f2870be399e16e433678793735fc544ed13 Mon Sep 17 00:00:00 2001 From: dmt0 Date: Mon, 25 Feb 2019 19:46:47 -0500 Subject: [PATCH 02/17] Babel 6->7 --- .babelrc | 4 ++-- package.json | 32 +++++++++++++++++--------------- webpack.config.js | 6 +++--- 3 files changed, 22 insertions(+), 20 deletions(-) diff --git a/.babelrc b/.babelrc index c37be69d0..206f1317e 100644 --- a/.babelrc +++ b/.babelrc @@ -1,7 +1,7 @@ { - "presets": ["react", "es2015"], + "presets": ["@babel/react", "@babel/env"], "plugins": [ - "transform-object-rest-spread", + "@babel/plugin-proposal-object-rest-spread", [ "module-resolver", { diff --git a/package.json b/package.json index b0f64836a..19d4e212e 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "react-color": "^2.17.0", "react-colorscales": "0.7.3", "react-day-picker": "^7.3.0", - "react-dropzone": "^7.0.0", + "react-dropzone": "^7.0.1", "react-plotly.js": "^2.3.0", "react-rangeslider": "^2.2.0", "react-resizable-rotatable-draggable": "^0.2.0", @@ -31,19 +31,21 @@ "tinycolor2": "^1.4.1" }, "devDependencies": { + "@babel/cli": "^7.2.3", + "@babel/core": "^7.3.4", + "@babel/node": "^7.2.2", + "@babel/plugin-proposal-decorators": "^7.3.0", + "@babel/plugin-proposal-object-rest-spread": "^7.3.4", + "@babel/polyfill": "^7.2.5", + "@babel/preset-env": "^7.3.4", + "@babel/preset-react": "^7.0.0", + "@babel/traverse": "^7.3.4", "@percy/react": "^0.4.6", "autoprefixer": "^9.4.9", - "babel-cli": "^6.26.0", - "babel-core": "^6.26.3", - "babel-eslint": "^8.0.2", - "babel-loader": "^7.1.2", + "babel-eslint": "^10.0.1", + "babel-jest": "^24.1.0", + "babel-loader": "^8.0.5", "babel-plugin-module-resolver": "^3.2.0", - "babel-plugin-transform-object-rest-spread": "^6.26.0", - "babel-polyfill": "^6.26.0", - "babel-preset-es2015": "^6.24.1", - "babel-preset-react": "^6.24.1", - "babel-preset-stage-2": "^6.24.1", - "babel-traverse": "^6.26.0", "css-loader": "^0.28.11", "cssnano": "^4.1.10", "enzyme": "3.9.0", @@ -51,13 +53,13 @@ "eslint": "^5.14.1", "eslint-config-prettier": "^4.1.0", "eslint-plugin-import": "^2.16.0", - "eslint-plugin-react": "^7.12.0", + "eslint-plugin-react": "^7.12.4", "eslint-plugin-react-percy": "^0.2.4", "fs": "^0.0.1-security", "gl": "^4.1.1", "glob": "^7.1.3", - "jest": "^23.5.0", - "jest-cli": "^23.5.0", + "jest": "^24.1.0", + "jest-cli": "^24.1.0", "mkdirp": "^0.5.1", "node-sass": "^4.11.0", "postcss": "^7.0.14", @@ -66,7 +68,7 @@ "postcss-remove-root": "^0.0.2", "prettier": "1.16.4", "react": "^16.8.3", - "react-ace": "^6.1.4", + "react-ace": "^6.4.0", "react-dom": "^16.8.3", "react-hot-loader": "^4.7.1", "react-inspector": "^2.3.1", diff --git a/webpack.config.js b/webpack.config.js index f540c3f3f..ca9c7e20d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,7 @@ const webpack = require('webpack'); module.exports = { - entry: ['babel-polyfill', 'react-hot-loader/patch', './dev/index.js'], + entry: ['@babel/polyfill', 'react-hot-loader/patch', './dev/index.js'], output: { filename: 'bundle.js', }, @@ -12,10 +12,10 @@ module.exports = { use: { loader: 'babel-loader', options: { - presets: ['react', 'es2015'], + presets: ['@babel/react', '@babel/env'], plugins: [ 'react-hot-loader/babel', - 'transform-object-rest-spread', + '@babel/plugin-proposal-object-rest-spread', [ 'module-resolver', { From 8057f1912aa90a1793df0841702b58ae1ccca7ba Mon Sep 17 00:00:00 2001 From: dmt0 Date: Tue, 26 Feb 2019 14:12:44 -0500 Subject: [PATCH 03/17] New Fragment syntax --- src/components/containers/ModalProvider.js | 6 +++--- src/components/fields/ErrorBars.js | 22 +++++++++++----------- src/components/fields/LocationSelector.js | 18 +++++++++--------- src/components/fields/MarkerColor.js | 10 +++++----- src/components/fields/TextPosition.js | 10 +++++----- src/components/fields/VisibilitySelect.js | 6 +++--- src/components/widgets/ColorPicker.js | 6 +++--- 7 files changed, 39 insertions(+), 39 deletions(-) diff --git a/src/components/containers/ModalProvider.js b/src/components/containers/ModalProvider.js index 6cbb13958..4a520e397 100644 --- a/src/components/containers/ModalProvider.js +++ b/src/components/containers/ModalProvider.js @@ -1,4 +1,4 @@ -import React, {Fragment} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; class ModalProvider extends React.Component { @@ -73,10 +73,10 @@ class ModalProvider extends React.Component { render() { const {component: Component, componentProps, isAnimatingOut} = this.state; return ( - + <> {this.props.children} {this.state.open ? : null} - + ); } } diff --git a/src/components/fields/ErrorBars.js b/src/components/fields/ErrorBars.js index 9095851c2..23a47849f 100644 --- a/src/components/fields/ErrorBars.js +++ b/src/components/fields/ErrorBars.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React, {Component, Fragment} from 'react'; +import React, {Component} from 'react'; import {DataSelector, Radio, Numeric, MultiColorPicker} from '../index'; import RadioBlocks from '../widgets/RadioBlocks'; import Field from './Field'; @@ -88,7 +88,7 @@ class ErrorBars extends Component { const showCustomDataControl = this.props.fullValue.type === 'data'; const styleAttrs = ( - + <> - + ); if (mode === 'symmetric') { return ( - + <> ) : null} {styleAttrs} - + ); } if (mode === 'asymmetric') { return ( - + <> {showCustomDataControl ? ( - + <> - + ) : null} {styleAttrs} - + ); } @@ -157,10 +157,10 @@ class ErrorBars extends Component { render() { return ( - + <> {this.renderModeSelector()} {this.renderErrorBarControls()} - + ); } } diff --git a/src/components/fields/LocationSelector.js b/src/components/fields/LocationSelector.js index c4fcbb8dd..20f2b7aad 100644 --- a/src/components/fields/LocationSelector.js +++ b/src/components/fields/LocationSelector.js @@ -1,4 +1,4 @@ -import React, {Fragment, Component} from 'react'; +import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {connectToContainer} from 'lib'; import Field from './Field'; @@ -21,7 +21,7 @@ class UnconnectedLocation extends Component { const {localize: _} = this.context; return ( - + <> - + ); } } @@ -92,7 +92,7 @@ class UnconnectedLocationSelector extends Component { } = this.context; return type === 'scattergeo' ? ( - + <> {mode === 'latlon' ? ( - + <> - + ) : ( )} - + ) : type === 'choropleth' ? ( ) : ( - + <> - + ); } } diff --git a/src/components/fields/MarkerColor.js b/src/components/fields/MarkerColor.js index f929c0b75..ea657e50f 100644 --- a/src/components/fields/MarkerColor.js +++ b/src/components/fields/MarkerColor.js @@ -1,6 +1,6 @@ import Field from './Field'; import PropTypes from 'prop-types'; -import React, {Component, Fragment} from 'react'; +import React, {Component} from 'react'; import {connectToContainer} from 'lib'; import RadioBlocks from '../widgets/RadioBlocks'; import MultiColorPicker from './MultiColorPicker'; @@ -157,7 +157,7 @@ class UnconnectedMarkerColor extends Component { ]; return ( - + <> @@ -178,7 +178,7 @@ class UnconnectedMarkerColor extends Component { : this.renderVariableControls()} {type === 'constant' ? null : ( - + <> - + )} - + ); } diff --git a/src/components/fields/TextPosition.js b/src/components/fields/TextPosition.js index 66507ff4e..84995ecdd 100644 --- a/src/components/fields/TextPosition.js +++ b/src/components/fields/TextPosition.js @@ -2,7 +2,7 @@ import Dropdown from './Dropdown'; import RadioBlocks from '../widgets/RadioBlocks'; import Field from './Field'; import PropTypes from 'prop-types'; -import React, {Component, Fragment} from 'react'; +import React, {Component} from 'react'; import {connectToContainer} from 'lib'; import Info from './Info'; import DataSelector from './DataSelector'; @@ -23,16 +23,16 @@ export class UnconnectedTextPosition extends Component { ]; const control = this.state.posType === 'simple' ? ( - + <> {_( 'This will position all text values on the plot according to the selected position.' )} - + ) : ( - + <>
{_( @@ -44,7 +44,7 @@ export class UnconnectedTextPosition extends Component {
{_('("Top", "Middle", "Bottom") + ("Left", "Center", "Right")')}
 - + ); return ( diff --git a/src/components/fields/VisibilitySelect.js b/src/components/fields/VisibilitySelect.js index bcf159ea8..d36bb98da 100644 --- a/src/components/fields/VisibilitySelect.js +++ b/src/components/fields/VisibilitySelect.js @@ -1,4 +1,4 @@ -import React, {Fragment, Component} from 'react'; +import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {connectToContainer} from 'lib'; import {MULTI_VALUED_PLACEHOLDER} from 'lib/constants'; @@ -35,7 +35,7 @@ export class UnconnectedVisibilitySelect extends Component { const {dropdown, clearable, options, showOn, attr, label} = this.props; return ( - + <> {dropdown ? ( + ); } } diff --git a/src/components/widgets/ColorPicker.js b/src/components/widgets/ColorPicker.js index c2ca80580..45efa1bb7 100644 --- a/src/components/widgets/ColorPicker.js +++ b/src/components/widgets/ColorPicker.js @@ -1,5 +1,5 @@ import Fields from 'react-color/lib/components/sketch/SketchFields'; -import React, {Component, Fragment} from 'react'; +import React, {Component} from 'react'; import PropTypes from 'prop-types'; import tinycolor from 'tinycolor2'; import {Hue, Saturation} from 'react-color/lib/components/common'; @@ -86,7 +86,7 @@ class ColorPicker extends Component { const swatchStyle = {backgroundColor: rgbString}; return ( - + <>
)} - + ); } } From 4d069cd90492a11fcdee987d7f81005795df0707 Mon Sep 17 00:00:00 2001 From: dmt0 Date: Tue, 26 Feb 2019 18:05:52 -0500 Subject: [PATCH 04/17] react-select upgrade --- dev/App.js | 1 - package.json | 5 +- src/EditorControls.js | 11 +- src/components/fields/ArrowSelector.js | 2 +- src/components/fields/DataSelector.js | 6 +- src/components/fields/Dropdown.js | 6 +- src/components/fields/DropdownCustom.js | 6 +- src/components/fields/FilterOperation.js | 6 +- src/components/fields/FontSelector.js | 27 ++-- src/components/fields/LineSelectors.js | 77 +++++------ src/components/widgets/Dropdown.js | 46 +++---- src/styles/components/widgets/_dropdown.scss | 135 +++++++++---------- 12 files changed, 139 insertions(+), 189 deletions(-) diff --git a/dev/App.js b/dev/App.js index 1cce7eb11..24ad00713 100644 --- a/dev/App.js +++ b/dev/App.js @@ -2,7 +2,6 @@ import React, {Component} from 'react'; import {hot} from 'react-hot-loader'; import plotly from 'plotly.js/dist/plotly-with-meta'; import '../src/styles/main.scss'; -import 'react-select/dist/react-select.css'; import brace from 'brace'; // eslint-disable-line no-unused-vars import AceEditor from 'react-ace'; import Select from 'react-select'; diff --git a/package.json b/package.json index 19d4e212e..cfdcf8536 100644 --- a/package.json +++ b/package.json @@ -25,8 +25,8 @@ "react-plotly.js": "^2.3.0", "react-rangeslider": "^2.2.0", "react-resizable-rotatable-draggable": "^0.2.0", - "react-select": "^1.3.0", - "react-tabs": "^2.2.1", + "react-select": "^2.4.1", + "react-tabs": "^3.0.0", "styled-components": "^4.1.3", "tinycolor2": "^1.4.1" }, @@ -34,7 +34,6 @@ "@babel/cli": "^7.2.3", "@babel/core": "^7.3.4", "@babel/node": "^7.2.2", - "@babel/plugin-proposal-decorators": "^7.3.0", "@babel/plugin-proposal-object-rest-spread": "^7.3.4", "@babel/polyfill": "^7.2.5", "@babel/preset-env": "^7.3.4", diff --git a/src/EditorControls.js b/src/EditorControls.js index 9a5458886..0686f2c70 100644 --- a/src/EditorControls.js +++ b/src/EditorControls.js @@ -38,10 +38,9 @@ class EditorControls extends Component { config: gd._context, srcConverters: this.props.srcConverters, data: gd.data, - dataSources: this.props.dataSources, + dataSourceComponents: this.props.dataSourceComponents, dataSourceOptions: this.props.dataSourceOptions, - dataSourceValueRenderer: this.props.dataSourceValueRenderer, - dataSourceOptionRenderer: this.props.dataSourceOptionRenderer, + dataSources: this.props.dataSources, dictionaries: this.props.dictionaries || {}, localize: this.localize, frames: gd._transitionData ? gd._transitionData._frames : [], @@ -336,10 +335,9 @@ EditorControls.propTypes = { toSrc: PropTypes.func.isRequired, fromSrc: PropTypes.func.isRequired, }), - dataSourceOptionRenderer: PropTypes.func, + dataSourceComponents: PropTypes.object, dataSourceOptions: PropTypes.array, dataSources: PropTypes.object, - dataSourceValueRenderer: PropTypes.func, dictionaries: PropTypes.object, graphDiv: PropTypes.object, locale: PropTypes.string, @@ -373,10 +371,9 @@ EditorControls.childContextTypes = { fromSrc: PropTypes.func.isRequired, }), data: PropTypes.array, - dataSourceOptionRenderer: PropTypes.func, + dataSourceComponents: PropTypes.object, dataSourceOptions: PropTypes.array, dataSources: PropTypes.object, - dataSourceValueRenderer: PropTypes.func, dictionaries: PropTypes.object, frames: PropTypes.array, fullData: PropTypes.array, diff --git a/src/components/fields/ArrowSelector.js b/src/components/fields/ArrowSelector.js index cd7c1a5b6..b599a5dd6 100644 --- a/src/components/fields/ArrowSelector.js +++ b/src/components/fields/ArrowSelector.js @@ -4,7 +4,7 @@ import ARROW_PATHS from 'plotly.js/src/components/annotations/arrow_paths'; const ARROW_OPTIONS = ARROW_PATHS.map(({path}, index) => { const label = ( - + ); @@ -137,9 +136,8 @@ UnconnectedDataSelector.propTypes = { UnconnectedDataSelector.contextTypes = { dataSources: PropTypes.object, + dataSourceComponents: PropTypes.object, dataSourceOptions: PropTypes.array, - dataSourceValueRenderer: PropTypes.func, - dataSourceOptionRenderer: PropTypes.func, srcConverters: PropTypes.shape({ toSrc: PropTypes.func.isRequired, fromSrc: PropTypes.func.isRequired, diff --git a/src/components/fields/Dropdown.js b/src/components/fields/Dropdown.js index d5633da2f..1bbdda58f 100644 --- a/src/components/fields/Dropdown.js +++ b/src/components/fields/Dropdown.js @@ -19,10 +19,9 @@ export class UnconnectedDropdown extends Component { value={this.props.fullValue} onChange={this.props.updatePlot} clearable={this.props.clearable} - optionRenderer={this.props.optionRenderer} - valueRenderer={this.props.valueRenderer} placeholder={placeholder} disabled={this.props.disabled} + components={this.props.components} /> ); @@ -31,12 +30,11 @@ export class UnconnectedDropdown extends Component { UnconnectedDropdown.propTypes = { backgroundDark: PropTypes.bool, + components: PropTypes.object, clearable: PropTypes.bool, fullValue: PropTypes.any, - optionRenderer: PropTypes.func, options: PropTypes.array.isRequired, updatePlot: PropTypes.func, - valueRenderer: PropTypes.func, disabled: PropTypes.bool, ...Field.propTypes, }; diff --git a/src/components/fields/DropdownCustom.js b/src/components/fields/DropdownCustom.js index 49d44c994..ecc314cfb 100644 --- a/src/components/fields/DropdownCustom.js +++ b/src/components/fields/DropdownCustom.js @@ -59,8 +59,7 @@ export class UnconnectedDropdownCustom extends Component { value={value} onChange={this.setValue} clearable={this.props.clearable} - optionRenderer={this.props.optionRenderer} - valueRenderer={this.props.valueRenderer} + components={this.props.components} placeholder={this.props.placeholder} /> @@ -81,9 +80,12 @@ export class UnconnectedDropdownCustom extends Component { } UnconnectedDropdownCustom.propTypes = { + backgroundDark: PropTypes.bool, fullValue: PropTypes.any, updatePlot: PropTypes.func, clearable: PropTypes.bool, + components: PropTypes.object, + placeholder: PropTypes.any, defaultOpt: PropTypes.oneOfType([PropTypes.number, PropTypes.bool, PropTypes.string]), customOpt: PropTypes.oneOfType([PropTypes.number, PropTypes.bool, PropTypes.string]), label: PropTypes.string, diff --git a/src/components/fields/FilterOperation.js b/src/components/fields/FilterOperation.js index a154de697..771ffb9dc 100644 --- a/src/components/fields/FilterOperation.js +++ b/src/components/fields/FilterOperation.js @@ -63,7 +63,7 @@ class UnconnectedFilterOperation extends Component { } render() { - const {fullValue, updatePlot, optionRenderer, valueRenderer, backgroundDark, attr} = this.props; + const {fullValue, updatePlot, backgroundDark, attr} = this.props; const {localize: _} = this.context; const operators = [ @@ -99,8 +99,6 @@ class UnconnectedFilterOperation extends Component { value={findOperation(opValue, _)} onChange={this.setOperation} clearable={false} - optionRenderer={optionRenderer} - valueRenderer={valueRenderer} /> {this.state.operation === 'inset' || this.state.operation === 'exset' ? null : ( )} diff --git a/src/components/fields/FontSelector.js b/src/components/fields/FontSelector.js index 94237dc53..ebbce610c 100644 --- a/src/components/fields/FontSelector.js +++ b/src/components/fields/FontSelector.js @@ -2,28 +2,21 @@ import Dropdown from './Dropdown'; import React from 'react'; import PropTypes from 'prop-types'; -/* eslint-disable react/prop-types */ -const styledRenderer = ({value, label}) => {label}; -/* eslint-enable react/prop-types */ - -const FontSelector = (props, context) => { - return ( - - ); -}; +const FontSelector = (props, context) => ( + ({ + label: {label}, + value, + }))} + /> +); FontSelector.propTypes = { ...Dropdown.propTypes, }; -FontSelector.defaultProps = { - clearable: false, -}; +FontSelector.defaultProps = {clearable: false}; FontSelector.contextTypes = { fontOptions: PropTypes.array, diff --git a/src/components/fields/LineSelectors.js b/src/components/fields/LineSelectors.js index 62e6b53aa..1a684a7e7 100644 --- a/src/components/fields/LineSelectors.js +++ b/src/components/fields/LineSelectors.js @@ -5,18 +5,6 @@ import nestedProperty from 'plotly.js/src/lib/nested_property'; import {tooLight} from 'lib'; import {COLORS, MULTI_VALUED} from 'lib/constants'; -/* eslint-disable react/prop-types */ -const styledRenderer = ({label}) => { - return ( -
- - {label} - -
- ); -}; -/* eslint-enable react/prop-types */ - const strokeDashes = [ {value: 'solid', strokeDasharray: ''}, {value: 'dot', strokeDasharray: '3px, 3px'}, @@ -35,42 +23,43 @@ const strokeShapes = [ {d: 'M2,14V8H14V2', value: 'vhv'}, ]; -const strokeStyle = {fill: 'none', strokeWidth: '4px'}; - const computeOptions = (strokeData, stroke) => strokeData.map(({value, strokeDasharray, d = 'M0,8h100'}) => ({ label: ( - + + + + + ), value, })); -export const LineShapeSelector = props => { - return ; -}; +export const LineShapeSelector = props => ( + +); -export const LineDashSelector = props => { - return ( - - computeOptions(strokeDashes, lineColor).concat([ - { - label: '', - value: null, - }, - ]) - } - /> - ); -}; +export const LineDashSelector = props => ( + + computeOptions(strokeDashes, lineColor).concat([ + { + label: '', + value: null, + }, + ]) + } + /> +); class LineSelector extends Component { constructor(props, context) { @@ -93,13 +82,7 @@ class LineSelector extends Component { render() { return ( - + ); } } diff --git a/src/components/widgets/Dropdown.js b/src/components/widgets/Dropdown.js index 0f9e85de8..f3ab27489 100644 --- a/src/components/widgets/Dropdown.js +++ b/src/components/widgets/Dropdown.js @@ -15,16 +15,13 @@ class Dropdown extends Component { if (!selection) { return onChange(null); - } else if (multi) { - return onChange(selection.map(s => s[valueKey])); } - return onChange(selection[valueKey]); + return multi ? onChange(selection.map(s => s[valueKey])) : onChange(selection[valueKey]); } render() { const { - backspaceToRemoveMessage, minWidth, placeholder, clearable, @@ -32,8 +29,6 @@ class Dropdown extends Component { options, searchable, multi, - optionRenderer, - valueRenderer, noResultsText, valueKey, disabled, @@ -48,35 +43,34 @@ class Dropdown extends Component { dropdownStyle.width = width; } - const opts = options.slice(); - for (let i = 0; i < opts.length; i++) { - if (typeof opts[i] === 'string') { - opts[i] = {label: opts[i], [valueKey]: opts[i]}; - } - } + const opts = options.map(opt => + typeof opt === 'string' ? {label: opt, [valueKey]: opt} : opt + ); const dropdownContainerClass = classnames('dropdown-container', { 'dropdown--dark': this.props.backgroundDark, - [this.props.className]: this.props.className, + [className]: className, }); return (
+
{this.state.content}
+
+ )} ); } From ca6303cecafb0333557f087d0b8ba96450e7484f Mon Sep 17 00:00:00 2001 From: dmt0 Date: Wed, 27 Feb 2019 18:09:16 -0500 Subject: [PATCH 14/17] react-hot-loader upgrade --- dev/App.js | 4 ++-- package.json | 1 + webpack.config.js | 6 +++++- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/dev/App.js b/dev/App.js index 24ad00713..fd8349776 100644 --- a/dev/App.js +++ b/dev/App.js @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import {hot} from 'react-hot-loader'; +import {hot} from 'react-hot-loader/root'; import plotly from 'plotly.js/dist/plotly-with-meta'; import '../src/styles/main.scss'; import brace from 'brace'; // eslint-disable-line no-unused-vars @@ -275,4 +275,4 @@ class App extends Component { } } -export default hot(module)(App); +export default hot(App); diff --git a/package.json b/package.json index 26232493e..ac1c471dc 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@babel/preset-env": "^7.3.4", "@babel/preset-react": "^7.0.0", "@babel/traverse": "^7.3.4", + "@hot-loader/react-dom": "^16.8.3", "@percy-io/percy-storybook": "^2.1.0", "@storybook/react": "^4.1.13", "autoprefixer": "^9.4.9", diff --git a/webpack.config.js b/webpack.config.js index 0aaff5811..37a423049 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -39,7 +39,11 @@ module.exports = { }, ], }, - + resolve: { + alias: { + 'react-dom': '@hot-loader/react-dom', + }, + }, plugins: [new webpack.IgnorePlugin(/vertx/)], devServer: { open: true, From 4a08a676e9719db69a64195a17b446ab19cb6004 Mon Sep 17 00:00:00 2001 From: dmt0 Date: Thu, 28 Feb 2019 16:40:54 -0500 Subject: [PATCH 15/17] Readme minor fixups --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 45e7fec29..2eb5647de 100644 --- a/README.md +++ b/README.md @@ -155,14 +155,14 @@ Once you have your tokens, you can provide it as a config prop to the ` Date: Fri, 1 Mar 2019 17:07:11 -0500 Subject: [PATCH 16/17] Fix translation script after babel upgrade --- scripts/findTranslationKeys.js | 45 +++++++++++++++++++--------------- 1 file changed, 25 insertions(+), 20 deletions(-) diff --git a/scripts/findTranslationKeys.js b/scripts/findTranslationKeys.js index 498bfb6bb..c1079fcc0 100644 --- a/scripts/findTranslationKeys.js +++ b/scripts/findTranslationKeys.js @@ -1,5 +1,5 @@ -const transform = require('babel-core').transform; -const traverse = require('babel-traverse').default; +const transformSync = require('@babel/core').transformSync; +const traverse = require('@babel/traverse').default; const fs = require('fs'); const glob = require('glob'); const path = require('path'); @@ -10,10 +10,8 @@ const path = require('path'); const pathToSrc = process.argv[2] || path.join(__dirname, '../src'); const srcGlob = path.join(pathToSrc, '**/*.js'); -const pathToTranslationKeys = process.argv[3] || path.join( - __dirname, - './translationKeys/translation-keys.txt' -); +const pathToTranslationKeys = + process.argv[3] || path.join(__dirname, './translationKeys/translation-keys.txt'); findLocaleStrings(); @@ -30,16 +28,28 @@ function findLocaleStrings() { files.forEach(file => { const code = fs.readFileSync(file, 'utf-8'); const filePartialPath = file.substr(pathToSrc.length); - const ast = transform(code, { - presets: ['react', 'es2015', 'stage-2'], + const ast = transformSync(code, { + presets: ['@babel/preset-react', '@babel/preset-env'], + plugins: [ + '@babel/plugin-proposal-object-rest-spread', + [ + 'module-resolver', + { + root: ['./'], + alias: { + components: './src/components', + lib: './src/lib', + styles: './src/styles', + }, + }, + ], + ], + ast: true, }).ast; traverse(ast, { enter(path) { - if ( - path.node.type === 'CallExpression' && - path.node.callee.name === '_' - ) { + if (path.node.type === 'CallExpression' && path.node.callee.name === '_') { const strNode = path.node.arguments[0]; let strNodeValue = strNode.value; @@ -47,9 +57,7 @@ function findLocaleStrings() { logError(file, path.node, 'Localize takes 1 args'); } - if ( - ['StringLiteral', 'BinaryExpression'].indexOf(strNode.type) < 0 - ) { + if (['StringLiteral', 'BinaryExpression'].indexOf(strNode.type) < 0) { logError( file, path.node, @@ -71,8 +79,7 @@ function findLocaleStrings() { } if (!dict[strNodeValue]) { - dict[strNodeValue] = - filePartialPath + ':' + strNode.loc.start.line; + dict[strNodeValue] = filePartialPath + ':' + strNode.loc.start.line; maxLen = Math.max(maxLen, strNodeValue.length); hasTranslation = true; } @@ -96,9 +103,7 @@ function findLocaleStrings() { } function logError(file, node, msg) { - throw new Error( - file + ' [line ' + node.loc.start.line + '] ' + msg + '\n ' - ); + throw new Error(file + ' [line ' + node.loc.start.line + '] ' + msg + '\n '); } function spaces(len) { From 462721c69613fd9a57419d5e878677cf1fb2ff6b Mon Sep 17 00:00:00 2001 From: dmt0 Date: Mon, 4 Mar 2019 17:20:02 -0500 Subject: [PATCH 17/17] Don't preserve custom property replacement - as it was before --- scripts/postcss.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/postcss.js b/scripts/postcss.js index a3746eee8..ecd738132 100644 --- a/scripts/postcss.js +++ b/scripts/postcss.js @@ -25,7 +25,7 @@ const internetExplorerPostCSS = () => { */ const ie11_plugins = [ combineSelectors, - customProperties, + customProperties({preserve: false}), removeRoot, autoprefixer({browsers: ['ie 11'], grid: true}), cssnano,