Migrate Treemap and makeFlexible to functional components (#1358)

* Convert  Treemap to a functional component

* Update makeFlexible factory to make it create functional components

* Add eslint-plugin-react-hooks and fix error in make-vis-flexible.js

Author: reitlepax

.eslintrc

@@ -2,13 +2,15 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
     "plugin:jest/recommended",
     "prettier",
     "prettier/react"
   ],
   "parser": "babel-eslint",
   "plugins": [
     "react",
+    "react-hooks",
     "prettier",
     "babel",
     "jest"

package.json

@@ -37,6 +37,7 @@
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "husky": "^1.1.2"
   },
   "husky": {

packages/react-vis/src/make-vis-flexible.js

@@ -18,14 +18,12 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
+import React, {useState, useEffect, useRef} from 'react';
 import window from 'global/window';
 
 import XYPlot from 'plot/xy-plot';
 import {getDOMNode} from 'utils/react-utils';
 
-const CONTAINER_REF = 'container';
-
 // As a performance enhancement, we want to only listen once
 const resizeSubscribers = [];
 const DEBOUNCE_DURATION = 100;
@@ -101,79 +99,61 @@ function getDisplayName(Component) {
  */
 
 function makeFlexible(Component, isWidthFlexible, isHeightFlexible) {
-  const ResultClass = class extends React.Component {
-    static get propTypes() {
-      const {height, width, ...otherPropTypes} = Component.propTypes; // eslint-disable-line no-unused-vars
-      return otherPropTypes;
-    }
-
-    constructor(props) {
-      super(props);
-      this.state = {
-        height: 0,
-        width: 0
-      };
-    }
-
-    /**
-     * Get the width of the container and assign the width.
-     * @private
-     */
-    _onResize = () => {
-      const containerElement = getDOMNode(this[CONTAINER_REF]);
-      const {offsetHeight, offsetWidth} = containerElement;
+  const ResultFunctionalComponent = function(props) {
+    const containerRef = useRef();
 
-      const newHeight =
-        this.state.height === offsetHeight ? {} : {height: offsetHeight};
+    const [size, setSize] = useState({height: 0, width: 0});
 
-      const newWidth =
-        this.state.width === offsetWidth ? {} : {width: offsetWidth};
+    useEffect(() => {
+      function _onResize() {
+        const containerElement = getDOMNode(containerRef.current);
+        const {offsetHeight, offsetWidth} = containerElement;
 
-      this.setState({
-        ...newHeight,
-        ...newWidth
-      });
-    };
+        const newHeight =
+          size.height === offsetHeight ? {} : {height: offsetHeight};
 
-    componentDidMount() {
-      this._onResize();
-      this.cancelSubscription = subscribeToDebouncedResize(this._onResize);
-    }
+        const newWidth = size.width === offsetWidth ? {} : {width: offsetWidth};
 
-    UNSAFE_componentWillReceiveProps() {
-      this._onResize();
-    }
+        setSize(prevSize => ({
+          ...prevSize,
+          ...newHeight,
+          ...newWidth
+        }));
+      }
 
-    componentWillUnmount() {
-      this.cancelSubscription();
-    }
+      const cancelSubscription = subscribeToDebouncedResize(_onResize);
 
-    render() {
-      const {height, width} = this.state;
-      const props = {
-        ...this.props,
-        animation: height === 0 && width === 0 ? null : this.props.animation
+      return () => {
+        cancelSubscription();
       };
+    }, [size.width, size.height]);
 
-      const updatedDimensions = {
-        ...(isHeightFlexible ? {height} : {}),
-        ...(isWidthFlexible ? {width} : {})
-      };
+    const {height, width} = size;
+    const componentProps = {
+      ...props,
+      animation: height === 0 && width === 0 ? null : props.animation
+    };
 
-      return (
-        <div
-          ref={ref => (this[CONTAINER_REF] = ref)}
-          style={{width: '100%', height: '100%'}}
-        >
-          <Component {...updatedDimensions} {...props} />
-        </div>
-      );
-    }
+    const updatedDimensions = {
+      ...(isHeightFlexible ? {height} : {}),
+      ...(isWidthFlexible ? {width} : {})
+    };
+
+    return (
+      <div ref={containerRef} style={{width: '100%', height: '100%'}}>
+        <Component {...updatedDimensions} {...componentProps} />
+      </div>
+    );
   };
 
-  ResultClass.displayName = `Flexible${getDisplayName(Component)}`;
+  const {height, width, ...otherPropTypes} = Component.propTypes || {}; // eslint-disable-line no-unused-vars
+  ResultFunctionalComponent.propTypes = otherPropTypes;
+
+  ResultFunctionalComponent.displayName = `Flexible${getDisplayName(
+    Component
+  )}`;
 
-  return ResultClass;
+  return ResultFunctionalComponent;
 }
 
 export function makeHeightFlexible(component) {

packages/react-vis/src/treemap/index.js

@@ -91,30 +91,18 @@ function _getScaleFns(props) {
   };
 }
 
-class Treemap extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      scales: _getScaleFns(props),
-      ...getInnerDimensions(props, props.margin)
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(props) {
-    this.setState({
-      scales: _getScaleFns(props),
-      ...getInnerDimensions(props, props.margin)
-    });
-  }
+function Treemap(props) {
+  const scales = _getScaleFns(props);
+  const innerDimensions = getInnerDimensions(props, props.margin);
 
   /**
    * Create the list of nodes to render.
    * @returns {Array} Array of nodes.
    * @private
    */
-  _getNodesToRender() {
-    const {innerWidth, innerHeight} = this.state;
-    const {data, mode, padding, sortFunction, getSize} = this.props;
+  function _getNodesToRender() {
+    const {innerWidth, innerHeight} = innerDimensions;
+    const {data, mode, padding, sortFunction, getSize} = props;
     if (!data) {
       return [];
     }
@@ -163,13 +151,11 @@ class Treemap extends React.Component {
     return treemapingFunction(structuredInput).descendants();
   }
 
-  render() {
-    const {renderMode} = this.props;
-    const {scales} = this.state;
-    const nodes = this._getNodesToRender();
-    const TreemapElement = renderMode === 'SVG' ? TreemapSVG : TreemapDOM;
-    return <TreemapElement {...this.props} nodes={nodes} scales={scales} />;
-  }
+  const {renderMode} = props;
+  const nodes = _getNodesToRender();
+  const TreemapElement = renderMode === 'SVG' ? TreemapSVG : TreemapDOM;
+
+  return <TreemapElement {...props} nodes={nodes} scales={scales} />;
 }
 
 Treemap.displayName = 'Treemap';

packages/showcase/showcase-links.js

@@ -106,6 +106,7 @@ export const SHOWCASE_LINKS = {
   HorizontalDiscreteColorLegendExample: `${SHOWCASE_BASE_URL}/legends/horizontal-discrete-color.js`,
   HorizontalDiscreteCustomPalette: `${SHOWCASE_BASE_URL}/legends/horizontal-discrete-custom-palette.js`,
   SearchableDiscreteColorLegendExample: `${SHOWCASE_BASE_URL}/legends/searchable-discrete-color.js`,
+  // eslint-disable-next-line max-len
   SearchableDiscreteColorLegendHoverExample: `${SHOWCASE_BASE_URL}/legends/searchable-discrete-color-hover.js`,
   ContinuousColorLegendExample: `${SHOWCASE_BASE_URL}/legends/continuous-color.js`,
   ContinuousSizeLegendExample: `${SHOWCASE_BASE_URL}/legends/continuous-size.js'`

yarn.lock

@@ -6603,6 +6603,11 @@ eslint-plugin-prettier@^3.1.3:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
+eslint-plugin-react-hooks@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.4.tgz#aed33b4254a41b045818cacb047b81e6df27fa58"
+  integrity sha512-equAdEIsUETLFNCmmCkiCGq6rkSK5MoJhXFPFYeUebcjKgBmWWcgVOqZyQC8Bv1BwVCnTq9tBxgJFgAJTWoJtA==
+
 eslint-plugin-react@^6.7.1:
   version "6.10.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.10.3.tgz#c5435beb06774e12c7db2f6abaddcbf900cd3f78"
@@ -9557,10 +9562,10 @@ js-base64@^2.1.8, js-base64@^2.1.9:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.2.tgz#313b6274dda718f714d00b3330bbae6e38e90209"
   integrity sha1-MTtidN2nGPcU0AszMLuubjjpAgk=
 
-js-beautify@^1.8.8:
+js-beautify@1.10.3, js-beautify@^1.8.8:
   version "1.10.3"
   resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.10.3.tgz#c73fa10cf69d3dfa52d8ed624f23c64c0a6a94c1"
-  integrity sha1-xz+hDPadPfpS2O1iTyPGTApqlME=
+  integrity sha512-wfk/IAWobz1TfApSdivH5PJ0miIHgDoYb1ugSqHcODPmaYu46rYe5FVuIEkhjg8IQiv6rDNPyhsqbsohI/C2vQ==
   dependencies:
     config-chain "^1.1.12"
     editorconfig "^0.15.3"