@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
@@ -2,18 +2,12 @@
|
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
4
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
6
|
-
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
8
6
|
value: true
|
9
7
|
});
|
10
8
|
exports.CreateInfluencer = void 0;
|
11
9
|
|
12
|
-
var
|
13
|
-
|
14
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
15
|
-
|
16
|
-
var _react = _interopRequireWildcard(require("react"));
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
17
11
|
|
18
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
19
13
|
|
@@ -21,28 +15,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
15
|
|
22
16
|
var _carbonComponentsReact = require("carbon-components-react");
|
23
17
|
|
24
|
-
var _UIShell = require("carbon-components-react/lib/components/UIShell");
|
25
|
-
|
26
|
-
var _motion = require("@carbon/motion");
|
27
|
-
|
28
|
-
var _hasValidType = require("../../global/js/utils/hasValidType");
|
29
|
-
|
30
18
|
require("../../global/js/utils/props-helper");
|
31
19
|
|
32
20
|
var _settings = require("../../settings");
|
33
21
|
|
34
|
-
var _constants = require("../CreateTearsheet/constants");
|
35
|
-
|
36
|
-
var _constants2 = require("../CreateFullPage/constants");
|
37
|
-
|
38
|
-
var _CreateTearsheet = require("../CreateTearsheet");
|
39
|
-
|
40
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
41
|
-
|
42
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
43
|
-
|
44
22
|
/**
|
45
|
-
* Copyright IBM Corp. 2021,
|
23
|
+
* Copyright IBM Corp. 2021, 2022
|
46
24
|
*
|
47
25
|
* This source code is licensed under the Apache-2.0 license found in the
|
48
26
|
* LICENSE file in the root directory of this source tree.
|
@@ -53,153 +31,36 @@ var blockClass = "".concat(_settings.pkg.prefix, "--create-influencer");
|
|
53
31
|
var componentName = 'CreateInfluencer';
|
54
32
|
|
55
33
|
var CreateInfluencer = function CreateInfluencer(_ref) {
|
56
|
-
var
|
57
|
-
className = _ref.className,
|
58
|
-
componentBlockClass = _ref.componentBlockClass,
|
59
|
-
createComponentName = _ref.createComponentName,
|
60
|
-
createComponents = _ref.createComponents,
|
34
|
+
var className = _ref.className,
|
61
35
|
currentStep = _ref.currentStep,
|
62
|
-
|
63
|
-
handleActiveSectionIndex = _ref.handleActiveSectionIndex,
|
64
|
-
includeViewAllToggle = _ref.includeViewAllToggle,
|
65
|
-
open = _ref.open,
|
66
|
-
previousState = _ref.previousState,
|
67
|
-
sideNavAriaLabel = _ref.sideNavAriaLabel,
|
68
|
-
toggleState = _ref.toggleState,
|
69
|
-
viewAllToggleLabelText = _ref.viewAllToggleLabelText,
|
70
|
-
viewAllToggleOffLabelText = _ref.viewAllToggleOffLabelText,
|
71
|
-
viewAllToggleOnLabelText = _ref.viewAllToggleOnLabelText;
|
72
|
-
|
73
|
-
var _useState = (0, _react.useState)(''),
|
74
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
75
|
-
progressIndicatorState = _useState2[0],
|
76
|
-
setProgressIndicatorState = _useState2[1];
|
77
|
-
|
78
|
-
var _useState3 = (0, _react.useState)(''),
|
79
|
-
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
80
|
-
sideNavState = _useState4[0],
|
81
|
-
setSideNavState = _useState4[1]; // Animating states need to be reset here otherwise things won't render
|
82
|
-
// the way they should after the component mounts/unmounts
|
83
|
-
|
84
|
-
/* istanbul ignore next */
|
85
|
-
|
86
|
-
|
87
|
-
(0, _react.useEffect)(function () {
|
88
|
-
if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
|
89
|
-
setSideNavState('');
|
90
|
-
setProgressIndicatorState('');
|
91
|
-
}
|
92
|
-
}, [open, previousState]);
|
93
|
-
/* istanbul ignore next */
|
94
|
-
|
95
|
-
var handleViewAllToggle = function handleViewAllToggle(newToggleValue) {
|
96
|
-
if (newToggleValue) {
|
97
|
-
setProgressIndicatorState('closing');
|
98
|
-
setTimeout(function () {
|
99
|
-
handleToggleState(newToggleValue);
|
100
|
-
setSideNavState('opening');
|
101
|
-
}, _motion.moderate02);
|
102
|
-
} else {
|
103
|
-
setSideNavState('closing');
|
104
|
-
setTimeout(function () {
|
105
|
-
handleToggleState(newToggleValue);
|
106
|
-
setProgressIndicatorState('opening');
|
107
|
-
}, _motion.moderate02);
|
108
|
-
}
|
109
|
-
|
110
|
-
handleActiveSectionIndex(0);
|
111
|
-
var createComponentContainer = document.querySelector(".".concat(componentBlockClass));
|
112
|
-
|
113
|
-
if (createComponentContainer) {
|
114
|
-
createComponentContainer.scrollTop = 0;
|
115
|
-
}
|
116
|
-
};
|
117
|
-
|
118
|
-
var renderViewAllToggle = function renderViewAllToggle() {
|
119
|
-
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Toggle, {
|
120
|
-
id: "".concat(blockClass, "__view-all-toggle"),
|
121
|
-
toggled: toggleState,
|
122
|
-
labelText: viewAllToggleLabelText,
|
123
|
-
labelA: viewAllToggleOffLabelText,
|
124
|
-
labelB: viewAllToggleOnLabelText,
|
125
|
-
onToggle: function onToggle(value) {
|
126
|
-
return handleViewAllToggle(value);
|
127
|
-
},
|
128
|
-
className: "".concat(blockClass, "__view-all-toggle"),
|
129
|
-
defaultToggled: false
|
130
|
-
});
|
131
|
-
}; // renders the step progression components in the left influencer area
|
132
|
-
|
36
|
+
stepData = _ref.stepData;
|
133
37
|
|
38
|
+
// renders the step progression components in the left influencer area
|
134
39
|
var renderProgressSteps = function renderProgressSteps() {
|
135
|
-
var
|
136
|
-
|
137
|
-
/* istanbul ignore next */
|
138
|
-
if (toggleState) {
|
139
|
-
var _cx, _createComponents$sec;
|
140
|
-
|
141
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
142
|
-
className: "".concat(blockClass, "__left-nav")
|
143
|
-
}, /*#__PURE__*/_react.default.createElement(_UIShell.SideNav, {
|
144
|
-
expanded: true,
|
145
|
-
isFixedNav: true,
|
146
|
-
"aria-label": sideNavAriaLabel,
|
147
|
-
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__side-nav-opening"), sideNavState === 'opening'), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__side-nav-closing"), sideNavState === 'closing'), _cx))
|
148
|
-
}, /*#__PURE__*/_react.default.createElement(_UIShell.SideNavItems, null, ((_createComponents$sec = createComponents.sections) === null || _createComponents$sec === void 0 ? void 0 : _createComponents$sec.length) && createComponents.sections.map(function (sectionComponent, sectionIndex) {
|
149
|
-
var _sectionComponent$pro;
|
150
|
-
|
151
|
-
return /*#__PURE__*/_react.default.createElement(_UIShell.SideNavLink, {
|
152
|
-
href: "#".concat(sectionComponent === null || sectionComponent === void 0 ? void 0 : (_sectionComponent$pro = sectionComponent.props) === null || _sectionComponent$pro === void 0 ? void 0 : _sectionComponent$pro.id),
|
153
|
-
key: sectionIndex,
|
154
|
-
isActive: activeSectionIndex === sectionIndex,
|
155
|
-
onClick: function onClick(event) {
|
156
|
-
event.preventDefault();
|
157
|
-
handleActiveSectionIndex(sectionIndex);
|
40
|
+
var _stepData$, _stepData$2;
|
158
41
|
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
var scrollTarget = document.querySelector("#".concat(sectionComponent.props.id));
|
163
|
-
var scrollContainer = document.querySelector(".".concat(componentBlockClass, "__content"));
|
164
|
-
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;
|
165
|
-
scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
|
166
|
-
top: scrollTopValue,
|
167
|
-
behavior: 'smooth'
|
168
|
-
});
|
169
|
-
} else {
|
170
|
-
console.warn("".concat(createComponentName, ": ").concat(createComponentName, "Section component is missing a required prop of 'id'"));
|
171
|
-
}
|
172
|
-
}
|
173
|
-
}, sectionComponent.props.title);
|
174
|
-
}))));
|
175
|
-
}
|
176
|
-
|
177
|
-
var extractedSteps = (0, _hasValidType.getExtractedSteps)(createComponents.steps, createComponentName === _CreateTearsheet.CreateTearsheet.displayName ? _constants.CREATE_TEARSHEET_STEP : _constants2.CREATE_FULL_PAGE_STEP);
|
178
|
-
var stepsWithoutIntroStep = extractedSteps.filter(function (item) {
|
179
|
-
return !item.props.introStep;
|
42
|
+
var extractedSteps = stepData === null || stepData === void 0 ? void 0 : stepData.filter(function (item) {
|
43
|
+
return !(item !== null && item !== void 0 && item.introStep);
|
180
44
|
});
|
181
|
-
var introStepFound = !!createComponents.steps.filter(function (item) {
|
182
|
-
return item.props.introStep;
|
183
|
-
}).length;
|
184
45
|
return /*#__PURE__*/_react.default.createElement("div", {
|
185
46
|
className: "".concat(blockClass, "__left-nav")
|
186
|
-
}, currentStep === 1 && (
|
187
|
-
currentIndex:
|
47
|
+
}, currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressIndicator, {
|
48
|
+
currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - 2 : currentStep - 1,
|
188
49
|
spaceEqually: true,
|
189
50
|
vertical: true,
|
190
|
-
className: (0, _classnames.default)("".concat(blockClass, "__progress-indicator")
|
191
|
-
},
|
51
|
+
className: (0, _classnames.default)("".concat(blockClass, "__progress-indicator"))
|
52
|
+
}, extractedSteps.map(function (step, stepIndex) {
|
192
53
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressStep, {
|
193
|
-
label:
|
54
|
+
label: step.title,
|
194
55
|
key: stepIndex,
|
195
|
-
secondaryLabel:
|
56
|
+
secondaryLabel: step.secondaryLabel
|
196
57
|
});
|
197
58
|
})));
|
198
59
|
};
|
199
60
|
|
200
61
|
return /*#__PURE__*/_react.default.createElement("div", {
|
201
62
|
className: (0, _classnames.default)(blockClass, className)
|
202
|
-
}, renderProgressSteps()
|
63
|
+
}, renderProgressSteps());
|
203
64
|
}; // The display name of the component, used by React. Note that displayName
|
204
65
|
// is used in preference to relying on function.name.
|
205
66
|
|
@@ -207,98 +68,22 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
|
|
207
68
|
exports.CreateInfluencer = CreateInfluencer;
|
208
69
|
CreateInfluencer.displayName = componentName;
|
209
70
|
CreateInfluencer.propTypes = {
|
210
|
-
/**
|
211
|
-
* Sets the active side nav item when toggle is on
|
212
|
-
*/
|
213
|
-
activeSectionIndex: _propTypes.default.number.isRequired,
|
214
|
-
|
215
71
|
/**
|
216
72
|
* Provide an optional class to be applied to the containing node.
|
217
73
|
*/
|
218
74
|
className: _propTypes.default.string,
|
219
75
|
|
220
|
-
/**
|
221
|
-
* The blockClass for the create component (Tearsheet or FullPage)
|
222
|
-
*/
|
223
|
-
componentBlockClass: _propTypes.default.string.isRequired,
|
224
|
-
|
225
|
-
/**
|
226
|
-
* Used to mark the current step on the ProgressIndicator component
|
227
|
-
*/
|
228
|
-
createComponentName: _propTypes.default.string.isRequired,
|
229
|
-
|
230
|
-
/**
|
231
|
-
* An object with section and step components, needed to render the progress steps. This is where the titles are retrieved from.
|
232
|
-
*/
|
233
|
-
createComponents: _propTypes.default.shape({
|
234
|
-
steps: _propTypes.default.arrayOf(_propTypes.default.element),
|
235
|
-
sections: _propTypes.default.arrayOf(_propTypes.default.element)
|
236
|
-
}).isRequired,
|
237
|
-
|
238
76
|
/**
|
239
77
|
* Used to mark the current step on the ProgressIndicator component
|
240
78
|
*/
|
241
79
|
currentStep: _propTypes.default.number.isRequired,
|
242
80
|
|
243
81
|
/**
|
244
|
-
*
|
245
|
-
*/
|
246
|
-
handleActiveSectionIndex: _propTypes.default.func,
|
247
|
-
|
248
|
-
/**
|
249
|
-
* Handler used to track the state of the toggle
|
250
|
-
*/
|
251
|
-
handleToggleState: _propTypes.default.func,
|
252
|
-
|
253
|
-
/**
|
254
|
-
* Used to optionally include view all toggle
|
255
|
-
*/
|
256
|
-
includeViewAllToggle: _propTypes.default.bool,
|
257
|
-
|
258
|
-
/**
|
259
|
-
* This is the open state of the CreateComponent in which the CreateInfluencer is used from
|
260
|
-
*/
|
261
|
-
open: _propTypes.default.bool,
|
262
|
-
|
263
|
-
/**
|
264
|
-
* This is the open state of the CreateComponent in which the CreateInfluencer is used from
|
265
|
-
*/
|
266
|
-
previousState: _propTypes.default.object,
|
267
|
-
|
268
|
-
/**
|
269
|
-
* The aria label to be used for the UI Shell SideNav Carbon component
|
270
|
-
*/
|
271
|
-
sideNavAriaLabel: _propTypes.default.string.isRequired.if(function (_ref2) {
|
272
|
-
var includeViewAllToggle = _ref2.includeViewAllToggle;
|
273
|
-
return includeViewAllToggle;
|
274
|
-
}),
|
275
|
-
|
276
|
-
/**
|
277
|
-
* The current toggled state to be provided to the Toggle component
|
278
|
-
*/
|
279
|
-
toggleState: _propTypes.default.bool,
|
280
|
-
|
281
|
-
/**
|
282
|
-
* Sets the label text for the view all toggle component
|
283
|
-
*/
|
284
|
-
viewAllToggleLabelText: _propTypes.default.string.isRequired.if(function (_ref3) {
|
285
|
-
var includeViewAllToggle = _ref3.includeViewAllToggle;
|
286
|
-
return includeViewAllToggle === true;
|
287
|
-
}),
|
288
|
-
|
289
|
-
/**
|
290
|
-
* Sets the label text for the view all toggle `off` text
|
291
|
-
*/
|
292
|
-
viewAllToggleOffLabelText: _propTypes.default.string.isRequired.if(function (_ref4) {
|
293
|
-
var includeViewAllToggle = _ref4.includeViewAllToggle;
|
294
|
-
return includeViewAllToggle === true;
|
295
|
-
}),
|
296
|
-
|
297
|
-
/**
|
298
|
-
* Sets the label text for the view all toggle `on` text
|
82
|
+
* The step data that renders the progress items
|
299
83
|
*/
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
84
|
+
stepData: _propTypes.default.arrayOf(_propTypes.default.shape({
|
85
|
+
introStep: _propTypes.default.bool,
|
86
|
+
secondaryLabel: _propTypes.default.string,
|
87
|
+
title: _propTypes.default.node
|
88
|
+
}))
|
304
89
|
};
|
@@ -7,12 +7,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
8
8
|
value: true
|
9
9
|
});
|
10
|
-
exports.CreateTearsheet = void 0;
|
10
|
+
exports.StepsContext = exports.StepNumberContext = exports.CreateTearsheet = void 0;
|
11
11
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
13
|
|
14
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15
|
-
|
16
14
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
17
15
|
|
18
16
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
@@ -33,29 +31,33 @@ var _CreateInfluencer = require("../CreateInfluencer");
|
|
33
31
|
|
34
32
|
var _settings = require("../../settings");
|
35
33
|
|
36
|
-
var _constants = require("./constants");
|
37
|
-
|
38
34
|
var _hooks = require("../../global/js/hooks");
|
39
35
|
|
40
|
-
var _hasValidType = require("../../global/js/utils/hasValidType");
|
41
|
-
|
42
36
|
var _devtools = require("../../global/js/utils/devtools");
|
43
37
|
|
44
|
-
var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "
|
38
|
+
var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
|
45
39
|
|
46
40
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
47
41
|
|
48
42
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
49
43
|
|
50
44
|
var componentName = 'CreateTearsheet';
|
51
|
-
var blockClass = "".concat(_settings.pkg.prefix, "--tearsheet-create");
|
45
|
+
var blockClass = "".concat(_settings.pkg.prefix, "--tearsheet-create"); // This is a general context for the steps container
|
46
|
+
// containing information about the state of the container
|
47
|
+
// and providing some callback methods for steps to use
|
48
|
+
|
49
|
+
var StepsContext = /*#__PURE__*/(0, _react.createContext)(null); // This is a context supplied separately to each step in the container
|
50
|
+
// to let it know what number it is in the sequence of steps
|
51
|
+
|
52
|
+
exports.StepsContext = StepsContext;
|
53
|
+
var StepNumberContext = /*#__PURE__*/(0, _react.createContext)(-1);
|
54
|
+
exports.StepNumberContext = StepNumberContext;
|
52
55
|
var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
53
56
|
var backButtonText = _ref.backButtonText,
|
54
57
|
cancelButtonText = _ref.cancelButtonText,
|
55
58
|
children = _ref.children,
|
56
59
|
className = _ref.className,
|
57
60
|
description = _ref.description,
|
58
|
-
includeViewAllToggle = _ref.includeViewAllToggle,
|
59
61
|
influencerWidth = _ref.influencerWidth,
|
60
62
|
initialStep = _ref.initialStep,
|
61
63
|
label = _ref.label,
|
@@ -63,13 +65,9 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
63
65
|
onClose = _ref.onClose,
|
64
66
|
onRequestSubmit = _ref.onRequestSubmit,
|
65
67
|
open = _ref.open,
|
66
|
-
sideNavAriaLabel = _ref.sideNavAriaLabel,
|
67
68
|
submitButtonText = _ref.submitButtonText,
|
68
69
|
title = _ref.title,
|
69
70
|
verticalPosition = _ref.verticalPosition,
|
70
|
-
viewAllToggleLabelText = _ref.viewAllToggleLabelText,
|
71
|
-
viewAllToggleOffLabelText = _ref.viewAllToggleOffLabelText,
|
72
|
-
viewAllToggleOnLabelText = _ref.viewAllToggleOnLabelText,
|
73
71
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
74
72
|
|
75
73
|
var _useState = (0, _react.useState)([]),
|
@@ -92,40 +90,58 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
92
90
|
isSubmitting = _useState8[0],
|
93
91
|
setIsSubmitting = _useState8[1];
|
94
92
|
|
95
|
-
var _useState9 = (0, _react.useState)(
|
93
|
+
var _useState9 = (0, _react.useState)(false),
|
96
94
|
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
97
|
-
|
98
|
-
|
95
|
+
isDisabled = _useState10[0],
|
96
|
+
setIsDisabled = _useState10[1];
|
97
|
+
|
98
|
+
var _useState11 = (0, _react.useState)(),
|
99
|
+
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
100
|
+
onNext = _useState12[0],
|
101
|
+
_setOnNext = _useState12[1];
|
102
|
+
|
103
|
+
var _useState13 = (0, _react.useState)(),
|
104
|
+
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
|
105
|
+
onMount = _useState14[0],
|
106
|
+
_setOnMount = _useState14[1];
|
107
|
+
|
108
|
+
var _useState15 = (0, _react.useState)([]),
|
109
|
+
_useState16 = (0, _slicedToArray2.default)(_useState15, 2),
|
110
|
+
stepData = _useState16[0],
|
111
|
+
setStepData = _useState16[1];
|
112
|
+
|
113
|
+
var totalStepCount = _react.default.Children.count(children);
|
99
114
|
|
100
115
|
var previousState = (0, _hooks.usePreviousValue)({
|
101
116
|
currentStep: currentStep,
|
102
117
|
open: open
|
103
118
|
});
|
104
|
-
var contentRef = (0, _react.useRef)();
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
}
|
111
|
-
(0, _hooks.
|
112
|
-
(0, _hooks.useValidCreateStepCount)(getTearsheetSteps, componentName);
|
119
|
+
var contentRef = (0, _react.useRef)();
|
120
|
+
(0, _hooks.useCreateComponentFocus)({
|
121
|
+
previousState: previousState,
|
122
|
+
currentStep: currentStep,
|
123
|
+
blockClass: blockClass,
|
124
|
+
onMount: onMount
|
125
|
+
});
|
126
|
+
(0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
|
113
127
|
(0, _hooks.useResetCreateComponent)({
|
114
128
|
previousState: previousState,
|
115
129
|
open: open,
|
116
130
|
setCurrentStep: setCurrentStep,
|
117
131
|
initialStep: initialStep,
|
118
|
-
totalSteps:
|
132
|
+
totalSteps: totalStepCount,
|
119
133
|
componentName: componentName
|
120
134
|
});
|
121
135
|
(0, _hooks.useCreateComponentStepChange)({
|
136
|
+
totalStepCount: totalStepCount,
|
137
|
+
onNext: onNext,
|
138
|
+
isSubmitDisabled: isDisabled,
|
122
139
|
setCurrentStep: setCurrentStep,
|
123
140
|
setIsSubmitting: setIsSubmitting,
|
124
141
|
setShouldViewAll: setShouldViewAll,
|
125
142
|
onClose: onClose,
|
126
143
|
onRequestSubmit: onRequestSubmit,
|
127
144
|
componentName: componentName,
|
128
|
-
getComponentSteps: getTearsheetSteps,
|
129
145
|
currentStep: currentStep,
|
130
146
|
shouldViewAll: shouldViewAll,
|
131
147
|
backButtonText: backButtonText,
|
@@ -135,62 +151,10 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
135
151
|
isSubmitting: isSubmitting,
|
136
152
|
componentBlockClass: blockClass,
|
137
153
|
setCreateComponentActions: setCreateTearsheetActions
|
138
|
-
});
|
139
|
-
|
140
|
-
var getTearsheetComponents = function getTearsheetComponents(childrenElements) {
|
141
|
-
var childrenArray = Array.isArray(childrenElements) ? childrenElements : [childrenElements];
|
142
|
-
var tearsheetStepComponents = (0, _hasValidType.getExtractedSteps)(childrenArray, _constants.CREATE_TEARSHEET_STEP);
|
143
|
-
var tearsheetSectionComponents = [];
|
144
|
-
tearsheetStepComponents.forEach(function (child) {
|
145
|
-
var _child$props, _child$props$children;
|
146
|
-
|
147
|
-
// we have received an array of children, lets check to see that each child is
|
148
|
-
// a CreateTearsheetSection component before adding it to tearsheetSectionComponents
|
149
|
-
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') {
|
150
|
-
child.props.children.forEach(function (stepChild) {
|
151
|
-
if ((0, _hasValidType.hasValidChildType)({
|
152
|
-
child: stepChild,
|
153
|
-
type: _constants.CREATE_TEARSHEET_SECTION
|
154
|
-
})) {
|
155
|
-
tearsheetSectionComponents.push(stepChild);
|
156
|
-
}
|
157
|
-
});
|
158
|
-
} // we have received a single child element, lets check to see that it is
|
159
|
-
// a CreateTearsheetSection component before adding it to tearsheetSectionComponents
|
160
|
-
|
161
|
-
|
162
|
-
if (shouldViewAll && typeof child.props.children !== 'undefined' && !child.props.children.length) {
|
163
|
-
if ((0, _hasValidType.hasValidChildType)({
|
164
|
-
child: child.props.children,
|
165
|
-
type: _constants.CREATE_TEARSHEET_SECTION
|
166
|
-
})) {
|
167
|
-
tearsheetSectionComponents.push(child.props.children);
|
168
|
-
}
|
169
|
-
}
|
170
|
-
});
|
171
|
-
return {
|
172
|
-
sections: tearsheetSectionComponents,
|
173
|
-
steps: tearsheetStepComponents
|
174
|
-
};
|
175
|
-
}; // renders all children (CreateTearsheetSteps)
|
176
|
-
|
177
|
-
|
178
|
-
var renderChildren = function renderChildren(childrenElements) {
|
179
|
-
var childrenArray = Array.isArray(childrenElements) ? childrenElements : [childrenElements];
|
180
|
-
var extractedSteps = (0, _hasValidType.getExtractedSteps)(childrenArray, _constants.CREATE_TEARSHEET_STEP);
|
181
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, extractedSteps.map(function (child, stepIndex) {
|
182
|
-
var _cx;
|
183
|
-
|
184
|
-
return /*#__PURE__*/_react.default.cloneElement(child, {
|
185
|
-
className: (0, _classnames.default)(child.props.className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), !shouldViewAll && currentStep !== stepIndex + 1), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), currentStep === stepIndex + 1), _cx)),
|
186
|
-
key: "key_".concat(stepIndex)
|
187
|
-
});
|
188
|
-
}));
|
189
|
-
}; // adds focus trap functionality
|
154
|
+
}); // adds focus trap functionality
|
190
155
|
|
191
156
|
/* istanbul ignore next */
|
192
157
|
|
193
|
-
|
194
158
|
var handleBlur = function handleBlur(_ref2) {
|
195
159
|
var oldActiveNode = _ref2.target,
|
196
160
|
currentActiveNode = _ref2.relatedTarget;
|
@@ -211,25 +175,8 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
211
175
|
description: description,
|
212
176
|
hasCloseIcon: false,
|
213
177
|
influencer: /*#__PURE__*/_react.default.createElement(_CreateInfluencer.CreateInfluencer, {
|
214
|
-
activeSectionIndex: activeSectionIndex,
|
215
|
-
componentBlockClass: blockClass,
|
216
|
-
createComponentName: componentName,
|
217
178
|
currentStep: currentStep,
|
218
|
-
|
219
|
-
includeViewAllToggle: includeViewAllToggle,
|
220
|
-
handleToggleState: function handleToggleState(toggleState) {
|
221
|
-
return setShouldViewAll(toggleState);
|
222
|
-
},
|
223
|
-
handleActiveSectionIndex: function handleActiveSectionIndex(index) {
|
224
|
-
return setActiveSectionIndex(index);
|
225
|
-
},
|
226
|
-
open: open,
|
227
|
-
previousState: previousState,
|
228
|
-
sideNavAriaLabel: sideNavAriaLabel,
|
229
|
-
toggleState: shouldViewAll,
|
230
|
-
viewAllToggleLabelText: viewAllToggleLabelText,
|
231
|
-
viewAllToggleOffLabelText: viewAllToggleOffLabelText,
|
232
|
-
viewAllToggleOnLabelText: viewAllToggleOnLabelText
|
179
|
+
stepData: stepData
|
233
180
|
}),
|
234
181
|
influencerPosition: "left",
|
235
182
|
influencerWidth: influencerWidth,
|
@@ -244,7 +191,29 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
244
191
|
className: "".concat(blockClass, "__content"),
|
245
192
|
onBlur: handleBlur,
|
246
193
|
ref: contentRef
|
247
|
-
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, null,
|
194
|
+
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, null, /*#__PURE__*/_react.default.createElement(StepsContext.Provider, {
|
195
|
+
value: {
|
196
|
+
currentStep: currentStep,
|
197
|
+
setIsDisabled: setIsDisabled,
|
198
|
+
setOnNext: function setOnNext(fn) {
|
199
|
+
return _setOnNext(function () {
|
200
|
+
return fn;
|
201
|
+
});
|
202
|
+
},
|
203
|
+
setOnMount: function setOnMount(fn) {
|
204
|
+
return _setOnMount(function () {
|
205
|
+
return fn;
|
206
|
+
});
|
207
|
+
},
|
208
|
+
setStepData: setStepData,
|
209
|
+
stepData: stepData,
|
210
|
+
totalStepCount: totalStepCount
|
211
|
+
}
|
212
|
+
}, _react.default.Children.map(children, function (child, index) {
|
213
|
+
return /*#__PURE__*/_react.default.createElement(StepNumberContext.Provider, {
|
214
|
+
value: index + 1
|
215
|
+
}, child);
|
216
|
+
}))))));
|
248
217
|
}); // Return a placeholder if not released and not enabled by feature flag
|
249
218
|
|
250
219
|
exports.CreateTearsheet = CreateTearsheet;
|
@@ -268,10 +237,7 @@ CreateTearsheet.propTypes = {
|
|
268
237
|
/**
|
269
238
|
* The main content of the tearsheet
|
270
239
|
*/
|
271
|
-
children:
|
272
|
-
componentName: componentName,
|
273
|
-
childType: _constants.CREATE_TEARSHEET_STEP
|
274
|
-
}),
|
240
|
+
children: _propTypes.default.node,
|
275
241
|
|
276
242
|
/**
|
277
243
|
* An optional class or classes to be added to the outermost element.
|
@@ -283,12 +249,6 @@ CreateTearsheet.propTypes = {
|
|
283
249
|
*/
|
284
250
|
description: _propTypes.default.node,
|
285
251
|
|
286
|
-
/**
|
287
|
-
* @ignore
|
288
|
-
* Used to optionally include view all toggle
|
289
|
-
*/
|
290
|
-
includeViewAllToggle: _propTypes.default.bool,
|
291
|
-
|
292
252
|
/**
|
293
253
|
* Used to set the size of the influencer
|
294
254
|
*/
|
@@ -331,15 +291,6 @@ CreateTearsheet.propTypes = {
|
|
331
291
|
*/
|
332
292
|
open: _propTypes.default.bool,
|
333
293
|
|
334
|
-
/**
|
335
|
-
* @ignore
|
336
|
-
* The aria label to be used for the UI Shell SideNav Carbon component
|
337
|
-
*/
|
338
|
-
sideNavAriaLabel: _propTypes.default.string.isRequired.if(function (_ref3) {
|
339
|
-
var includeViewAllToggle = _ref3.includeViewAllToggle;
|
340
|
-
return includeViewAllToggle;
|
341
|
-
}),
|
342
|
-
|
343
294
|
/**
|
344
295
|
* The submit button text
|
345
296
|
*/
|
@@ -357,34 +308,7 @@ CreateTearsheet.propTypes = {
|
|
357
308
|
* from below. The 'lower' position provides a little extra room at the top
|
358
309
|
* to allow an action bar navigation or breadcrumbs to also show through.
|
359
310
|
*/
|
360
|
-
verticalPosition: _propTypes.default.oneOf(['normal', 'lower'])
|
361
|
-
|
362
|
-
/**
|
363
|
-
* @ignore
|
364
|
-
* Sets the label text for the view all toggle component
|
365
|
-
*/
|
366
|
-
viewAllToggleLabelText: _propTypes.default.string.isRequired.if(function (_ref4) {
|
367
|
-
var includeViewAllToggle = _ref4.includeViewAllToggle;
|
368
|
-
return includeViewAllToggle === true;
|
369
|
-
}),
|
370
|
-
|
371
|
-
/**
|
372
|
-
* @ignore
|
373
|
-
* Sets the label text for the view all toggle `off` text
|
374
|
-
*/
|
375
|
-
viewAllToggleOffLabelText: _propTypes.default.string.isRequired.if(function (_ref5) {
|
376
|
-
var includeViewAllToggle = _ref5.includeViewAllToggle;
|
377
|
-
return includeViewAllToggle === true;
|
378
|
-
}),
|
379
|
-
|
380
|
-
/**
|
381
|
-
* @ignore
|
382
|
-
* Sets the label text for the view all toggle `on` text
|
383
|
-
*/
|
384
|
-
viewAllToggleOnLabelText: _propTypes.default.string.isRequired.if(function (_ref6) {
|
385
|
-
var includeViewAllToggle = _ref6.includeViewAllToggle;
|
386
|
-
return includeViewAllToggle === true;
|
387
|
-
})
|
311
|
+
verticalPosition: _propTypes.default.oneOf(['normal', 'lower'])
|
388
312
|
}; // Default values for component props. Default values are not required for
|
389
313
|
// props that are required, nor for props where the component can apply
|
390
314
|
// 'undefined' values reasonably. Default values should be provided when the
|
@@ -392,6 +316,5 @@ CreateTearsheet.propTypes = {
|
|
392
316
|
|
393
317
|
CreateTearsheet.defaultProps = {
|
394
318
|
verticalPosition: 'normal',
|
395
|
-
includeViewAllToggle: false,
|
396
319
|
influencerWidth: 'narrow'
|
397
320
|
};
|