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