133 lines
4.5 KiB
JavaScript
133 lines
4.5 KiB
JavaScript
|
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/css';
|
||
|
import transitionEnd from 'dom-helpers/transitionEnd';
|
||
|
import React from 'react';
|
||
|
import Transition, { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
|
||
|
import createChainedFunction from './createChainedFunction';
|
||
|
import triggerBrowserReflow from './triggerBrowserReflow';
|
||
|
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: transitionEnd
|
||
|
}, 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;
|