UNPKG

5.42 kBJavaScriptView Raw
1"use strict";
2
3var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
5var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
6
7exports.__esModule = true;
8exports.default = void 0;
9
10var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
12var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
13
14var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
15
16var _classnames = _interopRequireDefault(require("classnames"));
17
18var _css = _interopRequireDefault(require("dom-helpers/css"));
19
20var _transitionEnd = _interopRequireDefault(require("dom-helpers/transitionEnd"));
21
22var _react = _interopRequireDefault(require("react"));
23
24var _Transition = _interopRequireWildcard(require("react-transition-group/Transition"));
25
26var _createChainedFunction = _interopRequireDefault(require("./createChainedFunction"));
27
28var _triggerBrowserReflow = _interopRequireDefault(require("./triggerBrowserReflow"));
29
30var _collapseStyles;
31
32var MARGINS = {
33 height: ['marginTop', 'marginBottom'],
34 width: ['marginLeft', 'marginRight']
35};
36
37function getDimensionValue(dimension, elem) {
38 var offset = "offset" + dimension[0].toUpperCase() + dimension.slice(1);
39 var value = elem[offset];
40 var margins = MARGINS[dimension];
41 return value + parseInt((0, _css.default)(elem, margins[0]), 10) + parseInt((0, _css.default)(elem, margins[1]), 10);
42}
43
44var collapseStyles = (_collapseStyles = {}, _collapseStyles[_Transition.EXITED] = 'collapse', _collapseStyles[_Transition.EXITING] = 'collapsing', _collapseStyles[_Transition.ENTERING] = 'collapsing', _collapseStyles[_Transition.ENTERED] = 'collapse show', _collapseStyles);
45var defaultProps = {
46 in: false,
47 timeout: 300,
48 mountOnEnter: false,
49 unmountOnExit: false,
50 appear: false,
51 dimension: 'height',
52 getDimensionValue: getDimensionValue
53};
54
55var Collapse = /*#__PURE__*/function (_React$Component) {
56 (0, _inheritsLoose2.default)(Collapse, _React$Component);
57
58 function Collapse() {
59 var _this;
60
61 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
62 args[_key] = arguments[_key];
63 }
64
65 _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
66
67 _this.handleEnter = function (elem) {
68 elem.style[_this.getDimension()] = '0';
69 };
70
71 _this.handleEntering = function (elem) {
72 var dimension = _this.getDimension();
73
74 elem.style[dimension] = _this._getScrollDimensionValue(elem, dimension);
75 };
76
77 _this.handleEntered = function (elem) {
78 elem.style[_this.getDimension()] = null;
79 };
80
81 _this.handleExit = function (elem) {
82 var dimension = _this.getDimension();
83
84 elem.style[dimension] = _this.props.getDimensionValue(dimension, elem) + "px";
85 (0, _triggerBrowserReflow.default)(elem);
86 };
87
88 _this.handleExiting = function (elem) {
89 elem.style[_this.getDimension()] = null;
90 };
91
92 return _this;
93 }
94
95 var _proto = Collapse.prototype;
96
97 _proto.getDimension = function getDimension() {
98 return typeof this.props.dimension === 'function' ? this.props.dimension() : this.props.dimension;
99 }
100 /* -- Expanding -- */
101 ;
102
103 // for testing
104 _proto._getScrollDimensionValue = function _getScrollDimensionValue(elem, dimension) {
105 var scroll = "scroll" + dimension[0].toUpperCase() + dimension.slice(1);
106 return elem[scroll] + "px";
107 };
108
109 _proto.render = function render() {
110 var _this2 = this;
111
112 var _this$props = this.props,
113 onEnter = _this$props.onEnter,
114 onEntering = _this$props.onEntering,
115 onEntered = _this$props.onEntered,
116 onExit = _this$props.onExit,
117 onExiting = _this$props.onExiting,
118 className = _this$props.className,
119 children = _this$props.children,
120 props = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["onEnter", "onEntering", "onEntered", "onExit", "onExiting", "className", "children"]);
121 delete props.dimension;
122 delete props.getDimensionValue;
123 var handleEnter = (0, _createChainedFunction.default)(this.handleEnter, onEnter);
124 var handleEntering = (0, _createChainedFunction.default)(this.handleEntering, onEntering);
125 var handleEntered = (0, _createChainedFunction.default)(this.handleEntered, onEntered);
126 var handleExit = (0, _createChainedFunction.default)(this.handleExit, onExit);
127 var handleExiting = (0, _createChainedFunction.default)(this.handleExiting, onExiting);
128 return _react.default.createElement(_Transition.default, (0, _extends2.default)({
129 addEndListener: _transitionEnd.default
130 }, props, {
131 "aria-expanded": props.role ? props.in : null,
132 onEnter: handleEnter,
133 onEntering: handleEntering,
134 onEntered: handleEntered,
135 onExit: handleExit,
136 onExiting: handleExiting
137 }), function (state, innerProps) {
138 return _react.default.cloneElement(children, (0, _extends2.default)({}, innerProps, {
139 className: (0, _classnames.default)(className, children.props.className, collapseStyles[state], _this2.getDimension() === 'width' && 'width')
140 }));
141 });
142 };
143
144 return Collapse;
145}(_react.default.Component);
146
147Collapse.defaultProps = defaultProps;
148var _default = Collapse;
149exports.default = _default;
150module.exports = exports["default"];
\No newline at end of file