@helpscout/hsds-react/components/ActionSelect/ActionSelect.ContentResizer.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.ContentResizer = exports.getInitialState = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Animate = _interopRequireDefault(require("../Animate"));

var _ActionSelect = require("./ActionSelect.css");

var _easing = require("../../utilities/easing");

var _jsxRuntime = require("react/jsx-runtime");

function noop() {}

var getInitialState = function getInitialState(props) {
  var children = props.children;
  return {
    height: children ? 'auto' : 0
  };
};

exports.getInitialState = getInitialState;

var ContentResizer = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(ContentResizer, _React$PureComponent);

  function ContentResizer() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.animationUpdateInterval = void 0;
    _this._isMounted = false;
    _this.node = void 0;
    _this.resizerNode = void 0;
    _this.state = getInitialState(_this.props);

    _this.safeSetState = function (nextState, callback) {
      if (_this._isMounted) {
        _this.setState(nextState, callback);
      }
    };

    _this.handleResize = function (props) {
      // Sets the initial height (px)
      _this.resize(_this.props);

      requestAnimationFrame(function () {
        // Sets the next (animation) height (px)
        _this.resize(props);
      });
    };

    _this.onAnimationEnd = function () {
      _this.props.onAnimationEnd && _this.props.onAnimationEnd();
      _this.animationUpdateInterval && clearInterval(_this.animationUpdateInterval);
    };

    _this.resize = function (props) {
      if (!_this.node) return;
      var children = props.children;
      var clientHeight = _this.node.clientHeight;
      var height = children ? clientHeight : 0;

      _this.safeSetState({
        height: height
      }, _this.addOnAnimationUpdate);

      _this.props.onResize();
    };

    _this.resetHeight = function () {
      _this.safeSetState(getInitialState(_this.props));
    };

    _this.getResizeStyles = function () {
      var _this$props = _this.props,
          animationEasing = _this$props.animationEasing,
          animationDuration = _this$props.animationDuration,
          borderWidth = _this$props.borderWidth,
          children = _this$props.children,
          isFadeContentOnOpen = _this$props.isFadeContentOnOpen,
          isOpen = _this$props.isOpen;
      var height = _this.state.height;
      return {
        borderWidth: children ? borderWidth : 0,
        height: height,
        opacity: isFadeContentOnOpen && isOpen ? 0.5 : 1,
        transitionDuration: animationDuration + "ms",
        transitionTimingFunction: (0, _easing.getEasingTiming)(animationEasing)
      };
    };

    _this.setNodeRef = function (node) {
      _this.node = node;

      if (_this.props.mainRef) {
        _this.props.mainRef(node);
      }
    };

    _this.setResizerNodeRef = function (node) {
      _this.resizerNode = node;
    };

    return _this;
  }

  var _proto = ContentResizer.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this._isMounted = true;
    this.resizerNode.addEventListener('transitionend', this.onAnimationEnd);
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this._isMounted = false;
  };

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.resizeCount !== this.props.resizeCount) {
      this.animationUpdateInterval && clearInterval(this.animationUpdateInterval);
      this.handleResize(nextProps);
    }

    if (!nextProps.isOpen) {
      this.animationUpdateInterval && clearInterval(this.animationUpdateInterval);
    }
  };

  // calls the an update every 20 milleseconds when the animation is updating
  _proto.addOnAnimationUpdate = function addOnAnimationUpdate() {
    var onAnimationUpdate = this.props.onAnimationUpdate;

    if (!onAnimationUpdate) {
      return;
    }

    if (this.animationUpdateInterval) {
      clearInterval(this.animationUpdateInterval);
    }

    this.animationUpdateInterval = setInterval(this.props.onAnimationUpdate, 20);
  };

  _proto.renderContent = function renderContent() {
    var _this$props2 = this.props,
        animationDuration = _this$props2.animationDuration,
        children = _this$props2.children,
        selectedKey = _this$props2.selectedKey;
    if (!children) return null;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animate.default, {
      duration: animationDuration,
      sequence: "fade",
      children: children
    }, selectedKey);
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        children = _this$props3.children,
        onResize = _this$props3.onResize,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["children", "onResize"]);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionSelect.ContentResizerUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      ref: this.setResizerNodeRef,
      style: this.getResizeStyles(),
      onTransitionEnd: this.resetHeight,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionSelect.ContentUI, {
        "data-cy": "ActionSelectContent",
        ref: this.setNodeRef,
        children: this.renderContent()
      })
    }));
  };

  return ContentResizer;
}(_react.default.PureComponent);

exports.ContentResizer = ContentResizer;
ContentResizer.propTypes = {
  animationDuration: _propTypes.default.number,
  animationEasing: _propTypes.default.string,
  borderOffset: _propTypes.default.number,
  'data-cy': _propTypes.default.string,
  mainRef: _propTypes.default.func,
  isFadeContentOnOpen: _propTypes.default.bool,
  onAnimationEnd: _propTypes.default.func,
  onAnimationUpdate: _propTypes.default.func,
  onResize: _propTypes.default.func,
  resizeCount: _propTypes.default.number,
  selectedKey: _propTypes.default.string
};
ContentResizer.defaultProps = {
  animationDuration: 160,
  animationEasing: 'ease',
  borderOffset: 1,
  'data-cy': 'ActionSelectContentResizer',
  mainRef: noop,
  isFadeContentOnOpen: true,
  onAnimationEnd: null,
  onAnimationUpdate: null,
  onResize: noop,
  resizeCount: 0,
  selectedKey: null
};
var _default = ContentResizer;
exports.default = _default;