1 | "use strict";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | Object.defineProperty(exports, "__esModule", { value: true });
|
18 | exports.Collapse = exports.AnimationStates = void 0;
|
19 | var tslib_1 = require("tslib");
|
20 | var classnames_1 = tslib_1.__importDefault(require("classnames"));
|
21 | var React = tslib_1.__importStar(require("react"));
|
22 | var common_1 = require("../../common");
|
23 | var props_1 = require("../../common/props");
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 | var AnimationStates;
|
31 | (function (AnimationStates) {
|
32 | |
33 |
|
34 |
|
35 |
|
36 | AnimationStates[AnimationStates["OPEN_START"] = 0] = "OPEN_START";
|
37 | |
38 |
|
39 |
|
40 |
|
41 | AnimationStates[AnimationStates["OPENING"] = 1] = "OPENING";
|
42 | |
43 |
|
44 |
|
45 |
|
46 | AnimationStates[AnimationStates["OPEN"] = 2] = "OPEN";
|
47 | |
48 |
|
49 |
|
50 |
|
51 | AnimationStates[AnimationStates["CLOSING_START"] = 3] = "CLOSING_START";
|
52 | |
53 |
|
54 |
|
55 |
|
56 |
|
57 | AnimationStates[AnimationStates["CLOSING"] = 4] = "CLOSING";
|
58 | |
59 |
|
60 |
|
61 |
|
62 | AnimationStates[AnimationStates["CLOSED"] = 5] = "CLOSED";
|
63 | })(AnimationStates = exports.AnimationStates || (exports.AnimationStates = {}));
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 | var Collapse = (function (_super) {
|
70 | tslib_1.__extends(Collapse, _super);
|
71 | function Collapse() {
|
72 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
73 | _this.state = {
|
74 | animationState: _this.props.isOpen ? AnimationStates.OPEN : AnimationStates.CLOSED,
|
75 | height: undefined,
|
76 | heightWhenOpen: undefined,
|
77 | };
|
78 |
|
79 | _this.contents = null;
|
80 | _this.contentsRefHandler = function (el) {
|
81 | _this.contents = el;
|
82 | if (_this.contents != null) {
|
83 | var height = _this.contents.clientHeight;
|
84 | _this.setState({
|
85 | animationState: _this.props.isOpen ? AnimationStates.OPEN : AnimationStates.CLOSED,
|
86 | height: height === 0 ? undefined : "".concat(height, "px"),
|
87 | heightWhenOpen: height === 0 ? undefined : height,
|
88 | });
|
89 | }
|
90 | };
|
91 | return _this;
|
92 | }
|
93 | Collapse.getDerivedStateFromProps = function (props, state) {
|
94 | var isOpen = props.isOpen;
|
95 | var animationState = state.animationState;
|
96 | if (isOpen) {
|
97 | switch (animationState) {
|
98 | case AnimationStates.OPEN:
|
99 |
|
100 | break;
|
101 | case AnimationStates.OPENING:
|
102 |
|
103 | break;
|
104 | default:
|
105 | return { animationState: AnimationStates.OPEN_START };
|
106 | }
|
107 | }
|
108 | else {
|
109 | switch (animationState) {
|
110 | case AnimationStates.CLOSED:
|
111 |
|
112 | break;
|
113 | case AnimationStates.CLOSING:
|
114 |
|
115 | break;
|
116 | default:
|
117 |
|
118 | return {
|
119 | animationState: AnimationStates.CLOSING_START,
|
120 | height: "".concat(state.heightWhenOpen, "px"),
|
121 | };
|
122 | }
|
123 | }
|
124 | return null;
|
125 | };
|
126 | Collapse.prototype.render = function () {
|
127 | var isContentVisible = this.state.animationState !== AnimationStates.CLOSED;
|
128 | var shouldRenderChildren = isContentVisible || this.props.keepChildrenMounted;
|
129 | var displayWithTransform = isContentVisible && this.state.animationState !== AnimationStates.CLOSING;
|
130 | var isAutoHeight = this.state.height === "auto";
|
131 | var containerStyle = {
|
132 | height: isContentVisible ? this.state.height : undefined,
|
133 | overflowY: isAutoHeight ? "visible" : undefined,
|
134 |
|
135 | transition: isAutoHeight ? "none" : undefined,
|
136 | };
|
137 | var contentsStyle = {
|
138 |
|
139 | transform: displayWithTransform ? "translateY(0)" : "translateY(-".concat(this.state.heightWhenOpen, "px)"),
|
140 |
|
141 | transition: isAutoHeight ? "none" : undefined,
|
142 | };
|
143 | return React.createElement(this.props.component, {
|
144 | className: (0, classnames_1.default)(common_1.Classes.COLLAPSE, this.props.className),
|
145 | style: containerStyle,
|
146 | }, React.createElement("div", { className: common_1.Classes.COLLAPSE_BODY, ref: this.contentsRefHandler, style: contentsStyle, "aria-hidden": !isContentVisible && this.props.keepChildrenMounted }, shouldRenderChildren ? this.props.children : null));
|
147 | };
|
148 | Collapse.prototype.componentDidMount = function () {
|
149 | this.forceUpdate();
|
150 |
|
151 |
|
152 | if (this.props.isOpen) {
|
153 | this.setState({ animationState: AnimationStates.OPEN, height: "auto" });
|
154 | }
|
155 | else {
|
156 | this.setState({ animationState: AnimationStates.CLOSED, height: "0px" });
|
157 | }
|
158 |
|
159 | };
|
160 | Collapse.prototype.componentDidUpdate = function () {
|
161 | var _this = this;
|
162 | if (this.contents == null) {
|
163 | return;
|
164 | }
|
165 | var transitionDuration = this.props.transitionDuration;
|
166 | var animationState = this.state.animationState;
|
167 | if (animationState === AnimationStates.OPEN_START) {
|
168 | var clientHeight = this.contents.clientHeight;
|
169 | this.setState({
|
170 | animationState: AnimationStates.OPENING,
|
171 | height: "".concat(clientHeight, "px"),
|
172 | heightWhenOpen: clientHeight,
|
173 | });
|
174 | this.setTimeout(function () { return _this.onDelayedStateChange(); }, transitionDuration);
|
175 | }
|
176 | else if (animationState === AnimationStates.CLOSING_START) {
|
177 | var clientHeight_1 = this.contents.clientHeight;
|
178 | this.setTimeout(function () {
|
179 | return _this.setState({
|
180 | animationState: AnimationStates.CLOSING,
|
181 | height: "0px",
|
182 | heightWhenOpen: clientHeight_1,
|
183 | });
|
184 | });
|
185 | this.setTimeout(function () { return _this.onDelayedStateChange(); }, transitionDuration);
|
186 | }
|
187 | };
|
188 | Collapse.prototype.onDelayedStateChange = function () {
|
189 | switch (this.state.animationState) {
|
190 | case AnimationStates.OPENING:
|
191 | this.setState({ animationState: AnimationStates.OPEN, height: "auto" });
|
192 | break;
|
193 | case AnimationStates.CLOSING:
|
194 | this.setState({ animationState: AnimationStates.CLOSED });
|
195 | break;
|
196 | default:
|
197 | break;
|
198 | }
|
199 | };
|
200 | Collapse.displayName = "".concat(props_1.DISPLAYNAME_PREFIX, ".Collapse");
|
201 | Collapse.defaultProps = {
|
202 | component: "div",
|
203 | isOpen: false,
|
204 | keepChildrenMounted: false,
|
205 | transitionDuration: 200,
|
206 | };
|
207 | return Collapse;
|
208 | }(common_1.AbstractPureComponent2));
|
209 | exports.Collapse = Collapse;
|
210 |
|
\ | No newline at end of file |