1 | import _extends from "@babel/runtime-corejs2/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime-corejs2/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import _inheritsLoose from "@babel/runtime-corejs2/helpers/esm/inheritsLoose";
|
4 | import _parseInt from "@babel/runtime-corejs2/core-js/parse-int";
|
5 |
|
6 | var _collapseStyles;
|
7 |
|
8 | import classNames from 'classnames';
|
9 | import css from 'dom-helpers/style';
|
10 | import React from 'react';
|
11 | import PropTypes from 'prop-types';
|
12 | import Transition, { EXITED, ENTERED, ENTERING, EXITING } from 'react-transition-group/Transition';
|
13 | import capitalize from './utils/capitalize';
|
14 | import createChainedFunction from './utils/createChainedFunction';
|
15 | var MARGINS = {
|
16 | height: ['marginTop', 'marginBottom'],
|
17 | width: ['marginLeft', 'marginRight']
|
18 | };
|
19 |
|
20 |
|
21 | function triggerBrowserReflow(node) {
|
22 | node.offsetHeight;
|
23 | }
|
24 |
|
25 | function getDimensionValue(dimension, elem) {
|
26 | var value = elem["offset" + capitalize(dimension)];
|
27 | var margins = MARGINS[dimension];
|
28 | return value + _parseInt(css(elem, margins[0]), 10) + _parseInt(css(elem, margins[1]), 10);
|
29 | }
|
30 |
|
31 | var collapseStyles = (_collapseStyles = {}, _collapseStyles[EXITED] = 'collapse', _collapseStyles[EXITING] = 'collapsing', _collapseStyles[ENTERING] = 'collapsing', _collapseStyles[ENTERED] = 'collapse in', _collapseStyles);
|
32 | var propTypes = {
|
33 | |
34 |
|
35 |
|
36 | in: PropTypes.bool,
|
37 |
|
38 | |
39 |
|
40 |
|
41 | mountOnEnter: PropTypes.bool,
|
42 |
|
43 | |
44 |
|
45 |
|
46 | unmountOnExit: PropTypes.bool,
|
47 |
|
48 | |
49 |
|
50 |
|
51 |
|
52 | appear: PropTypes.bool,
|
53 |
|
54 | |
55 |
|
56 |
|
57 |
|
58 |
|
59 | timeout: PropTypes.number,
|
60 |
|
61 | |
62 |
|
63 |
|
64 | onEnter: PropTypes.func,
|
65 |
|
66 | |
67 |
|
68 |
|
69 | onEntering: PropTypes.func,
|
70 |
|
71 | |
72 |
|
73 |
|
74 | onEntered: PropTypes.func,
|
75 |
|
76 | |
77 |
|
78 |
|
79 | onExit: PropTypes.func,
|
80 |
|
81 | |
82 |
|
83 |
|
84 | onExiting: PropTypes.func,
|
85 |
|
86 | |
87 |
|
88 |
|
89 | onExited: PropTypes.func,
|
90 |
|
91 | |
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 | dimension: PropTypes.oneOfType([PropTypes.oneOf(['height', 'width']), PropTypes.func]),
|
99 |
|
100 | |
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 | getDimensionValue: PropTypes.func,
|
108 |
|
109 | |
110 |
|
111 |
|
112 | role: PropTypes.string
|
113 | };
|
114 | var defaultProps = {
|
115 | in: false,
|
116 | timeout: 300,
|
117 | mountOnEnter: false,
|
118 | unmountOnExit: false,
|
119 | appear: false,
|
120 | dimension: 'height',
|
121 | getDimensionValue: getDimensionValue
|
122 | };
|
123 |
|
124 | var Collapse =
|
125 |
|
126 | function (_React$Component) {
|
127 | _inheritsLoose(Collapse, _React$Component);
|
128 |
|
129 | function Collapse() {
|
130 | var _this;
|
131 |
|
132 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
133 | args[_key] = arguments[_key];
|
134 | }
|
135 |
|
136 | _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
|
137 |
|
138 | _this.handleEnter = function (elem) {
|
139 | elem.style[_this.getDimension()] = '0';
|
140 | };
|
141 |
|
142 | _this.handleEntering = function (elem) {
|
143 | var dimension = _this.getDimension();
|
144 |
|
145 | elem.style[dimension] = _this._getScrollDimensionValue(elem, dimension);
|
146 | };
|
147 |
|
148 | _this.handleEntered = function (elem) {
|
149 | elem.style[_this.getDimension()] = null;
|
150 | };
|
151 |
|
152 | _this.handleExit = function (elem) {
|
153 | var dimension = _this.getDimension();
|
154 |
|
155 | elem.style[dimension] = _this.props.getDimensionValue(dimension, elem) + "px";
|
156 | triggerBrowserReflow(elem);
|
157 | };
|
158 |
|
159 | _this.handleExiting = function (elem) {
|
160 | elem.style[_this.getDimension()] = '0';
|
161 | };
|
162 |
|
163 | return _this;
|
164 | }
|
165 |
|
166 | var _proto = Collapse.prototype;
|
167 |
|
168 | _proto.getDimension = function getDimension() {
|
169 | return typeof this.props.dimension === 'function' ? this.props.dimension() : this.props.dimension;
|
170 | };
|
171 |
|
172 |
|
173 | _proto._getScrollDimensionValue = function _getScrollDimensionValue(elem, dimension) {
|
174 | return elem["scroll" + capitalize(dimension)] + "px";
|
175 | };
|
176 |
|
177 |
|
178 |
|
179 | _proto.render = function render() {
|
180 | var _this2 = this;
|
181 |
|
182 | var _this$props = this.props,
|
183 | onEnter = _this$props.onEnter,
|
184 | onEntering = _this$props.onEntering,
|
185 | onEntered = _this$props.onEntered,
|
186 | onExit = _this$props.onExit,
|
187 | onExiting = _this$props.onExiting,
|
188 | className = _this$props.className,
|
189 | children = _this$props.children,
|
190 | props = _objectWithoutPropertiesLoose(_this$props, ["onEnter", "onEntering", "onEntered", "onExit", "onExiting", "className", "children"]);
|
191 |
|
192 | delete props.dimension;
|
193 | delete props.getDimensionValue;
|
194 | var handleEnter = createChainedFunction(this.handleEnter, onEnter);
|
195 | var handleEntering = createChainedFunction(this.handleEntering, onEntering);
|
196 | var handleEntered = createChainedFunction(this.handleEntered, onEntered);
|
197 | var handleExit = createChainedFunction(this.handleExit, onExit);
|
198 | var handleExiting = createChainedFunction(this.handleExiting, onExiting);
|
199 | return React.createElement(Transition, _extends({}, props, {
|
200 | "aria-expanded": props.role ? props.in : null,
|
201 | onEnter: handleEnter,
|
202 | onEntering: handleEntering,
|
203 | onEntered: handleEntered,
|
204 | onExit: handleExit,
|
205 | onExiting: handleExiting
|
206 | }), function (state, innerProps) {
|
207 | return React.cloneElement(children, _extends({}, innerProps, {
|
208 | className: classNames(className, children.props.className, collapseStyles[state], _this2.getDimension() === 'width' && 'width')
|
209 | }));
|
210 | });
|
211 | };
|
212 |
|
213 | return Collapse;
|
214 | }(React.Component);
|
215 |
|
216 | Collapse.propTypes = propTypes;
|
217 | Collapse.defaultProps = defaultProps;
|
218 | export default Collapse; |
\ | No newline at end of file |