@carbon/ibm-products 1.3.0 → 1.4.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +1766 -1701
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-without-carbon-released-only.css +32 -41
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon.css +228 -163
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index.css +1767 -1702
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/es/components/APIKeyModal/APIKeyModal.js +25 -29
- package/es/components/ActionBar/ActionBar.js +4 -1
- package/es/components/AddSelect/AddSelect.js +65 -19
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +19 -15
- package/es/components/CancelableTextEdit/CancelableTextEdit.js +60 -22
- package/es/components/CreateFullPage/CreateFullPage.js +78 -259
- package/es/components/CreateFullPage/CreateFullPageStep.js +58 -14
- package/es/components/CreateFullPage/index.js +1 -2
- package/es/components/CreateInfluencer/CreateInfluencer.js +23 -225
- package/es/components/CreateTearsheet/CreateTearsheet.js +69 -146
- package/es/components/CreateTearsheet/CreateTearsheetStep.js +59 -16
- package/es/components/CreateTearsheet/index.js +0 -1
- package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +66 -27
- package/es/components/ExportModal/ExportModal.js +4 -2
- package/es/components/ImportModal/ImportModal.js +2 -1
- package/es/components/InlineEdit/InlineEdit.js +224 -0
- package/es/components/InlineEdit/index.js +7 -0
- package/es/components/MultiAddSelect/MultiAddSelect.js +16 -0
- package/es/components/MultiAddSelect/index.js +1 -0
- package/es/components/OptionsTile/OptionsTile.js +36 -15
- package/es/components/PageHeader/PageHeader.js +54 -33
- package/es/components/PageHeader/PageHeaderTitle.js +78 -7
- package/es/components/PageHeader/PageHeaderUtils.js +21 -2
- package/es/components/RemoveModal/RemoveModal.js +4 -2
- package/es/components/SingleAddSelect/SingleAddSelect.js +15 -0
- package/es/components/SingleAddSelect/index.js +1 -0
- package/es/components/TagSet/TagSet.js +4 -1
- package/es/components/Toolbar/Toolbar.js +69 -8
- package/es/components/index.js +4 -2
- package/es/global/js/hooks/useCreateComponentFocus.js +15 -19
- package/es/global/js/hooks/useCreateComponentStepChange.js +44 -74
- package/es/global/js/hooks/useValidCreateStepCount.js +4 -7
- package/es/global/js/package-settings.js +4 -2
- package/lib/components/APIKeyModal/APIKeyModal.js +25 -29
- package/lib/components/ActionBar/ActionBar.js +4 -1
- package/lib/components/AddSelect/AddSelect.js +64 -19
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +18 -14
- package/lib/components/CancelableTextEdit/CancelableTextEdit.js +61 -22
- package/lib/components/CreateFullPage/CreateFullPage.js +78 -259
- package/lib/components/CreateFullPage/CreateFullPageStep.js +61 -14
- package/lib/components/CreateFullPage/index.js +1 -9
- package/lib/components/CreateInfluencer/CreateInfluencer.js +21 -236
- package/lib/components/CreateTearsheet/CreateTearsheet.js +71 -148
- package/lib/components/CreateTearsheet/CreateTearsheetStep.js +61 -15
- package/lib/components/CreateTearsheet/index.js +0 -8
- package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +67 -35
- package/lib/components/ExportModal/ExportModal.js +4 -2
- package/lib/components/ImportModal/ImportModal.js +2 -1
- package/lib/components/InlineEdit/InlineEdit.js +242 -0
- package/lib/components/InlineEdit/index.js +13 -0
- package/lib/components/MultiAddSelect/MultiAddSelect.js +37 -0
- package/lib/components/MultiAddSelect/index.js +13 -0
- package/lib/components/OptionsTile/OptionsTile.js +36 -15
- package/lib/components/PageHeader/PageHeader.js +54 -33
- package/lib/components/PageHeader/PageHeaderTitle.js +87 -9
- package/lib/components/PageHeader/PageHeaderUtils.js +21 -2
- package/lib/components/RemoveModal/RemoveModal.js +4 -2
- package/lib/components/SingleAddSelect/SingleAddSelect.js +36 -0
- package/lib/components/SingleAddSelect/index.js +13 -0
- package/lib/components/TagSet/TagSet.js +4 -1
- package/lib/components/Toolbar/Toolbar.js +69 -6
- package/lib/components/index.js +25 -9
- package/lib/global/js/hooks/useCreateComponentFocus.js +15 -19
- package/lib/global/js/hooks/useCreateComponentStepChange.js +44 -74
- package/lib/global/js/hooks/useValidCreateStepCount.js +4 -7
- package/lib/global/js/package-settings.js +4 -2
- package/package.json +8 -8
- package/scss/components/AddSelect/_add-select.scss +14 -3
- package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +19 -15
- package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +141 -70
- package/scss/components/CreateFullPage/_create-full-page.scss +4 -11
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +4 -8
- package/scss/components/InlineEdit/_index.scss +8 -0
- package/scss/components/InlineEdit/_inline-edit.scss +44 -0
- package/scss/components/InlineEdit/_storybook-styles.scss +15 -0
- package/scss/components/MultiAddSelect/_index.scss +1 -0
- package/scss/components/MultiAddSelect/_multi-add-select.scss +1 -0
- package/scss/components/MultiAddSelect/_storybook-styles.scss +6 -0
- package/scss/components/PageHeader/_page-header.scss +14 -4
- package/scss/components/SingleAddSelect/_index.scss +1 -0
- package/scss/components/SingleAddSelect/_single-add-select.scss +1 -0
- package/scss/components/SingleAddSelect/_storybook-styles.scss +6 -0
- package/scss/components/_index.scss +3 -1
- package/es/components/CreateFullPage/CreateFullPageSection.js +0 -53
- package/es/components/CreateFullPage/constants.js +0 -8
- package/es/components/CreateTearsheet/CreateTearsheetSection.js +0 -83
- package/es/components/CreateTearsheet/constants.js +0 -8
- package/es/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -327
- package/es/global/js/utils/hasValidType.js +0 -94
- package/lib/components/CreateFullPage/CreateFullPageSection.js +0 -74
- package/lib/components/CreateFullPage/constants.js +0 -16
- package/lib/components/CreateTearsheet/CreateTearsheetSection.js +0 -105
- package/lib/components/CreateTearsheet/constants.js +0 -17
- package/lib/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -354
- package/lib/global/js/utils/hasValidType.js +0 -110
@@ -1,273 +1,71 @@
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
|
-
|
4
1
|
/**
|
5
|
-
* Copyright IBM Corp. 2021,
|
2
|
+
* Copyright IBM Corp. 2021, 2022
|
6
3
|
*
|
7
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
8
5
|
* LICENSE file in the root directory of this source tree.
|
9
6
|
*/
|
10
7
|
// Import portions of React that are needed.
|
11
|
-
import React
|
8
|
+
import React from 'react';
|
12
9
|
import PropTypes from 'prop-types';
|
13
10
|
import cx from 'classnames';
|
14
|
-
import { ProgressIndicator, ProgressStep
|
15
|
-
import { SideNav, SideNavItems, SideNavLink } from 'carbon-components-react/lib/components/UIShell';
|
16
|
-
import { moderate02 } from '@carbon/motion';
|
17
|
-
import { getExtractedSteps } from '../../global/js/utils/hasValidType';
|
11
|
+
import { ProgressIndicator, ProgressStep } from 'carbon-components-react';
|
18
12
|
import '../../global/js/utils/props-helper';
|
19
|
-
import { pkg } from '../../settings';
|
20
|
-
import { CREATE_TEARSHEET_STEP } from '../CreateTearsheet/constants';
|
21
|
-
import { CREATE_FULL_PAGE_STEP } from '../CreateFullPage/constants';
|
22
|
-
import { CreateTearsheet } from '../CreateTearsheet'; // The block part of our conventional BEM class names (blockClass__E--M).
|
13
|
+
import { pkg } from '../../settings'; // The block part of our conventional BEM class names (blockClass__E--M).
|
23
14
|
|
24
15
|
var blockClass = "".concat(pkg.prefix, "--create-influencer");
|
25
16
|
var componentName = 'CreateInfluencer';
|
26
17
|
export var CreateInfluencer = function CreateInfluencer(_ref) {
|
27
|
-
var
|
28
|
-
className = _ref.className,
|
29
|
-
componentBlockClass = _ref.componentBlockClass,
|
30
|
-
createComponentName = _ref.createComponentName,
|
31
|
-
createComponents = _ref.createComponents,
|
18
|
+
var className = _ref.className,
|
32
19
|
currentStep = _ref.currentStep,
|
33
|
-
|
34
|
-
handleActiveSectionIndex = _ref.handleActiveSectionIndex,
|
35
|
-
includeViewAllToggle = _ref.includeViewAllToggle,
|
36
|
-
open = _ref.open,
|
37
|
-
previousState = _ref.previousState,
|
38
|
-
sideNavAriaLabel = _ref.sideNavAriaLabel,
|
39
|
-
toggleState = _ref.toggleState,
|
40
|
-
viewAllToggleLabelText = _ref.viewAllToggleLabelText,
|
41
|
-
viewAllToggleOffLabelText = _ref.viewAllToggleOffLabelText,
|
42
|
-
viewAllToggleOnLabelText = _ref.viewAllToggleOnLabelText;
|
43
|
-
|
44
|
-
var _useState = useState(''),
|
45
|
-
_useState2 = _slicedToArray(_useState, 2),
|
46
|
-
progressIndicatorState = _useState2[0],
|
47
|
-
setProgressIndicatorState = _useState2[1];
|
48
|
-
|
49
|
-
var _useState3 = useState(''),
|
50
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
51
|
-
sideNavState = _useState4[0],
|
52
|
-
setSideNavState = _useState4[1]; // Animating states need to be reset here otherwise things won't render
|
53
|
-
// the way they should after the component mounts/unmounts
|
54
|
-
|
55
|
-
/* istanbul ignore next */
|
56
|
-
|
57
|
-
|
58
|
-
useEffect(function () {
|
59
|
-
if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
|
60
|
-
setSideNavState('');
|
61
|
-
setProgressIndicatorState('');
|
62
|
-
}
|
63
|
-
}, [open, previousState]);
|
64
|
-
/* istanbul ignore next */
|
65
|
-
|
66
|
-
var handleViewAllToggle = function handleViewAllToggle(newToggleValue) {
|
67
|
-
if (newToggleValue) {
|
68
|
-
setProgressIndicatorState('closing');
|
69
|
-
setTimeout(function () {
|
70
|
-
handleToggleState(newToggleValue);
|
71
|
-
setSideNavState('opening');
|
72
|
-
}, moderate02);
|
73
|
-
} else {
|
74
|
-
setSideNavState('closing');
|
75
|
-
setTimeout(function () {
|
76
|
-
handleToggleState(newToggleValue);
|
77
|
-
setProgressIndicatorState('opening');
|
78
|
-
}, moderate02);
|
79
|
-
}
|
80
|
-
|
81
|
-
handleActiveSectionIndex(0);
|
82
|
-
var createComponentContainer = document.querySelector(".".concat(componentBlockClass));
|
83
|
-
|
84
|
-
if (createComponentContainer) {
|
85
|
-
createComponentContainer.scrollTop = 0;
|
86
|
-
}
|
87
|
-
};
|
88
|
-
|
89
|
-
var renderViewAllToggle = function renderViewAllToggle() {
|
90
|
-
return /*#__PURE__*/React.createElement(Toggle, {
|
91
|
-
id: "".concat(blockClass, "__view-all-toggle"),
|
92
|
-
toggled: toggleState,
|
93
|
-
labelText: viewAllToggleLabelText,
|
94
|
-
labelA: viewAllToggleOffLabelText,
|
95
|
-
labelB: viewAllToggleOnLabelText,
|
96
|
-
onToggle: function onToggle(value) {
|
97
|
-
return handleViewAllToggle(value);
|
98
|
-
},
|
99
|
-
className: "".concat(blockClass, "__view-all-toggle"),
|
100
|
-
defaultToggled: false
|
101
|
-
});
|
102
|
-
}; // renders the step progression components in the left influencer area
|
103
|
-
|
20
|
+
stepData = _ref.stepData;
|
104
21
|
|
22
|
+
// renders the step progression components in the left influencer area
|
105
23
|
var renderProgressSteps = function renderProgressSteps() {
|
106
|
-
var
|
107
|
-
|
108
|
-
/* istanbul ignore next */
|
109
|
-
if (toggleState) {
|
110
|
-
var _cx, _createComponents$sec;
|
111
|
-
|
112
|
-
return /*#__PURE__*/React.createElement("div", {
|
113
|
-
className: "".concat(blockClass, "__left-nav")
|
114
|
-
}, /*#__PURE__*/React.createElement(SideNav, {
|
115
|
-
expanded: true,
|
116
|
-
isFixedNav: true,
|
117
|
-
"aria-label": sideNavAriaLabel,
|
118
|
-
className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__side-nav-opening"), sideNavState === 'opening'), _defineProperty(_cx, "".concat(blockClass, "__side-nav-closing"), sideNavState === 'closing'), _cx))
|
119
|
-
}, /*#__PURE__*/React.createElement(SideNavItems, null, ((_createComponents$sec = createComponents.sections) === null || _createComponents$sec === void 0 ? void 0 : _createComponents$sec.length) && createComponents.sections.map(function (sectionComponent, sectionIndex) {
|
120
|
-
var _sectionComponent$pro;
|
24
|
+
var _stepData$, _stepData$2;
|
121
25
|
|
122
|
-
|
123
|
-
|
124
|
-
key: sectionIndex,
|
125
|
-
isActive: activeSectionIndex === sectionIndex,
|
126
|
-
onClick: function onClick(event) {
|
127
|
-
event.preventDefault();
|
128
|
-
handleActiveSectionIndex(sectionIndex);
|
129
|
-
|
130
|
-
if (sectionComponent.props.id) {
|
131
|
-
var _scrollTarget$getBoun;
|
132
|
-
|
133
|
-
var scrollTarget = document.querySelector("#".concat(sectionComponent.props.id));
|
134
|
-
var scrollContainer = document.querySelector(".".concat(componentBlockClass, "__content"));
|
135
|
-
var scrollTopValue = createComponentName === 'CreateFullPage' ? (scrollTarget === null || scrollTarget === void 0 ? void 0 : (_scrollTarget$getBoun = scrollTarget.getBoundingClientRect()) === null || _scrollTarget$getBoun === void 0 ? void 0 : _scrollTarget$getBoun.y) + (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) : scrollTarget === null || scrollTarget === void 0 ? void 0 : scrollTarget.offsetTop;
|
136
|
-
scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
|
137
|
-
top: scrollTopValue,
|
138
|
-
behavior: 'smooth'
|
139
|
-
});
|
140
|
-
} else {
|
141
|
-
console.warn("".concat(createComponentName, ": ").concat(createComponentName, "Section component is missing a required prop of 'id'"));
|
142
|
-
}
|
143
|
-
}
|
144
|
-
}, sectionComponent.props.title);
|
145
|
-
}))));
|
146
|
-
}
|
147
|
-
|
148
|
-
var extractedSteps = getExtractedSteps(createComponents.steps, createComponentName === CreateTearsheet.displayName ? CREATE_TEARSHEET_STEP : CREATE_FULL_PAGE_STEP);
|
149
|
-
var stepsWithoutIntroStep = extractedSteps.filter(function (item) {
|
150
|
-
return !item.props.introStep;
|
26
|
+
var extractedSteps = stepData === null || stepData === void 0 ? void 0 : stepData.filter(function (item) {
|
27
|
+
return !(item !== null && item !== void 0 && item.introStep);
|
151
28
|
});
|
152
|
-
var introStepFound = !!createComponents.steps.filter(function (item) {
|
153
|
-
return item.props.introStep;
|
154
|
-
}).length;
|
155
29
|
return /*#__PURE__*/React.createElement("div", {
|
156
30
|
className: "".concat(blockClass, "__left-nav")
|
157
|
-
}, currentStep === 1 && (
|
158
|
-
currentIndex:
|
31
|
+
}, currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/React.createElement(ProgressIndicator, {
|
32
|
+
currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - 2 : currentStep - 1,
|
159
33
|
spaceEqually: true,
|
160
34
|
vertical: true,
|
161
|
-
className: cx("".concat(blockClass, "__progress-indicator")
|
162
|
-
},
|
35
|
+
className: cx("".concat(blockClass, "__progress-indicator"))
|
36
|
+
}, extractedSteps.map(function (step, stepIndex) {
|
163
37
|
return /*#__PURE__*/React.createElement(ProgressStep, {
|
164
|
-
label:
|
38
|
+
label: step.title,
|
165
39
|
key: stepIndex,
|
166
|
-
secondaryLabel:
|
40
|
+
secondaryLabel: step.secondaryLabel
|
167
41
|
});
|
168
42
|
})));
|
169
43
|
};
|
170
44
|
|
171
45
|
return /*#__PURE__*/React.createElement("div", {
|
172
46
|
className: cx(blockClass, className)
|
173
|
-
}, renderProgressSteps()
|
47
|
+
}, renderProgressSteps());
|
174
48
|
}; // The display name of the component, used by React. Note that displayName
|
175
49
|
// is used in preference to relying on function.name.
|
176
50
|
|
177
51
|
CreateInfluencer.displayName = componentName;
|
178
52
|
CreateInfluencer.propTypes = {
|
179
|
-
/**
|
180
|
-
* Sets the active side nav item when toggle is on
|
181
|
-
*/
|
182
|
-
activeSectionIndex: PropTypes.number.isRequired,
|
183
|
-
|
184
53
|
/**
|
185
54
|
* Provide an optional class to be applied to the containing node.
|
186
55
|
*/
|
187
56
|
className: PropTypes.string,
|
188
57
|
|
189
|
-
/**
|
190
|
-
* The blockClass for the create component (Tearsheet or FullPage)
|
191
|
-
*/
|
192
|
-
componentBlockClass: PropTypes.string.isRequired,
|
193
|
-
|
194
|
-
/**
|
195
|
-
* Used to mark the current step on the ProgressIndicator component
|
196
|
-
*/
|
197
|
-
createComponentName: PropTypes.string.isRequired,
|
198
|
-
|
199
|
-
/**
|
200
|
-
* An object with section and step components, needed to render the progress steps. This is where the titles are retrieved from.
|
201
|
-
*/
|
202
|
-
createComponents: PropTypes.shape({
|
203
|
-
steps: PropTypes.arrayOf(PropTypes.element),
|
204
|
-
sections: PropTypes.arrayOf(PropTypes.element)
|
205
|
-
}).isRequired,
|
206
|
-
|
207
58
|
/**
|
208
59
|
* Used to mark the current step on the ProgressIndicator component
|
209
60
|
*/
|
210
61
|
currentStep: PropTypes.number.isRequired,
|
211
62
|
|
212
63
|
/**
|
213
|
-
*
|
214
|
-
*/
|
215
|
-
handleActiveSectionIndex: PropTypes.func,
|
216
|
-
|
217
|
-
/**
|
218
|
-
* Handler used to track the state of the toggle
|
219
|
-
*/
|
220
|
-
handleToggleState: PropTypes.func,
|
221
|
-
|
222
|
-
/**
|
223
|
-
* Used to optionally include view all toggle
|
224
|
-
*/
|
225
|
-
includeViewAllToggle: PropTypes.bool,
|
226
|
-
|
227
|
-
/**
|
228
|
-
* This is the open state of the CreateComponent in which the CreateInfluencer is used from
|
229
|
-
*/
|
230
|
-
open: PropTypes.bool,
|
231
|
-
|
232
|
-
/**
|
233
|
-
* This is the open state of the CreateComponent in which the CreateInfluencer is used from
|
234
|
-
*/
|
235
|
-
previousState: PropTypes.object,
|
236
|
-
|
237
|
-
/**
|
238
|
-
* The aria label to be used for the UI Shell SideNav Carbon component
|
239
|
-
*/
|
240
|
-
sideNavAriaLabel: PropTypes.string.isRequired.if(function (_ref2) {
|
241
|
-
var includeViewAllToggle = _ref2.includeViewAllToggle;
|
242
|
-
return includeViewAllToggle;
|
243
|
-
}),
|
244
|
-
|
245
|
-
/**
|
246
|
-
* The current toggled state to be provided to the Toggle component
|
247
|
-
*/
|
248
|
-
toggleState: PropTypes.bool,
|
249
|
-
|
250
|
-
/**
|
251
|
-
* Sets the label text for the view all toggle component
|
252
|
-
*/
|
253
|
-
viewAllToggleLabelText: PropTypes.string.isRequired.if(function (_ref3) {
|
254
|
-
var includeViewAllToggle = _ref3.includeViewAllToggle;
|
255
|
-
return includeViewAllToggle === true;
|
256
|
-
}),
|
257
|
-
|
258
|
-
/**
|
259
|
-
* Sets the label text for the view all toggle `off` text
|
260
|
-
*/
|
261
|
-
viewAllToggleOffLabelText: PropTypes.string.isRequired.if(function (_ref4) {
|
262
|
-
var includeViewAllToggle = _ref4.includeViewAllToggle;
|
263
|
-
return includeViewAllToggle === true;
|
264
|
-
}),
|
265
|
-
|
266
|
-
/**
|
267
|
-
* Sets the label text for the view all toggle `on` text
|
64
|
+
* The step data that renders the progress items
|
268
65
|
*/
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
66
|
+
stepData: PropTypes.arrayOf(PropTypes.shape({
|
67
|
+
introStep: PropTypes.bool,
|
68
|
+
secondaryLabel: PropTypes.string,
|
69
|
+
title: PropTypes.node
|
70
|
+
}))
|
273
71
|
};
|
@@ -1,16 +1,15 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
4
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5
|
-
var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "
|
4
|
+
var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
|
6
5
|
|
7
6
|
/**
|
8
|
-
* Copyright IBM Corp. 2021,
|
7
|
+
* Copyright IBM Corp. 2021, 2022
|
9
8
|
*
|
10
9
|
* This source code is licensed under the Apache-2.0 license found in the
|
11
10
|
* LICENSE file in the root directory of this source tree.
|
12
11
|
*/
|
13
|
-
import React, { forwardRef,
|
12
|
+
import React, { forwardRef, useState, useRef, createContext } from 'react';
|
14
13
|
import PropTypes from 'prop-types';
|
15
14
|
import cx from 'classnames';
|
16
15
|
import { Grid, Form } from 'carbon-components-react';
|
@@ -18,19 +17,23 @@ import wrapFocus from '../../global/js/utils/wrapFocus';
|
|
18
17
|
import { TearsheetShell } from '../Tearsheet/TearsheetShell';
|
19
18
|
import { CreateInfluencer } from '../CreateInfluencer';
|
20
19
|
import { pkg } from '../../settings';
|
21
|
-
import { CREATE_TEARSHEET_SECTION, CREATE_TEARSHEET_STEP } from './constants';
|
22
20
|
import { usePreviousValue, useValidCreateStepCount, useResetCreateComponent, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
|
23
|
-
import { hasValidChildrenType, hasValidChildType, getExtractedSteps } from '../../global/js/utils/hasValidType';
|
24
21
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
25
22
|
var componentName = 'CreateTearsheet';
|
26
|
-
var blockClass = "".concat(pkg.prefix, "--tearsheet-create");
|
23
|
+
var blockClass = "".concat(pkg.prefix, "--tearsheet-create"); // This is a general context for the steps container
|
24
|
+
// containing information about the state of the container
|
25
|
+
// and providing some callback methods for steps to use
|
26
|
+
|
27
|
+
export var StepsContext = /*#__PURE__*/createContext(null); // This is a context supplied separately to each step in the container
|
28
|
+
// to let it know what number it is in the sequence of steps
|
29
|
+
|
30
|
+
export var StepNumberContext = /*#__PURE__*/createContext(-1);
|
27
31
|
export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
28
32
|
var backButtonText = _ref.backButtonText,
|
29
33
|
cancelButtonText = _ref.cancelButtonText,
|
30
34
|
children = _ref.children,
|
31
35
|
className = _ref.className,
|
32
36
|
description = _ref.description,
|
33
|
-
includeViewAllToggle = _ref.includeViewAllToggle,
|
34
37
|
influencerWidth = _ref.influencerWidth,
|
35
38
|
initialStep = _ref.initialStep,
|
36
39
|
label = _ref.label,
|
@@ -38,13 +41,9 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
38
41
|
onClose = _ref.onClose,
|
39
42
|
onRequestSubmit = _ref.onRequestSubmit,
|
40
43
|
open = _ref.open,
|
41
|
-
sideNavAriaLabel = _ref.sideNavAriaLabel,
|
42
44
|
submitButtonText = _ref.submitButtonText,
|
43
45
|
title = _ref.title,
|
44
46
|
verticalPosition = _ref.verticalPosition,
|
45
|
-
viewAllToggleLabelText = _ref.viewAllToggleLabelText,
|
46
|
-
viewAllToggleOffLabelText = _ref.viewAllToggleOffLabelText,
|
47
|
-
viewAllToggleOnLabelText = _ref.viewAllToggleOnLabelText,
|
48
47
|
rest = _objectWithoutProperties(_ref, _excluded);
|
49
48
|
|
50
49
|
var _useState = useState([]),
|
@@ -67,40 +66,57 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
67
66
|
isSubmitting = _useState8[0],
|
68
67
|
setIsSubmitting = _useState8[1];
|
69
68
|
|
70
|
-
var _useState9 = useState(
|
69
|
+
var _useState9 = useState(false),
|
71
70
|
_useState10 = _slicedToArray(_useState9, 2),
|
72
|
-
|
73
|
-
|
71
|
+
isDisabled = _useState10[0],
|
72
|
+
setIsDisabled = _useState10[1];
|
73
|
+
|
74
|
+
var _useState11 = useState(),
|
75
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
76
|
+
onNext = _useState12[0],
|
77
|
+
_setOnNext = _useState12[1];
|
78
|
+
|
79
|
+
var _useState13 = useState(),
|
80
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
81
|
+
onMount = _useState14[0],
|
82
|
+
_setOnMount = _useState14[1];
|
83
|
+
|
84
|
+
var _useState15 = useState([]),
|
85
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
86
|
+
stepData = _useState16[0],
|
87
|
+
setStepData = _useState16[1];
|
74
88
|
|
89
|
+
var totalStepCount = React.Children.count(children);
|
75
90
|
var previousState = usePreviousValue({
|
76
91
|
currentStep: currentStep,
|
77
92
|
open: open
|
78
93
|
});
|
79
|
-
var contentRef = useRef();
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
}
|
86
|
-
|
87
|
-
useValidCreateStepCount(getTearsheetSteps, componentName);
|
94
|
+
var contentRef = useRef();
|
95
|
+
useCreateComponentFocus({
|
96
|
+
previousState: previousState,
|
97
|
+
currentStep: currentStep,
|
98
|
+
blockClass: blockClass,
|
99
|
+
onMount: onMount
|
100
|
+
});
|
101
|
+
useValidCreateStepCount(stepData.length, componentName);
|
88
102
|
useResetCreateComponent({
|
89
103
|
previousState: previousState,
|
90
104
|
open: open,
|
91
105
|
setCurrentStep: setCurrentStep,
|
92
106
|
initialStep: initialStep,
|
93
|
-
totalSteps:
|
107
|
+
totalSteps: totalStepCount,
|
94
108
|
componentName: componentName
|
95
109
|
});
|
96
110
|
useCreateComponentStepChange({
|
111
|
+
totalStepCount: totalStepCount,
|
112
|
+
onNext: onNext,
|
113
|
+
isSubmitDisabled: isDisabled,
|
97
114
|
setCurrentStep: setCurrentStep,
|
98
115
|
setIsSubmitting: setIsSubmitting,
|
99
116
|
setShouldViewAll: setShouldViewAll,
|
100
117
|
onClose: onClose,
|
101
118
|
onRequestSubmit: onRequestSubmit,
|
102
119
|
componentName: componentName,
|
103
|
-
getComponentSteps: getTearsheetSteps,
|
104
120
|
currentStep: currentStep,
|
105
121
|
shouldViewAll: shouldViewAll,
|
106
122
|
backButtonText: backButtonText,
|
@@ -110,62 +126,10 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
110
126
|
isSubmitting: isSubmitting,
|
111
127
|
componentBlockClass: blockClass,
|
112
128
|
setCreateComponentActions: setCreateTearsheetActions
|
113
|
-
});
|
114
|
-
|
115
|
-
var getTearsheetComponents = function getTearsheetComponents(childrenElements) {
|
116
|
-
var childrenArray = Array.isArray(childrenElements) ? childrenElements : [childrenElements];
|
117
|
-
var tearsheetStepComponents = getExtractedSteps(childrenArray, CREATE_TEARSHEET_STEP);
|
118
|
-
var tearsheetSectionComponents = [];
|
119
|
-
tearsheetStepComponents.forEach(function (child) {
|
120
|
-
var _child$props, _child$props$children;
|
121
|
-
|
122
|
-
// we have received an array of children, lets check to see that each child is
|
123
|
-
// a CreateTearsheetSection component before adding it to tearsheetSectionComponents
|
124
|
-
if (shouldViewAll && child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && (_child$props$children = _child$props.children) !== null && _child$props$children !== void 0 && _child$props$children.length && typeof child.props.children !== 'string') {
|
125
|
-
child.props.children.forEach(function (stepChild) {
|
126
|
-
if (hasValidChildType({
|
127
|
-
child: stepChild,
|
128
|
-
type: CREATE_TEARSHEET_SECTION
|
129
|
-
})) {
|
130
|
-
tearsheetSectionComponents.push(stepChild);
|
131
|
-
}
|
132
|
-
});
|
133
|
-
} // we have received a single child element, lets check to see that it is
|
134
|
-
// a CreateTearsheetSection component before adding it to tearsheetSectionComponents
|
135
|
-
|
136
|
-
|
137
|
-
if (shouldViewAll && typeof child.props.children !== 'undefined' && !child.props.children.length) {
|
138
|
-
if (hasValidChildType({
|
139
|
-
child: child.props.children,
|
140
|
-
type: CREATE_TEARSHEET_SECTION
|
141
|
-
})) {
|
142
|
-
tearsheetSectionComponents.push(child.props.children);
|
143
|
-
}
|
144
|
-
}
|
145
|
-
});
|
146
|
-
return {
|
147
|
-
sections: tearsheetSectionComponents,
|
148
|
-
steps: tearsheetStepComponents
|
149
|
-
};
|
150
|
-
}; // renders all children (CreateTearsheetSteps)
|
151
|
-
|
152
|
-
|
153
|
-
var renderChildren = function renderChildren(childrenElements) {
|
154
|
-
var childrenArray = Array.isArray(childrenElements) ? childrenElements : [childrenElements];
|
155
|
-
var extractedSteps = getExtractedSteps(childrenArray, CREATE_TEARSHEET_STEP);
|
156
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, extractedSteps.map(function (child, stepIndex) {
|
157
|
-
var _cx;
|
158
|
-
|
159
|
-
return /*#__PURE__*/React.cloneElement(child, {
|
160
|
-
className: cx(child.props.className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), !shouldViewAll && currentStep !== stepIndex + 1), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), currentStep === stepIndex + 1), _cx)),
|
161
|
-
key: "key_".concat(stepIndex)
|
162
|
-
});
|
163
|
-
}));
|
164
|
-
}; // adds focus trap functionality
|
129
|
+
}); // adds focus trap functionality
|
165
130
|
|
166
131
|
/* istanbul ignore next */
|
167
132
|
|
168
|
-
|
169
133
|
var handleBlur = function handleBlur(_ref2) {
|
170
134
|
var oldActiveNode = _ref2.target,
|
171
135
|
currentActiveNode = _ref2.relatedTarget;
|
@@ -186,25 +150,8 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
186
150
|
description: description,
|
187
151
|
hasCloseIcon: false,
|
188
152
|
influencer: /*#__PURE__*/React.createElement(CreateInfluencer, {
|
189
|
-
activeSectionIndex: activeSectionIndex,
|
190
|
-
componentBlockClass: blockClass,
|
191
|
-
createComponentName: componentName,
|
192
153
|
currentStep: currentStep,
|
193
|
-
|
194
|
-
includeViewAllToggle: includeViewAllToggle,
|
195
|
-
handleToggleState: function handleToggleState(toggleState) {
|
196
|
-
return setShouldViewAll(toggleState);
|
197
|
-
},
|
198
|
-
handleActiveSectionIndex: function handleActiveSectionIndex(index) {
|
199
|
-
return setActiveSectionIndex(index);
|
200
|
-
},
|
201
|
-
open: open,
|
202
|
-
previousState: previousState,
|
203
|
-
sideNavAriaLabel: sideNavAriaLabel,
|
204
|
-
toggleState: shouldViewAll,
|
205
|
-
viewAllToggleLabelText: viewAllToggleLabelText,
|
206
|
-
viewAllToggleOffLabelText: viewAllToggleOffLabelText,
|
207
|
-
viewAllToggleOnLabelText: viewAllToggleOnLabelText
|
154
|
+
stepData: stepData
|
208
155
|
}),
|
209
156
|
influencerPosition: "left",
|
210
157
|
influencerWidth: influencerWidth,
|
@@ -219,7 +166,29 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
219
166
|
className: "".concat(blockClass, "__content"),
|
220
167
|
onBlur: handleBlur,
|
221
168
|
ref: contentRef
|
222
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Form, null,
|
169
|
+
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(StepsContext.Provider, {
|
170
|
+
value: {
|
171
|
+
currentStep: currentStep,
|
172
|
+
setIsDisabled: setIsDisabled,
|
173
|
+
setOnNext: function setOnNext(fn) {
|
174
|
+
return _setOnNext(function () {
|
175
|
+
return fn;
|
176
|
+
});
|
177
|
+
},
|
178
|
+
setOnMount: function setOnMount(fn) {
|
179
|
+
return _setOnMount(function () {
|
180
|
+
return fn;
|
181
|
+
});
|
182
|
+
},
|
183
|
+
setStepData: setStepData,
|
184
|
+
stepData: stepData,
|
185
|
+
totalStepCount: totalStepCount
|
186
|
+
}
|
187
|
+
}, React.Children.map(children, function (child, index) {
|
188
|
+
return /*#__PURE__*/React.createElement(StepNumberContext.Provider, {
|
189
|
+
value: index + 1
|
190
|
+
}, child);
|
191
|
+
}))))));
|
223
192
|
}); // Return a placeholder if not released and not enabled by feature flag
|
224
193
|
|
225
194
|
CreateTearsheet = pkg.checkComponentEnabled(CreateTearsheet, componentName); // The display name of the component, used by React. Note that displayName
|
@@ -242,10 +211,7 @@ CreateTearsheet.propTypes = {
|
|
242
211
|
/**
|
243
212
|
* The main content of the tearsheet
|
244
213
|
*/
|
245
|
-
children:
|
246
|
-
componentName: componentName,
|
247
|
-
childType: CREATE_TEARSHEET_STEP
|
248
|
-
}),
|
214
|
+
children: PropTypes.node,
|
249
215
|
|
250
216
|
/**
|
251
217
|
* An optional class or classes to be added to the outermost element.
|
@@ -257,12 +223,6 @@ CreateTearsheet.propTypes = {
|
|
257
223
|
*/
|
258
224
|
description: PropTypes.node,
|
259
225
|
|
260
|
-
/**
|
261
|
-
* @ignore
|
262
|
-
* Used to optionally include view all toggle
|
263
|
-
*/
|
264
|
-
includeViewAllToggle: PropTypes.bool,
|
265
|
-
|
266
226
|
/**
|
267
227
|
* Used to set the size of the influencer
|
268
228
|
*/
|
@@ -305,15 +265,6 @@ CreateTearsheet.propTypes = {
|
|
305
265
|
*/
|
306
266
|
open: PropTypes.bool,
|
307
267
|
|
308
|
-
/**
|
309
|
-
* @ignore
|
310
|
-
* The aria label to be used for the UI Shell SideNav Carbon component
|
311
|
-
*/
|
312
|
-
sideNavAriaLabel: PropTypes.string.isRequired.if(function (_ref3) {
|
313
|
-
var includeViewAllToggle = _ref3.includeViewAllToggle;
|
314
|
-
return includeViewAllToggle;
|
315
|
-
}),
|
316
|
-
|
317
268
|
/**
|
318
269
|
* The submit button text
|
319
270
|
*/
|
@@ -331,34 +282,7 @@ CreateTearsheet.propTypes = {
|
|
331
282
|
* from below. The 'lower' position provides a little extra room at the top
|
332
283
|
* to allow an action bar navigation or breadcrumbs to also show through.
|
333
284
|
*/
|
334
|
-
verticalPosition: PropTypes.oneOf(['normal', 'lower'])
|
335
|
-
|
336
|
-
/**
|
337
|
-
* @ignore
|
338
|
-
* Sets the label text for the view all toggle component
|
339
|
-
*/
|
340
|
-
viewAllToggleLabelText: PropTypes.string.isRequired.if(function (_ref4) {
|
341
|
-
var includeViewAllToggle = _ref4.includeViewAllToggle;
|
342
|
-
return includeViewAllToggle === true;
|
343
|
-
}),
|
344
|
-
|
345
|
-
/**
|
346
|
-
* @ignore
|
347
|
-
* Sets the label text for the view all toggle `off` text
|
348
|
-
*/
|
349
|
-
viewAllToggleOffLabelText: PropTypes.string.isRequired.if(function (_ref5) {
|
350
|
-
var includeViewAllToggle = _ref5.includeViewAllToggle;
|
351
|
-
return includeViewAllToggle === true;
|
352
|
-
}),
|
353
|
-
|
354
|
-
/**
|
355
|
-
* @ignore
|
356
|
-
* Sets the label text for the view all toggle `on` text
|
357
|
-
*/
|
358
|
-
viewAllToggleOnLabelText: PropTypes.string.isRequired.if(function (_ref6) {
|
359
|
-
var includeViewAllToggle = _ref6.includeViewAllToggle;
|
360
|
-
return includeViewAllToggle === true;
|
361
|
-
})
|
285
|
+
verticalPosition: PropTypes.oneOf(['normal', 'lower'])
|
362
286
|
}; // Default values for component props. Default values are not required for
|
363
287
|
// props that are required, nor for props where the component can apply
|
364
288
|
// 'undefined' values reasonably. Default values should be provided when the
|
@@ -366,6 +290,5 @@ CreateTearsheet.propTypes = {
|
|
366
290
|
|
367
291
|
CreateTearsheet.defaultProps = {
|
368
292
|
verticalPosition: 'normal',
|
369
|
-
includeViewAllToggle: false,
|
370
293
|
influencerWidth: 'narrow'
|
371
294
|
};
|