@hig/flyout - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

build/index.es.js

@@ -397,2 +397,3 @@ import React, { Component } from 'react';
 
+  var maxHeightInPixels = maxHeight ? maxHeight + "px" : undefined;
 
@@ -404,3 +405,3 @@ return React.createElement(
       ref: innerRef,
-      style: { maxHeight: maxHeight }
+      style: { maxHeight: maxHeightInPixels }
     },
@@ -470,2 +471,11 @@ React.createElement(
 
+/**
+ * @typedef {Object} State
+ * @property {HTMLElement} [actionRef]
+ * @property {HTMLDivElement} [containerRef]
+ * @property {boolean} open Used to direct the flyout's transition behavior
+ * @property {HTMLElement} [panelRef]
+ * @property {HTMLDivElement} [wrapperRef]
+ */
+
 var Flyout = function (_Component) {
@@ -486,9 +496,13 @@ _inherits(Flyout, _Component);
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Flyout.__proto__ || Object.getPrototypeOf(Flyout)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      isVisible: false
+      actionRef: undefined,
+      containerRef: undefined,
+      open: false,
+      panelRef: undefined,
+      wrapperRef: undefined
     }, _this.handleChildClick = function () {
-      _this.toggleVisibility();
+      if (!_this.isOpenControlled()) {
+        _this.toggleOpen();
+      }
     }, _this.handleBodyClick = function (event) {
-      var _this2 = _this,
-          wrapperRef = _this2.wrapperRef;
-      var isVisible = _this.state.isVisible;
+      var wrapperRef = _this.state.wrapperRef;
       var onClickOutside = _this.props.onClickOutside;
@@ -498,25 +512,19 @@
 
-      if (flyoutClicked || !isVisible) return;
+      if (flyoutClicked || !_this.isOpen()) return;
       if (onClickOutside) onClickOutside(event);
-
-      _this.toggleVisibility();
+      if (!_this.isOpenControlled()) _this.toggleOpen();
     }, _this.refAction = function (actionRef) {
-      _this.actionRef = actionRef;
+      _this.setState({ actionRef: actionRef });
     }, _this.refContainer = function (containerRef) {
-      _this.containerRef = containerRef;
+      _this.setState({ containerRef: containerRef });
     }, _this.refPanel = function (panelRef) {
-      _this.panelRef = panelRef;
+      _this.setState({ panelRef: panelRef });
     }, _this.refWrapper = function (wrapperRef) {
-      _this.wrapperRef = wrapperRef;
+      _this.setState({ wrapperRef: wrapperRef });
     }, _this.hideFlyout = function () {
-      _this.setState({
-        isVisible: false
-      });
+      _this.setOpen(false);
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
-  /**
-   * @type {Object}
-   * @property {boolean} isVisible Used to direct the flyout's transition behavior
-   */
+  /** @type {State} */
 
@@ -534,10 +542,23 @@
     }
+
+    /**
+     * @returns {import("./getFlyoutPosition").FlyoutPosition}
+     */
+
   }, {
     key: "getPresenterPositionProps",
     value: function getPresenterPositionProps() {
-      var actionRef = this.actionRef,
-          panelRef = this.panelRef;
+      var anchorPoint = this.props.anchorPoint;
+      var _state = this.state,
+          actionRef = _state.actionRef,
+          panelRef = _state.panelRef;
 
 
-      if (!actionRef || !panelRef) return { top: 0, left: 0 };
+      if (!actionRef || !panelRef) {
+        return {
+          anchorPoint: anchorPoint,
+          top: 0,
+          left: 0
+        };
+      }
 
@@ -547,5 +568,3 @@ var actionRect = actionRef.getBoundingClientRect();
       var viewportRect = window.document.documentElement.getBoundingClientRect();
-      var anchorPoint = this.props.anchorPoint;
 
-
       return getFlyoutPosition({
@@ -559,14 +578,33 @@ anchorPoint: anchorPoint,
 
-    /** @type {HTMLElement} */
+    /**
+     * @param {boolean} open
+     */
 
+  }, {
+    key: "setOpen",
+    value: function setOpen(open) {
+      var _props = this.props,
+          onClose = _props.onClose,
+          onOpen = _props.onOpen;
 
-    /** @type {HTMLDivElement} */
 
+      if (open && onOpen) {
+        onOpen();
+      } else if (!open && onClose) {
+        onClose();
+      }
 
-    /** @type {HTMLElement} */
+      this.setState({ open: open });
+    }
+  }, {
+    key: "isOpenControlled",
+    value: function isOpenControlled() {
+      return this.props.open !== undefined;
+    }
+  }, {
+    key: "isOpen",
+    value: function isOpen() {
+      return this.isOpenControlled() ? this.props.open : this.state.open;
+    }
 
-
-    /** @type {HTMLDivElement} */
-
-
     /**
@@ -597,7 +635,5 @@ * @param {MouseEvent} event
   }, {
-    key: "toggleVisibility",
-    value: function toggleVisibility() {
-      this.setState({
-        isVisible: !this.state.isVisible
-      });
+    key: "toggleOpen",
+    value: function toggleOpen() {
+      this.setOpen(!this.state.open);
     }
@@ -638,5 +674,5 @@ }, {
       var hideFlyout = this.hideFlyout;
-      var _props = this.props,
-          maxHeight = _props.maxHeight,
-          onScroll = _props.onScroll;
+      var _props2 = this.props,
+          maxHeight = _props2.maxHeight,
+          onScroll = _props2.onScroll;
 
@@ -697,12 +733,12 @@
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
 
       return React.createElement(
         Transition,
-        { "in": this.state.isVisible, timeout: TRANSITION_DURATION },
+        { "in": this.isOpen(), timeout: TRANSITION_DURATION },
         function (transitionStatus) {
           return React.createElement(
             FlyoutPresenter,
-            _this3.createPresenterProps(transitionStatus),
-            _this3.renderChildren()
+            _this2.createPresenterProps(transitionStatus),
+            _this2.renderChildren()
           );
@@ -712,20 +748,2 @@ }
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-
-
-    /**
-     * @param {FlyoutProps} nextProps
-     * @param {FlyoutState} prevState
-     * @returns {FlyoutState | null}
-     */
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      var open = nextProps.open;
-      var isVisible = prevState.isVisible;
-
-
-      if (open === isVisible) return null;
-
-      return { isVisible: open };
-    }
   }]);
@@ -749,2 +767,6 @@
   onClickOutside: PropTypes.func,
+  /** Function called when the flyout closes */
+  onClose: PropTypes.func,
+  /** Function called when the flyout opens */
+  onOpen: PropTypes.func,
   /** Function called when the flyout panel is scrolled */
@@ -781,3 +803,3 @@ onScroll: PropTypes.func,
 Flyout.__docgenInfo = {
-  "description": "@typedef {Object} PanelRendererPayload\n@property {function(HTMLElement): void} innerRef\n@property {function(): void} hideFlyout\n@property {JSX} [content]\n@property {function(UIEvent): void} [handleScroll]\n@property {number} [maxHeight]",
+  "description": "@typedef {Object} State\n@property {HTMLElement} [actionRef]\n@property {HTMLDivElement} [containerRef]\n@property {boolean} open Used to direct the flyout's transition behavior\n@property {HTMLElement} [panelRef]\n@property {HTMLDivElement} [wrapperRef]",
   "displayName": "Flyout",
@@ -847,2 +869,16 @@ "props": {
     },
+    "onClose": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Function called when the flyout closes"
+    },
+    "onOpen": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Function called when the flyout opens"
+    },
     "onScroll": {
@@ -868,2 +904,2 @@ "type": {
 export default Flyout$1;
-export { PanelContainerPresenter as Panel, anchorPoints, availableAnchorPoints };
+export { PanelContainerPresenter as Panel, anchorPoints, availableAnchorPoints, availableAnchorPoints as AVAILABLE_ANCHOR_POINTS };

build/index.js

@@ -405,2 +405,3 @@ 'use strict';
 
+  var maxHeightInPixels = maxHeight ? maxHeight + "px" : undefined;
 
@@ -412,3 +413,3 @@ return React__default.createElement(
       ref: innerRef,
-      style: { maxHeight: maxHeight }
+      style: { maxHeight: maxHeightInPixels }
     },
@@ -478,2 +479,11 @@ React__default.createElement(
 
+/**
+ * @typedef {Object} State
+ * @property {HTMLElement} [actionRef]
+ * @property {HTMLDivElement} [containerRef]
+ * @property {boolean} open Used to direct the flyout's transition behavior
+ * @property {HTMLElement} [panelRef]
+ * @property {HTMLDivElement} [wrapperRef]
+ */
+
 var Flyout = function (_Component) {
@@ -494,9 +504,13 @@ _inherits(Flyout, _Component);
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Flyout.__proto__ || Object.getPrototypeOf(Flyout)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      isVisible: false
+      actionRef: undefined,
+      containerRef: undefined,
+      open: false,
+      panelRef: undefined,
+      wrapperRef: undefined
     }, _this.handleChildClick = function () {
-      _this.toggleVisibility();
+      if (!_this.isOpenControlled()) {
+        _this.toggleOpen();
+      }
     }, _this.handleBodyClick = function (event) {
-      var _this2 = _this,
-          wrapperRef = _this2.wrapperRef;
-      var isVisible = _this.state.isVisible;
+      var wrapperRef = _this.state.wrapperRef;
       var onClickOutside = _this.props.onClickOutside;
@@ -506,25 +520,19 @@
 
-      if (flyoutClicked || !isVisible) return;
+      if (flyoutClicked || !_this.isOpen()) return;
       if (onClickOutside) onClickOutside(event);
-
-      _this.toggleVisibility();
+      if (!_this.isOpenControlled()) _this.toggleOpen();
     }, _this.refAction = function (actionRef) {
-      _this.actionRef = actionRef;
+      _this.setState({ actionRef: actionRef });
     }, _this.refContainer = function (containerRef) {
-      _this.containerRef = containerRef;
+      _this.setState({ containerRef: containerRef });
     }, _this.refPanel = function (panelRef) {
-      _this.panelRef = panelRef;
+      _this.setState({ panelRef: panelRef });
     }, _this.refWrapper = function (wrapperRef) {
-      _this.wrapperRef = wrapperRef;
+      _this.setState({ wrapperRef: wrapperRef });
     }, _this.hideFlyout = function () {
-      _this.setState({
-        isVisible: false
-      });
+      _this.setOpen(false);
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
-  /**
-   * @type {Object}
-   * @property {boolean} isVisible Used to direct the flyout's transition behavior
-   */
+  /** @type {State} */
 
@@ -542,10 +550,23 @@
     }
+
+    /**
+     * @returns {import("./getFlyoutPosition").FlyoutPosition}
+     */
+
   }, {
     key: "getPresenterPositionProps",
     value: function getPresenterPositionProps() {
-      var actionRef = this.actionRef,
-          panelRef = this.panelRef;
+      var anchorPoint = this.props.anchorPoint;
+      var _state = this.state,
+          actionRef = _state.actionRef,
+          panelRef = _state.panelRef;
 
 
-      if (!actionRef || !panelRef) return { top: 0, left: 0 };
+      if (!actionRef || !panelRef) {
+        return {
+          anchorPoint: anchorPoint,
+          top: 0,
+          left: 0
+        };
+      }
 
@@ -555,5 +576,3 @@ var actionRect = actionRef.getBoundingClientRect();
       var viewportRect = window.document.documentElement.getBoundingClientRect();
-      var anchorPoint = this.props.anchorPoint;
 
-
       return getFlyoutPosition({
@@ -567,14 +586,33 @@ anchorPoint: anchorPoint,
 
-    /** @type {HTMLElement} */
+    /**
+     * @param {boolean} open
+     */
 
+  }, {
+    key: "setOpen",
+    value: function setOpen(open) {
+      var _props = this.props,
+          onClose = _props.onClose,
+          onOpen = _props.onOpen;
 
-    /** @type {HTMLDivElement} */
 
+      if (open && onOpen) {
+        onOpen();
+      } else if (!open && onClose) {
+        onClose();
+      }
 
-    /** @type {HTMLElement} */
+      this.setState({ open: open });
+    }
+  }, {
+    key: "isOpenControlled",
+    value: function isOpenControlled() {
+      return this.props.open !== undefined;
+    }
+  }, {
+    key: "isOpen",
+    value: function isOpen() {
+      return this.isOpenControlled() ? this.props.open : this.state.open;
+    }
 
-
-    /** @type {HTMLDivElement} */
-
-
     /**
@@ -605,7 +643,5 @@ * @param {MouseEvent} event
   }, {
-    key: "toggleVisibility",
-    value: function toggleVisibility() {
-      this.setState({
-        isVisible: !this.state.isVisible
-      });
+    key: "toggleOpen",
+    value: function toggleOpen() {
+      this.setOpen(!this.state.open);
     }
@@ -646,5 +682,5 @@ }, {
       var hideFlyout = this.hideFlyout;
-      var _props = this.props,
-          maxHeight = _props.maxHeight,
-          onScroll = _props.onScroll;
+      var _props2 = this.props,
+          maxHeight = _props2.maxHeight,
+          onScroll = _props2.onScroll;
 
@@ -705,12 +741,12 @@
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
 
       return React__default.createElement(
         Transition__default,
-        { "in": this.state.isVisible, timeout: TRANSITION_DURATION },
+        { "in": this.isOpen(), timeout: TRANSITION_DURATION },
         function (transitionStatus) {
           return React__default.createElement(
             FlyoutPresenter,
-            _this3.createPresenterProps(transitionStatus),
-            _this3.renderChildren()
+            _this2.createPresenterProps(transitionStatus),
+            _this2.renderChildren()
           );
@@ -720,20 +756,2 @@ }
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-
-
-    /**
-     * @param {FlyoutProps} nextProps
-     * @param {FlyoutState} prevState
-     * @returns {FlyoutState | null}
-     */
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      var open = nextProps.open;
-      var isVisible = prevState.isVisible;
-
-
-      if (open === isVisible) return null;
-
-      return { isVisible: open };
-    }
   }]);
@@ -757,2 +775,6 @@
   onClickOutside: PropTypes.func,
+  /** Function called when the flyout closes */
+  onClose: PropTypes.func,
+  /** Function called when the flyout opens */
+  onOpen: PropTypes.func,
   /** Function called when the flyout panel is scrolled */
@@ -789,3 +811,3 @@ onScroll: PropTypes.func,
 Flyout.__docgenInfo = {
-  "description": "@typedef {Object} PanelRendererPayload\n@property {function(HTMLElement): void} innerRef\n@property {function(): void} hideFlyout\n@property {JSX} [content]\n@property {function(UIEvent): void} [handleScroll]\n@property {number} [maxHeight]",
+  "description": "@typedef {Object} State\n@property {HTMLElement} [actionRef]\n@property {HTMLDivElement} [containerRef]\n@property {boolean} open Used to direct the flyout's transition behavior\n@property {HTMLElement} [panelRef]\n@property {HTMLDivElement} [wrapperRef]",
   "displayName": "Flyout",
@@ -855,2 +877,16 @@ "props": {
     },
+    "onClose": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Function called when the flyout closes"
+    },
+    "onOpen": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Function called when the flyout opens"
+    },
     "onScroll": {
@@ -879,1 +915,2 @@ "type": {
 exports.availableAnchorPoints = availableAnchorPoints;
+exports.AVAILABLE_ANCHOR_POINTS = availableAnchorPoints;

CHANGELOG.md

@@ -0,1 +1,14 @@
+# [@hig/flyout-v0.3.0](https://github.com/Autodesk/hig/compare/@hig/flyout@0.2.0...@hig/flyout@0.3.0) (2018-08-23)
+
+
+### Bug Fixes
+
+* move refs inside state to trigger render updates ([a1cc220](https://github.com/Autodesk/hig/commit/a1cc220))
+* provide anchorPoint to presenter when no refs are available ([afa9ef6](https://github.com/Autodesk/hig/commit/afa9ef6))
+
+
+### Features
+
+* **behavior:** correct controlled behavior ([b2bc76a](https://github.com/Autodesk/hig/commit/b2bc76a))
+
 # [@hig/flyout-v0.2.0](https://github.com/Autodesk/hig/compare/@hig/flyout@0.1.1...@hig/flyout@0.2.0) (2018-08-06)
@@ -2,0 +15,0 @@

package.json

 {
   "name": "@hig/flyout",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "HIG Flyout",
@@ -5,0 +5,0 @@ "author": "Autodesk Inc.",

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

Improved metrics

Total package byte prevSize

73064

increased by4%

Lines of code

1890

increased by4.83%

No dependency changes