123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
- import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-
- var _collapseStyles;
-
- import classNames from 'classnames';
- import css from 'dom-helpers/style';
- import React from 'react';
- import onEnd from 'dom-helpers/transition/end';
- import Transition, { EXITED, ENTERED, ENTERING, EXITING } from 'react-transition-group/Transition';
- import triggerBrowserReflow from './utils/triggerBrowserReflow';
- import createChainedFunction from './utils/createChainedFunction';
- var MARGINS = {
- height: ['marginTop', 'marginBottom'],
- width: ['marginLeft', 'marginRight']
- };
-
- function getDimensionValue(dimension, elem) {
- var offset = "offset" + dimension[0].toUpperCase() + dimension.slice(1);
- var value = elem[offset];
- var margins = MARGINS[dimension];
- return value + parseInt(css(elem, margins[0]), 10) + parseInt(css(elem, margins[1]), 10);
- }
-
- var collapseStyles = (_collapseStyles = {}, _collapseStyles[EXITED] = 'collapse', _collapseStyles[EXITING] = 'collapsing', _collapseStyles[ENTERING] = 'collapsing', _collapseStyles[ENTERED] = 'collapse show', _collapseStyles);
- var defaultProps = {
- in: false,
- timeout: 300,
- mountOnEnter: false,
- unmountOnExit: false,
- appear: false,
- dimension: 'height',
- getDimensionValue: getDimensionValue
- };
-
- var Collapse =
- /*#__PURE__*/
- function (_React$Component) {
- _inheritsLoose(Collapse, _React$Component);
-
- function Collapse() {
- 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;
-
- _this.handleEnter = function (elem) {
- elem.style[_this.getDimension()] = '0';
- };
-
- _this.handleEntering = function (elem) {
- var dimension = _this.getDimension();
-
- elem.style[dimension] = _this._getScrollDimensionValue(elem, dimension);
- };
-
- _this.handleEntered = function (elem) {
- elem.style[_this.getDimension()] = null;
- };
-
- _this.handleExit = function (elem) {
- var dimension = _this.getDimension();
-
- elem.style[dimension] = _this.props.getDimensionValue(dimension, elem) + "px";
- triggerBrowserReflow(elem);
- };
-
- _this.handleExiting = function (elem) {
- elem.style[_this.getDimension()] = null;
- };
-
- return _this;
- }
-
- var _proto = Collapse.prototype;
-
- _proto.getDimension = function getDimension() {
- return typeof this.props.dimension === 'function' ? this.props.dimension() : this.props.dimension;
- }
- /* -- Expanding -- */
- ;
-
- // for testing
- _proto._getScrollDimensionValue = function _getScrollDimensionValue(elem, dimension) {
- var scroll = "scroll" + dimension[0].toUpperCase() + dimension.slice(1);
- return elem[scroll] + "px";
- };
-
- _proto.render = function render() {
- var _this2 = this;
-
- 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,
- props = _objectWithoutPropertiesLoose(_this$props, ["onEnter", "onEntering", "onEntered", "onExit", "onExiting", "className", "children"]);
-
- delete props.dimension;
- delete props.getDimensionValue;
- var handleEnter = createChainedFunction(this.handleEnter, onEnter);
- var handleEntering = createChainedFunction(this.handleEntering, onEntering);
- var handleEntered = createChainedFunction(this.handleEntered, onEntered);
- var handleExit = createChainedFunction(this.handleExit, onExit);
- var handleExiting = createChainedFunction(this.handleExiting, onExiting);
- return React.createElement(Transition, _extends({
- addEndListener: onEnd
- }, props, {
- "aria-expanded": props.role ? props.in : null,
- onEnter: handleEnter,
- onEntering: handleEntering,
- onEntered: handleEntered,
- onExit: handleExit,
- onExiting: handleExiting
- }), function (state, innerProps) {
- return React.cloneElement(children, _extends({}, innerProps, {
- className: classNames(className, children.props.className, collapseStyles[state], _this2.getDimension() === 'width' && 'width')
- }));
- });
- };
-
- return Collapse;
- }(React.Component);
-
- Collapse.defaultProps = defaultProps;
- export default Collapse;
|