@hitachivantara/uikit-react-lab 4.3.3 → 4.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/dist/NavigationSlider/Header/Header.js +79 -0
- package/dist/NavigationSlider/Header/Header.js.map +1 -0
- package/dist/NavigationSlider/Header/index.js +14 -0
- package/dist/NavigationSlider/Header/index.js.map +1 -0
- package/dist/NavigationSlider/Header/styles.js +36 -0
- package/dist/NavigationSlider/Header/styles.js.map +1 -0
- package/dist/NavigationSlider/Navigation/Navigation.js +102 -0
- package/dist/NavigationSlider/Navigation/Navigation.js.map +1 -0
- package/dist/NavigationSlider/Navigation/index.js +14 -0
- package/dist/NavigationSlider/Navigation/index.js.map +1 -0
- package/dist/NavigationSlider/Navigation/styles.js +30 -0
- package/dist/NavigationSlider/Navigation/styles.js.map +1 -0
- package/dist/NavigationSlider/NavigationSlider.d.ts +30 -0
- package/dist/NavigationSlider/NavigationSlider.js +139 -0
- package/dist/NavigationSlider/NavigationSlider.js.map +1 -0
- package/dist/NavigationSlider/index.d.ts +2 -0
- package/dist/NavigationSlider/index.js +14 -0
- package/dist/NavigationSlider/index.js.map +1 -0
- package/dist/NavigationSlider/styles.js +29 -0
- package/dist/NavigationSlider/styles.js.map +1 -0
- package/dist/NavigationSlider/utils.js +87 -0
- package/dist/NavigationSlider/utils.js.map +1 -0
- package/dist/VerticalNavigation/VerticalNavigation.d.ts +12 -8
- package/dist/VerticalNavigation/VerticalNavigation.js +71 -41
- package/dist/VerticalNavigation/VerticalNavigation.js.map +1 -1
- package/dist/VerticalNavigation/styles.js +11 -36
- package/dist/VerticalNavigation/styles.js.map +1 -1
- package/dist/VerticalNavigation/utils.js +88 -0
- package/dist/VerticalNavigation/utils.js.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +9 -1
- package/dist/index.js.map +1 -1
- package/dist/legacy/NavigationSlider/Header/Header.js +72 -0
- package/dist/legacy/NavigationSlider/Header/Header.js.map +1 -0
- package/dist/legacy/NavigationSlider/Header/index.js +2 -0
- package/dist/legacy/NavigationSlider/Header/index.js.map +1 -0
- package/dist/legacy/NavigationSlider/Header/styles.js +29 -0
- package/dist/legacy/NavigationSlider/Header/styles.js.map +1 -0
- package/dist/legacy/NavigationSlider/Navigation/Navigation.js +94 -0
- package/dist/legacy/NavigationSlider/Navigation/Navigation.js.map +1 -0
- package/dist/legacy/NavigationSlider/Navigation/index.js +2 -0
- package/dist/legacy/NavigationSlider/Navigation/index.js.map +1 -0
- package/dist/legacy/NavigationSlider/Navigation/styles.js +23 -0
- package/dist/legacy/NavigationSlider/Navigation/styles.js.map +1 -0
- package/dist/legacy/NavigationSlider/NavigationSlider.d.ts +30 -0
- package/dist/legacy/NavigationSlider/NavigationSlider.js +123 -0
- package/dist/legacy/NavigationSlider/NavigationSlider.js.map +1 -0
- package/dist/legacy/NavigationSlider/index.d.ts +2 -0
- package/dist/legacy/NavigationSlider/index.js +2 -0
- package/dist/legacy/NavigationSlider/index.js.map +1 -0
- package/dist/legacy/NavigationSlider/styles.js +22 -0
- package/dist/legacy/NavigationSlider/styles.js.map +1 -0
- package/dist/legacy/NavigationSlider/utils.js +78 -0
- package/dist/legacy/NavigationSlider/utils.js.map +1 -0
- package/dist/legacy/VerticalNavigation/VerticalNavigation.d.ts +12 -8
- package/dist/legacy/VerticalNavigation/VerticalNavigation.js +72 -40
- package/dist/legacy/VerticalNavigation/VerticalNavigation.js.map +1 -1
- package/dist/legacy/VerticalNavigation/styles.js +11 -35
- package/dist/legacy/VerticalNavigation/styles.js.map +1 -1
- package/dist/legacy/VerticalNavigation/utils.js +79 -0
- package/dist/legacy/VerticalNavigation/utils.js.map +1 -0
- package/dist/legacy/index.d.ts +3 -0
- package/dist/legacy/index.js +1 -0
- package/dist/legacy/index.js.map +1 -1
- package/dist/modern/NavigationSlider/Header/Header.js +72 -0
- package/dist/modern/NavigationSlider/Header/Header.js.map +1 -0
- package/dist/modern/NavigationSlider/Header/index.js +2 -0
- package/dist/modern/NavigationSlider/Header/index.js.map +1 -0
- package/dist/modern/NavigationSlider/Header/styles.js +25 -0
- package/dist/modern/NavigationSlider/Header/styles.js.map +1 -0
- package/dist/modern/NavigationSlider/Navigation/Navigation.js +88 -0
- package/dist/modern/NavigationSlider/Navigation/Navigation.js.map +1 -0
- package/dist/modern/NavigationSlider/Navigation/index.js +2 -0
- package/dist/modern/NavigationSlider/Navigation/index.js.map +1 -0
- package/dist/modern/NavigationSlider/Navigation/styles.js +21 -0
- package/dist/modern/NavigationSlider/Navigation/styles.js.map +1 -0
- package/dist/modern/NavigationSlider/NavigationSlider.d.ts +30 -0
- package/dist/modern/NavigationSlider/NavigationSlider.js +116 -0
- package/dist/modern/NavigationSlider/NavigationSlider.js.map +1 -0
- package/dist/modern/NavigationSlider/index.d.ts +2 -0
- package/dist/modern/NavigationSlider/index.js +2 -0
- package/dist/modern/NavigationSlider/index.js.map +1 -0
- package/dist/modern/NavigationSlider/styles.js +18 -0
- package/dist/modern/NavigationSlider/styles.js.map +1 -0
- package/dist/modern/NavigationSlider/utils.js +70 -0
- package/dist/modern/NavigationSlider/utils.js.map +1 -0
- package/dist/modern/VerticalNavigation/VerticalNavigation.d.ts +12 -8
- package/dist/modern/VerticalNavigation/VerticalNavigation.js +68 -43
- package/dist/modern/VerticalNavigation/VerticalNavigation.js.map +1 -1
- package/dist/modern/VerticalNavigation/styles.js +11 -28
- package/dist/modern/VerticalNavigation/styles.js.map +1 -1
- package/dist/modern/VerticalNavigation/utils.js +76 -0
- package/dist/modern/VerticalNavigation/utils.js.map +1 -0
- package/dist/modern/index.d.ts +3 -0
- package/dist/modern/index.js +1 -0
- package/dist/modern/index.js.map +1 -1
- package/package.json +4 -4
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../src/index.js"],"sourcesContent":["export { default as HvColorPicker } from \"./ColorPicker\";\nexport { default as HvDrawer } from \"./Drawer\";\nexport { default as HvImageCarousel } from \"./ImageCarousel\";\nexport { default as HvInlineEditor } from \"./InlineEditor\";\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\nexport { default as HvStepNavigation } from \"./StepNavigation\";\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\nexport { default as HvWizard } from \"./Wizard\";\nexport * from \"./Wizard\";\nexport { default as HvVerticalNavigation } from \"./VerticalNavigation\";\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../src/index.js"],"sourcesContent":["export { default as HvColorPicker } from \"./ColorPicker\";\nexport { default as HvDrawer } from \"./Drawer\";\nexport { default as HvImageCarousel } from \"./ImageCarousel\";\nexport { default as HvInlineEditor } from \"./InlineEditor\";\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\nexport { default as HvStepNavigation } from \"./StepNavigation\";\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\nexport { default as HvWizard } from \"./Wizard\";\nexport * from \"./Wizard\";\nexport { default as HvVerticalNavigation } from \"./VerticalNavigation\";\nexport { default as HvNavigationSlider } from \"./NavigationSlider\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;AAAmE;AAAA"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
var _Backwards;
|
|
2
|
+
import "core-js/modules/es.array.concat.js";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { withStyles } from "@mui/styles";
|
|
5
|
+
import PropTypes from "prop-types";
|
|
6
|
+
import { HvButton, HvTypography } from "@hitachivantara/uikit-react-core";
|
|
7
|
+
import { Backwards } from "@hitachivantara/uikit-react-icons";
|
|
8
|
+
import useStyles from "./styles";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
+
var Header = function Header(_ref) {
|
|
12
|
+
var id = _ref.id,
|
|
13
|
+
title = _ref.title,
|
|
14
|
+
showBackButton = _ref.showBackButton,
|
|
15
|
+
headerHeight = _ref.headerHeight,
|
|
16
|
+
onBackButtonClick = _ref.onBackButtonClick;
|
|
17
|
+
var classes = useStyles({
|
|
18
|
+
headerHeight: headerHeight
|
|
19
|
+
})();
|
|
20
|
+
var backButtonClickHandler = function backButtonClickHandler() {
|
|
21
|
+
onBackButtonClick();
|
|
22
|
+
};
|
|
23
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
24
|
+
id: id,
|
|
25
|
+
className: classes.menuContainer,
|
|
26
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
27
|
+
className: classes.button,
|
|
28
|
+
children: showBackButton && /*#__PURE__*/_jsx(HvButton, {
|
|
29
|
+
icon: true,
|
|
30
|
+
onClick: backButtonClickHandler,
|
|
31
|
+
children: _Backwards || (_Backwards = /*#__PURE__*/_jsx(Backwards, {
|
|
32
|
+
iconSize: "XS"
|
|
33
|
+
}))
|
|
34
|
+
})
|
|
35
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
36
|
+
className: "".concat(classes.title, " ").concat(classes.justifyContentCenter),
|
|
37
|
+
children: title && /*#__PURE__*/_jsx(HvTypography, {
|
|
38
|
+
variant: "highlightText",
|
|
39
|
+
children: title
|
|
40
|
+
})
|
|
41
|
+
})]
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
process.env.NODE_ENV !== "production" ? Header.propTypes = {
|
|
45
|
+
/**
|
|
46
|
+
* Id to be applied to the root node of the panel.
|
|
47
|
+
*/
|
|
48
|
+
id: PropTypes.string,
|
|
49
|
+
/**
|
|
50
|
+
* The text to be displayed on the header.
|
|
51
|
+
*/
|
|
52
|
+
title: PropTypes.string,
|
|
53
|
+
/**
|
|
54
|
+
* Flag to show / hide the back button.
|
|
55
|
+
*/
|
|
56
|
+
showBackButton: PropTypes.bool,
|
|
57
|
+
/**
|
|
58
|
+
* The header height.
|
|
59
|
+
*/
|
|
60
|
+
headerHeight: PropTypes.number,
|
|
61
|
+
/**
|
|
62
|
+
* Callback function triggered when the back button is clicked.
|
|
63
|
+
*/
|
|
64
|
+
onBackButtonClick: PropTypes.func
|
|
65
|
+
} : void 0;
|
|
66
|
+
Header.defaultProps = {
|
|
67
|
+
headerHeight: 80
|
|
68
|
+
};
|
|
69
|
+
export default withStyles(useStyles, {
|
|
70
|
+
name: "Header"
|
|
71
|
+
})(Header);
|
|
72
|
+
//# sourceMappingURL=Header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Header.js","names":["React","withStyles","PropTypes","HvButton","HvTypography","Backwards","useStyles","Header","id","title","showBackButton","headerHeight","onBackButtonClick","classes","backButtonClickHandler","menuContainer","button","justifyContentCenter","propTypes","string","bool","number","func","defaultProps","name"],"sources":["../../../../src/NavigationSlider/Header/Header.js"],"sourcesContent":["import React from \"react\";\nimport { withStyles } from \"@mui/styles\";\nimport PropTypes from \"prop-types\";\n\nimport { HvButton, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Backwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport useStyles from \"./styles\";\n\nconst Header = ({ id, title, showBackButton, headerHeight, onBackButtonClick }) => {\n const classes = useStyles({ headerHeight })();\n\n const backButtonClickHandler = () => {\n onBackButtonClick();\n };\n\n return (\n <div id={id} className={classes.menuContainer}>\n <div className={classes.button}>\n {showBackButton && (\n <HvButton icon onClick={backButtonClickHandler}>\n <Backwards iconSize=\"XS\" />\n </HvButton>\n )}\n </div>\n\n <div className={`${classes.title} ${classes.justifyContentCenter}`}>\n {title && <HvTypography variant=\"highlightText\">{title}</HvTypography>}\n </div>\n </div>\n );\n};\n\nHeader.propTypes = {\n /**\n * Id to be applied to the root node of the panel.\n */\n id: PropTypes.string,\n /**\n * The text to be displayed on the header.\n */\n title: PropTypes.string,\n /**\n * Flag to show / hide the back button.\n */\n showBackButton: PropTypes.bool,\n /**\n * The header height.\n */\n headerHeight: PropTypes.number,\n /**\n * Callback function triggered when the back button is clicked.\n */\n onBackButtonClick: PropTypes.func,\n};\n\nHeader.defaultProps = {\n headerHeight: 80,\n};\n\nexport default withStyles(useStyles, { name: \"Header\" })(Header);\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,aAAa;AACxC,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,QAAQ,EAAEC,YAAY,QAAQ,kCAAkC;AACzE,SAASC,SAAS,QAAQ,mCAAmC;AAE7D,OAAOC,SAAS,MAAM,UAAU;AAAC;AAAA;AAEjC,IAAMC,MAAM,GAAG,SAATA,MAAM,OAAuE;EAAA,IAAjEC,EAAE,QAAFA,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEC,cAAc,QAAdA,cAAc;IAAEC,YAAY,QAAZA,YAAY;IAAEC,iBAAiB,QAAjBA,iBAAiB;EAC1E,IAAMC,OAAO,GAAGP,SAAS,CAAC;IAAEK,YAAY,EAAZA;EAAa,CAAC,CAAC,EAAE;EAE7C,IAAMG,sBAAsB,GAAG,SAAzBA,sBAAsB,GAAS;IACnCF,iBAAiB,EAAE;EACrB,CAAC;EAED,oBACE;IAAK,EAAE,EAAEJ,EAAG;IAAC,SAAS,EAAEK,OAAO,CAACE,aAAc;IAAA,wBAC5C;MAAK,SAAS,EAAEF,OAAO,CAACG,MAAO;MAAA,UAC5BN,cAAc,iBACb,KAAC,QAAQ;QAAC,IAAI;QAAC,OAAO,EAAEI,sBAAuB;QAAA,mDAC7C,KAAC,SAAS;UAAC,QAAQ,EAAC;QAAI,EAAG;MAAA;IAE9B,EACG,eAEN;MAAK,SAAS,YAAKD,OAAO,CAACJ,KAAK,cAAII,OAAO,CAACI,oBAAoB,CAAG;MAAA,UAChER,KAAK,iBAAI,KAAC,YAAY;QAAC,OAAO,EAAC,eAAe;QAAA,UAAEA;MAAK;IAAgB,EAClE;EAAA,EACF;AAEV,CAAC;AAED,wCAAAF,MAAM,CAACW,SAAS,GAAG;EACjB;AACF;AACA;EACEV,EAAE,EAAEN,SAAS,CAACiB,MAAM;EACpB;AACF;AACA;EACEV,KAAK,EAAEP,SAAS,CAACiB,MAAM;EACvB;AACF;AACA;EACET,cAAc,EAAER,SAAS,CAACkB,IAAI;EAC9B;AACF;AACA;EACET,YAAY,EAAET,SAAS,CAACmB,MAAM;EAC9B;AACF;AACA;EACET,iBAAiB,EAAEV,SAAS,CAACoB;AAC/B,CAAC;AAEDf,MAAM,CAACgB,YAAY,GAAG;EACpBZ,YAAY,EAAE;AAChB,CAAC;AAED,eAAeV,UAAU,CAACK,SAAS,EAAE;EAAEkB,IAAI,EAAE;AAAS,CAAC,CAAC,CAACjB,MAAM,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../../../src/NavigationSlider/Header/index.js"],"sourcesContent":["export { default } from \"./Header\";\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,UAAU"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { makeStyles } from "@mui/styles";
|
|
2
|
+
var styles = function styles(props) {
|
|
3
|
+
return makeStyles(function (theme) {
|
|
4
|
+
return {
|
|
5
|
+
menuContainer: {
|
|
6
|
+
display: "grid",
|
|
7
|
+
gridTemplateColumns: "min-content auto",
|
|
8
|
+
minHeight: props.headerHeight,
|
|
9
|
+
boxShadow: "inset 0 5px 5px -3px rgb(65 65 65 / 12%)"
|
|
10
|
+
},
|
|
11
|
+
button: {
|
|
12
|
+
display: "flex",
|
|
13
|
+
alignItems: "center"
|
|
14
|
+
},
|
|
15
|
+
title: {
|
|
16
|
+
display: "flex",
|
|
17
|
+
alignItems: "center",
|
|
18
|
+
justifyContent: "center",
|
|
19
|
+
minHeight: theme.hv.spacing.sm,
|
|
20
|
+
padding: theme.hvSpacing(0, "xs")
|
|
21
|
+
},
|
|
22
|
+
justifyContentCenter: {
|
|
23
|
+
justifyContent: "center"
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
export default styles;
|
|
29
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","names":["makeStyles","styles","props","theme","menuContainer","display","gridTemplateColumns","minHeight","headerHeight","boxShadow","button","alignItems","title","justifyContent","hv","spacing","sm","padding","hvSpacing","justifyContentCenter"],"sources":["../../../../src/NavigationSlider/Header/styles.js"],"sourcesContent":["import { makeStyles } from \"@mui/styles\";\n\nconst styles = (props) =>\n makeStyles((theme) => ({\n menuContainer: {\n display: \"grid\",\n gridTemplateColumns: \"min-content auto\",\n minHeight: props.headerHeight,\n boxShadow: \"inset 0 5px 5px -3px rgb(65 65 65 / 12%)\",\n },\n button: {\n display: \"flex\",\n alignItems: \"center\",\n },\n title: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minHeight: theme.hv.spacing.sm,\n padding: theme.hvSpacing(0, \"xs\"),\n },\n justifyContentCenter: { justifyContent: \"center\" },\n }));\n\nexport default styles;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,aAAa;AAExC,IAAMC,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OACnBF,UAAU,CAAC,UAACG,KAAK;IAAA,OAAM;MACrBC,aAAa,EAAE;QACbC,OAAO,EAAE,MAAM;QACfC,mBAAmB,EAAE,kBAAkB;QACvCC,SAAS,EAAEL,KAAK,CAACM,YAAY;QAC7BC,SAAS,EAAE;MACb,CAAC;MACDC,MAAM,EAAE;QACNL,OAAO,EAAE,MAAM;QACfM,UAAU,EAAE;MACd,CAAC;MACDC,KAAK,EAAE;QACLP,OAAO,EAAE,MAAM;QACfM,UAAU,EAAE,QAAQ;QACpBE,cAAc,EAAE,QAAQ;QACxBN,SAAS,EAAEJ,KAAK,CAACW,EAAE,CAACC,OAAO,CAACC,EAAE;QAC9BC,OAAO,EAAEd,KAAK,CAACe,SAAS,CAAC,CAAC,EAAE,IAAI;MAClC,CAAC;MACDC,oBAAoB,EAAE;QAAEN,cAAc,EAAE;MAAS;IACnD,CAAC;EAAA,CAAC,CAAC;AAAA;AAEL,eAAeZ,MAAM"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
var _DropRightXS, _div;
|
|
2
|
+
import "core-js/modules/es.array.map.js";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { withStyles } from "@mui/styles";
|
|
5
|
+
import PropTypes from "prop-types";
|
|
6
|
+
import { HvListContainer, HvListItem, HvButton } from "@hitachivantara/uikit-react-core";
|
|
7
|
+
import { DropRightXS } from "@hitachivantara/uikit-react-icons";
|
|
8
|
+
import styles from "./styles";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
var Navigation = function Navigation(_ref) {
|
|
11
|
+
var id = _ref.id,
|
|
12
|
+
classes = _ref.classes,
|
|
13
|
+
data = _ref.data,
|
|
14
|
+
selected = _ref.selected,
|
|
15
|
+
onNavigateToTarget = _ref.onNavigateToTarget,
|
|
16
|
+
onNavigateToChild = _ref.onNavigateToChild;
|
|
17
|
+
return /*#__PURE__*/_jsx(HvListContainer, {
|
|
18
|
+
interactive: true,
|
|
19
|
+
id: id,
|
|
20
|
+
children: data.map(function (item) {
|
|
21
|
+
return /*#__PURE__*/_jsx(HvListItem, {
|
|
22
|
+
classes: {
|
|
23
|
+
root: classes.listItemRoot,
|
|
24
|
+
selected: classes.listItemSelected
|
|
25
|
+
},
|
|
26
|
+
onClick: function onClick(event) {
|
|
27
|
+
return onNavigateToTarget(event, item);
|
|
28
|
+
},
|
|
29
|
+
selected: selected === item.id,
|
|
30
|
+
startAdornment: item.icon,
|
|
31
|
+
endAdornment: item.data && item.data.length > 0 ? /*#__PURE__*/_jsx(HvButton, {
|
|
32
|
+
icon: true,
|
|
33
|
+
onClick: function onClick(event) {
|
|
34
|
+
return onNavigateToChild(event, item);
|
|
35
|
+
},
|
|
36
|
+
children: _DropRightXS || (_DropRightXS = /*#__PURE__*/_jsx(DropRightXS, {}))
|
|
37
|
+
}) : _div || (_div = /*#__PURE__*/_jsx("div", {})),
|
|
38
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
39
|
+
children: item.label
|
|
40
|
+
})
|
|
41
|
+
}, item.id);
|
|
42
|
+
})
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
process.env.NODE_ENV !== "production" ? Navigation.propTypes = {
|
|
46
|
+
/**
|
|
47
|
+
* Id to be applied to the root node of the panel.
|
|
48
|
+
*/
|
|
49
|
+
id: PropTypes.string,
|
|
50
|
+
/**
|
|
51
|
+
* A Jss Object used to override or extend the styles applied.
|
|
52
|
+
*/
|
|
53
|
+
classes: PropTypes.shape({
|
|
54
|
+
/**
|
|
55
|
+
* styles object applied to the root
|
|
56
|
+
*/
|
|
57
|
+
listItemRoot: PropTypes.string,
|
|
58
|
+
listItemSelected: PropTypes.string
|
|
59
|
+
}).isRequired,
|
|
60
|
+
/**
|
|
61
|
+
* An array containing the data for each menu item.
|
|
62
|
+
*
|
|
63
|
+
* id - the id to be applied to the root element.
|
|
64
|
+
* label - the label to be rendered on the menu item.
|
|
65
|
+
* icon - the icon react element
|
|
66
|
+
* data - sub-menu items
|
|
67
|
+
* href - the url used for navigation.
|
|
68
|
+
* target - the behavior when opening an url.
|
|
69
|
+
*/
|
|
70
|
+
data: PropTypes.arrayOf(PropTypes.shape({
|
|
71
|
+
id: PropTypes.string.isRequired,
|
|
72
|
+
label: PropTypes.string.isRequired,
|
|
73
|
+
icon: PropTypes.node,
|
|
74
|
+
data: PropTypes.array,
|
|
75
|
+
href: PropTypes.string,
|
|
76
|
+
target: PropTypes.string
|
|
77
|
+
})).isRequired,
|
|
78
|
+
/**
|
|
79
|
+
* The selected item id.
|
|
80
|
+
*/
|
|
81
|
+
selected: PropTypes.string,
|
|
82
|
+
/**
|
|
83
|
+
* Triggered when the item is clicked.
|
|
84
|
+
*/
|
|
85
|
+
onNavigateToTarget: PropTypes.func,
|
|
86
|
+
/**
|
|
87
|
+
* Triggered when the navigate to child button is clicked.
|
|
88
|
+
*/
|
|
89
|
+
onNavigateToChild: PropTypes.func
|
|
90
|
+
} : void 0;
|
|
91
|
+
export default withStyles(styles, {
|
|
92
|
+
name: "Navigation"
|
|
93
|
+
})(Navigation);
|
|
94
|
+
//# sourceMappingURL=Navigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Navigation.js","names":["React","withStyles","PropTypes","HvListContainer","HvListItem","HvButton","DropRightXS","styles","Navigation","id","classes","data","selected","onNavigateToTarget","onNavigateToChild","map","item","root","listItemRoot","listItemSelected","event","icon","length","label","propTypes","string","shape","isRequired","arrayOf","node","array","href","target","func","name"],"sources":["../../../../src/NavigationSlider/Navigation/Navigation.js"],"sourcesContent":["import React from \"react\";\nimport { withStyles } from \"@mui/styles\";\nimport PropTypes from \"prop-types\";\n\nimport { HvListContainer, HvListItem, HvButton } from \"@hitachivantara/uikit-react-core\";\nimport { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport styles from \"./styles\";\n\nconst Navigation = ({ id, classes, data, selected, onNavigateToTarget, onNavigateToChild }) => {\n return (\n <HvListContainer interactive id={id}>\n {data.map((item) => (\n <HvListItem\n key={item.id}\n classes={{\n root: classes.listItemRoot,\n selected: classes.listItemSelected,\n }}\n onClick={(event) => onNavigateToTarget(event, item)}\n selected={selected === item.id}\n startAdornment={item.icon}\n endAdornment={\n item.data && item.data.length > 0 ? (\n <HvButton icon onClick={(event) => onNavigateToChild(event, item)}>\n <DropRightXS />\n </HvButton>\n ) : (\n <div />\n )\n }\n >\n <span>{item.label}</span>\n </HvListItem>\n ))}\n </HvListContainer>\n );\n};\n\nNavigation.propTypes = {\n /**\n * Id to be applied to the root node of the panel.\n */\n id: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * styles object applied to the root\n */\n listItemRoot: PropTypes.string,\n listItemSelected: PropTypes.string,\n }).isRequired,\n /**\n * An array containing the data for each menu item.\n *\n * id - the id to be applied to the root element.\n * label - the label to be rendered on the menu item.\n * icon - the icon react element\n * data - sub-menu items\n * href - the url used for navigation.\n * target - the behavior when opening an url.\n */\n data: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n icon: PropTypes.node,\n data: PropTypes.array,\n href: PropTypes.string,\n target: PropTypes.string,\n })\n ).isRequired,\n /**\n * The selected item id.\n */\n selected: PropTypes.string,\n /**\n * Triggered when the item is clicked.\n */\n onNavigateToTarget: PropTypes.func,\n /**\n * Triggered when the navigate to child button is clicked.\n */\n onNavigateToChild: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"Navigation\" })(Navigation);\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,aAAa;AACxC,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,eAAe,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,kCAAkC;AACxF,SAASC,WAAW,QAAQ,mCAAmC;AAE/D,OAAOC,MAAM,MAAM,UAAU;AAAC;AAE9B,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAA+E;EAAA,IAAzEC,EAAE,QAAFA,EAAE;IAAEC,OAAO,QAAPA,OAAO;IAAEC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,kBAAkB,QAAlBA,kBAAkB;IAAEC,iBAAiB,QAAjBA,iBAAiB;EACtF,oBACE,KAAC,eAAe;IAAC,WAAW;IAAC,EAAE,EAAEL,EAAG;IAAA,UACjCE,IAAI,CAACI,GAAG,CAAC,UAACC,IAAI;MAAA,oBACb,KAAC,UAAU;QAET,OAAO,EAAE;UACPC,IAAI,EAAEP,OAAO,CAACQ,YAAY;UAC1BN,QAAQ,EAAEF,OAAO,CAACS;QACpB,CAAE;QACF,OAAO,EAAE,iBAACC,KAAK;UAAA,OAAKP,kBAAkB,CAACO,KAAK,EAAEJ,IAAI,CAAC;QAAA,CAAC;QACpD,QAAQ,EAAEJ,QAAQ,KAAKI,IAAI,CAACP,EAAG;QAC/B,cAAc,EAAEO,IAAI,CAACK,IAAK;QAC1B,YAAY,EACVL,IAAI,CAACL,IAAI,IAAIK,IAAI,CAACL,IAAI,CAACW,MAAM,GAAG,CAAC,gBAC/B,KAAC,QAAQ;UAAC,IAAI;UAAC,OAAO,EAAE,iBAACF,KAAK;YAAA,OAAKN,iBAAiB,CAACM,KAAK,EAAEJ,IAAI,CAAC;UAAA,CAAC;UAAA,uDAChE,KAAC,WAAW,KAAG;QAAA,EACN,gCAEX,eAAO,CAEV;QAAA,uBAED;UAAA,UAAOA,IAAI,CAACO;QAAK;MAAQ,GAlBpBP,IAAI,CAACP,EAAE,CAmBD;IAAA,CACd;EAAC,EACc;AAEtB,CAAC;AAED,wCAAAD,UAAU,CAACgB,SAAS,GAAG;EACrB;AACF;AACA;EACEf,EAAE,EAAEP,SAAS,CAACuB,MAAM;EACpB;AACF;AACA;EACEf,OAAO,EAAER,SAAS,CAACwB,KAAK,CAAC;IACvB;AACJ;AACA;IACIR,YAAY,EAAEhB,SAAS,CAACuB,MAAM;IAC9BN,gBAAgB,EAAEjB,SAAS,CAACuB;EAC9B,CAAC,CAAC,CAACE,UAAU;EACb;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEhB,IAAI,EAAET,SAAS,CAAC0B,OAAO,CACrB1B,SAAS,CAACwB,KAAK,CAAC;IACdjB,EAAE,EAAEP,SAAS,CAACuB,MAAM,CAACE,UAAU;IAC/BJ,KAAK,EAAErB,SAAS,CAACuB,MAAM,CAACE,UAAU;IAClCN,IAAI,EAAEnB,SAAS,CAAC2B,IAAI;IACpBlB,IAAI,EAAET,SAAS,CAAC4B,KAAK;IACrBC,IAAI,EAAE7B,SAAS,CAACuB,MAAM;IACtBO,MAAM,EAAE9B,SAAS,CAACuB;EACpB,CAAC,CAAC,CACH,CAACE,UAAU;EACZ;AACF;AACA;EACEf,QAAQ,EAAEV,SAAS,CAACuB,MAAM;EAC1B;AACF;AACA;EACEZ,kBAAkB,EAAEX,SAAS,CAAC+B,IAAI;EAClC;AACF;AACA;EACEnB,iBAAiB,EAAEZ,SAAS,CAAC+B;AAC/B,CAAC;AAED,eAAehC,UAAU,CAACM,MAAM,EAAE;EAAE2B,IAAI,EAAE;AAAa,CAAC,CAAC,CAAC1B,UAAU,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../../../src/NavigationSlider/Navigation/index.js"],"sourcesContent":["export { default } from \"./Navigation\";\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,cAAc"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
var styles = function styles(theme) {
|
|
2
|
+
return {
|
|
3
|
+
listItemRoot: {
|
|
4
|
+
display: "flex",
|
|
5
|
+
alignItems: "center",
|
|
6
|
+
borderLeft: "2px solid transparent",
|
|
7
|
+
minHeight: "52px",
|
|
8
|
+
marginBottom: "8px",
|
|
9
|
+
"& > button": {
|
|
10
|
+
marginLeft: "auto"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
listItemSelected: {
|
|
14
|
+
background: theme.hv.palette.atmosphere.atmo3,
|
|
15
|
+
borderLeft: "2px solid ".concat(theme.hv.palette.accent.acce3),
|
|
16
|
+
"& *": {
|
|
17
|
+
background: theme.hv.palette.atmosphere.atmo3
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
export default styles;
|
|
23
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","theme","listItemRoot","display","alignItems","borderLeft","minHeight","marginBottom","marginLeft","listItemSelected","background","hv","palette","atmosphere","atmo3","accent","acce3"],"sources":["../../../../src/NavigationSlider/Navigation/styles.js"],"sourcesContent":["const styles = (theme) => ({\n listItemRoot: {\n display: \"flex\",\n alignItems: \"center\",\n borderLeft: `2px solid transparent`,\n minHeight: \"52px\",\n marginBottom: \"8px\",\n \"& > button\": {\n marginLeft: \"auto\",\n },\n },\n listItemSelected: {\n background: theme.hv.palette.atmosphere.atmo3,\n borderLeft: `2px solid ${theme.hv.palette.accent.acce3}`,\n \"& *\": {\n background: theme.hv.palette.atmosphere.atmo3,\n },\n },\n});\n\nexport default styles;\n"],"mappings":"AAAA,IAAMA,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OAAM;IACzBC,YAAY,EAAE;MACZC,OAAO,EAAE,MAAM;MACfC,UAAU,EAAE,QAAQ;MACpBC,UAAU,yBAAyB;MACnCC,SAAS,EAAE,MAAM;MACjBC,YAAY,EAAE,KAAK;MACnB,YAAY,EAAE;QACZC,UAAU,EAAE;MACd;IACF,CAAC;IACDC,gBAAgB,EAAE;MAChBC,UAAU,EAAET,KAAK,CAACU,EAAE,CAACC,OAAO,CAACC,UAAU,CAACC,KAAK;MAC7CT,UAAU,sBAAeJ,KAAK,CAACU,EAAE,CAACC,OAAO,CAACG,MAAM,CAACC,KAAK,CAAE;MACxD,KAAK,EAAE;QACLN,UAAU,EAAET,KAAK,CAACU,EAAE,CAACC,OAAO,CAACC,UAAU,CAACC;MAC1C;IACF;EACF,CAAC;AAAA,CAAC;AAEF,eAAed,MAAM"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { NavigationData } from "@hitachivantara/uikit-react-core";
|
|
2
|
+
|
|
3
|
+
export interface HvVerticalNavigationProps {
|
|
4
|
+
/**
|
|
5
|
+
* Id to be applied to the root node of the panel.
|
|
6
|
+
*/
|
|
7
|
+
id?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Called when a menu item is clicked.
|
|
10
|
+
*/
|
|
11
|
+
onNavigationChange?: Function;
|
|
12
|
+
/**
|
|
13
|
+
* An array containing the data for each menu item.
|
|
14
|
+
*/
|
|
15
|
+
data: NavigationData[];
|
|
16
|
+
/**
|
|
17
|
+
* The ID of the selected page.
|
|
18
|
+
*/
|
|
19
|
+
selected?: string;
|
|
20
|
+
/**
|
|
21
|
+
* The top value where the panel will be rendered. Default is 44 as it is the height of the Header component.
|
|
22
|
+
*/
|
|
23
|
+
topPosition?: number;
|
|
24
|
+
/**
|
|
25
|
+
* The width of the panel. Default value is 300.
|
|
26
|
+
*/
|
|
27
|
+
panelWidth?: number;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export default function HvVerticalNavigation(props: HvVerticalNavigationProps): JSX.Element | null;
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
+
import React, { useState, useMemo } from "react";
|
|
3
|
+
import { withStyles } from "@mui/styles";
|
|
4
|
+
import PropTypes from "prop-types";
|
|
5
|
+
import { HvVerticalNavigation as HvVerticalNavigationCore } from "@hitachivantara/uikit-react-core";
|
|
6
|
+
import Header from "./Header";
|
|
7
|
+
import Navigation from "./Navigation";
|
|
8
|
+
import { fillDataWithParentId, getNavigationItemById, getParentItemById } from "./utils";
|
|
9
|
+
import useStyles from "./styles";
|
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
var HvNavigationSlider = function HvNavigationSlider(_ref) {
|
|
13
|
+
var id = _ref.id,
|
|
14
|
+
onNavigationChange = _ref.onNavigationChange,
|
|
15
|
+
data = _ref.data,
|
|
16
|
+
title = _ref.title,
|
|
17
|
+
selected = _ref.selected,
|
|
18
|
+
topPosition = _ref.topPosition,
|
|
19
|
+
panelWidth = _ref.panelWidth;
|
|
20
|
+
var classes = useStyles({
|
|
21
|
+
topPosition: topPosition,
|
|
22
|
+
panelWidth: panelWidth
|
|
23
|
+
})();
|
|
24
|
+
var withParentData = useMemo(function () {
|
|
25
|
+
return fillDataWithParentId(data);
|
|
26
|
+
}, [data]);
|
|
27
|
+
var initialParentItem = useMemo(function () {
|
|
28
|
+
return getParentItemById(withParentData, selected);
|
|
29
|
+
}, [withParentData, selected]);
|
|
30
|
+
var _useState = useState(initialParentItem),
|
|
31
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
32
|
+
parentItem = _useState2[0],
|
|
33
|
+
setParentItem = _useState2[1];
|
|
34
|
+
var navigateToParentHandler = function navigateToParentHandler() {
|
|
35
|
+
setParentItem(getParentItemById(withParentData, parentItem.id));
|
|
36
|
+
};
|
|
37
|
+
var navigateToTargetHandler = function navigateToTargetHandler(event, selectedItem) {
|
|
38
|
+
onNavigationChange(event, selectedItem);
|
|
39
|
+
};
|
|
40
|
+
var navigateToChildHandler = function navigateToChildHandler(event, item) {
|
|
41
|
+
setParentItem(getNavigationItemById(withParentData, item.id));
|
|
42
|
+
event.stopPropagation();
|
|
43
|
+
};
|
|
44
|
+
return /*#__PURE__*/_jsx("div", {
|
|
45
|
+
id: id,
|
|
46
|
+
className: classes.container,
|
|
47
|
+
children: /*#__PURE__*/_jsxs(HvVerticalNavigationCore, {
|
|
48
|
+
className: classes.root,
|
|
49
|
+
children: [/*#__PURE__*/_jsx(Header, {
|
|
50
|
+
onBackButtonClick: navigateToParentHandler,
|
|
51
|
+
showBackButton: !!(parentItem !== null && parentItem !== void 0 && parentItem.label),
|
|
52
|
+
title: (parentItem === null || parentItem === void 0 ? void 0 : parentItem.label) || title
|
|
53
|
+
}), /*#__PURE__*/_jsx(Navigation, {
|
|
54
|
+
data: parentItem.data || withParentData,
|
|
55
|
+
selected: selected,
|
|
56
|
+
onNavigateToTarget: navigateToTargetHandler,
|
|
57
|
+
onNavigateToChild: navigateToChildHandler
|
|
58
|
+
})]
|
|
59
|
+
})
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
process.env.NODE_ENV !== "production" ? HvNavigationSlider.propTypes = {
|
|
63
|
+
/**
|
|
64
|
+
* Id to be applied to the root node of the panel.
|
|
65
|
+
*/
|
|
66
|
+
id: PropTypes.string,
|
|
67
|
+
/**
|
|
68
|
+
* A Jss Object used to override or extend the styles applied.
|
|
69
|
+
*/
|
|
70
|
+
classes: PropTypes.shape({
|
|
71
|
+
/**
|
|
72
|
+
* styles object applied to the root
|
|
73
|
+
*/
|
|
74
|
+
container: PropTypes.string,
|
|
75
|
+
root: PropTypes.string,
|
|
76
|
+
footer: PropTypes.string
|
|
77
|
+
}).isRequired,
|
|
78
|
+
/**
|
|
79
|
+
* Called when a menu item is clicked.
|
|
80
|
+
*/
|
|
81
|
+
onNavigationChange: PropTypes.func,
|
|
82
|
+
/**
|
|
83
|
+
* An array containing the data for each menu item.
|
|
84
|
+
*
|
|
85
|
+
* id - the id to be applied to the root element.
|
|
86
|
+
* label - the label to be rendered on the menu item.
|
|
87
|
+
* data - sub-menu items
|
|
88
|
+
* href - the url used for navigation.
|
|
89
|
+
* target - the behavior when opening an url.
|
|
90
|
+
*/
|
|
91
|
+
data: PropTypes.arrayOf(PropTypes.shape({
|
|
92
|
+
id: PropTypes.string.isRequired,
|
|
93
|
+
label: PropTypes.string.isRequired,
|
|
94
|
+
icon: PropTypes.node,
|
|
95
|
+
data: PropTypes.array,
|
|
96
|
+
href: PropTypes.string,
|
|
97
|
+
target: PropTypes.string
|
|
98
|
+
})).isRequired,
|
|
99
|
+
/**
|
|
100
|
+
* The text to be displayed when at the root of the structure.
|
|
101
|
+
*/
|
|
102
|
+
title: PropTypes.string,
|
|
103
|
+
/**
|
|
104
|
+
* The ID of the selected page.
|
|
105
|
+
*/
|
|
106
|
+
selected: PropTypes.string,
|
|
107
|
+
/**
|
|
108
|
+
* The top value where the panel will be rendered. Default is 44 as it is the height of the Header component.
|
|
109
|
+
*/
|
|
110
|
+
topPosition: PropTypes.number,
|
|
111
|
+
/**
|
|
112
|
+
* The width of the panel when expanded. Default value is 300.
|
|
113
|
+
*/
|
|
114
|
+
panelWidth: PropTypes.number
|
|
115
|
+
} : void 0;
|
|
116
|
+
HvNavigationSlider.defaultProps = {
|
|
117
|
+
topPosition: 44,
|
|
118
|
+
panelWidth: 300
|
|
119
|
+
};
|
|
120
|
+
export default withStyles(useStyles, {
|
|
121
|
+
name: "HvNavigationSlider"
|
|
122
|
+
})(HvNavigationSlider);
|
|
123
|
+
//# sourceMappingURL=NavigationSlider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationSlider.js","names":["React","useState","useMemo","withStyles","PropTypes","HvVerticalNavigation","HvVerticalNavigationCore","Header","Navigation","fillDataWithParentId","getNavigationItemById","getParentItemById","useStyles","HvNavigationSlider","id","onNavigationChange","data","title","selected","topPosition","panelWidth","classes","withParentData","initialParentItem","parentItem","setParentItem","navigateToParentHandler","navigateToTargetHandler","event","selectedItem","navigateToChildHandler","item","stopPropagation","container","root","label","propTypes","string","shape","footer","isRequired","func","arrayOf","icon","node","array","href","target","number","defaultProps","name"],"sources":["../../../src/NavigationSlider/NavigationSlider.js"],"sourcesContent":["import React, { useState, useMemo } from \"react\";\nimport { withStyles } from \"@mui/styles\";\nimport PropTypes from \"prop-types\";\n\nimport { HvVerticalNavigation as HvVerticalNavigationCore } from \"@hitachivantara/uikit-react-core\";\n\nimport Header from \"./Header\";\nimport Navigation from \"./Navigation\";\nimport { fillDataWithParentId, getNavigationItemById, getParentItemById } from \"./utils\";\n\nimport useStyles from \"./styles\";\n\nconst HvNavigationSlider = ({\n id,\n onNavigationChange,\n data,\n title,\n selected,\n topPosition,\n panelWidth,\n}) => {\n const classes = useStyles({ topPosition, panelWidth })();\n\n const withParentData = useMemo(() => fillDataWithParentId(data), [data]);\n\n const initialParentItem = useMemo(\n () => getParentItemById(withParentData, selected),\n [withParentData, selected]\n );\n\n const [parentItem, setParentItem] = useState(initialParentItem);\n\n const navigateToParentHandler = () => {\n setParentItem(getParentItemById(withParentData, parentItem.id));\n };\n\n const navigateToTargetHandler = (event, selectedItem) => {\n onNavigationChange(event, selectedItem);\n };\n\n const navigateToChildHandler = (event, item) => {\n setParentItem(getNavigationItemById(withParentData, item.id));\n\n event.stopPropagation();\n };\n\n return (\n <div id={id} className={classes.container}>\n <HvVerticalNavigationCore className={classes.root}>\n <Header\n onBackButtonClick={navigateToParentHandler}\n showBackButton={!!parentItem?.label}\n title={parentItem?.label || title}\n />\n\n <Navigation\n data={parentItem.data || withParentData}\n selected={selected}\n onNavigateToTarget={navigateToTargetHandler}\n onNavigateToChild={navigateToChildHandler}\n />\n </HvVerticalNavigationCore>\n </div>\n );\n};\n\nHvNavigationSlider.propTypes = {\n /**\n * Id to be applied to the root node of the panel.\n */\n id: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * styles object applied to the root\n */\n container: PropTypes.string,\n root: PropTypes.string,\n footer: PropTypes.string,\n }).isRequired,\n /**\n * Called when a menu item is clicked.\n */\n onNavigationChange: PropTypes.func,\n /**\n * An array containing the data for each menu item.\n *\n * id - the id to be applied to the root element.\n * label - the label to be rendered on the menu item.\n * data - sub-menu items\n * href - the url used for navigation.\n * target - the behavior when opening an url.\n */\n data: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n icon: PropTypes.node,\n data: PropTypes.array,\n href: PropTypes.string,\n target: PropTypes.string,\n })\n ).isRequired,\n /**\n * The text to be displayed when at the root of the structure.\n */\n title: PropTypes.string,\n /**\n * The ID of the selected page.\n */\n selected: PropTypes.string,\n /**\n * The top value where the panel will be rendered. Default is 44 as it is the height of the Header component.\n */\n topPosition: PropTypes.number,\n /**\n * The width of the panel when expanded. Default value is 300.\n */\n panelWidth: PropTypes.number,\n};\n\nHvNavigationSlider.defaultProps = {\n topPosition: 44,\n panelWidth: 300,\n};\n\nexport default withStyles(useStyles, { name: \"HvNavigationSlider\" })(HvNavigationSlider);\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../../src/NavigationSlider/index.js"],"sourcesContent":["export { default } from \"./NavigationSlider\";\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,oBAAoB"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { makeStyles } from "@mui/styles";
|
|
2
|
+
var styles = function styles(props) {
|
|
3
|
+
return makeStyles(function () {
|
|
4
|
+
return {
|
|
5
|
+
container: {
|
|
6
|
+
position: "fixed",
|
|
7
|
+
left: 0,
|
|
8
|
+
top: props.topPosition
|
|
9
|
+
},
|
|
10
|
+
root: {
|
|
11
|
+
width: props.panelWidth,
|
|
12
|
+
height: "calc(100vh - ".concat(props.topPosition, "px)"),
|
|
13
|
+
justifyContent: "flex-start"
|
|
14
|
+
},
|
|
15
|
+
footer: {
|
|
16
|
+
marginTop: "auto"
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
export default styles;
|
|
22
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","names":["makeStyles","styles","props","container","position","left","top","topPosition","root","width","panelWidth","height","justifyContent","footer","marginTop"],"sources":["../../../src/NavigationSlider/styles.js"],"sourcesContent":["import { makeStyles } from \"@mui/styles\";\n\nconst styles = (props) =>\n makeStyles(() => ({\n container: {\n position: \"fixed\",\n left: 0,\n top: props.topPosition,\n },\n root: {\n width: props.panelWidth,\n height: `calc(100vh - ${props.topPosition}px)`,\n justifyContent: \"flex-start\",\n },\n footer: {\n marginTop: \"auto\",\n },\n }));\n\nexport default styles;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,aAAa;AAExC,IAAMC,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OACnBF,UAAU,CAAC;IAAA,OAAO;MAChBG,SAAS,EAAE;QACTC,QAAQ,EAAE,OAAO;QACjBC,IAAI,EAAE,CAAC;QACPC,GAAG,EAAEJ,KAAK,CAACK;MACb,CAAC;MACDC,IAAI,EAAE;QACJC,KAAK,EAAEP,KAAK,CAACQ,UAAU;QACvBC,MAAM,yBAAkBT,KAAK,CAACK,WAAW,QAAK;QAC9CK,cAAc,EAAE;MAClB,CAAC;MACDC,MAAM,EAAE;QACNC,SAAS,EAAE;MACb;IACF,CAAC;EAAA,CAAC,CAAC;AAAA;AAEL,eAAeb,MAAM"}
|
|
@@ -0,0 +1,78 @@
|
|
|
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.to-string.js";
|
|
5
|
+
import "core-js/modules/es.object.get-own-property-descriptor.js";
|
|
6
|
+
import "core-js/modules/web.dom-collections.for-each.js";
|
|
7
|
+
import "core-js/modules/es.object.get-own-property-descriptors.js";
|
|
8
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
9
|
+
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; }
|
|
10
|
+
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; }
|
|
11
|
+
import "core-js/modules/es.array.map.js";
|
|
12
|
+
/**
|
|
13
|
+
* Recursively searches in a collection the first element where the property matches the specified value.
|
|
14
|
+
*
|
|
15
|
+
* @param collection - Collection where the search will be performed
|
|
16
|
+
* @param childrenPropName - The children property name where the recursive search will be performed
|
|
17
|
+
* @param propName - The name of the property to be used on the search
|
|
18
|
+
* @param propValue - The value of the property to be used on the search
|
|
19
|
+
* @returns The element that matches the requirement or null if none is found
|
|
20
|
+
*/
|
|
21
|
+
var searchInCollection = function searchInCollection(collection, childrenPropName, propName, propValue) {
|
|
22
|
+
if (collection[propName] === propValue) {
|
|
23
|
+
return collection;
|
|
24
|
+
}
|
|
25
|
+
var items = collection[childrenPropName] || collection;
|
|
26
|
+
var foundItem = null;
|
|
27
|
+
for (var index = 0; foundItem === null && index < items.length; index += 1) {
|
|
28
|
+
foundItem = searchInCollection(items[index], childrenPropName, propName, propValue);
|
|
29
|
+
}
|
|
30
|
+
return foundItem;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Returns the navigation item with the specified id.
|
|
35
|
+
*
|
|
36
|
+
* @param navigationItems - The collection of navigation items.
|
|
37
|
+
* @param navigationItemId - The id to be used on the search
|
|
38
|
+
* @returns The navigation item with the specified id.
|
|
39
|
+
*/
|
|
40
|
+
var getNavigationItemById = function getNavigationItemById(navigationItems, navigationItemId) {
|
|
41
|
+
return searchInCollection(navigationItems, "data", "id", navigationItemId);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Returns the parent item for the received item id.
|
|
46
|
+
*
|
|
47
|
+
* @param navigationItems - The collection of navigation items.
|
|
48
|
+
* @param navigationItemId - The id to be used on the search
|
|
49
|
+
* @returns The parent navigation item.
|
|
50
|
+
*/
|
|
51
|
+
var getParentItemById = function getParentItemById(navigationItems, navigationItemId) {
|
|
52
|
+
var parentId = getNavigationItemById(navigationItems, navigationItemId).parent;
|
|
53
|
+
return getNavigationItemById(navigationItems, parentId);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* Fills the data structure with the parent id on each one of the nodes.
|
|
58
|
+
*
|
|
59
|
+
* @param navigationItems - The collection of navigation items.
|
|
60
|
+
* @param parentItemId - The parent id to be added.
|
|
61
|
+
* @returns The structure now filled with the parent id.
|
|
62
|
+
*/
|
|
63
|
+
var fillDataWithParentId = function fillDataWithParentId(navigationItems, parentItemId) {
|
|
64
|
+
return navigationItems.map(function (item) {
|
|
65
|
+
var _item$data;
|
|
66
|
+
if ((item === null || item === void 0 ? void 0 : (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.length) > 0) {
|
|
67
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
68
|
+
parent: parentItemId,
|
|
69
|
+
data: fillDataWithParentId(item.data, item.id)
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
73
|
+
parent: parentItemId
|
|
74
|
+
});
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
export { getNavigationItemById, getParentItemById, fillDataWithParentId };
|
|
78
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","names":["searchInCollection","collection","childrenPropName","propName","propValue","items","foundItem","index","length","getNavigationItemById","navigationItems","navigationItemId","getParentItemById","parentId","parent","fillDataWithParentId","parentItemId","map","item","data","id"],"sources":["../../../src/NavigationSlider/utils.js"],"sourcesContent":["/**\n * Recursively searches in a collection the first element where the property matches the specified value.\n *\n * @param collection - Collection where the search will be performed\n * @param childrenPropName - The children property name where the recursive search will be performed\n * @param propName - The name of the property to be used on the search\n * @param propValue - The value of the property to be used on the search\n * @returns The element that matches the requirement or null if none is found\n */\nconst searchInCollection = (collection, childrenPropName, propName, propValue) => {\n if (collection[propName] === propValue) {\n return collection;\n }\n\n const items = collection[childrenPropName] || collection;\n\n let foundItem = null;\n for (let index = 0; foundItem === null && index < items.length; index += 1) {\n foundItem = searchInCollection(items[index], childrenPropName, propName, propValue);\n }\n return foundItem;\n};\n\n/**\n * Returns the navigation item with the specified id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The navigation item with the specified id.\n */\nconst getNavigationItemById = (navigationItems, navigationItemId) => {\n return searchInCollection(navigationItems, \"data\", \"id\", navigationItemId);\n};\n\n/**\n * Returns the parent item for the received item id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The parent navigation item.\n */\nconst getParentItemById = (navigationItems, navigationItemId) => {\n const parentId = getNavigationItemById(navigationItems, navigationItemId).parent;\n return getNavigationItemById(navigationItems, parentId);\n};\n\n/**\n * Fills the data structure with the parent id on each one of the nodes.\n *\n * @param navigationItems - The collection of navigation items.\n * @param parentItemId - The parent id to be added.\n * @returns The structure now filled with the parent id.\n */\nconst fillDataWithParentId = (navigationItems, parentItemId) => {\n return navigationItems.map((item) => {\n if (item?.data?.length > 0) {\n return { ...item, parent: parentItemId, data: fillDataWithParentId(item.data, item.id) };\n }\n return { ...item, parent: parentItemId };\n });\n};\n\nexport { getNavigationItemById, getParentItemById, fillDataWithParentId };\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,UAAU,EAAEC,gBAAgB,EAAEC,QAAQ,EAAEC,SAAS,EAAK;EAChF,IAAIH,UAAU,CAACE,QAAQ,CAAC,KAAKC,SAAS,EAAE;IACtC,OAAOH,UAAU;EACnB;EAEA,IAAMI,KAAK,GAAGJ,UAAU,CAACC,gBAAgB,CAAC,IAAID,UAAU;EAExD,IAAIK,SAAS,GAAG,IAAI;EACpB,KAAK,IAAIC,KAAK,GAAG,CAAC,EAAED,SAAS,KAAK,IAAI,IAAIC,KAAK,GAAGF,KAAK,CAACG,MAAM,EAAED,KAAK,IAAI,CAAC,EAAE;IAC1ED,SAAS,GAAGN,kBAAkB,CAACK,KAAK,CAACE,KAAK,CAAC,EAAEL,gBAAgB,EAAEC,QAAQ,EAAEC,SAAS,CAAC;EACrF;EACA,OAAOE,SAAS;AAClB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMG,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAIC,eAAe,EAAEC,gBAAgB,EAAK;EACnE,OAAOX,kBAAkB,CAACU,eAAe,EAAE,MAAM,EAAE,IAAI,EAAEC,gBAAgB,CAAC;AAC5E,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIF,eAAe,EAAEC,gBAAgB,EAAK;EAC/D,IAAME,QAAQ,GAAGJ,qBAAqB,CAACC,eAAe,EAAEC,gBAAgB,CAAC,CAACG,MAAM;EAChF,OAAOL,qBAAqB,CAACC,eAAe,EAAEG,QAAQ,CAAC;AACzD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAME,oBAAoB,GAAG,SAAvBA,oBAAoB,CAAIL,eAAe,EAAEM,YAAY,EAAK;EAC9D,OAAON,eAAe,CAACO,GAAG,CAAC,UAACC,IAAI,EAAK;IAAA;IACnC,IAAI,CAAAA,IAAI,aAAJA,IAAI,qCAAJA,IAAI,CAAEC,IAAI,+CAAV,WAAYX,MAAM,IAAG,CAAC,EAAE;MAC1B,uCAAYU,IAAI;QAAEJ,MAAM,EAAEE,YAAY;QAAEG,IAAI,EAAEJ,oBAAoB,CAACG,IAAI,CAACC,IAAI,EAAED,IAAI,CAACE,EAAE;MAAC;IACxF;IACA,uCAAYF,IAAI;MAAEJ,MAAM,EAAEE;IAAY;EACxC,CAAC,CAAC;AACJ,CAAC;AAED,SAASP,qBAAqB,EAAEG,iBAAiB,EAAEG,oBAAoB"}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
import { NavigationData } from "@hitachivantara/uikit-react-core";
|
|
2
2
|
|
|
3
3
|
export interface HvVerticalNavigationProps {
|
|
4
|
-
/**
|
|
5
|
-
* Id to be applied to the root node of the panel.
|
|
6
|
-
*/
|
|
7
|
-
id?: string;
|
|
8
4
|
/**
|
|
9
5
|
* Called when a menu item is clicked.
|
|
10
6
|
*/
|
|
11
7
|
onNavigationChange?: Function;
|
|
12
8
|
/**
|
|
13
|
-
*
|
|
9
|
+
* Called the collpase / expand button is clicked.
|
|
14
10
|
*/
|
|
15
|
-
|
|
11
|
+
onToggleExpanded?: Function;
|
|
16
12
|
/**
|
|
17
|
-
*
|
|
13
|
+
* An array containing the data for each menu item.
|
|
18
14
|
*/
|
|
19
|
-
|
|
15
|
+
data: NavigationData[];
|
|
20
16
|
/**
|
|
21
17
|
* The ID of the selected page.
|
|
22
18
|
*/
|
|
23
19
|
selected?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Flag that sets the panel to expanded / collapsed.
|
|
22
|
+
*/
|
|
23
|
+
expanded: boolean;
|
|
24
24
|
/**
|
|
25
25
|
* The top value where the panel will be rendered. Default is 44 as it is the height of the Header component.
|
|
26
26
|
*/
|
|
@@ -33,6 +33,10 @@ export interface HvVerticalNavigationProps {
|
|
|
33
33
|
* The width of the panel when collapsed. Default vlaue is 52.
|
|
34
34
|
*/
|
|
35
35
|
collapsedPanelWidth?: number;
|
|
36
|
+
/**
|
|
37
|
+
* Sets the Css position of the panel. Default value is `sticked`
|
|
38
|
+
*/
|
|
39
|
+
position?: "static" | "relative" | "fixed" | "absolute" | "sticky";
|
|
36
40
|
}
|
|
37
41
|
|
|
38
42
|
export default function HvVerticalNavigation(props: HvVerticalNavigationProps): JSX.Element | null;
|