@carbon/ibm-products 2.0.0-rc.4 → 2.0.0-rc.5
Sign up to get free protection for your applications and to get access to all the features.
- package/es/components/CreateTearsheet/CreateTearsheet.js +8 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/PageHeader/PageHeader.js +3 -3
- package/es/global/js/hooks/useResetCreateComponent.js +6 -2
- package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
- package/lib/components/CreateTearsheet/CreateTearsheet.js +9 -1
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/PageHeader/PageHeader.js +3 -3
- package/lib/global/js/hooks/useResetCreateComponent.js +7 -2
- package/lib/global/js/utils/getNumberOfHiddenSteps.js +28 -0
- package/package.json +2 -2
@@ -20,6 +20,7 @@ import { pkg } from '../../settings';
|
|
20
20
|
import { usePreviousValue, useValidCreateStepCount, useResetCreateComponent, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
|
21
21
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
22
22
|
import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray';
|
23
|
+
import { getNumberOfHiddenSteps } from '../../global/js/utils/getNumberOfHiddenSteps';
|
23
24
|
var componentName = 'CreateTearsheet';
|
24
25
|
var blockClass = "".concat(pkg.prefix, "--tearsheet-create"); // This is a general context for the steps container
|
25
26
|
// containing information about the state of the container
|
@@ -122,7 +123,12 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
122
123
|
if (lastItem !== lastIncludedStep) {
|
123
124
|
setLastIncludedStep(lastItem);
|
124
125
|
}
|
125
|
-
|
126
|
+
|
127
|
+
if (open && initialStep) {
|
128
|
+
var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
|
129
|
+
setCurrentStep(Number(initialStep + numberOfHiddenSteps));
|
130
|
+
}
|
131
|
+
}, [stepData, firstIncludedStep, lastIncludedStep, initialStep, open]);
|
126
132
|
useCreateComponentFocus({
|
127
133
|
previousState: previousState,
|
128
134
|
currentStep: currentStep,
|
@@ -135,6 +141,7 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
135
141
|
previousState: previousState,
|
136
142
|
open: open,
|
137
143
|
setCurrentStep: setCurrentStep,
|
144
|
+
stepData: stepData,
|
138
145
|
initialStep: initialStep,
|
139
146
|
totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
|
140
147
|
componentName: componentName
|
@@ -126,7 +126,7 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
126
126
|
className: "".concat(blockClass, "__datagridLeftPanel")
|
127
127
|
}, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/React.createElement("div", {
|
128
128
|
ref: multiKeyTrackingRef
|
129
|
-
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination
|
129
|
+
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsModal && /*#__PURE__*/React.createElement(CustomizeColumnsModal, {
|
130
130
|
instance: datagridState
|
131
131
|
}));
|
132
132
|
};
|
@@ -301,7 +301,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
301
301
|
var current = _ref5.current;
|
302
302
|
// on window resize and other updates some values may have changed
|
303
303
|
checkUpdateVerticalSpace();
|
304
|
-
setWidthIsNarrow(current.innerWidth < breakpoints.md.width); // small (below medium) media query
|
304
|
+
setWidthIsNarrow(current.innerWidth / 16 < parseInt(breakpoints.md.width)); // small (below medium) media query
|
305
305
|
}, [actionBarItems, children, breadcrumbs, enableBreadcrumbScroll, navigation, pageActions, subtitle, tags, title]);
|
306
306
|
useEffect(function () {
|
307
307
|
checkUpdateVerticalSpace(); // eslint-disable-next-line react-hooks/exhaustive-deps
|
@@ -344,7 +344,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
344
344
|
};
|
345
345
|
|
346
346
|
useEffect(function () {
|
347
|
-
if (
|
347
|
+
if (collapseHeader === true) {
|
348
348
|
utilSetCollapsed(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
|
349
349
|
}
|
350
350
|
}, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
|
@@ -484,7 +484,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
484
484
|
onWidthChange: handleWidthChange,
|
485
485
|
buttons: pageActions,
|
486
486
|
buttonSetOverflowLabel: pageActionsOverflowLabel,
|
487
|
-
rightAlign:
|
487
|
+
rightAlign: !widthIsNarrow
|
488
488
|
})));
|
489
489
|
}
|
490
490
|
}
|
@@ -5,6 +5,7 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
import { useEffect } from 'react';
|
8
|
+
import { getNumberOfHiddenSteps } from '../utils/getNumberOfHiddenSteps';
|
8
9
|
/**
|
9
10
|
* Resets the current step of the create component if it has been closed.
|
10
11
|
* @param {object} useResetCreateComponent - Create component that uses this custom hook
|
@@ -12,6 +13,7 @@ import { useEffect } from 'react';
|
|
12
13
|
* @param {object} useResetCreateComponent.previousState
|
13
14
|
* @param {boolean} useResetCreateComponent.open
|
14
15
|
* @param {Function} useResetCreateComponent.setCurrentStep
|
16
|
+
* @param {object} useResetCreateComponent.stepData
|
15
17
|
* @param {number} useResetCreateComponent.initialStep
|
16
18
|
* @param {number} useResetCreateComponent.totalSteps
|
17
19
|
* @param {string} useResetCreateComponent.componentName
|
@@ -22,13 +24,15 @@ export var useResetCreateComponent = function useResetCreateComponent(_ref) {
|
|
22
24
|
previousState = _ref.previousState,
|
23
25
|
open = _ref.open,
|
24
26
|
setCurrentStep = _ref.setCurrentStep,
|
27
|
+
stepData = _ref.stepData,
|
25
28
|
initialStep = _ref.initialStep,
|
26
29
|
totalSteps = _ref.totalSteps,
|
27
30
|
componentName = _ref.componentName;
|
28
31
|
useEffect(function () {
|
29
32
|
if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
|
30
33
|
if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
|
31
|
-
|
34
|
+
var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
|
35
|
+
setCurrentStep(Number(initialStep + numberOfHiddenSteps));
|
32
36
|
} else {
|
33
37
|
// default should be fist includedStep instead of just 1
|
34
38
|
setCurrentStep(firstIncludedStep);
|
@@ -39,5 +43,5 @@ export var useResetCreateComponent = function useResetCreateComponent(_ref) {
|
|
39
43
|
console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
|
40
44
|
}
|
41
45
|
}
|
42
|
-
}, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
|
46
|
+
}, [firstIncludedStep, open, previousState, setCurrentStep, stepData, initialStep, totalSteps, componentName]);
|
43
47
|
};
|
@@ -0,0 +1,19 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2022, 2022
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
export var getNumberOfHiddenSteps = function getNumberOfHiddenSteps(stepData, initialStep) {
|
8
|
+
var numberOfHiddenSteps = 0;
|
9
|
+
stepData.forEach(function (step, stepIndex) {
|
10
|
+
if (stepIndex + 1 > initialStep) {
|
11
|
+
return;
|
12
|
+
}
|
13
|
+
|
14
|
+
if (step.shouldIncludeStep === false) {
|
15
|
+
numberOfHiddenSteps += 1;
|
16
|
+
}
|
17
|
+
});
|
18
|
+
return numberOfHiddenSteps;
|
19
|
+
};
|
@@ -37,6 +37,8 @@ var _devtools = require("../../global/js/utils/devtools");
|
|
37
37
|
|
38
38
|
var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
|
39
39
|
|
40
|
+
var _getNumberOfHiddenSteps = require("../../global/js/utils/getNumberOfHiddenSteps");
|
41
|
+
|
40
42
|
var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
|
41
43
|
|
42
44
|
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); }
|
@@ -147,7 +149,12 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
147
149
|
if (lastItem !== lastIncludedStep) {
|
148
150
|
setLastIncludedStep(lastItem);
|
149
151
|
}
|
150
|
-
|
152
|
+
|
153
|
+
if (open && initialStep) {
|
154
|
+
var numberOfHiddenSteps = (0, _getNumberOfHiddenSteps.getNumberOfHiddenSteps)(stepData, initialStep);
|
155
|
+
setCurrentStep(Number(initialStep + numberOfHiddenSteps));
|
156
|
+
}
|
157
|
+
}, [stepData, firstIncludedStep, lastIncludedStep, initialStep, open]);
|
151
158
|
(0, _hooks.useCreateComponentFocus)({
|
152
159
|
previousState: previousState,
|
153
160
|
currentStep: currentStep,
|
@@ -160,6 +167,7 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
160
167
|
previousState: previousState,
|
161
168
|
open: open,
|
162
169
|
setCurrentStep: setCurrentStep,
|
170
|
+
stepData: stepData,
|
163
171
|
initialStep: initialStep,
|
164
172
|
totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
|
165
173
|
componentName: componentName
|
@@ -158,7 +158,7 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
158
158
|
className: "".concat(blockClass, "__datagridLeftPanel")
|
159
159
|
}, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
|
160
160
|
ref: multiKeyTrackingRef
|
161
|
-
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination
|
161
|
+
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
|
162
162
|
instance: datagridState
|
163
163
|
}));
|
164
164
|
};
|
@@ -330,7 +330,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
330
330
|
var current = _ref5.current;
|
331
331
|
// on window resize and other updates some values may have changed
|
332
332
|
checkUpdateVerticalSpace();
|
333
|
-
setWidthIsNarrow(current.innerWidth < _layout.breakpoints.md.width); // small (below medium) media query
|
333
|
+
setWidthIsNarrow(current.innerWidth / 16 < parseInt(_layout.breakpoints.md.width)); // small (below medium) media query
|
334
334
|
}, [actionBarItems, children, breadcrumbs, enableBreadcrumbScroll, navigation, pageActions, subtitle, tags, title]);
|
335
335
|
(0, _react.useEffect)(function () {
|
336
336
|
checkUpdateVerticalSpace(); // eslint-disable-next-line react-hooks/exhaustive-deps
|
@@ -373,7 +373,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
373
373
|
};
|
374
374
|
|
375
375
|
(0, _react.useEffect)(function () {
|
376
|
-
if (
|
376
|
+
if (collapseHeader === true) {
|
377
377
|
(0, _PageHeaderUtils.utilSetCollapsed)(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
|
378
378
|
}
|
379
379
|
}, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
|
@@ -513,7 +513,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
513
513
|
onWidthChange: handleWidthChange,
|
514
514
|
buttons: pageActions,
|
515
515
|
buttonSetOverflowLabel: pageActionsOverflowLabel,
|
516
|
-
rightAlign:
|
516
|
+
rightAlign: !widthIsNarrow
|
517
517
|
})));
|
518
518
|
}
|
519
519
|
}
|
@@ -7,6 +7,8 @@ exports.useResetCreateComponent = void 0;
|
|
7
7
|
|
8
8
|
var _react = require("react");
|
9
9
|
|
10
|
+
var _getNumberOfHiddenSteps = require("../utils/getNumberOfHiddenSteps");
|
11
|
+
|
10
12
|
/**
|
11
13
|
* Copyright IBM Corp. 2021, 2022
|
12
14
|
*
|
@@ -21,6 +23,7 @@ var _react = require("react");
|
|
21
23
|
* @param {object} useResetCreateComponent.previousState
|
22
24
|
* @param {boolean} useResetCreateComponent.open
|
23
25
|
* @param {Function} useResetCreateComponent.setCurrentStep
|
26
|
+
* @param {object} useResetCreateComponent.stepData
|
24
27
|
* @param {number} useResetCreateComponent.initialStep
|
25
28
|
* @param {number} useResetCreateComponent.totalSteps
|
26
29
|
* @param {string} useResetCreateComponent.componentName
|
@@ -30,13 +33,15 @@ var useResetCreateComponent = function useResetCreateComponent(_ref) {
|
|
30
33
|
previousState = _ref.previousState,
|
31
34
|
open = _ref.open,
|
32
35
|
setCurrentStep = _ref.setCurrentStep,
|
36
|
+
stepData = _ref.stepData,
|
33
37
|
initialStep = _ref.initialStep,
|
34
38
|
totalSteps = _ref.totalSteps,
|
35
39
|
componentName = _ref.componentName;
|
36
40
|
(0, _react.useEffect)(function () {
|
37
41
|
if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
|
38
42
|
if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
|
39
|
-
|
43
|
+
var numberOfHiddenSteps = (0, _getNumberOfHiddenSteps.getNumberOfHiddenSteps)(stepData, initialStep);
|
44
|
+
setCurrentStep(Number(initialStep + numberOfHiddenSteps));
|
40
45
|
} else {
|
41
46
|
// default should be fist includedStep instead of just 1
|
42
47
|
setCurrentStep(firstIncludedStep);
|
@@ -47,7 +52,7 @@ var useResetCreateComponent = function useResetCreateComponent(_ref) {
|
|
47
52
|
console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
|
48
53
|
}
|
49
54
|
}
|
50
|
-
}, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
|
55
|
+
}, [firstIncludedStep, open, previousState, setCurrentStep, stepData, initialStep, totalSteps, componentName]);
|
51
56
|
};
|
52
57
|
|
53
58
|
exports.useResetCreateComponent = useResetCreateComponent;
|
@@ -0,0 +1,28 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.getNumberOfHiddenSteps = void 0;
|
7
|
+
|
8
|
+
/**
|
9
|
+
* Copyright IBM Corp. 2022, 2022
|
10
|
+
*
|
11
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
12
|
+
* LICENSE file in the root directory of this source tree.
|
13
|
+
*/
|
14
|
+
var getNumberOfHiddenSteps = function getNumberOfHiddenSteps(stepData, initialStep) {
|
15
|
+
var numberOfHiddenSteps = 0;
|
16
|
+
stepData.forEach(function (step, stepIndex) {
|
17
|
+
if (stepIndex + 1 > initialStep) {
|
18
|
+
return;
|
19
|
+
}
|
20
|
+
|
21
|
+
if (step.shouldIncludeStep === false) {
|
22
|
+
numberOfHiddenSteps += 1;
|
23
|
+
}
|
24
|
+
});
|
25
|
+
return numberOfHiddenSteps;
|
26
|
+
};
|
27
|
+
|
28
|
+
exports.getNumberOfHiddenSteps = getNumberOfHiddenSteps;
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.0.0-rc.
|
4
|
+
"version": "2.0.0-rc.5",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -94,5 +94,5 @@
|
|
94
94
|
"react": "^16.8.6 || ^17.0.1",
|
95
95
|
"react-dom": "^16.8.6 || ^17.0.1"
|
96
96
|
},
|
97
|
-
"gitHead": "
|
97
|
+
"gitHead": "53c78f2c4c8144b4fbedd9ba12c119c8bc2b8bda"
|
98
98
|
}
|