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

React versions of Mayflower design system UI components

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; }

/**
 * Collapse module.
 * @module @massds/mayflower-react/Collapse
 */
import classNames from "classnames";
import css from "dom-helpers/style";
import React from "react";
import PropTypes from "prop-types";
import Transition from "react-transition-group/Transition";

function capitalize(string) {
  return "" + string.charAt(0).toUpperCase() + string.slice(1);
}

function getDimensionValue(dimension, elem) {
  const MARGINS = {
    height: ['marginTop', 'marginBottom'],
    width: ['marginLeft', 'marginRight']
  };
  const value = elem["offset" + capitalize(dimension)];
  const margins = MARGINS[dimension];
  return value + parseInt(css(elem, margins[0]), 10) + parseInt(css(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)
*/


let 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) {
    const minDimension = this.props.minDimension;
    const dimension = this.getDimension();
    const currentDim = parseInt(css(elem, dimension), 10);
    const 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) {
    const 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) {
    const 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) {
    const minDimension = this.props.minDimension;
    const dimension = this.getDimension();
    const currentDim = parseInt(css(elem, dimension), 10);
    const 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() {
    const _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"]);

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

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

  return Collapse;
}(React.Component);

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

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

  /** Unmount the component (remove it from the DOM) when it is collapsed */
  unmountOnExit: PropTypes.bool,

  /** Run the expand animation when the component mounts, if it is initially shown */
  appear: PropTypes.bool,

  /** Duration of the collapse animation in milliseconds */
  timeout: PropTypes.number,

  /** Callback fired before the component expands */
  onEnter: PropTypes.func,

  /** Callback fired after the component starts to expand */
  onEntering: PropTypes.func,

  /** Callback fired after the component has expanded */
  onEntered: PropTypes.func,

  /** Callback fired before the component collapses */
  onExit: PropTypes.func,

  /** Callback fired after the component starts to collapse */
  onExiting: PropTypes.func,

  /** Callback fired after the component has collapsed */
  onExited: PropTypes.func,

  /** The dimension used when collapsing, or a function that returns the dimension */
  dimension: PropTypes.oneOfType([PropTypes.oneOf(['height', 'width']), PropTypes.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.func,

  /** ARIA role of collapsible element */
  role: PropTypes.string,

  /** classNames for direct children */
  className: PropTypes.string,

  /** child node */
  children: PropTypes.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.number,

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