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