1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 | import { __assign, __extends, __rest } from "tslib";
|
17 | import classNames from "classnames";
|
18 | import * as React from "react";
|
19 | import { AbstractPureComponent2, Classes, Utils } from "../../common";
|
20 | import { DISPLAYNAME_PREFIX } from "../../common/props";
|
21 | import { Button } from "../button/buttons";
|
22 | import { Dialog } from "./dialog";
|
23 | import { DialogStep } from "./dialogStep";
|
24 | var PADDING_BOTTOM = 0;
|
25 | var MIN_WIDTH = 800;
|
26 | var MultistepDialog = (function (_super) {
|
27 | __extends(MultistepDialog, _super);
|
28 | function MultistepDialog() {
|
29 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
30 | _this.state = _this.getInitialIndexFromProps(_this.props);
|
31 | _this.renderDialogStep = function (step, index) {
|
32 | var _a;
|
33 | var stepNumber = index + 1;
|
34 | var hasBeenViewed = _this.state.lastViewedIndex >= index;
|
35 | var currentlySelected = _this.state.selectedIndex === index;
|
36 | return (React.createElement("div", { className: classNames(Classes.DIALOG_STEP_CONTAINER, (_a = {},
|
37 | _a[Classes.ACTIVE] = currentlySelected,
|
38 | _a[Classes.DIALOG_STEP_VIEWED] = hasBeenViewed,
|
39 | _a)), key: index },
|
40 | React.createElement("div", { className: Classes.DIALOG_STEP, onClick: _this.handleClickDialogStep(index) },
|
41 | React.createElement("div", { className: Classes.DIALOG_STEP_ICON }, stepNumber),
|
42 | React.createElement("div", { className: Classes.DIALOG_STEP_TITLE }, step.props.title))));
|
43 | };
|
44 | _this.handleClickDialogStep = function (index) {
|
45 | if (index > _this.state.lastViewedIndex) {
|
46 | return;
|
47 | }
|
48 | return _this.getDialogStepChangeHandler(index);
|
49 | };
|
50 | return _this;
|
51 | }
|
52 | MultistepDialog.prototype.render = function () {
|
53 | var _a;
|
54 | var _b = this.props, className = _b.className, navigationPosition = _b.navigationPosition, showCloseButtonInFooter = _b.showCloseButtonInFooter, isCloseButtonShown = _b.isCloseButtonShown, otherProps = __rest(_b, ["className", "navigationPosition", "showCloseButtonInFooter", "isCloseButtonShown"]);
|
55 |
|
56 |
|
57 | var isCloseButtonVisible = !showCloseButtonInFooter && isCloseButtonShown;
|
58 | return (React.createElement(Dialog, __assign({ isCloseButtonShown: isCloseButtonVisible }, otherProps, { className: classNames((_a = {},
|
59 | _a[Classes.MULTISTEP_DIALOG_NAV_RIGHT] = navigationPosition === "right",
|
60 | _a[Classes.MULTISTEP_DIALOG_NAV_TOP] = navigationPosition === "top",
|
61 | _a), className), style: this.getDialogStyle() }),
|
62 | React.createElement("div", { className: Classes.MULTISTEP_DIALOG_PANELS },
|
63 | this.renderLeftPanel(),
|
64 | this.maybeRenderRightPanel())));
|
65 | };
|
66 | MultistepDialog.prototype.componentDidUpdate = function (prevProps) {
|
67 | if ((prevProps.resetOnClose || prevProps.initialStepIndex !== this.props.initialStepIndex) &&
|
68 | !prevProps.isOpen &&
|
69 | this.props.isOpen) {
|
70 | this.setState(this.getInitialIndexFromProps(this.props));
|
71 | }
|
72 | };
|
73 | MultistepDialog.prototype.getDialogStyle = function () {
|
74 | return __assign({ minWidth: MIN_WIDTH, paddingBottom: PADDING_BOTTOM }, this.props.style);
|
75 | };
|
76 | MultistepDialog.prototype.renderLeftPanel = function () {
|
77 | return (React.createElement("div", { className: Classes.MULTISTEP_DIALOG_LEFT_PANEL }, this.getDialogStepChildren().filter(isDialogStepElement).map(this.renderDialogStep)));
|
78 | };
|
79 | MultistepDialog.prototype.maybeRenderRightPanel = function () {
|
80 | var steps = this.getDialogStepChildren();
|
81 | if (steps.length <= this.state.selectedIndex) {
|
82 | return null;
|
83 | }
|
84 | var _a = steps[this.state.selectedIndex].props, className = _a.className, panel = _a.panel, panelClassName = _a.panelClassName;
|
85 | return (React.createElement("div", { className: classNames(Classes.MULTISTEP_DIALOG_RIGHT_PANEL, className, panelClassName) },
|
86 | panel,
|
87 | this.renderFooter()));
|
88 | };
|
89 | MultistepDialog.prototype.renderFooter = function () {
|
90 | var _a = this.props, closeButtonProps = _a.closeButtonProps, isCloseButtonShown = _a.isCloseButtonShown, showCloseButtonInFooter = _a.showCloseButtonInFooter, onClose = _a.onClose;
|
91 | var isFooterCloseButtonVisible = showCloseButtonInFooter && isCloseButtonShown;
|
92 | var maybeCloseButton = !isFooterCloseButtonVisible ? undefined : (React.createElement(Button, __assign({ text: "Close", onClick: onClose }, closeButtonProps)));
|
93 | return (React.createElement("div", { className: Classes.MULTISTEP_DIALOG_FOOTER },
|
94 | maybeCloseButton,
|
95 | React.createElement("div", { className: Classes.DIALOG_FOOTER_ACTIONS }, this.renderButtons())));
|
96 | };
|
97 | MultistepDialog.prototype.renderButtons = function () {
|
98 | var _a, _b;
|
99 | var selectedIndex = this.state.selectedIndex;
|
100 | var steps = this.getDialogStepChildren();
|
101 | var buttons = [];
|
102 | if (this.state.selectedIndex > 0) {
|
103 | var backButtonProps = (_a = steps[selectedIndex].props.backButtonProps) !== null && _a !== void 0 ? _a : this.props.backButtonProps;
|
104 | buttons.push(React.createElement(Button, __assign({ key: "back", onClick: this.getDialogStepChangeHandler(selectedIndex - 1), text: "Back" }, backButtonProps)));
|
105 | }
|
106 | if (selectedIndex === this.getDialogStepChildren().length - 1) {
|
107 | buttons.push(React.createElement(Button, __assign({ intent: "primary", key: "final", text: "Submit" }, this.props.finalButtonProps)));
|
108 | }
|
109 | else {
|
110 | var nextButtonProps = (_b = steps[selectedIndex].props.nextButtonProps) !== null && _b !== void 0 ? _b : this.props.nextButtonProps;
|
111 | buttons.push(React.createElement(Button, __assign({ intent: "primary", key: "next", onClick: this.getDialogStepChangeHandler(selectedIndex + 1), text: "Next" }, nextButtonProps)));
|
112 | }
|
113 | return buttons;
|
114 | };
|
115 | MultistepDialog.prototype.getDialogStepChangeHandler = function (index) {
|
116 | var _this = this;
|
117 | return function (event) {
|
118 | if (_this.props.onChange !== undefined) {
|
119 | var steps = _this.getDialogStepChildren();
|
120 | var prevStepId = steps[_this.state.selectedIndex].props.id;
|
121 | var newStepId = steps[index].props.id;
|
122 | _this.props.onChange(newStepId, prevStepId, event);
|
123 | }
|
124 | _this.setState({
|
125 | lastViewedIndex: Math.max(_this.state.lastViewedIndex, index),
|
126 | selectedIndex: index,
|
127 | });
|
128 | };
|
129 | };
|
130 |
|
131 | MultistepDialog.prototype.getDialogStepChildren = function (props) {
|
132 | if (props === void 0) { props = this.props; }
|
133 | return React.Children.toArray(props.children).filter(isDialogStepElement);
|
134 | };
|
135 | MultistepDialog.prototype.getInitialIndexFromProps = function (props) {
|
136 | if (props.initialStepIndex !== undefined) {
|
137 | var boundedInitialIndex = Math.max(0, Math.min(props.initialStepIndex, this.getDialogStepChildren(props).length - 1));
|
138 | return {
|
139 | lastViewedIndex: boundedInitialIndex,
|
140 | selectedIndex: boundedInitialIndex,
|
141 | };
|
142 | }
|
143 | else {
|
144 | return {
|
145 | lastViewedIndex: 0,
|
146 | selectedIndex: 0,
|
147 | };
|
148 | }
|
149 | };
|
150 | MultistepDialog.displayName = "".concat(DISPLAYNAME_PREFIX, ".MultistepDialog");
|
151 | MultistepDialog.defaultProps = {
|
152 | canOutsideClickClose: true,
|
153 | isOpen: false,
|
154 | navigationPosition: "left",
|
155 | resetOnClose: true,
|
156 | showCloseButtonInFooter: false,
|
157 | };
|
158 | return MultistepDialog;
|
159 | }(AbstractPureComponent2));
|
160 | export { MultistepDialog };
|
161 | function isDialogStepElement(child) {
|
162 | return Utils.isElementOfType(child, DialogStep);
|
163 | }
|
164 |
|
\ | No newline at end of file |