@massds/mayflower-react/dist/Collapse/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _classnames = _interopRequireDefault(require("classnames"));

var _style2 = _interopRequireDefault(require("dom-helpers/style"));

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

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

var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

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 capitalize(string) {
  return "" + string.charAt(0).toUpperCase() + string.slice(1);
}

function getDimensionValue(dimension, elem) {
  var MARGINS = {
    height: ['marginTop', 'marginBottom'],
    width: ['marginLeft', 'marginRight']
  };
  var value = elem["offset" + capitalize(dimension)];
  var margins = MARGINS[dimension];
  return value + parseInt((0, _style2["default"])(elem, margins[0]), 10) + parseInt((0, _style2["default"])(elem, margins[1]), 10);
}

function triggerBrowserReflow(node) {
  node.offsetHeight; // eslint-disable-line no-unused-expressions
}
/** The following animation component was implemented following the same logic/strucure
 *  as React-Bootstrap's Collapse component.
 *  (https://react-bootstrap.github.io/utilities/transitions/#transitions-collapse)
*/


var Collapse = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Collapse, _React$Component);

  function Collapse(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.handleEnter = _this.handleEnter.bind(_assertThisInitialized(_this));
    _this.handleEntering = _this.handleEntering.bind(_assertThisInitialized(_this));
    _this.handleEntered = _this.handleEntered.bind(_assertThisInitialized(_this));
    _this.handleExit = _this.handleExit.bind(_assertThisInitialized(_this));
    _this.handleExiting = _this.handleExiting.bind(_assertThisInitialized(_this));
    return _this;
  } // Expanding


  var _proto = Collapse.prototype;

  _proto.handleEnter = function handleEnter(elem) {
    var minDimension = this.props.minDimension;
    var dimension = this.getDimension();
    var currentDim = parseInt((0, _style2["default"])(elem, dimension), 10);
    var setDim = minDimension <= currentDim ? minDimension : currentDim;
    elem.style[dimension] = setDim + "px"; // eslint-disable-line no-param-reassign

    elem.style["max" + capitalize(dimension)] = 'none'; // eslint-disable-line no-param-reassign
  };

  _proto.handleEntering = function handleEntering(elem) {
    var dimension = this.getDimension();
    elem.style[dimension] = elem["scroll" + capitalize(dimension)] + "px"; // eslint-disable-line no-param-reassign
  };

  _proto.handleEntered = function handleEntered(elem) {
    elem.style[this.getDimension()] = null; // eslint-disable-line no-param-reassign
  } // Collapsing
  ;

  _proto.handleExit = function handleExit(elem) {
    var dimension = this.getDimension();
    elem.style[dimension] = this.props.getDimensionValue(dimension, elem) + "px"; // eslint-disable-line no-param-reassign

    triggerBrowserReflow(elem);
  };

  _proto.handleExiting = function handleExiting(elem) {
    var minDimension = this.props.minDimension;
    var dimension = this.getDimension();
    var currentDim = parseInt((0, _style2["default"])(elem, dimension), 10);
    var setDim = minDimension <= currentDim ? minDimension : currentDim;
    elem.style[dimension] = setDim + "px"; // eslint-disable-line no-param-reassign
  };

  _proto.getDimension = function getDimension() {
    return typeof this.props.dimension === 'function' ? this.props.dimension() : this.props.dimension;
  };

  _proto.render = function render() {
    var _this$props = this.props,
        onEnter = _this$props.onEnter,
        onEntering = _this$props.onEntering,
        onEntered = _this$props.onEntered,
        onExit = _this$props.onExit,
        onExiting = _this$props.onExiting,
        className = _this$props.className,
        children = _this$props.children,
        minDimension = _this$props.minDimension,
        minDimensionOnMount = _this$props.minDimensionOnMount,
        props = _objectWithoutPropertiesLoose(_this$props, ["onEnter", "onEntering", "onEntered", "onExit", "onExiting", "className", "children", "minDimension", "minDimensionOnMount"]);

    var collapseStyles = {
      exited: 'collapsed',
      exiting: 'collapsing',
      entering: 'expanding',
      entered: 'expanded'
    };
    var dimension = this.getDimension();
    delete props.dimension;
    delete props.getDimensionValue;
    return /*#__PURE__*/_react["default"].createElement(_Transition["default"], _extends({}, props, {
      "aria-expanded": props.role ? props["in"] : null,
      onEnter: this.handleEnter,
      onEntering: this.handleEntering,
      onEntered: this.handleEntered,
      onExit: this.handleExit,
      onExiting: this.handleExiting
    }), function (state, innerProps) {
      var _style;

      return /*#__PURE__*/_react["default"].cloneElement(children, _extends({}, innerProps, {
        style: (_style = {}, _style["max" + capitalize(dimension)] = minDimensionOnMount ? minDimension + "px" : 'none', _style),
        className: (0, _classnames["default"])(className, children.props.className, collapseStyles[state], dimension === 'width' && 'width')
      }));
    });
  };

  return Collapse;
}(_react["default"].Component);

Collapse.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Show the component; triggers the expand or collapse animation */
  "in": _propTypes["default"].bool,

  /** Wait until the first "enter" transition to mount the component (add it to the DOM) */
  mountOnEnter: _propTypes["default"].bool,

  /** Unmount the component (remove it from the DOM) when it is collapsed */
  unmountOnExit: _propTypes["default"].bool,

  /** Run the expand animation when the component mounts, if it is initially shown */
  appear: _propTypes["default"].bool,

  /** Duration of the collapse animation in milliseconds */
  timeout: _propTypes["default"].number,

  /** Callback fired before the component expands */
  onEnter: _propTypes["default"].func,

  /** Callback fired after the component starts to expand */
  onEntering: _propTypes["default"].func,

  /** Callback fired after the component has expanded */
  onEntered: _propTypes["default"].func,

  /** Callback fired before the component collapses */
  onExit: _propTypes["default"].func,

  /** Callback fired after the component starts to collapse */
  onExiting: _propTypes["default"].func,

  /** Callback fired after the component has collapsed */
  onExited: _propTypes["default"].func,

  /** The dimension used when collapsing, or a function that returns the dimension */
  dimension: _propTypes["default"].oneOfType([_propTypes["default"].oneOf(['height', 'width']), _propTypes["default"].func]),

  /** Function that returns the height or width of the animating DOM node Allows for providing some custom
   * logic for how much the Collapse component should animate in its specified dimension. Called with
   * the current dimension prop value and the DOM node. */
  getDimensionValue: _propTypes["default"].func,

  /** ARIA role of collapsible element */
  role: _propTypes["default"].string,

  /** classNames for direct children */
  className: _propTypes["default"].string,

  /** child node */
  children: _propTypes["default"].node,

  /** The minimum dimension, height or width, that you want the animation to collapse to.
   *  This should be in number of pixels (i.e. pass 200 if you want it to collapse to a height of 200px.
      The default value is 0. */
  minDimension: _propTypes["default"].number,

  /** Whether you want to set the minimum height of the child on its initial mount */
  minDimensionOnMount: _propTypes["default"].bool
} : {};
Collapse.defaultProps = {
  "in": false,
  timeout: 300,
  mountOnEnter: false,
  unmountOnExit: false,
  appear: true,
  dimension: 'height',
  getDimensionValue: getDimensionValue,
  minDimension: 0,
  minDimensionOnMount: false
};
var _default = Collapse;
exports["default"] = _default;
module.exports = exports.default;