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.PanelStack2 = 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 react_transition_group_1 = require("react-transition-group");
|
23 | var common_1 = require("../../common");
|
24 | var panelView2_1 = require("./panelView2");
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 | var PanelStack2 = function (props) {
|
33 | var _a = props.renderActivePanelOnly, renderActivePanelOnly = _a === void 0 ? true : _a, _b = props.showPanelHeader, showPanelHeader = _b === void 0 ? true : _b, propsStack = props.stack;
|
34 | var _c = React.useState("push"), direction = _c[0], setDirection = _c[1];
|
35 | var _d = React.useState(props.initialPanel !== undefined ? [props.initialPanel] : []), localStack = _d[0], setLocalStack = _d[1];
|
36 | var stack = React.useMemo(function () { return (propsStack != null ? propsStack.slice().reverse() : localStack); }, [localStack, propsStack]);
|
37 | var stackLength = React.useRef(stack.length);
|
38 | React.useEffect(function () {
|
39 | if (stack.length !== stackLength.current) {
|
40 |
|
41 | setDirection(stack.length - stackLength.current < 0 ? "pop" : "push");
|
42 | }
|
43 | stackLength.current = stack.length;
|
44 | }, [stack]);
|
45 | var handlePanelOpen = React.useCallback(function (panel) {
|
46 | var _a;
|
47 | (_a = props.onOpen) === null || _a === void 0 ? void 0 : _a.call(props, panel);
|
48 | if (props.stack == null) {
|
49 | setLocalStack(function (prevStack) { return tslib_1.__spreadArray([panel], prevStack, true); });
|
50 | }
|
51 | }, [props.onOpen]);
|
52 | var handlePanelClose = React.useCallback(function (panel) {
|
53 | var _a;
|
54 |
|
55 | if (stack[0] !== panel || stack.length <= 1) {
|
56 | return;
|
57 | }
|
58 | (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, panel);
|
59 | if (props.stack == null) {
|
60 | setLocalStack(function (prevStack) { return prevStack.slice(1); });
|
61 | }
|
62 | }, [stack, props.onClose]);
|
63 |
|
64 | if (stack.length === 0) {
|
65 | return null;
|
66 | }
|
67 | var panelsToRender = renderActivePanelOnly ? [stack[0]] : stack;
|
68 | var panels = panelsToRender
|
69 | .map(function (panel, index) {
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 | var layer = stack.length - index;
|
77 | var key = renderActivePanelOnly ? stack.length : layer;
|
78 | return (React.createElement(react_transition_group_1.CSSTransition, { classNames: common_1.Classes.PANEL_STACK2, key: key, timeout: 400 },
|
79 | React.createElement(panelView2_1.PanelView2, { onClose: handlePanelClose, onOpen: handlePanelOpen, panel: panel, previousPanel: stack[index + 1], showHeader: showPanelHeader })));
|
80 | })
|
81 | .reverse();
|
82 | var classes = (0, classnames_1.default)(common_1.Classes.PANEL_STACK2, "".concat(common_1.Classes.PANEL_STACK2, "-").concat(direction), props.className);
|
83 | return (React.createElement(react_transition_group_1.TransitionGroup, { className: classes, component: "div" }, panels));
|
84 | };
|
85 | exports.PanelStack2 = PanelStack2;
|
86 | exports.PanelStack2.displayName = "".concat(common_1.DISPLAYNAME_PREFIX, ".PanelStack2");
|
87 |
|
\ | No newline at end of file |