1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 | import { __spreadArrays } from "tslib";
|
17 | import classNames from "classnames";
|
18 | import * as React from "react";
|
19 | import { CSSTransition, TransitionGroup } from "react-transition-group";
|
20 | import { Classes, DISPLAYNAME_PREFIX } from "../../common";
|
21 | import { PanelView2 } from "./panelView2";
|
22 |
|
23 |
|
24 |
|
25 |
|
26 | export var PanelStack2 = function (props) {
|
27 | var _a = props.renderActivePanelOnly, renderActivePanelOnly = _a === void 0 ? true : _a, _b = props.showPanelHeader, showPanelHeader = _b === void 0 ? true : _b, propsStack = props.stack;
|
28 | var _c = React.useState("push"), direction = _c[0], setDirection = _c[1];
|
29 | var _d = React.useState(props.initialPanel !== undefined ? [props.initialPanel] : []), localStack = _d[0], setLocalStack = _d[1];
|
30 | var stack = React.useMemo(function () { return (propsStack != null ? propsStack.slice().reverse() : localStack); }, [
|
31 | localStack,
|
32 | propsStack,
|
33 | ]);
|
34 | var stackLength = React.useRef(stack.length);
|
35 | React.useEffect(function () {
|
36 | if (stack.length !== stackLength.current) {
|
37 |
|
38 | setDirection(stack.length - stackLength.current < 0 ? "pop" : "push");
|
39 | }
|
40 | stackLength.current = stack.length;
|
41 | }, [stack]);
|
42 | var handlePanelOpen = React.useCallback(function (panel) {
|
43 | var _a;
|
44 | (_a = props.onOpen) === null || _a === void 0 ? void 0 : _a.call(props, panel);
|
45 | if (props.stack == null) {
|
46 | setLocalStack(function (prevStack) { return __spreadArrays([panel], prevStack); });
|
47 | }
|
48 | }, [props.onOpen]);
|
49 | var handlePanelClose = React.useCallback(function (panel) {
|
50 | var _a;
|
51 |
|
52 | if (stack[0] !== panel || stack.length <= 1) {
|
53 | return;
|
54 | }
|
55 | (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, panel);
|
56 | if (props.stack == null) {
|
57 | setLocalStack(function (prevStack) { return prevStack.slice(1); });
|
58 | }
|
59 | }, [stack, props.onClose]);
|
60 |
|
61 | if (stack.length === 0) {
|
62 | return null;
|
63 | }
|
64 | var panelsToRender = renderActivePanelOnly ? [stack[0]] : stack;
|
65 | var panels = panelsToRender
|
66 | .map(function (panel, index) {
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 | var layer = stack.length - index;
|
74 | var key = renderActivePanelOnly ? stack.length : layer;
|
75 | return (React.createElement(CSSTransition, { classNames: Classes.PANEL_STACK2, key: key, timeout: 400 },
|
76 | React.createElement(PanelView2, { onClose: handlePanelClose, onOpen: handlePanelOpen, panel: panel, previousPanel: stack[index + 1], showHeader: showPanelHeader })));
|
77 | })
|
78 | .reverse();
|
79 | var classes = classNames(Classes.PANEL_STACK2, Classes.PANEL_STACK2 + "-" + direction, props.className);
|
80 | return (React.createElement(TransitionGroup, { className: classes, component: "div" }, panels));
|
81 | };
|
82 | PanelStack2.displayName = DISPLAYNAME_PREFIX + ".PanelStack2";
|
83 |
|
\ | No newline at end of file |