@carbon/ibm-products 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/index-full-carbon.css +124 -40
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-without-carbon-released-only.css +124 -40
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon.css +124 -40
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index.css +124 -40
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/es/components/ActionSet/ActionSet.js +22 -10
- package/es/components/ActionSet/actions.js +25 -17
- package/es/components/CreateFullPage/CreateFullPage.js +30 -5
- package/es/components/CreateFullPage/CreateFullPageStep.js +40 -32
- package/es/components/CreateInfluencer/CreateInfluencer.js +25 -3
- package/es/components/CreateTearsheet/CreateTearsheet.js +32 -6
- package/es/components/CreateTearsheet/CreateTearsheetStep.js +45 -38
- package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +24 -4
- package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
- package/es/components/ExportModal/ExportModal.js +39 -12
- package/es/components/SidePanel/SidePanel.js +1 -1
- package/es/components/Tearsheet/Tearsheet.js +1 -1
- package/es/components/Tearsheet/TearsheetNarrow.js +1 -1
- package/es/components/Tearsheet/TearsheetShell.js +1 -1
- package/es/global/js/hooks/index.js +1 -0
- package/es/global/js/hooks/useCreateComponentStepChange.js +31 -11
- package/es/global/js/hooks/useResetCreateComponent.js +7 -4
- package/es/global/js/hooks/useRetrieveStepData.js +51 -0
- package/es/global/js/utils/lastIndexInArray.js +26 -0
- package/lib/components/ActionSet/ActionSet.js +22 -10
- package/lib/components/ActionSet/actions.js +25 -17
- package/lib/components/CreateFullPage/CreateFullPage.js +29 -4
- package/lib/components/CreateFullPage/CreateFullPageStep.js +38 -30
- package/lib/components/CreateInfluencer/CreateInfluencer.js +25 -3
- package/lib/components/CreateTearsheet/CreateTearsheet.js +31 -5
- package/lib/components/CreateTearsheet/CreateTearsheetStep.js +43 -36
- package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +22 -2
- package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
- package/lib/components/ExportModal/ExportModal.js +36 -11
- package/lib/components/SidePanel/SidePanel.js +1 -1
- package/lib/components/Tearsheet/Tearsheet.js +1 -1
- package/lib/components/Tearsheet/TearsheetNarrow.js +1 -1
- package/lib/components/Tearsheet/TearsheetShell.js +1 -1
- package/lib/global/js/hooks/index.js +8 -0
- package/lib/global/js/hooks/useCreateComponentStepChange.js +31 -11
- package/lib/global/js/hooks/useResetCreateComponent.js +7 -4
- package/lib/global/js/hooks/useRetrieveStepData.js +62 -0
- package/lib/global/js/utils/lastIndexInArray.js +35 -0
- package/package.json +15 -15
- package/scss/components/StatusIcon/_status-icon.scss +2 -0
@@ -33,6 +33,8 @@ var _ActionSet = require("../ActionSet");
|
|
33
33
|
|
34
34
|
var _hooks = require("../../global/js/hooks");
|
35
35
|
|
36
|
+
var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
|
37
|
+
|
36
38
|
var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "submitButtonText"];
|
37
39
|
|
38
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); }
|
@@ -116,8 +118,30 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
116
118
|
stepData = _useState18[0],
|
117
119
|
setStepData = _useState18[1];
|
118
120
|
|
119
|
-
var
|
121
|
+
var _useState19 = (0, _react.useState)(1),
|
122
|
+
_useState20 = (0, _slicedToArray2.default)(_useState19, 2),
|
123
|
+
firstIncludedStep = _useState20[0],
|
124
|
+
setFirstIncludedStep = _useState20[1];
|
125
|
+
|
126
|
+
var _useState21 = (0, _react.useState)(null),
|
127
|
+
_useState22 = (0, _slicedToArray2.default)(_useState21, 2),
|
128
|
+
lastIncludedStep = _useState22[0],
|
129
|
+
setLastIncludedStep = _useState22[1];
|
120
130
|
|
131
|
+
(0, _react.useEffect)(function () {
|
132
|
+
var firstItem = stepData.findIndex(function (item) {
|
133
|
+
return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
|
134
|
+
}) + 1;
|
135
|
+
var lastItem = (0, _lastIndexInArray.lastIndexInArray)(stepData, 'shouldIncludeStep', true);
|
136
|
+
|
137
|
+
if (firstItem !== firstIncludedStep) {
|
138
|
+
setFirstIncludedStep(firstItem);
|
139
|
+
}
|
140
|
+
|
141
|
+
if (lastItem !== lastIncludedStep) {
|
142
|
+
setLastIncludedStep(lastItem);
|
143
|
+
}
|
144
|
+
}, [stepData, firstIncludedStep, lastIncludedStep]);
|
121
145
|
(0, _hooks.useCreateComponentFocus)({
|
122
146
|
previousState: previousState,
|
123
147
|
currentStep: currentStep,
|
@@ -126,7 +150,9 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
126
150
|
});
|
127
151
|
(0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
|
128
152
|
(0, _hooks.useCreateComponentStepChange)({
|
129
|
-
|
153
|
+
firstIncludedStep: firstIncludedStep,
|
154
|
+
lastIncludedStep: lastIncludedStep,
|
155
|
+
stepData: stepData,
|
130
156
|
onNext: onNext,
|
131
157
|
isSubmitDisabled: isDisabled,
|
132
158
|
setCurrentStep: setCurrentStep,
|
@@ -180,8 +206,7 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
180
206
|
});
|
181
207
|
},
|
182
208
|
setStepData: setStepData,
|
183
|
-
stepData: stepData
|
184
|
-
totalStepCount: totalStepCount
|
209
|
+
stepData: stepData
|
185
210
|
}
|
186
211
|
}, _react.default.Children.map(children, function (child, index) {
|
187
212
|
return /*#__PURE__*/_react.default.createElement(StepNumberContext.Provider, {
|
@@ -11,7 +11,7 @@ exports.CreateFullPageStep = void 0;
|
|
11
11
|
|
12
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13
13
|
|
14
|
-
var
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
15
15
|
|
16
16
|
var _react = _interopRequireWildcard(require("react"));
|
17
17
|
|
@@ -49,6 +49,7 @@ var CreateFullPageStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
|
|
49
49
|
subtitle = _ref.subtitle,
|
50
50
|
description = _ref.description,
|
51
51
|
disableSubmit = _ref.disableSubmit,
|
52
|
+
includeStep = _ref.includeStep,
|
52
53
|
introStep = _ref.introStep,
|
53
54
|
title = _ref.title,
|
54
55
|
hasFieldset = _ref.hasFieldset,
|
@@ -56,47 +57,45 @@ var CreateFullPageStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
|
|
56
57
|
onNext = _ref.onNext,
|
57
58
|
onMount = _ref.onMount,
|
58
59
|
secondaryLabel = _ref.secondaryLabel;
|
59
|
-
var
|
60
|
+
var stepsContext = (0, _react.useContext)(_CreateFullPage.StepsContext);
|
60
61
|
var stepNumber = (0, _react.useContext)(_CreateFullPage.StepNumberContext);
|
62
|
+
|
63
|
+
var _useState = (0, _react.useState)(),
|
64
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
65
|
+
shouldIncludeStep = _useState2[0],
|
66
|
+
setShouldIncludeStep = _useState2[1];
|
67
|
+
|
61
68
|
var previousState = (0, _hooks.usePreviousValue)({
|
62
|
-
currentStep:
|
69
|
+
currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
|
70
|
+
});
|
71
|
+
(0, _hooks.useRetrieveStepData)({
|
72
|
+
stepsContext: stepsContext,
|
73
|
+
stepNumber: stepNumber,
|
74
|
+
introStep: introStep,
|
75
|
+
shouldIncludeStep: shouldIncludeStep,
|
76
|
+
secondaryLabel: secondaryLabel,
|
77
|
+
title: title
|
63
78
|
}); // This useEffect reports back the onNext and onMount values so that they can be used
|
64
79
|
// in the appropriate custom hooks.
|
65
80
|
|
66
81
|
(0, _react.useEffect)(function () {
|
67
|
-
if (stepNumber === (
|
68
|
-
|
69
|
-
|
82
|
+
if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
|
83
|
+
stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext);
|
84
|
+
stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
|
70
85
|
}
|
71
|
-
}, [onMount, onNext,
|
72
|
-
// title, secondaryLabel, and introStep props so that it can be sent to the CreateInfluencer.
|
73
|
-
|
86
|
+
}, [onMount, onNext, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
|
74
87
|
(0, _react.useEffect)(function () {
|
75
|
-
|
76
|
-
|
77
|
-
var stepHasReported = steps === null || steps === void 0 ? void 0 : (_steps$stepData = steps.stepData) === null || _steps$stepData === void 0 ? void 0 : _steps$stepData.includes(function (item) {
|
78
|
-
return item.title === title;
|
79
|
-
});
|
80
|
-
|
81
|
-
if (!stepHasReported && (steps === null || steps === void 0 ? void 0 : (_steps$stepData2 = steps.stepData) === null || _steps$stepData2 === void 0 ? void 0 : _steps$stepData2.length) < (steps === null || steps === void 0 ? void 0 : steps.totalStepCount)) {
|
82
|
-
steps === null || steps === void 0 ? void 0 : steps.setStepData(function (prev) {
|
83
|
-
return [].concat((0, _toConsumableArray2.default)(prev), [{
|
84
|
-
title: title,
|
85
|
-
secondaryLabel: secondaryLabel,
|
86
|
-
introStep: introStep
|
87
|
-
}]);
|
88
|
-
});
|
89
|
-
}
|
90
|
-
}, [steps, title, secondaryLabel, introStep]); // Whenever we are the current step, supply our disableSubmit value to the
|
88
|
+
setShouldIncludeStep(includeStep);
|
89
|
+
}, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit value to the
|
91
90
|
// steps container context so that it can manage the 'Next' button appropriately.
|
92
91
|
|
93
92
|
(0, _react.useEffect)(function () {
|
94
|
-
if (stepNumber === (
|
95
|
-
|
93
|
+
if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
|
94
|
+
stepsContext.setIsDisabled(disableSubmit);
|
96
95
|
}
|
97
|
-
}, [
|
98
|
-
return
|
99
|
-
className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (
|
96
|
+
}, [stepsContext, stepNumber, disableSubmit, onNext]);
|
97
|
+
return stepsContext ? /*#__PURE__*/_react.default.createElement("section", {
|
98
|
+
className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
|
100
99
|
ref: ref
|
101
100
|
}, /*#__PURE__*/_react.default.createElement("h5", {
|
102
101
|
className: "".concat(blockClass, "-title")
|
@@ -146,6 +145,12 @@ CreateFullPageStep.propTypes = {
|
|
146
145
|
*/
|
147
146
|
hasFieldset: _propTypes.default.bool,
|
148
147
|
|
148
|
+
/**
|
149
|
+
* This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
|
150
|
+
* steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
|
151
|
+
*/
|
152
|
+
includeStep: _propTypes.default.bool,
|
153
|
+
|
149
154
|
/**
|
150
155
|
* This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
|
151
156
|
*/
|
@@ -178,4 +183,7 @@ CreateFullPageStep.propTypes = {
|
|
178
183
|
* Sets the title text for a create full page step
|
179
184
|
*/
|
180
185
|
title: _propTypes.default.node.isRequired
|
186
|
+
};
|
187
|
+
CreateFullPageStep.defaultProps = {
|
188
|
+
includeStep: true
|
181
189
|
};
|
@@ -35,21 +35,42 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
|
|
35
35
|
currentStep = _ref.currentStep,
|
36
36
|
stepData = _ref.stepData;
|
37
37
|
|
38
|
-
|
38
|
+
var getNumberOfDynamicStepsBeforeCurrentStep = function getNumberOfDynamicStepsBeforeCurrentStep(array, key) {
|
39
|
+
var dynamicSteps = [];
|
40
|
+
array.forEach(function (item, index) {
|
41
|
+
var _array$index;
|
42
|
+
|
43
|
+
if (((_array$index = array[index]) === null || _array$index === void 0 ? void 0 : _array$index[key]) === false && index <= currentStep - 1) {
|
44
|
+
dynamicSteps.push(item);
|
45
|
+
}
|
46
|
+
});
|
47
|
+
return dynamicSteps.length;
|
48
|
+
}; // renders the step progression components in the left influencer area
|
49
|
+
|
50
|
+
|
39
51
|
var renderProgressSteps = function renderProgressSteps() {
|
40
52
|
var _stepData$, _stepData$2;
|
41
53
|
|
42
54
|
var extractedSteps = stepData === null || stepData === void 0 ? void 0 : stepData.filter(function (item) {
|
43
55
|
return !(item !== null && item !== void 0 && item.introStep);
|
44
56
|
});
|
57
|
+
var progressSteps = extractedSteps === null || extractedSteps === void 0 ? void 0 : extractedSteps.filter(function (item) {
|
58
|
+
return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
|
59
|
+
}); // To get the ProgressIndicator's `currentIndex`, accounting for dynamic steps,
|
60
|
+
// we need to subtract the number of !shouldIncludeStep/s before the current step
|
61
|
+
// which we get from `getNumberOfDynamicStepsBeforeCurrentStep()`
|
62
|
+
|
63
|
+
var totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
|
45
64
|
return /*#__PURE__*/_react.default.createElement("div", {
|
46
65
|
className: "".concat(blockClass, "__left-nav")
|
47
66
|
}, 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
|
67
|
+
currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - totalDynamicSteps - 2 // minus 2 because we need to account for the intro step in addition to `currentIndex` being 0 index based and our steps being 1 index based
|
68
|
+
: currentStep - totalDynamicSteps - 1 // minus 1 because ProgressIndicator currentIndex prop is 0 index based, but our steps are 1 index based
|
69
|
+
,
|
49
70
|
spaceEqually: true,
|
50
71
|
vertical: true,
|
51
72
|
className: (0, _classnames.default)("".concat(blockClass, "__progress-indicator"))
|
52
|
-
},
|
73
|
+
}, progressSteps.map(function (step, stepIndex) {
|
53
74
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressStep, {
|
54
75
|
label: step.title,
|
55
76
|
key: stepIndex,
|
@@ -84,6 +105,7 @@ CreateInfluencer.propTypes = {
|
|
84
105
|
stepData: _propTypes.default.arrayOf(_propTypes.default.shape({
|
85
106
|
introStep: _propTypes.default.bool,
|
86
107
|
secondaryLabel: _propTypes.default.string,
|
108
|
+
shouldIncludeStep: _propTypes.default.bool,
|
87
109
|
title: _propTypes.default.node
|
88
110
|
}))
|
89
111
|
};
|
@@ -35,6 +35,8 @@ var _hooks = require("../../global/js/hooks");
|
|
35
35
|
|
36
36
|
var _devtools = require("../../global/js/utils/devtools");
|
37
37
|
|
38
|
+
var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
|
39
|
+
|
38
40
|
var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
|
39
41
|
|
40
42
|
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); }
|
@@ -110,13 +112,35 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
110
112
|
stepData = _useState16[0],
|
111
113
|
setStepData = _useState16[1];
|
112
114
|
|
113
|
-
var
|
115
|
+
var _useState17 = (0, _react.useState)(1),
|
116
|
+
_useState18 = (0, _slicedToArray2.default)(_useState17, 2),
|
117
|
+
firstIncludedStep = _useState18[0],
|
118
|
+
setFirstIncludedStep = _useState18[1];
|
119
|
+
|
120
|
+
var _useState19 = (0, _react.useState)(null),
|
121
|
+
_useState20 = (0, _slicedToArray2.default)(_useState19, 2),
|
122
|
+
lastIncludedStep = _useState20[0],
|
123
|
+
setLastIncludedStep = _useState20[1];
|
114
124
|
|
115
125
|
var previousState = (0, _hooks.usePreviousValue)({
|
116
126
|
currentStep: currentStep,
|
117
127
|
open: open
|
118
128
|
});
|
119
129
|
var contentRef = (0, _react.useRef)();
|
130
|
+
(0, _react.useEffect)(function () {
|
131
|
+
var firstItem = stepData.findIndex(function (item) {
|
132
|
+
return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
|
133
|
+
}) + 1;
|
134
|
+
var lastItem = (0, _lastIndexInArray.lastIndexInArray)(stepData, 'shouldIncludeStep', true);
|
135
|
+
|
136
|
+
if (firstItem !== firstIncludedStep) {
|
137
|
+
setFirstIncludedStep(firstItem);
|
138
|
+
}
|
139
|
+
|
140
|
+
if (lastItem !== lastIncludedStep) {
|
141
|
+
setLastIncludedStep(lastItem);
|
142
|
+
}
|
143
|
+
}, [stepData, firstIncludedStep, lastIncludedStep]);
|
120
144
|
(0, _hooks.useCreateComponentFocus)({
|
121
145
|
previousState: previousState,
|
122
146
|
currentStep: currentStep,
|
@@ -125,15 +149,18 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
125
149
|
});
|
126
150
|
(0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
|
127
151
|
(0, _hooks.useResetCreateComponent)({
|
152
|
+
firstIncludedStep: firstIncludedStep,
|
128
153
|
previousState: previousState,
|
129
154
|
open: open,
|
130
155
|
setCurrentStep: setCurrentStep,
|
131
156
|
initialStep: initialStep,
|
132
|
-
totalSteps:
|
157
|
+
totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
|
133
158
|
componentName: componentName
|
134
159
|
});
|
135
160
|
(0, _hooks.useCreateComponentStepChange)({
|
136
|
-
|
161
|
+
firstIncludedStep: firstIncludedStep,
|
162
|
+
lastIncludedStep: lastIncludedStep,
|
163
|
+
stepData: stepData,
|
137
164
|
onNext: onNext,
|
138
165
|
isSubmitDisabled: isDisabled,
|
139
166
|
setCurrentStep: setCurrentStep,
|
@@ -206,8 +233,7 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
206
233
|
});
|
207
234
|
},
|
208
235
|
setStepData: setStepData,
|
209
|
-
stepData: stepData
|
210
|
-
totalStepCount: totalStepCount
|
236
|
+
stepData: stepData
|
211
237
|
}
|
212
238
|
}, _react.default.Children.map(children, function (child, index) {
|
213
239
|
return /*#__PURE__*/_react.default.createElement(StepNumberContext.Provider, {
|
@@ -11,7 +11,7 @@ exports.CreateTearsheetStep = void 0;
|
|
11
11
|
|
12
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13
13
|
|
14
|
-
var
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
15
15
|
|
16
16
|
var _react = _interopRequireWildcard(require("react"));
|
17
17
|
|
@@ -34,7 +34,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
34
34
|
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; }
|
35
35
|
|
36
36
|
/**
|
37
|
-
* Copyright IBM Corp. 2021,
|
37
|
+
* Copyright IBM Corp. 2021, 2022
|
38
38
|
*
|
39
39
|
* This source code is licensed under the Apache-2.0 license found in the
|
40
40
|
* LICENSE file in the root directory of this source tree.
|
@@ -46,57 +46,57 @@ var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
|
|
46
46
|
|
47
47
|
var children = _ref.children,
|
48
48
|
className = _ref.className,
|
49
|
-
subtitle = _ref.subtitle,
|
50
49
|
description = _ref.description,
|
51
50
|
disableSubmit = _ref.disableSubmit,
|
52
|
-
introStep = _ref.introStep,
|
53
|
-
title = _ref.title,
|
54
|
-
hasFieldset = _ref.hasFieldset,
|
55
51
|
fieldsetLegendText = _ref.fieldsetLegendText,
|
52
|
+
hasFieldset = _ref.hasFieldset,
|
53
|
+
includeStep = _ref.includeStep,
|
54
|
+
introStep = _ref.introStep,
|
56
55
|
onNext = _ref.onNext,
|
57
56
|
onMount = _ref.onMount,
|
58
|
-
secondaryLabel = _ref.secondaryLabel
|
59
|
-
|
57
|
+
secondaryLabel = _ref.secondaryLabel,
|
58
|
+
subtitle = _ref.subtitle,
|
59
|
+
title = _ref.title;
|
60
|
+
var stepsContext = (0, _react.useContext)(_CreateTearsheet.StepsContext);
|
60
61
|
var stepNumber = (0, _react.useContext)(_CreateTearsheet.StepNumberContext);
|
62
|
+
|
63
|
+
var _useState = (0, _react.useState)(),
|
64
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
65
|
+
shouldIncludeStep = _useState2[0],
|
66
|
+
setShouldIncludeStep = _useState2[1];
|
67
|
+
|
61
68
|
var previousState = (0, _hooks.usePreviousValue)({
|
62
|
-
currentStep:
|
69
|
+
currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
|
70
|
+
});
|
71
|
+
(0, _hooks.useRetrieveStepData)({
|
72
|
+
stepsContext: stepsContext,
|
73
|
+
stepNumber: stepNumber,
|
74
|
+
introStep: introStep,
|
75
|
+
shouldIncludeStep: shouldIncludeStep,
|
76
|
+
secondaryLabel: secondaryLabel,
|
77
|
+
title: title
|
63
78
|
}); // This useEffect reports back the onNext and onMount values so that they can be used
|
64
79
|
// in the appropriate custom hooks.
|
65
80
|
|
66
81
|
(0, _react.useEffect)(function () {
|
67
|
-
if (stepNumber === (
|
68
|
-
|
69
|
-
|
82
|
+
if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
|
83
|
+
stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext);
|
84
|
+
stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
|
70
85
|
}
|
71
|
-
}, [onMount, onNext,
|
72
|
-
// title, secondaryLabel, and introStep props so that it can be sent to the CreateInfluencer.
|
86
|
+
}, [onMount, onNext, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // Used to take the `includeStep` prop and use it as a local state value
|
73
87
|
|
74
88
|
(0, _react.useEffect)(function () {
|
75
|
-
|
76
|
-
|
77
|
-
var stepHasReported = steps === null || steps === void 0 ? void 0 : (_steps$stepData = steps.stepData) === null || _steps$stepData === void 0 ? void 0 : _steps$stepData.includes(function (item) {
|
78
|
-
return item.title === title;
|
79
|
-
});
|
80
|
-
|
81
|
-
if (!stepHasReported && (steps === null || steps === void 0 ? void 0 : (_steps$stepData2 = steps.stepData) === null || _steps$stepData2 === void 0 ? void 0 : _steps$stepData2.length) < (steps === null || steps === void 0 ? void 0 : steps.totalStepCount)) {
|
82
|
-
steps === null || steps === void 0 ? void 0 : steps.setStepData(function (prev) {
|
83
|
-
return [].concat((0, _toConsumableArray2.default)(prev), [{
|
84
|
-
title: title,
|
85
|
-
secondaryLabel: secondaryLabel,
|
86
|
-
introStep: introStep
|
87
|
-
}]);
|
88
|
-
});
|
89
|
-
}
|
90
|
-
}, [steps, title, secondaryLabel, introStep]); // Whenever we are the current step, supply our disableSubmit value to the
|
89
|
+
setShouldIncludeStep(includeStep);
|
90
|
+
}, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit value to the
|
91
91
|
// steps container context so that it can manage the 'Next' button appropriately.
|
92
92
|
|
93
93
|
(0, _react.useEffect)(function () {
|
94
|
-
if (stepNumber === (
|
95
|
-
|
94
|
+
if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
|
95
|
+
stepsContext.setIsDisabled(disableSubmit);
|
96
96
|
}
|
97
|
-
}, [
|
98
|
-
return
|
99
|
-
className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (
|
97
|
+
}, [stepsContext, stepNumber, disableSubmit, onNext]);
|
98
|
+
return stepsContext ? /*#__PURE__*/_react.default.createElement("div", {
|
99
|
+
className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
|
100
100
|
ref: ref
|
101
101
|
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
|
102
102
|
xlg: 12,
|
@@ -155,6 +155,12 @@ CreateTearsheetStep.propTypes = {
|
|
155
155
|
*/
|
156
156
|
hasFieldset: _propTypes.default.bool,
|
157
157
|
|
158
|
+
/**
|
159
|
+
* This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
|
160
|
+
* steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
|
161
|
+
*/
|
162
|
+
includeStep: _propTypes.default.bool,
|
163
|
+
|
158
164
|
/**
|
159
165
|
* This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
|
160
166
|
*/
|
@@ -193,5 +199,6 @@ CreateTearsheetStep.propTypes = {
|
|
193
199
|
// component needs to make a choice or assumption when a prop is not supplied.
|
194
200
|
|
195
201
|
CreateTearsheetStep.defaultProps = {
|
196
|
-
hasFieldset: true
|
202
|
+
hasFieldset: true,
|
203
|
+
includeStep: true
|
197
204
|
};
|
@@ -122,6 +122,11 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
|
|
122
122
|
isInvalid = _useState22[0],
|
123
123
|
setIsInvalid = _useState22[1];
|
124
124
|
|
125
|
+
var _useState23 = (0, _react.useState)(false),
|
126
|
+
_useState24 = (0, _slicedToArray2.default)(_useState23, 2),
|
127
|
+
shouldIncludeAdditionalStep = _useState24[0],
|
128
|
+
setShouldIncludeAdditionalStep = _useState24[1];
|
129
|
+
|
125
130
|
var clearCreateData = function clearCreateData() {
|
126
131
|
setStepOneTextInputValue('');
|
127
132
|
setTopicDescriptionValue('');
|
@@ -132,6 +137,7 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
|
|
132
137
|
setIsInvalid(false);
|
133
138
|
setOpen(false);
|
134
139
|
setValue1('');
|
140
|
+
setShouldIncludeAdditionalStep(false);
|
135
141
|
};
|
136
142
|
|
137
143
|
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
|
@@ -234,12 +240,26 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
|
|
234
240
|
onToggle: function onToggle(event) {
|
235
241
|
return setShouldReject(event);
|
236
242
|
}
|
237
|
-
})
|
243
|
+
}), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
|
244
|
+
labelText: "Include additional step",
|
245
|
+
id: "include-additional-step-checkbox",
|
246
|
+
onChange: function onChange(value) {
|
247
|
+
return setShouldIncludeAdditionalStep(value);
|
248
|
+
},
|
249
|
+
checked: shouldIncludeAdditionalStep
|
250
|
+
})))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
|
251
|
+
title: "Dynamic step",
|
252
|
+
subtitle: "Dynamic step subtitle",
|
253
|
+
description: "This is an example showing how to include a dynamic step into the CreateTearsheet",
|
254
|
+
hasFieldset: false,
|
255
|
+
includeStep: shouldIncludeAdditionalStep
|
256
|
+
}, "dynamic step content"), /*#__PURE__*/_react.default.createElement(CustomStep, {
|
238
257
|
title: "Location",
|
239
258
|
subtitle: "Custom step subtitle",
|
240
259
|
description: "Custom step description (see storybook implementation for new custom step capability)",
|
241
260
|
value1: value1,
|
242
|
-
setValue1: setValue1
|
261
|
+
setValue1: setValue1,
|
262
|
+
hasFieldset: false
|
243
263
|
}), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
|
244
264
|
title: "Partitions",
|
245
265
|
disableSubmit: !stepTwoTextInputValue,
|
@@ -32,7 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
32
32
|
/* eslint-disable react/prop-types */
|
33
33
|
|
34
34
|
/**
|
35
|
-
* Copyright IBM Corp. 2021,
|
35
|
+
* Copyright IBM Corp. 2021, 2022
|
36
36
|
*
|
37
37
|
* This source code is licensed under the Apache-2.0 license found in the
|
38
38
|
* LICENSE file in the root directory of this source tree.
|
@@ -177,14 +177,16 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
|
|
177
177
|
size: "lg"
|
178
178
|
}), /*#__PURE__*/_react.default.createElement("span", {
|
179
179
|
className: "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step--custom-tile-label")
|
180
|
-
}, "Plus")))),
|
180
|
+
}, "Plus")))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
|
181
181
|
title: "Conditional step",
|
182
182
|
subtitle: "This step will only show for plus category creation flows",
|
183
|
-
hasFieldset: false
|
184
|
-
|
183
|
+
hasFieldset: false,
|
184
|
+
includeStep: selectedCategory === 'plus'
|
185
|
+
}, "This step will only show for plus create flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
|
185
186
|
title: "Standard step only",
|
186
|
-
hasFieldset: false
|
187
|
-
|
187
|
+
hasFieldset: false,
|
188
|
+
includeStep: selectedCategory === 'standard'
|
189
|
+
}, "This step will only show for standard create flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
|
188
190
|
onNext: function onNext() {
|
189
191
|
return new Promise(function (resolve, reject) {
|
190
192
|
setTimeout(function () {
|
@@ -33,7 +33,7 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
|
|
33
33
|
|
34
34
|
var _settings = require("../../settings");
|
35
35
|
|
36
|
-
var _excluded = ["body", "className", "error", "errorMessage", "filename", "inputLabel", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "successMessage", "successful", "title", "validExtensions"];
|
36
|
+
var _excluded = ["body", "className", "error", "errorMessage", "filename", "hidePasswordLabel", "inputLabel", "inputType", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "showPasswordLabel", "successMessage", "successful", "title", "validExtensions"];
|
37
37
|
|
38
38
|
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); }
|
39
39
|
|
@@ -52,7 +52,9 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
52
52
|
error = _ref.error,
|
53
53
|
errorMessage = _ref.errorMessage,
|
54
54
|
filename = _ref.filename,
|
55
|
+
hidePasswordLabel = _ref.hidePasswordLabel,
|
55
56
|
inputLabel = _ref.inputLabel,
|
57
|
+
inputType = _ref.inputType,
|
56
58
|
invalidInputText = _ref.invalidInputText,
|
57
59
|
loading = _ref.loading,
|
58
60
|
loadingMessage = _ref.loadingMessage,
|
@@ -63,6 +65,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
63
65
|
preformattedExtensionsLabel = _ref.preformattedExtensionsLabel,
|
64
66
|
primaryButtonText = _ref.primaryButtonText,
|
65
67
|
secondaryButtonText = _ref.secondaryButtonText,
|
68
|
+
showPasswordLabel = _ref.showPasswordLabel,
|
66
69
|
successMessage = _ref.successMessage,
|
67
70
|
successful = _ref.successful,
|
68
71
|
title = _ref.title,
|
@@ -124,6 +127,15 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
124
127
|
var internalId = (0, _react.useRef)((0, _uuidv.default)());
|
125
128
|
var primaryButtonDisabled = loading || !name || hasInvalidExtension();
|
126
129
|
var submitted = loading || error || successful;
|
130
|
+
var commonInputProps = (0, _defineProperty2.default)({
|
131
|
+
id: "text-input--".concat(internalId.current),
|
132
|
+
value: name,
|
133
|
+
onChange: onNameChangeHandler,
|
134
|
+
labelText: inputLabel,
|
135
|
+
invalid: hasInvalidExtension(),
|
136
|
+
invalidText: invalidInputText,
|
137
|
+
onBlur: onBlurHandler
|
138
|
+
}, 'data-modal-primary-focus', true);
|
127
139
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
|
128
140
|
className: (0, _classnames.default)(blockClass, className),
|
129
141
|
"aria-label": title,
|
@@ -155,16 +167,13 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
155
167
|
labelText: "".concat(o.extension, " (").concat(o.description, ")"),
|
156
168
|
"data-modal-primary-focus": true
|
157
169
|
});
|
158
|
-
}))) : /*#__PURE__*/_react.default.createElement(
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
onBlur: onBlurHandler,
|
166
|
-
"data-modal-primary-focus": true
|
167
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
170
|
+
}))) : /*#__PURE__*/_react.default.createElement("div", {
|
171
|
+
className: "".concat(blockClass, "__input-container")
|
172
|
+
}, inputType === 'text' ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, commonInputProps) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.PasswordInput, (0, _extends2.default)({}, commonInputProps, {
|
173
|
+
showPasswordLabel: showPasswordLabel,
|
174
|
+
hidePasswordLabel: hidePasswordLabel,
|
175
|
+
tooltipPosition: "left"
|
176
|
+
})))), /*#__PURE__*/_react.default.createElement("div", {
|
168
177
|
className: "".concat(blockClass, "__messaging")
|
169
178
|
}, loading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Loading, {
|
170
179
|
small: true,
|
@@ -215,11 +224,21 @@ ExportModal.propTypes = {
|
|
215
224
|
*/
|
216
225
|
filename: _propTypes.default.string.isRequired,
|
217
226
|
|
227
|
+
/**
|
228
|
+
* label text that's displayed when hovering over visibility toggler to hide key
|
229
|
+
*/
|
230
|
+
hidePasswordLabel: _propTypes.default.string,
|
231
|
+
|
218
232
|
/**
|
219
233
|
* label for the text input
|
220
234
|
*/
|
221
235
|
inputLabel: _propTypes.default.string,
|
222
236
|
|
237
|
+
/**
|
238
|
+
* specify the type of text input
|
239
|
+
*/
|
240
|
+
inputType: _propTypes.default.oneOf(['text', 'password']),
|
241
|
+
|
223
242
|
/**
|
224
243
|
* text for an invalid input
|
225
244
|
*/
|
@@ -273,6 +292,11 @@ ExportModal.propTypes = {
|
|
273
292
|
*/
|
274
293
|
secondaryButtonText: _propTypes.default.string.isRequired,
|
275
294
|
|
295
|
+
/**
|
296
|
+
* label text that's displayed when hovering over visibility toggler to show key
|
297
|
+
*/
|
298
|
+
showPasswordLabel: _propTypes.default.string,
|
299
|
+
|
276
300
|
/**
|
277
301
|
* messaging to display if the export was successful
|
278
302
|
*/
|
@@ -294,6 +318,7 @@ ExportModal.propTypes = {
|
|
294
318
|
validExtensions: _propTypes.default.array
|
295
319
|
};
|
296
320
|
ExportModal.defaultProps = {
|
321
|
+
inputType: 'text',
|
297
322
|
preformattedExtensions: [],
|
298
323
|
validExtensions: []
|
299
324
|
};
|
@@ -533,7 +533,7 @@ SidePanel.propTypes = {
|
|
533
533
|
* See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
534
534
|
*/
|
535
535
|
actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
|
536
|
-
kind: _propTypes.default.oneOf(['ghost', 'secondary', 'primary']),
|
536
|
+
kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
|
537
537
|
label: _propTypes.default.string,
|
538
538
|
loading: _propTypes.default.bool,
|
539
539
|
// we duplicate this Button prop to improve the DocGen here
|
@@ -94,7 +94,7 @@ Tearsheet.propTypes = _objectSpread({
|
|
94
94
|
actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(function () {
|
95
95
|
return 'max';
|
96
96
|
}), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
|
97
|
-
kind: _propTypes.default.oneOf(['ghost', 'secondary', 'primary']),
|
97
|
+
kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
|
98
98
|
label: _propTypes.default.string,
|
99
99
|
loading: _propTypes.default.bool,
|
100
100
|
// we duplicate this Button prop to improve the DocGen here
|