@hitachivantara/uikit-react-lab 4.0.1-next.1 → 4.0.1-next.2
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/dist/ImageCarousel/ImageCarousel.d.ts +11 -0
- package/dist/ImageCarousel/ImageCarousel.js +666 -0
- package/dist/ImageCarousel/ImageCarousel.js.map +1 -0
- package/dist/ImageCarousel/index.d.ts +2 -0
- package/dist/ImageCarousel/index.js +16 -0
- package/dist/ImageCarousel/index.js.map +1 -0
- package/dist/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/ObiWan.png +0 -0
- package/dist/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/Revan.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/Yoda.jpg +0 -0
- package/dist/ImageCarousel/styles.js +238 -0
- package/dist/ImageCarousel/styles.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js +156 -0
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.d.ts +32 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js +201 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/Step/index.d.ts +2 -0
- package/dist/StepNavigation/DefaultNavigation/Step/index.js +16 -0
- package/dist/StepNavigation/DefaultNavigation/Step/index.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/Step/styles.js +53 -0
- package/dist/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/index.d.ts +2 -0
- package/dist/StepNavigation/DefaultNavigation/index.js +16 -0
- package/dist/StepNavigation/DefaultNavigation/index.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/styles.js +16 -0
- package/dist/StepNavigation/DefaultNavigation/styles.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/utils.js +49 -0
- package/dist/StepNavigation/DefaultNavigation/utils.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.d.ts +10 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js +176 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/index.d.ts +2 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/index.js +16 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/styles.js +25 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +58 -0
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js +159 -0
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/index.d.ts +2 -0
- package/dist/StepNavigation/SimpleNavigation/index.js +16 -0
- package/dist/StepNavigation/SimpleNavigation/index.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/styles.js +16 -0
- package/dist/StepNavigation/SimpleNavigation/styles.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/utils.js +31 -0
- package/dist/StepNavigation/SimpleNavigation/utils.js.map +1 -0
- package/dist/StepNavigation/StepNavigation.d.ts +43 -0
- package/dist/StepNavigation/StepNavigation.js +400 -0
- package/dist/StepNavigation/StepNavigation.js.map +1 -0
- package/dist/StepNavigation/index.d.ts +2 -0
- package/dist/StepNavigation/index.js +16 -0
- package/dist/StepNavigation/index.js.map +1 -0
- package/dist/StepNavigation/styles.js +41 -0
- package/dist/StepNavigation/styles.js.map +1 -0
- package/dist/StepNavigation/utils.js +15 -0
- package/dist/StepNavigation/utils.js.map +1 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +19 -1
- package/dist/index.js.map +1 -1
- package/dist/legacy/ImageCarousel/ImageCarousel.d.ts +11 -0
- package/dist/legacy/ImageCarousel/ImageCarousel.js +624 -0
- package/dist/legacy/ImageCarousel/ImageCarousel.js.map +1 -0
- package/dist/legacy/ImageCarousel/index.d.ts +2 -0
- package/dist/legacy/ImageCarousel/index.js +2 -0
- package/dist/legacy/ImageCarousel/index.js.map +1 -0
- package/dist/legacy/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/ObiWan.png +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/Revan.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/Yoda.jpg +0 -0
- package/dist/legacy/ImageCarousel/styles.js +228 -0
- package/dist/legacy/ImageCarousel/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js +131 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.d.ts +32 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js +181 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/index.js +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/index.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/styles.js +45 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/index.js +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/index.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/styles.js +8 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/utils.js +41 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/utils.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.d.ts +10 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js +135 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/index.js +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/styles.js +18 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +58 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.js +132 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/index.js +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/index.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/styles.js +8 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/utils.js +22 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/utils.js.map +1 -0
- package/dist/legacy/StepNavigation/StepNavigation.d.ts +43 -0
- package/dist/legacy/StepNavigation/StepNavigation.js +364 -0
- package/dist/legacy/StepNavigation/StepNavigation.js.map +1 -0
- package/dist/legacy/StepNavigation/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/index.js +2 -0
- package/dist/legacy/StepNavigation/index.js.map +1 -0
- package/dist/legacy/StepNavigation/styles.js +33 -0
- package/dist/legacy/StepNavigation/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/utils.js +6 -0
- package/dist/legacy/StepNavigation/utils.js.map +1 -0
- package/dist/legacy/index.d.ts +6 -0
- package/dist/legacy/index.js +2 -0
- package/dist/legacy/index.js.map +1 -1
- package/dist/modern/ImageCarousel/ImageCarousel.d.ts +11 -0
- package/dist/modern/ImageCarousel/ImageCarousel.js +542 -0
- package/dist/modern/ImageCarousel/ImageCarousel.js.map +1 -0
- package/dist/modern/ImageCarousel/index.d.ts +2 -0
- package/dist/modern/ImageCarousel/index.js +2 -0
- package/dist/modern/ImageCarousel/index.js.map +1 -0
- package/dist/modern/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/ObiWan.png +0 -0
- package/dist/modern/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/Revan.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/Yoda.jpg +0 -0
- package/dist/modern/ImageCarousel/styles.js +241 -0
- package/dist/modern/ImageCarousel/styles.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js +123 -0
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.d.ts +32 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js +179 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/index.d.ts +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/index.js +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/index.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/styles.js +43 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/index.d.ts +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/index.js +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/index.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/styles.js +6 -0
- package/dist/modern/StepNavigation/DefaultNavigation/styles.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/utils.js +41 -0
- package/dist/modern/StepNavigation/DefaultNavigation/utils.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.d.ts +10 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js +123 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/index.d.ts +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/index.js +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js +18 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +58 -0
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.js +121 -0
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/index.d.ts +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/index.js +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/index.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/styles.js +6 -0
- package/dist/modern/StepNavigation/SimpleNavigation/styles.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/utils.js +22 -0
- package/dist/modern/StepNavigation/SimpleNavigation/utils.js.map +1 -0
- package/dist/modern/StepNavigation/StepNavigation.d.ts +43 -0
- package/dist/modern/StepNavigation/StepNavigation.js +346 -0
- package/dist/modern/StepNavigation/StepNavigation.js.map +1 -0
- package/dist/modern/StepNavigation/index.d.ts +2 -0
- package/dist/modern/StepNavigation/index.js +2 -0
- package/dist/modern/StepNavigation/index.js.map +1 -0
- package/dist/modern/StepNavigation/styles.js +31 -0
- package/dist/modern/StepNavigation/styles.js.map +1 -0
- package/dist/modern/StepNavigation/utils.js +6 -0
- package/dist/modern/StepNavigation/utils.js.map +1 -0
- package/dist/modern/index.d.ts +6 -0
- package/dist/modern/index.js +2 -0
- package/dist/modern/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["numSteps", "stepSize", "getTitles", "getDynamicValues", "children"];
|
|
4
|
+
|
|
5
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
|
+
|
|
7
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
8
|
+
|
|
9
|
+
import "core-js/modules/es.array.includes.js";
|
|
10
|
+
import "core-js/modules/es.array.concat.js";
|
|
11
|
+
import "core-js/modules/es.object.keys.js";
|
|
12
|
+
import "core-js/modules/es.symbol.js";
|
|
13
|
+
import "core-js/modules/es.array.filter.js";
|
|
14
|
+
import "core-js/modules/es.object.to-string.js";
|
|
15
|
+
import "core-js/modules/es.object.get-own-property-descriptor.js";
|
|
16
|
+
import "core-js/modules/web.dom-collections.for-each.js";
|
|
17
|
+
import "core-js/modules/es.object.get-own-property-descriptors.js";
|
|
18
|
+
import React from "react";
|
|
19
|
+
import PropTypes from "prop-types";
|
|
20
|
+
import { useTheme } from "@mui/material";
|
|
21
|
+
import { withStyles } from "@mui/styles";
|
|
22
|
+
import HvDot from "./Dot";
|
|
23
|
+
import { defaultColor, disabledColor, dotSizes } from "./utils";
|
|
24
|
+
import styles from "./styles";
|
|
25
|
+
/**
|
|
26
|
+
* Simple Navigation
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
30
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
31
|
+
|
|
32
|
+
var HvSimpleNavigation = function HvSimpleNavigation(_ref) {
|
|
33
|
+
var numSteps = _ref.numSteps,
|
|
34
|
+
stepSize = _ref.stepSize,
|
|
35
|
+
getTitles = _ref.getTitles,
|
|
36
|
+
getDynamicValues = _ref.getDynamicValues,
|
|
37
|
+
children = _ref.children,
|
|
38
|
+
other = _objectWithoutProperties(_ref, _excluded);
|
|
39
|
+
|
|
40
|
+
var theme = useTheme(); // step values
|
|
41
|
+
|
|
42
|
+
var dotSize = dotSizes[stepSize];
|
|
43
|
+
var StepComponent = HvDot; //
|
|
44
|
+
|
|
45
|
+
var stepsWidth = (numSteps + 0.5) * dotSize;
|
|
46
|
+
|
|
47
|
+
var _getDynamicValues = getDynamicValues(stepsWidth),
|
|
48
|
+
width = _getDynamicValues.width,
|
|
49
|
+
titleWidth = _getDynamicValues.titleWidth,
|
|
50
|
+
separatorWidth = _getDynamicValues.separatorWidth; // separator values
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
var getColor = function getColor(state) {
|
|
54
|
+
return ["Current", "Disabled"].includes(state) ? disabledColor(theme) : defaultColor(theme);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
var maxWidth = Math.max(titleWidth - dotSize, separatorWidth);
|
|
58
|
+
var minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth); //
|
|
59
|
+
|
|
60
|
+
var Steps = children;
|
|
61
|
+
var titles = getTitles(function (_ref2) {
|
|
62
|
+
var rawTitle = _ref2.rawTitle,
|
|
63
|
+
number = _ref2.number;
|
|
64
|
+
return {
|
|
65
|
+
title: "".concat(number, ". ").concat(rawTitle),
|
|
66
|
+
titleWidth: titleWidth
|
|
67
|
+
};
|
|
68
|
+
});
|
|
69
|
+
return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, other), {}, {
|
|
70
|
+
children: [titles, /*#__PURE__*/_jsx(Steps, {
|
|
71
|
+
stepsWidth: stepsWidth,
|
|
72
|
+
navWidth: width,
|
|
73
|
+
separatorValues: {
|
|
74
|
+
minWidth: minWidth,
|
|
75
|
+
maxWidth: maxWidth,
|
|
76
|
+
getColor: getColor,
|
|
77
|
+
height: 2
|
|
78
|
+
},
|
|
79
|
+
stepValues: {
|
|
80
|
+
minSize: dotSize,
|
|
81
|
+
maxSize: 1.5 * dotSize,
|
|
82
|
+
StepComponent: StepComponent
|
|
83
|
+
}
|
|
84
|
+
})]
|
|
85
|
+
}));
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
process.env.NODE_ENV !== "production" ? HvSimpleNavigation.propTypes = {
|
|
89
|
+
/**
|
|
90
|
+
* Class names to be applied.
|
|
91
|
+
*/
|
|
92
|
+
className: PropTypes.string,
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* A Jss Object used to override or extend the styles applied.
|
|
96
|
+
*/
|
|
97
|
+
classes: PropTypes.shape({
|
|
98
|
+
/**
|
|
99
|
+
* Styles applied to the component root class.
|
|
100
|
+
*/
|
|
101
|
+
root: PropTypes.string
|
|
102
|
+
}).isRequired,
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Number of steps to show on the component.
|
|
106
|
+
*/
|
|
107
|
+
numSteps: PropTypes.number.isRequired,
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Sets one of the standard sizes of the steps
|
|
111
|
+
*/
|
|
112
|
+
stepSize: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]).isRequired,
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Returns dynamic width values of the component (width, titleWidth, separatorWidth).
|
|
116
|
+
*/
|
|
117
|
+
getDynamicValues: PropTypes.func.isRequired,
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* Returns a JSX.element of the titles container.
|
|
121
|
+
*/
|
|
122
|
+
getTitles: PropTypes.func.isRequired,
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}
|
|
126
|
+
*/
|
|
127
|
+
children: PropTypes.elementType.isRequired
|
|
128
|
+
} : void 0;
|
|
129
|
+
export default withStyles(styles, {
|
|
130
|
+
name: "HvSimpleNavigation"
|
|
131
|
+
})(HvSimpleNavigation);
|
|
132
|
+
//# sourceMappingURL=SimpleNavigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SimpleNavigation.js","names":["React","PropTypes","useTheme","withStyles","HvDot","defaultColor","disabledColor","dotSizes","styles","HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","other","theme","dotSize","StepComponent","stepsWidth","width","titleWidth","separatorWidth","getColor","state","includes","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","title","navWidth","separatorValues","height","stepValues","minSize","maxSize","propTypes","className","string","classes","shape","root","isRequired","oneOf","func","elementType","name"],"sources":["../../../../src/StepNavigation/SimpleNavigation/SimpleNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { useTheme } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\n\nimport HvDot from \"./Dot\";\nimport { defaultColor, disabledColor, dotSizes } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Simple Navigation\n */\nconst HvSimpleNavigation = ({\n numSteps,\n stepSize,\n getTitles,\n getDynamicValues,\n children,\n ...other\n}) => {\n const theme = useTheme();\n\n // step values\n const dotSize = dotSizes[stepSize];\n const StepComponent = HvDot;\n //\n\n const stepsWidth = (numSteps + 0.5) * dotSize;\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const getColor = (state) =>\n [\"Current\", \"Disabled\"].includes(state) ? disabledColor(theme) : defaultColor(theme);\n const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);\n const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);\n //\n\n const Steps = children;\n\n const titles = getTitles(({ rawTitle, number }) => ({\n title: `${number}. ${rawTitle}`,\n titleWidth,\n }));\n\n return (\n <div {...other}>\n {titles}\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: 2,\n },\n stepValues: {\n minSize: dotSize,\n maxSize: 1.5 * dotSize,\n StepComponent,\n },\n }}\n />\n </div>\n );\n};\n\nHvSimpleNavigation.propTypes = {\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root class.\n */\n root: PropTypes.string,\n }).isRequired,\n /**\n * Number of steps to show on the component.\n */\n numSteps: PropTypes.number.isRequired,\n /**\n * Sets one of the standard sizes of the steps\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n /**\n * Returns dynamic width values of the component (width, titleWidth, separatorWidth).\n */\n getDynamicValues: PropTypes.func.isRequired,\n /**\n * Returns a JSX.element of the titles container.\n */\n getTitles: PropTypes.func.isRequired,\n /**\n * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}\n */\n children: PropTypes.elementType.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvSimpleNavigation\" })(HvSimpleNavigation);\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../../../src/StepNavigation/SimpleNavigation/index.js"],"sourcesContent":["export { default } from \"./SimpleNavigation\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,oBAAxB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","root"],"sources":["../../../../src/StepNavigation/SimpleNavigation/styles.js"],"sourcesContent":["const styles = () => ({\n root: {},\n});\n\nexport default styles;\n"],"mappings":"AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,OAAO;IACpBC,IAAI,EAAE;EADc,CAAP;AAAA,CAAf;;AAIA,eAAeD,MAAf"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
var dotSizes = {
|
|
2
|
+
XS: 8,
|
|
3
|
+
SM: 10,
|
|
4
|
+
MD: 12,
|
|
5
|
+
LG: 14,
|
|
6
|
+
XL: 16
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
var defaultColor = function defaultColor(theme) {
|
|
10
|
+
var _theme$hv, _theme$hv$palette, _theme$hv$palette$acc;
|
|
11
|
+
|
|
12
|
+
return theme === null || theme === void 0 ? void 0 : (_theme$hv = theme.hv) === null || _theme$hv === void 0 ? void 0 : (_theme$hv$palette = _theme$hv.palette) === null || _theme$hv$palette === void 0 ? void 0 : (_theme$hv$palette$acc = _theme$hv$palette.accent) === null || _theme$hv$palette$acc === void 0 ? void 0 : _theme$hv$palette$acc.acce1;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
var disabledColor = function disabledColor(theme) {
|
|
16
|
+
var _theme$hv2, _theme$hv2$palette, _theme$hv2$palette$at;
|
|
17
|
+
|
|
18
|
+
return theme === null || theme === void 0 ? void 0 : (_theme$hv2 = theme.hv) === null || _theme$hv2 === void 0 ? void 0 : (_theme$hv2$palette = _theme$hv2.palette) === null || _theme$hv2$palette === void 0 ? void 0 : (_theme$hv2$palette$at = _theme$hv2$palette.atmosphere) === null || _theme$hv2$palette$at === void 0 ? void 0 : _theme$hv2$palette$at.atmo5;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export { dotSizes, defaultColor, disabledColor };
|
|
22
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","names":["dotSizes","XS","SM","MD","LG","XL","defaultColor","theme","hv","palette","accent","acce1","disabledColor","atmosphere","atmo5"],"sources":["../../../../src/StepNavigation/SimpleNavigation/utils.js"],"sourcesContent":["const dotSizes = {\n XS: 8,\n SM: 10,\n MD: 12,\n LG: 14,\n XL: 16,\n};\n\nconst defaultColor = (theme) => theme?.hv?.palette?.accent?.acce1;\nconst disabledColor = (theme) => theme?.hv?.palette?.atmosphere?.atmo5;\n\nexport { dotSizes, defaultColor, disabledColor };\n"],"mappings":"AAAA,IAAMA,QAAQ,GAAG;EACfC,EAAE,EAAE,CADW;EAEfC,EAAE,EAAE,EAFW;EAGfC,EAAE,EAAE,EAHW;EAIfC,EAAE,EAAE,EAJW;EAKfC,EAAE,EAAE;AALW,CAAjB;;AAQA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;EAAA;;EAAA,OAAWA,KAAX,aAAWA,KAAX,oCAAWA,KAAK,CAAEC,EAAlB,mEAAW,UAAWC,OAAtB,+EAAW,kBAAoBC,MAA/B,0DAAW,sBAA4BC,KAAvC;AAAA,CAArB;;AACA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACL,KAAD;EAAA;;EAAA,OAAWA,KAAX,aAAWA,KAAX,qCAAWA,KAAK,CAAEC,EAAlB,qEAAW,WAAWC,OAAtB,gFAAW,mBAAoBI,UAA/B,0DAAW,sBAAgCC,KAA3C;AAAA,CAAtB;;AAEA,SAASd,QAAT,EAAmBM,YAAnB,EAAiCM,aAAjC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StandardProps } from "@mui/material";
|
|
3
|
+
import { Breakpoint } from "@mui/material/styles";
|
|
4
|
+
import { HvStepProps } from "./DefaultNavigation/Step/Step";
|
|
5
|
+
|
|
6
|
+
export type HvStepNavigationClassKey = "root";
|
|
7
|
+
|
|
8
|
+
export type HvStepNavigationProps = StandardProps<
|
|
9
|
+
React.HTMLAttributes<HTMLDivElement>,
|
|
10
|
+
HvStepNavigationClassKey
|
|
11
|
+
> & {
|
|
12
|
+
/**
|
|
13
|
+
* Type of step navigation. Values = {"Simple", "Default"}
|
|
14
|
+
*/
|
|
15
|
+
type: "Simple" | "Default";
|
|
16
|
+
/**
|
|
17
|
+
* Steps to show on the component.
|
|
18
|
+
*/
|
|
19
|
+
steps: Array<Pick<HvStepProps, "state" | "title" | "onClick" | "className" | "disabled">> & {
|
|
20
|
+
/**
|
|
21
|
+
* Class names to override styles on the separator component after the step.
|
|
22
|
+
*/
|
|
23
|
+
separatorClassName: string;
|
|
24
|
+
/**
|
|
25
|
+
* Class names to override styles on the title component above the step.
|
|
26
|
+
*/
|
|
27
|
+
titleClassName: string;
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* Sets one of the standard sizes of the steps.
|
|
31
|
+
*/
|
|
32
|
+
stepSize?: "XS" | "SM" | "MD" | "LG" | "XL";
|
|
33
|
+
/**
|
|
34
|
+
* Width of the component element on each breakpoint screen resolution.
|
|
35
|
+
*/
|
|
36
|
+
width?: { [breakpoint in Breakpoint]?: number };
|
|
37
|
+
/**
|
|
38
|
+
* Defines either show a title or only a tooltip on each step component.
|
|
39
|
+
*/
|
|
40
|
+
showTitles?: boolean;
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export default function HvStepNavigation(props: HvStepNavigationProps): JSX.Element | null;
|
|
@@ -0,0 +1,364 @@
|
|
|
1
|
+
import "core-js/modules/es.object.keys.js";
|
|
2
|
+
import "core-js/modules/es.symbol.js";
|
|
3
|
+
import "core-js/modules/es.array.filter.js";
|
|
4
|
+
import "core-js/modules/es.object.get-own-property-descriptor.js";
|
|
5
|
+
import "core-js/modules/web.dom-collections.for-each.js";
|
|
6
|
+
import "core-js/modules/es.object.get-own-property-descriptors.js";
|
|
7
|
+
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
8
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
9
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
10
|
+
var _excluded = ["className", "classes", "width", "steps", "stepSize", "showTitles", "type"],
|
|
11
|
+
_excluded2 = ["state", "title", "separatorClassName"],
|
|
12
|
+
_excluded3 = ["stepsWidth", "navWidth"];
|
|
13
|
+
|
|
14
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
15
|
+
|
|
16
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
17
|
+
|
|
18
|
+
import "core-js/modules/es.array.includes.js";
|
|
19
|
+
import "core-js/modules/es.object.to-string.js";
|
|
20
|
+
import "core-js/modules/es.array.concat.js";
|
|
21
|
+
import "core-js/modules/es.string.includes.js";
|
|
22
|
+
import "core-js/modules/es.number.constructor.js";
|
|
23
|
+
import "core-js/modules/es.array.find.js";
|
|
24
|
+
import "core-js/modules/es.array.iterator.js";
|
|
25
|
+
import "core-js/modules/web.dom-collections.iterator.js";
|
|
26
|
+
import "core-js/modules/es.array.map.js";
|
|
27
|
+
import React from "react";
|
|
28
|
+
import PropTypes from "prop-types";
|
|
29
|
+
import clsx from "clsx";
|
|
30
|
+
import { Typography, styled, useTheme } from "@mui/material";
|
|
31
|
+
import { withStyles } from "@mui/styles";
|
|
32
|
+
import { HvTooltip, HvTypography, useWidth } from "@hitachivantara/uikit-react-core";
|
|
33
|
+
import HvDefaultNavigation from "./DefaultNavigation";
|
|
34
|
+
import HvSimpleNavigation from "./SimpleNavigation";
|
|
35
|
+
import { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from "./utils";
|
|
36
|
+
import styles from "./styles";
|
|
37
|
+
/**
|
|
38
|
+
* Navigation page with steps.
|
|
39
|
+
*
|
|
40
|
+
* You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.
|
|
41
|
+
* On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -
|
|
42
|
+
* and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:
|
|
43
|
+
* * Define a <b>className</b> on each step element;
|
|
44
|
+
* * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height
|
|
45
|
+
* values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;
|
|
46
|
+
* * Define a <b>titleClassName</b> to specify a className for the title above each step element.
|
|
47
|
+
*
|
|
48
|
+
* For the root element, you can:
|
|
49
|
+
* * Define a <b>className</b>;
|
|
50
|
+
* * Choose a <b>type</b> of layout: 'Simple' or 'Default';
|
|
51
|
+
* * Choose the <b>stepSize</b> of the step component: "XS", "SM", "MD", "LG", "XL". The default size will be
|
|
52
|
+
* correspondent to the current media breakpoint;
|
|
53
|
+
* * Choose either you want to <b>showTitles</b> near to each step component or a tootlip on hover;
|
|
54
|
+
* * Define a <b>width</b> of the component. If you don't define any value and the step component has no title
|
|
55
|
+
* displayed above, the width of the separator element;
|
|
56
|
+
* will be 100px. If the step component has titles, each one will have 215px of width by default.
|
|
57
|
+
*/
|
|
58
|
+
|
|
59
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
60
|
+
|
|
61
|
+
var HvStepNavigation = function HvStepNavigation(_ref) {
|
|
62
|
+
var className = _ref.className,
|
|
63
|
+
classes = _ref.classes,
|
|
64
|
+
width = _ref.width,
|
|
65
|
+
steps = _ref.steps,
|
|
66
|
+
stepSize = _ref.stepSize,
|
|
67
|
+
showTitles = _ref.showTitles,
|
|
68
|
+
_ref$type = _ref.type,
|
|
69
|
+
type = _ref$type === void 0 ? "Default" : _ref$type,
|
|
70
|
+
others = _objectWithoutProperties(_ref, _excluded);
|
|
71
|
+
|
|
72
|
+
var theme = useTheme(); // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
|
73
|
+
|
|
74
|
+
var breakpoint = useWidth(); // step configurations
|
|
75
|
+
|
|
76
|
+
var stepSizeKey = stepSize !== null && stepSize !== void 0 ? stepSize : ["xs", "sm"].includes(breakpoint) ? "SM" : "MD";
|
|
77
|
+
var hasTitles = showTitles !== null && showTitles !== void 0 ? showTitles : !["xs", "sm"].includes(breakpoint);
|
|
78
|
+
|
|
79
|
+
var styledLi = function styledLi(containerSize) {
|
|
80
|
+
return styled("li")({
|
|
81
|
+
width: containerSize,
|
|
82
|
+
height: containerSize
|
|
83
|
+
});
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
var styledDiv = function styledDiv(containerSize) {
|
|
87
|
+
return styled("div")({
|
|
88
|
+
width: containerSize,
|
|
89
|
+
height: containerSize
|
|
90
|
+
});
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
var styledSeparatorElement = function styledSeparatorElement(title, separatorClassName, separatorHeight, separatorWidth, backgroundColor) {
|
|
94
|
+
var Separator = withStyles({
|
|
95
|
+
separatorElement: {
|
|
96
|
+
height: separatorHeight,
|
|
97
|
+
width: separatorWidth,
|
|
98
|
+
backgroundColor: backgroundColor
|
|
99
|
+
}
|
|
100
|
+
})(function (_ref2) {
|
|
101
|
+
var separatorElement = _ref2.classes.separatorElement;
|
|
102
|
+
return /*#__PURE__*/_jsx("div", {
|
|
103
|
+
"aria-label": "separator-".concat(title),
|
|
104
|
+
className: clsx(separatorElement, separatorClassName)
|
|
105
|
+
});
|
|
106
|
+
});
|
|
107
|
+
return /*#__PURE__*/_jsx("li", {
|
|
108
|
+
"aria-hidden": true,
|
|
109
|
+
className: classes.separator,
|
|
110
|
+
children: /*#__PURE__*/_jsx(Separator, {})
|
|
111
|
+
}, "separator-".concat(title));
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
var drawItems = function drawItems(_ref3) {
|
|
115
|
+
var _ref3$separatorValues = _ref3.separatorValues,
|
|
116
|
+
minWidth = _ref3$separatorValues.minWidth,
|
|
117
|
+
maxWidth = _ref3$separatorValues.maxWidth,
|
|
118
|
+
getColor = _ref3$separatorValues.getColor,
|
|
119
|
+
height = _ref3$separatorValues.height,
|
|
120
|
+
_ref3$stepValues = _ref3.stepValues,
|
|
121
|
+
minSize = _ref3$stepValues.minSize,
|
|
122
|
+
maxSize = _ref3$stepValues.maxSize,
|
|
123
|
+
StepComponent = _ref3$stepValues.StepComponent;
|
|
124
|
+
var items = steps.reduce(function (acc, _ref4, index) {
|
|
125
|
+
var state = _ref4.state,
|
|
126
|
+
title = _ref4.title,
|
|
127
|
+
separatorClassName = _ref4.separatorClassName,
|
|
128
|
+
props = _objectWithoutProperties(_ref4, _excluded2);
|
|
129
|
+
|
|
130
|
+
var containerSize = state === "Current" ? maxSize : minSize;
|
|
131
|
+
var StepContainer = styledLi(containerSize);
|
|
132
|
+
var Step = styledDiv(Math.max(containerSize, 30), Math.max(containerSize, 30));
|
|
133
|
+
|
|
134
|
+
var stepProps = _objectSpread({}, _objectSpread({
|
|
135
|
+
size: stepSizeKey,
|
|
136
|
+
state: state,
|
|
137
|
+
title: title,
|
|
138
|
+
number: index + 1
|
|
139
|
+
}, props));
|
|
140
|
+
|
|
141
|
+
var stepElement = /*#__PURE__*/_jsx(StepContainer, {
|
|
142
|
+
className: classes.li,
|
|
143
|
+
children: hasTitles ? /*#__PURE__*/_jsx(StepComponent, _objectSpread({
|
|
144
|
+
"aria-label": "step-".concat(title)
|
|
145
|
+
}, stepProps)) : /*#__PURE__*/_jsx(HvTooltip, {
|
|
146
|
+
placement: "bottom",
|
|
147
|
+
title: /*#__PURE__*/_jsx(HvTypography, {
|
|
148
|
+
children: "".concat(index + 1, ". ").concat(title)
|
|
149
|
+
}),
|
|
150
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
151
|
+
"aria-label": "step-container-".concat(title),
|
|
152
|
+
children: /*#__PURE__*/_jsx(Step, {
|
|
153
|
+
className: classes.li,
|
|
154
|
+
children: /*#__PURE__*/_jsx(StepComponent, _objectSpread({
|
|
155
|
+
"aria-label": "step-".concat(title)
|
|
156
|
+
}, stepProps))
|
|
157
|
+
})
|
|
158
|
+
})
|
|
159
|
+
})
|
|
160
|
+
}, "step-".concat(title));
|
|
161
|
+
|
|
162
|
+
if (index < steps.length - 1) {
|
|
163
|
+
var separatorElement = styledSeparatorElement(title, separatorClassName, height, [steps[index + 1].state, state].includes("Current") ? minWidth : maxWidth, getColor(state));
|
|
164
|
+
return [].concat(_toConsumableArray(acc), [stepElement, separatorElement]);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
return [].concat(_toConsumableArray(acc), [stepElement]);
|
|
168
|
+
}, []);
|
|
169
|
+
return /*#__PURE__*/_jsx("ol", {
|
|
170
|
+
className: classes.ol,
|
|
171
|
+
children: items
|
|
172
|
+
});
|
|
173
|
+
};
|
|
174
|
+
|
|
175
|
+
var getDynamicValues = function getDynamicValues(stepsWidth) {
|
|
176
|
+
var _width$breakpoint, _theme$breakpoints$va, _theme$breakpoints$va2;
|
|
177
|
+
|
|
178
|
+
var maxWidth = (_width$breakpoint = width === null || width === void 0 ? void 0 : width[breakpoint]) !== null && _width$breakpoint !== void 0 ? _width$breakpoint : Math.max(Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN, SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth);
|
|
179
|
+
var next = theme.breakpoints.keys.find(function (_, index, self) {
|
|
180
|
+
return index - 1 >= 0 ? self[index - 1] === breakpoint : false;
|
|
181
|
+
});
|
|
182
|
+
var navWidth = Math.min(maxWidth, (_theme$breakpoints$va = (_theme$breakpoints$va2 = theme.breakpoints.values) === null || _theme$breakpoints$va2 === void 0 ? void 0 : _theme$breakpoints$va2[next]) !== null && _theme$breakpoints$va !== void 0 ? _theme$breakpoints$va : maxWidth);
|
|
183
|
+
var titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);
|
|
184
|
+
var separatorWidth = Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));
|
|
185
|
+
return {
|
|
186
|
+
width: navWidth,
|
|
187
|
+
titleWidth: titleWidth,
|
|
188
|
+
separatorWidth: separatorWidth
|
|
189
|
+
};
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
var styledTitle = function styledTitle(titleClassName, variant, title, titleWidth) {
|
|
193
|
+
return withStyles({
|
|
194
|
+
stepTitle: {
|
|
195
|
+
textAlign: "center",
|
|
196
|
+
width: titleWidth - TITLE_MARGIN,
|
|
197
|
+
marginRight: TITLE_MARGIN
|
|
198
|
+
}
|
|
199
|
+
})(function (_ref5) {
|
|
200
|
+
var stepTitle = _ref5.classes.stepTitle;
|
|
201
|
+
return title ? /*#__PURE__*/_jsx(HvTypography, {
|
|
202
|
+
variant: variant,
|
|
203
|
+
className: clsx(stepTitle, titleClassName),
|
|
204
|
+
children: title
|
|
205
|
+
}) : null;
|
|
206
|
+
});
|
|
207
|
+
};
|
|
208
|
+
|
|
209
|
+
var getTitles = function getTitles(getTitleProps) {
|
|
210
|
+
return hasTitles ? /*#__PURE__*/_jsx("div", {
|
|
211
|
+
className: classes.titles,
|
|
212
|
+
children: steps.map(function (_ref6, index) {
|
|
213
|
+
var rawTitle = _ref6.title,
|
|
214
|
+
state = _ref6.state,
|
|
215
|
+
titleClassName = _ref6.titleClassName;
|
|
216
|
+
|
|
217
|
+
var _getTitleProps = getTitleProps({
|
|
218
|
+
state: state,
|
|
219
|
+
rawTitle: rawTitle,
|
|
220
|
+
number: index + 1
|
|
221
|
+
}),
|
|
222
|
+
_getTitleProps$varian = _getTitleProps.variant,
|
|
223
|
+
variant = _getTitleProps$varian === void 0 ? "highlightText" : _getTitleProps$varian,
|
|
224
|
+
_getTitleProps$title = _getTitleProps.title,
|
|
225
|
+
title = _getTitleProps$title === void 0 ? rawTitle : _getTitleProps$title,
|
|
226
|
+
_getTitleProps$titleW = _getTitleProps.titleWidth,
|
|
227
|
+
titleWidth = _getTitleProps$titleW === void 0 ? 0 : _getTitleProps$titleW;
|
|
228
|
+
|
|
229
|
+
var Title = styledTitle(titleClassName, variant, title, titleWidth);
|
|
230
|
+
return /*#__PURE__*/_jsx(Title, {}, "step-title-".concat(rawTitle));
|
|
231
|
+
})
|
|
232
|
+
}) : null;
|
|
233
|
+
};
|
|
234
|
+
|
|
235
|
+
var StepNavigation = {
|
|
236
|
+
Default: HvDefaultNavigation,
|
|
237
|
+
Simple: HvSimpleNavigation
|
|
238
|
+
}[type];
|
|
239
|
+
return /*#__PURE__*/_jsx(StepNavigation, _objectSpread(_objectSpread({}, _objectSpread({
|
|
240
|
+
stepSize: stepSizeKey,
|
|
241
|
+
numSteps: steps.length,
|
|
242
|
+
getTitles: getTitles,
|
|
243
|
+
getDynamicValues: getDynamicValues,
|
|
244
|
+
className: clsx(className, classes.root)
|
|
245
|
+
}, others)), {}, {
|
|
246
|
+
children: function children(_ref7) {
|
|
247
|
+
var stepsWidth = _ref7.stepsWidth,
|
|
248
|
+
navWidth = _ref7.navWidth,
|
|
249
|
+
itemsProps = _objectWithoutProperties(_ref7, _excluded3);
|
|
250
|
+
|
|
251
|
+
return /*#__PURE__*/_jsx(Typography, {
|
|
252
|
+
component: "nav",
|
|
253
|
+
style: {
|
|
254
|
+
width: "".concat(navWidth, "px"),
|
|
255
|
+
margin: 0
|
|
256
|
+
},
|
|
257
|
+
children: drawItems(itemsProps)
|
|
258
|
+
});
|
|
259
|
+
}
|
|
260
|
+
}));
|
|
261
|
+
};
|
|
262
|
+
|
|
263
|
+
process.env.NODE_ENV !== "production" ? HvStepNavigation.propTypes = {
|
|
264
|
+
/**
|
|
265
|
+
* Class names to be applied.
|
|
266
|
+
*/
|
|
267
|
+
className: PropTypes.string,
|
|
268
|
+
|
|
269
|
+
/**
|
|
270
|
+
* A Jss Object used to override or extend the styles applied.
|
|
271
|
+
*/
|
|
272
|
+
classes: PropTypes.shape({
|
|
273
|
+
/**
|
|
274
|
+
* Styles applied to the component root class.
|
|
275
|
+
*/
|
|
276
|
+
root: PropTypes.string,
|
|
277
|
+
|
|
278
|
+
/**
|
|
279
|
+
* Styles applied to the li element.
|
|
280
|
+
*/
|
|
281
|
+
li: PropTypes.string,
|
|
282
|
+
|
|
283
|
+
/**
|
|
284
|
+
* Styles applied to the ol element.
|
|
285
|
+
*/
|
|
286
|
+
ol: PropTypes.string,
|
|
287
|
+
|
|
288
|
+
/**
|
|
289
|
+
* Styles applied to the separator element.
|
|
290
|
+
*/
|
|
291
|
+
separator: PropTypes.string,
|
|
292
|
+
|
|
293
|
+
/**
|
|
294
|
+
* Styles applied to the titles container element.
|
|
295
|
+
*/
|
|
296
|
+
titles: PropTypes.string
|
|
297
|
+
}).isRequired,
|
|
298
|
+
|
|
299
|
+
/**
|
|
300
|
+
* Type of step navigation. Values = {"Simple", "Default"}.
|
|
301
|
+
*/
|
|
302
|
+
type: PropTypes.oneOf(["Simple", "Default"]),
|
|
303
|
+
|
|
304
|
+
/**
|
|
305
|
+
* Steps to show on the component.
|
|
306
|
+
*/
|
|
307
|
+
steps: PropTypes.arrayOf(PropTypes.shape({
|
|
308
|
+
/**
|
|
309
|
+
* Class names to override styles on the step component.
|
|
310
|
+
*/
|
|
311
|
+
className: PropTypes.string,
|
|
312
|
+
|
|
313
|
+
/**
|
|
314
|
+
* Class names to override styles on the separator component after the step.
|
|
315
|
+
*/
|
|
316
|
+
separatorClassName: PropTypes.string,
|
|
317
|
+
|
|
318
|
+
/**
|
|
319
|
+
* Class names to override styles on the title component above the step.
|
|
320
|
+
*/
|
|
321
|
+
titleClassName: PropTypes.string,
|
|
322
|
+
|
|
323
|
+
/**
|
|
324
|
+
* Title of the step.
|
|
325
|
+
*/
|
|
326
|
+
title: PropTypes.string.isRequired,
|
|
327
|
+
|
|
328
|
+
/**
|
|
329
|
+
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}.
|
|
330
|
+
*/
|
|
331
|
+
state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
|
|
332
|
+
|
|
333
|
+
/**
|
|
334
|
+
* Define if a step is disabled/enabled.
|
|
335
|
+
* If this property is not defined and the step is on state "Disabled", the step component will be disabled
|
|
336
|
+
*/
|
|
337
|
+
disabled: PropTypes.bool
|
|
338
|
+
})).isRequired,
|
|
339
|
+
|
|
340
|
+
/**
|
|
341
|
+
* Sets one of the standard sizes of the steps. Values = {"XS", "SM", "MD", "LG", "XL"}
|
|
342
|
+
*/
|
|
343
|
+
stepSize: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]),
|
|
344
|
+
|
|
345
|
+
/**
|
|
346
|
+
* Width of the component element on each breakpoint screen resolution.
|
|
347
|
+
*/
|
|
348
|
+
width: PropTypes.shape({
|
|
349
|
+
xs: PropTypes.number,
|
|
350
|
+
sm: PropTypes.number,
|
|
351
|
+
md: PropTypes.number,
|
|
352
|
+
lg: PropTypes.number,
|
|
353
|
+
xl: PropTypes.number
|
|
354
|
+
}),
|
|
355
|
+
|
|
356
|
+
/**
|
|
357
|
+
* Defines either show a title or only a tooltip on each step component
|
|
358
|
+
*/
|
|
359
|
+
showTitles: PropTypes.bool
|
|
360
|
+
} : void 0;
|
|
361
|
+
export default withStyles(styles, {
|
|
362
|
+
name: "HvStepNavigation"
|
|
363
|
+
})(HvStepNavigation);
|
|
364
|
+
//# sourceMappingURL=StepNavigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StepNavigation.js","names":["React","PropTypes","clsx","Typography","styled","useTheme","withStyles","HvTooltip","HvTypography","useWidth","HvDefaultNavigation","HvSimpleNavigation","SEPARATOR_WIDTH","TITLE_MARGIN","TITLE_WIDTH","styles","HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","theme","breakpoint","stepSizeKey","includes","hasTitles","styledLi","containerSize","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","Separator","separatorElement","separator","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","index","state","props","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","length","ol","getDynamicValues","stepsWidth","Number","next","breakpoints","keys","find","_","self","navWidth","min","values","titleWidth","ceil","styledTitle","titleClassName","variant","stepTitle","textAlign","marginRight","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","Simple","numSteps","root","itemsProps","margin","propTypes","string","shape","isRequired","oneOf","arrayOf","disabled","bool","xs","sm","md","lg","xl","name"],"sources":["../../../src/StepNavigation/StepNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { Typography, styled, useTheme } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvTooltip, HvTypography, useWidth } from \"@hitachivantara/uikit-react-core\";\n\nimport HvDefaultNavigation from \"./DefaultNavigation\";\nimport HvSimpleNavigation from \"./SimpleNavigation\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"XS\", \"SM\", \"MD\", \"LG\", \"XL\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tootlip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element;\n * will be 100px. If the step component has titles, each one will have 215px of width by default.\n */\nconst HvStepNavigation = ({\n className,\n classes,\n width,\n steps,\n stepSize,\n showTitles,\n type = \"Default\",\n ...others\n}) => {\n const theme = useTheme();\n // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n const breakpoint = useWidth();\n // step configurations\n const stepSizeKey = stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"SM\" : \"MD\");\n const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n const styledLi = (containerSize) =>\n styled(\"li\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledDiv = (containerSize) =>\n styled(\"div\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledSeparatorElement = (\n title,\n separatorClassName,\n separatorHeight,\n separatorWidth,\n backgroundColor\n ) => {\n const Separator = withStyles({\n separatorElement: {\n height: separatorHeight,\n width: separatorWidth,\n backgroundColor,\n },\n })(({ classes: { separatorElement } }) => (\n <div\n aria-label={`separator-${title}`}\n className={clsx(separatorElement, separatorClassName)}\n />\n ));\n return (\n <li aria-hidden key={`separator-${title}`} className={classes.separator}>\n <Separator />\n </li>\n );\n };\n\n const drawItems = ({\n separatorValues: { minWidth, maxWidth, getColor, height },\n stepValues: { minSize, maxSize, StepComponent },\n }) => {\n const items = steps.reduce((acc, { state, title, separatorClassName, ...props }, index) => {\n const containerSize = state === \"Current\" ? maxSize : minSize;\n const StepContainer = styledLi(containerSize);\n const Step = styledDiv(Math.max(containerSize, 30), Math.max(containerSize, 30));\n const stepProps = {\n ...{\n size: stepSizeKey,\n state,\n title,\n number: index + 1,\n ...props,\n },\n };\n const stepElement = (\n <StepContainer key={`step-${title}`} className={classes.li}>\n {hasTitles ? (\n <StepComponent aria-label={`step-${title}`} {...stepProps} />\n ) : (\n <HvTooltip\n placement=\"bottom\"\n title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n >\n <div aria-label={`step-container-${title}`}>\n <Step className={classes.li}>\n <StepComponent aria-label={`step-${title}`} {...stepProps} />\n </Step>\n </div>\n </HvTooltip>\n )}\n </StepContainer>\n );\n if (index < steps.length - 1) {\n const separatorElement = styledSeparatorElement(\n title,\n separatorClassName,\n height,\n [steps[index + 1].state, state].includes(\"Current\") ? minWidth : maxWidth,\n getColor(state)\n );\n return [...acc, stepElement, separatorElement];\n }\n return [...acc, stepElement];\n }, []);\n\n return <ol className={classes.ol}>{items}</ol>;\n };\n\n const getDynamicValues = (stepsWidth) => {\n const maxWidth =\n width?.[breakpoint] ??\n Math.max(\n Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN,\n SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n );\n const next = theme.breakpoints.keys.find((_, index, self) =>\n index - 1 >= 0 ? self[index - 1] === breakpoint : false\n );\n const navWidth = Math.min(maxWidth, theme.breakpoints.values?.[next] ?? maxWidth);\n const titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n const separatorWidth =\n Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n return { width: navWidth, titleWidth, separatorWidth };\n };\n\n const styledTitle = (titleClassName, variant, title, titleWidth) =>\n withStyles({\n stepTitle: {\n textAlign: \"center\",\n width: titleWidth - TITLE_MARGIN,\n marginRight: TITLE_MARGIN,\n },\n })(({ classes: { stepTitle } }) =>\n title ? (\n <HvTypography variant={variant} className={clsx(stepTitle, titleClassName)}>\n {title}\n </HvTypography>\n ) : null\n );\n\n const getTitles = (getTitleProps) =>\n hasTitles ? (\n <div className={classes.titles}>\n {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n const {\n variant = \"highlightText\",\n title = rawTitle,\n titleWidth = 0,\n } = getTitleProps({\n state,\n rawTitle,\n number: index + 1,\n });\n const Title = styledTitle(titleClassName, variant, title, titleWidth);\n return <Title key={`step-title-${rawTitle}`} />;\n })}\n </div>\n ) : null;\n\n const StepNavigation = {\n Default: HvDefaultNavigation,\n Simple: HvSimpleNavigation,\n }[type];\n\n return (\n <StepNavigation\n {...{\n stepSize: stepSizeKey,\n numSteps: steps.length,\n getTitles,\n getDynamicValues,\n className: clsx(className, classes.root),\n ...others,\n }}\n >\n {({ stepsWidth, navWidth, ...itemsProps }) => (\n <Typography\n component=\"nav\"\n style={{\n width: `${navWidth}px`,\n margin: 0,\n }}\n >\n {drawItems(itemsProps)}\n </Typography>\n )}\n </StepNavigation>\n );\n};\n\nHvStepNavigation.propTypes = {\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root class.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the li element.\n */\n li: PropTypes.string,\n /**\n * Styles applied to the ol element.\n */\n ol: PropTypes.string,\n /**\n * Styles applied to the separator element.\n */\n separator: PropTypes.string,\n /**\n * Styles applied to the titles container element.\n */\n titles: PropTypes.string,\n }).isRequired,\n /**\n * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n */\n type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n /**\n * Steps to show on the component.\n */\n steps: PropTypes.arrayOf(\n PropTypes.shape({\n /**\n * Class names to override styles on the step component.\n */\n className: PropTypes.string,\n /**\n * Class names to override styles on the separator component after the step.\n */\n separatorClassName: PropTypes.string,\n /**\n * Class names to override styles on the title component above the step.\n */\n titleClassName: PropTypes.string,\n /**\n * Title of the step.\n */\n title: PropTypes.string.isRequired,\n /**\n * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}.\n */\n state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n /**\n * Define if a step is disabled/enabled.\n * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n */\n disabled: PropTypes.bool,\n })\n ).isRequired,\n /**\n * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n /**\n * Width of the component element on each breakpoint screen resolution.\n */\n width: PropTypes.shape({\n xs: PropTypes.number,\n sm: PropTypes.number,\n md: PropTypes.number,\n lg: PropTypes.number,\n xl: PropTypes.number,\n }),\n /**\n * Defines either show a title or only a tooltip on each step component\n */\n showTitles: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStepNavigation\" })(HvStepNavigation);\n"],"mappings":"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"}
|