@visx/responsive - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

esm/components/ParentSize.js

@@ -7,68 +7,52 @@ import _pt from "prop-types";
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import debounce from 'lodash/debounce';
-import React from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
+export default function ParentSize(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      _ref$debounceTime = _ref.debounceTime,
+      debounceTime = _ref$debounceTime === void 0 ? 300 : _ref$debounceTime,
+      _ref$ignoreDimensions = _ref.ignoreDimensions,
+      ignoreDimensions = _ref$ignoreDimensions === void 0 ? [] : _ref$ignoreDimensions,
+      _ref$parentSizeStyles = _ref.parentSizeStyles,
+      parentSizeStyles = _ref$parentSizeStyles === void 0 ? {
+    width: '100%',
+    height: '100%'
+  } : _ref$parentSizeStyles,
+      _ref$enableDebounceLe = _ref.enableDebounceLeadingCall,
+      enableDebounceLeadingCall = _ref$enableDebounceLe === void 0 ? true : _ref$enableDebounceLe,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["className", "children", "debounceTime", "ignoreDimensions", "parentSizeStyles", "enableDebounceLeadingCall"]);
 
-var ParentSize = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(ParentSize, _React$Component);
+  var target = useRef(null);
+  var animationFrameID = useRef(0);
 
-  function ParentSize() {
-    var _this;
+  var _useState = useState({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  }),
+      state = _useState[0],
+      setState = _useState[1];
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "animationFrameID", 0);
-
-    _defineProperty(_assertThisInitialized(_this), "resizeObserver", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "target", null);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      width: 0,
-      height: 0,
-      top: 0,
-      left: 0
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "resize", debounce(function (_ref) {
-      var width = _ref.width,
-          height = _ref.height,
-          top = _ref.top,
-          left = _ref.left;
-
-      _this.setState(function () {
-        return {
-          width: width,
-          height: height,
-          top: top,
-          left: left
-        };
+  var resize = useMemo(function () {
+    var normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];
+    return debounce(function (incoming) {
+      setState(function (existing) {
+        var stateKeys = Object.keys(existing);
+        var keysWithChanges = stateKeys.filter(function (key) {
+          return existing[key] !== incoming[key];
+        });
+        var shouldBail = keysWithChanges.every(function (key) {
+          return normalized.includes(key);
+        });
+        return shouldBail ? existing : incoming;
       });
-    }, _this.props.debounceTime, {
-      leading: _this.props.enableDebounceLeadingCall
-    }));
-
-    _defineProperty(_assertThisInitialized(_this), "setTarget", function (ref) {
-      _this.target = ref;
+    }, debounceTime, {
+      leading: enableDebounceLeadingCall
     });
-
-    return _this;
-  }
-
-  var _proto = ParentSize.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    var _this2 = this;
-
-    this.resizeObserver = new ResizeObserver(function (entries
+  }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);
+  useEffect(function () {
+    var observer = new ResizeObserver(function (entries
     /** , observer */
@@ -86,4 +70,4 @@ ) {
             height = _entry$contentRect.height;
-        _this2.animationFrameID = window.requestAnimationFrame(function () {
-          _this2.resize({
+        animationFrameID.current = window.requestAnimationFrame(function () {
+          resize({
             width: width,
@@ -97,49 +81,24 @@ height: height,
     });
-    if (this.target) this.resizeObserver.observe(this.target);
-  };
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    window.cancelAnimationFrame(this.animationFrameID);
-    if (this.resizeObserver) this.resizeObserver.disconnect();
-    this.resize.cancel();
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        className = _this$props.className,
-        children = _this$props.children,
-        debounceTime = _this$props.debounceTime,
-        parentSizeStyles = _this$props.parentSizeStyles,
-        enableDebounceLeadingCall = _this$props.enableDebounceLeadingCall,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["className", "children", "debounceTime", "parentSizeStyles", "enableDebounceLeadingCall"]);
-
-    return /*#__PURE__*/React.createElement("div", _extends({
-      style: parentSizeStyles,
-      ref: this.setTarget,
-      className: className
-    }, restProps), children(_extends({}, this.state, {
-      ref: this.target,
-      resize: this.resize
-    })));
-  };
-
-  return ParentSize;
-}(React.Component);
-
-_defineProperty(ParentSize, "propTypes", {
+    if (target.current) observer.observe(target.current);
+    return function () {
+      window.cancelAnimationFrame(animationFrameID.current);
+      observer.disconnect();
+      resize.cancel();
+    };
+  }, [resize]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    style: parentSizeStyles,
+    ref: target,
+    className: className
+  }, restProps), children(_extends({}, state, {
+    ref: target.current,
+    resize: resize
+  })));
+}
+ParentSize.propTypes = {
   className: _pt.string,
   debounceTime: _pt.number,
   enableDebounceLeadingCall: _pt.bool,
+  ignoreDimensions: _pt.oneOfType([_pt.any, _pt.arrayOf(_pt.any)]),
   children: _pt.func.isRequired
-});
-
-_defineProperty(ParentSize, "defaultProps", {
-  debounceTime: 300,
-  enableDebounceLeadingCall: true,
-  parentSizeStyles: {
-    width: '100%',
-    height: '100%'
-  }
-});
-
-export { ParentSize as default };
+};

esm/enhancers/withParentSize.js

@@ -93,5 +93,10 @@ import _pt from "prop-types";
     _proto.render = function render() {
+      var _this$props = this.props,
+          initialWidth = _this$props.initialWidth,
+          initialHeight = _this$props.initialHeight;
       var _this$state = this.state,
-          parentWidth = _this$state.parentWidth,
-          parentHeight = _this$state.parentHeight;
+          _this$state$parentWid = _this$state.parentWidth,
+          parentWidth = _this$state$parentWid === void 0 ? initialWidth : _this$state$parentWid,
+          _this$state$parentHei = _this$state.parentHeight,
+          parentHeight = _this$state$parentHei === void 0 ? initialHeight : _this$state$parentHei;
       return /*#__PURE__*/React.createElement("div", {
@@ -109,3 +114,5 @@ style: CONTAINER_STYLES,
     parentWidth: _pt.number,
-    parentHeight: _pt.number
+    parentHeight: _pt.number,
+    initialWidth: _pt.number,
+    initialHeight: _pt.number
   }), _defineProperty(_class, "defaultProps", {
@@ -112,0 +119,0 @@ debounceTime: 300,

lib/components/ParentSize.d.ts

@@ -1,4 +0,2 @@
-/// <reference types="lodash" />
 import React from 'react';
-import ResizeObserver from 'resize-observer-polyfill';
 export declare type ParentSizeProps = {
@@ -11,2 +9,4 @@ /** Optional `className` to add to the parent `div` wrapper used for size measurement. */
     enableDebounceLeadingCall?: boolean;
+    /** Optional dimensions provided won't trigger a state change when changed. */
+    ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];
     /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */
@@ -27,27 +27,4 @@ parentSizeStyles?: React.CSSProperties;
 export declare type ParentSizeProvidedProps = ParentSizeState;
-export default class ParentSize extends React.Component<ParentSizeProps & Omit<JSX.IntrinsicElements['div'], keyof ParentSizeProps>, ParentSizeState> {
-    static defaultProps: {
-        debounceTime: number;
-        enableDebounceLeadingCall: boolean;
-        parentSizeStyles: {
-            width: string;
-            height: string;
-        };
-    };
-    animationFrameID: number;
-    resizeObserver: ResizeObserver | undefined;
-    target: HTMLDivElement | null;
-    state: {
-        width: number;
-        height: number;
-        top: number;
-        left: number;
-    };
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    resize: (({ width, height, top, left }: ParentSizeState) => void) & import("lodash").Cancelable;
-    setTarget: (ref: HTMLDivElement | null) => void;
-    render(): JSX.Element;
-}
+export default function ParentSize({ className, children, debounceTime, ignoreDimensions, parentSizeStyles, enableDebounceLeadingCall, ...restProps }: ParentSizeProps & Omit<JSX.IntrinsicElements['div'], keyof ParentSizeProps>): JSX.Element;
 export {};
 //# sourceMappingURL=ParentSize.d.ts.map

lib/components/ParentSize.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = ParentSize;
 
@@ -10,6 +10,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,64 +25,49 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function ParentSize(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      _ref$debounceTime = _ref.debounceTime,
+      debounceTime = _ref$debounceTime === void 0 ? 300 : _ref$debounceTime,
+      _ref$ignoreDimensions = _ref.ignoreDimensions,
+      ignoreDimensions = _ref$ignoreDimensions === void 0 ? [] : _ref$ignoreDimensions,
+      _ref$parentSizeStyles = _ref.parentSizeStyles,
+      parentSizeStyles = _ref$parentSizeStyles === void 0 ? {
+    width: '100%',
+    height: '100%'
+  } : _ref$parentSizeStyles,
+      _ref$enableDebounceLe = _ref.enableDebounceLeadingCall,
+      enableDebounceLeadingCall = _ref$enableDebounceLe === void 0 ? true : _ref$enableDebounceLe,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["className", "children", "debounceTime", "ignoreDimensions", "parentSizeStyles", "enableDebounceLeadingCall"]);
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+  var target = (0, _react.useRef)(null);
+  var animationFrameID = (0, _react.useRef)(0);
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+  var _useState = (0, _react.useState)({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  }),
+      state = _useState[0],
+      setState = _useState[1];
 
-var ParentSize = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(ParentSize, _React$Component);
-
-  function ParentSize() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "animationFrameID", 0);
-
-    _defineProperty(_assertThisInitialized(_this), "resizeObserver", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "target", null);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      width: 0,
-      height: 0,
-      top: 0,
-      left: 0
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "resize", (0, _debounce.default)(function (_ref) {
-      var width = _ref.width,
-          height = _ref.height,
-          top = _ref.top,
-          left = _ref.left;
-
-      _this.setState(function () {
-        return {
-          width: width,
-          height: height,
-          top: top,
-          left: left
-        };
+  var resize = (0, _react.useMemo)(function () {
+    var normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];
+    return (0, _debounce.default)(function (incoming) {
+      setState(function (existing) {
+        var stateKeys = Object.keys(existing);
+        var keysWithChanges = stateKeys.filter(function (key) {
+          return existing[key] !== incoming[key];
+        });
+        var shouldBail = keysWithChanges.every(function (key) {
+          return normalized.includes(key);
+        });
+        return shouldBail ? existing : incoming;
       });
-    }, _this.props.debounceTime, {
-      leading: _this.props.enableDebounceLeadingCall
-    }));
-
-    _defineProperty(_assertThisInitialized(_this), "setTarget", function (ref) {
-      _this.target = ref;
+    }, debounceTime, {
+      leading: enableDebounceLeadingCall
     });
-
-    return _this;
-  }
-
-  var _proto = ParentSize.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    var _this2 = this;
-
-    this.resizeObserver = new _resizeObserverPolyfill.default(function (entries
+  }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);
+  (0, _react.useEffect)(function () {
+    var observer = new _resizeObserverPolyfill.default(function (entries
     /** , observer */
@@ -96,4 +85,4 @@ ) {
             height = _entry$contentRect.height;
-        _this2.animationFrameID = window.requestAnimationFrame(function () {
-          _this2.resize({
+        animationFrameID.current = window.requestAnimationFrame(function () {
+          resize({
             width: width,
@@ -107,49 +96,25 @@ height: height,
     });
-    if (this.target) this.resizeObserver.observe(this.target);
-  };
+    if (target.current) observer.observe(target.current);
+    return function () {
+      window.cancelAnimationFrame(animationFrameID.current);
+      observer.disconnect();
+      resize.cancel();
+    };
+  }, [resize]);
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    style: parentSizeStyles,
+    ref: target,
+    className: className
+  }, restProps), children(_extends({}, state, {
+    ref: target.current,
+    resize: resize
+  })));
+}
 
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    window.cancelAnimationFrame(this.animationFrameID);
-    if (this.resizeObserver) this.resizeObserver.disconnect();
-    this.resize.cancel();
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        className = _this$props.className,
-        children = _this$props.children,
-        debounceTime = _this$props.debounceTime,
-        parentSizeStyles = _this$props.parentSizeStyles,
-        enableDebounceLeadingCall = _this$props.enableDebounceLeadingCall,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["className", "children", "debounceTime", "parentSizeStyles", "enableDebounceLeadingCall"]);
-
-    return /*#__PURE__*/_react.default.createElement("div", _extends({
-      style: parentSizeStyles,
-      ref: this.setTarget,
-      className: className
-    }, restProps), children(_extends({}, this.state, {
-      ref: this.target,
-      resize: this.resize
-    })));
-  };
-
-  return ParentSize;
-}(_react.default.Component);
-
-exports.default = ParentSize;
-
-_defineProperty(ParentSize, "propTypes", {
+ParentSize.propTypes = {
   className: _propTypes.default.string,
   debounceTime: _propTypes.default.number,
   enableDebounceLeadingCall: _propTypes.default.bool,
+  ignoreDimensions: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.arrayOf(_propTypes.default.any)]),
   children: _propTypes.default.func.isRequired
-});
-
-_defineProperty(ParentSize, "defaultProps", {
-  debounceTime: 300,
-  enableDebounceLeadingCall: true,
-  parentSizeStyles: {
-    width: '100%',
-    height: '100%'
-  }
-});
+};

lib/enhancers/withParentSize.d.ts

@@ -11,2 +11,4 @@ /// <reference types="lodash" />
     parentHeight?: number;
+    initialWidth?: number;
+    initialHeight?: number;
 };
@@ -32,3 +34,3 @@ export declare type WithParentSizeProvidedProps = WithParentSizeState;
         context: any;
-        setState<K extends "parentWidth" | "parentHeight">(state: WithParentSizeState | ((prevState: Readonly<WithParentSizeState>, props: Readonly<BaseComponentProps & WithParentSizeState>) => WithParentSizeState | Pick<WithParentSizeState, K> | null) | Pick<WithParentSizeState, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends "parentWidth" | "parentHeight" | "initialWidth" | "initialHeight">(state: WithParentSizeState | ((prevState: Readonly<WithParentSizeState>, props: Readonly<BaseComponentProps & WithParentSizeState>) => WithParentSizeState | Pick<WithParentSizeState, K> | null) | Pick<WithParentSizeState, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -69,3 +71,3 @@ readonly props: Readonly<BaseComponentProps & WithParentSizeState> & Readonly<{
         context: any;
-        setState<K extends "parentWidth" | "parentHeight">(state: WithParentSizeState | ((prevState: Readonly<WithParentSizeState>, props: Readonly<BaseComponentProps & WithParentSizeState>) => WithParentSizeState | Pick<WithParentSizeState, K> | null) | Pick<WithParentSizeState, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends "parentWidth" | "parentHeight" | "initialWidth" | "initialHeight">(state: WithParentSizeState | ((prevState: Readonly<WithParentSizeState>, props: Readonly<BaseComponentProps & WithParentSizeState>) => WithParentSizeState | Pick<WithParentSizeState, K> | null) | Pick<WithParentSizeState, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -72,0 +74,0 @@ readonly props: Readonly<BaseComponentProps & WithParentSizeState> & Readonly<{

lib/enhancers/withParentSize.js

@@ -104,5 +104,10 @@ "use strict";
     _proto.render = function render() {
+      var _this$props = this.props,
+          initialWidth = _this$props.initialWidth,
+          initialHeight = _this$props.initialHeight;
       var _this$state = this.state,
-          parentWidth = _this$state.parentWidth,
-          parentHeight = _this$state.parentHeight;
+          _this$state$parentWid = _this$state.parentWidth,
+          parentWidth = _this$state$parentWid === void 0 ? initialWidth : _this$state$parentWid,
+          _this$state$parentHei = _this$state.parentHeight,
+          parentHeight = _this$state$parentHei === void 0 ? initialHeight : _this$state$parentHei;
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -120,3 +125,5 @@ style: CONTAINER_STYLES,
     parentWidth: _propTypes.default.number,
-    parentHeight: _propTypes.default.number
+    parentHeight: _propTypes.default.number,
+    initialWidth: _propTypes.default.number,
+    initialHeight: _propTypes.default.number
   }), _defineProperty(_class, "defaultProps", {
@@ -123,0 +130,0 @@ debounceTime: 300,

package.json

 {
   "name": "@visx/responsive",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "visx responsive svg",
@@ -43,3 +43,3 @@ "sideEffects": false,
   },
-  "gitHead": "598445514c93f22b1b7c399efa894b0778fd6ca6"
+  "gitHead": "2370dc7ace913ffbcf729f64059fee50498d66a4"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

51485

decreased by-1.01%

Lines of code

836

decreased by-4.68%

No dependency changes