@hitachivantara/uikit-react-lab 4.5.0 → 4.5.1
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/NavigationSlider.js +11 -4
- package/dist/NavigationSlider/NavigationSlider.js.map +1 -1
- package/dist/NavigationSlider/styles.js +1 -1
- package/dist/NavigationSlider/styles.js.map +1 -1
- package/dist/legacy/NavigationSlider/NavigationSlider.js +11 -4
- package/dist/legacy/NavigationSlider/NavigationSlider.js.map +1 -1
- package/dist/legacy/NavigationSlider/styles.js +1 -1
- package/dist/legacy/NavigationSlider/styles.js.map +1 -1
- package/dist/modern/NavigationSlider/NavigationSlider.js +11 -4
- package/dist/modern/NavigationSlider/NavigationSlider.js.map +1 -1
- package/dist/modern/NavigationSlider/styles.js +1 -1
- package/dist/modern/NavigationSlider/styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -31,10 +31,12 @@ var HvNavigationSlider = function HvNavigationSlider(_ref) {
|
|
|
31
31
|
title = _ref.title,
|
|
32
32
|
selected = _ref.selected,
|
|
33
33
|
topPosition = _ref.topPosition,
|
|
34
|
-
panelWidth = _ref.panelWidth
|
|
34
|
+
panelWidth = _ref.panelWidth,
|
|
35
|
+
position = _ref.position;
|
|
35
36
|
var classes = (0, _styles2.default)({
|
|
36
37
|
topPosition: topPosition,
|
|
37
|
-
panelWidth: panelWidth
|
|
38
|
+
panelWidth: panelWidth,
|
|
39
|
+
position: position
|
|
38
40
|
})();
|
|
39
41
|
var withParentData = (0, _react.useMemo)(function () {
|
|
40
42
|
return (0, _utils.fillDataWithParentId)(data);
|
|
@@ -126,11 +128,16 @@ process.env.NODE_ENV !== "production" ? HvNavigationSlider.propTypes = {
|
|
|
126
128
|
/**
|
|
127
129
|
* The width of the panel when expanded. Default value is 300.
|
|
128
130
|
*/
|
|
129
|
-
panelWidth: _propTypes.default.number
|
|
131
|
+
panelWidth: _propTypes.default.number,
|
|
132
|
+
/**
|
|
133
|
+
* Position of the component.
|
|
134
|
+
*/
|
|
135
|
+
position: _propTypes.default.oneOf(["static", "relative", "fixed", "absolute", "sticky"])
|
|
130
136
|
} : void 0;
|
|
131
137
|
HvNavigationSlider.defaultProps = {
|
|
132
138
|
topPosition: 44,
|
|
133
|
-
panelWidth: 300
|
|
139
|
+
panelWidth: 300,
|
|
140
|
+
position: "fixed"
|
|
134
141
|
};
|
|
135
142
|
var _default = (0, _styles.withStyles)(_styles2.default, {
|
|
136
143
|
name: "HvNavigationSlider"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationSlider.js","names":["HvNavigationSlider","id","onNavigationChange","data","title","selected","topPosition","panelWidth","classes","useStyles","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","useState","parentItem","setParentItem","navigateToParentHandler","navigateToTargetHandler","event","selectedItem","navigateToChildHandler","item","getNavigationItemById","stopPropagation","container","root","label","propTypes","PropTypes","string","shape","footer","isRequired","func","arrayOf","icon","node","array","href","target","number","defaultProps","withStyles","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":";;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AAAiC;AAAA;AAAA;AAEjC,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,
|
|
1
|
+
{"version":3,"file":"NavigationSlider.js","names":["HvNavigationSlider","id","onNavigationChange","data","title","selected","topPosition","panelWidth","position","classes","useStyles","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","useState","parentItem","setParentItem","navigateToParentHandler","navigateToTargetHandler","event","selectedItem","navigateToChildHandler","item","getNavigationItemById","stopPropagation","container","root","label","propTypes","PropTypes","string","shape","footer","isRequired","func","arrayOf","icon","node","array","href","target","number","oneOf","defaultProps","withStyles","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 position,\n}) => {\n const classes = useStyles({ topPosition, panelWidth, position })();\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 * Position of the component.\n */\n position: PropTypes.oneOf([\"static\", \"relative\", \"fixed\", \"absolute\", \"sticky\"]),\n};\n\nHvNavigationSlider.defaultProps = {\n topPosition: 44,\n panelWidth: 300,\n position: \"fixed\",\n};\n\nexport default withStyles(useStyles, { name: \"HvNavigationSlider\" })(HvNavigationSlider);\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styles","props","makeStyles","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:
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","props","makeStyles","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: props.position,\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;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OACnB,IAAAC,kBAAU,EAAC;IAAA,OAAO;MAChBC,SAAS,EAAE;QACTC,QAAQ,EAAEH,KAAK,CAACG,QAAQ;QACxBC,IAAI,EAAE,CAAC;QACPC,GAAG,EAAEL,KAAK,CAACM;MACb,CAAC;MACDC,IAAI,EAAE;QACJC,KAAK,EAAER,KAAK,CAACS,UAAU;QACvBC,MAAM,yBAAkBV,KAAK,CAACM,WAAW,QAAK;QAC9CK,cAAc,EAAE;MAClB,CAAC;MACDC,MAAM,EAAE;QACNC,SAAS,EAAE;MACb;IACF,CAAC;EAAA,CAAC,CAAC;AAAA;AAAC,eAESd,MAAM;AAAA"}
|
|
@@ -16,10 +16,12 @@ var HvNavigationSlider = function HvNavigationSlider(_ref) {
|
|
|
16
16
|
title = _ref.title,
|
|
17
17
|
selected = _ref.selected,
|
|
18
18
|
topPosition = _ref.topPosition,
|
|
19
|
-
panelWidth = _ref.panelWidth
|
|
19
|
+
panelWidth = _ref.panelWidth,
|
|
20
|
+
position = _ref.position;
|
|
20
21
|
var classes = useStyles({
|
|
21
22
|
topPosition: topPosition,
|
|
22
|
-
panelWidth: panelWidth
|
|
23
|
+
panelWidth: panelWidth,
|
|
24
|
+
position: position
|
|
23
25
|
})();
|
|
24
26
|
var withParentData = useMemo(function () {
|
|
25
27
|
return fillDataWithParentId(data);
|
|
@@ -111,11 +113,16 @@ process.env.NODE_ENV !== "production" ? HvNavigationSlider.propTypes = {
|
|
|
111
113
|
/**
|
|
112
114
|
* The width of the panel when expanded. Default value is 300.
|
|
113
115
|
*/
|
|
114
|
-
panelWidth: PropTypes.number
|
|
116
|
+
panelWidth: PropTypes.number,
|
|
117
|
+
/**
|
|
118
|
+
* Position of the component.
|
|
119
|
+
*/
|
|
120
|
+
position: PropTypes.oneOf(["static", "relative", "fixed", "absolute", "sticky"])
|
|
115
121
|
} : void 0;
|
|
116
122
|
HvNavigationSlider.defaultProps = {
|
|
117
123
|
topPosition: 44,
|
|
118
|
-
panelWidth: 300
|
|
124
|
+
panelWidth: 300,
|
|
125
|
+
position: "fixed"
|
|
119
126
|
};
|
|
120
127
|
export default withStyles(useStyles, {
|
|
121
128
|
name: "HvNavigationSlider"
|
|
@@ -1 +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":";AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,OAAO,QAAQ,OAAO;AAChD,SAASC,UAAU,QAAQ,aAAa;AACxC,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,oBAAoB,IAAIC,wBAAwB,QAAQ,kCAAkC;AAEnG,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,UAAU,MAAM,cAAc;AACrC,SAASC,oBAAoB,EAAEC,qBAAqB,EAAEC,iBAAiB,QAAQ,SAAS;AAExF,OAAOC,SAAS,MAAM,UAAU;AAAC;AAAA;AAEjC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,
|
|
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","position","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","oneOf","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 position,\n}) => {\n const classes = useStyles({ topPosition, panelWidth, position })();\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 * Position of the component.\n */\n position: PropTypes.oneOf([\"static\", \"relative\", \"fixed\", \"absolute\", \"sticky\"]),\n};\n\nHvNavigationSlider.defaultProps = {\n topPosition: 44,\n panelWidth: 300,\n position: \"fixed\",\n};\n\nexport default withStyles(useStyles, { name: \"HvNavigationSlider\" })(HvNavigationSlider);\n"],"mappings":"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"}
|
|
@@ -1 +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:
|
|
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: props.position,\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,EAAEF,KAAK,CAACE,QAAQ;QACxBC,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"}
|
|
@@ -15,11 +15,13 @@ const HvNavigationSlider = ({
|
|
|
15
15
|
title,
|
|
16
16
|
selected,
|
|
17
17
|
topPosition,
|
|
18
|
-
panelWidth
|
|
18
|
+
panelWidth,
|
|
19
|
+
position
|
|
19
20
|
}) => {
|
|
20
21
|
const classes = useStyles({
|
|
21
22
|
topPosition,
|
|
22
|
-
panelWidth
|
|
23
|
+
panelWidth,
|
|
24
|
+
position
|
|
23
25
|
})();
|
|
24
26
|
const withParentData = useMemo(() => fillDataWithParentId(data), [data]);
|
|
25
27
|
const initialParentItem = useMemo(() => getParentItemById(withParentData, selected), [withParentData, selected]);
|
|
@@ -104,11 +106,16 @@ process.env.NODE_ENV !== "production" ? HvNavigationSlider.propTypes = {
|
|
|
104
106
|
/**
|
|
105
107
|
* The width of the panel when expanded. Default value is 300.
|
|
106
108
|
*/
|
|
107
|
-
panelWidth: PropTypes.number
|
|
109
|
+
panelWidth: PropTypes.number,
|
|
110
|
+
/**
|
|
111
|
+
* Position of the component.
|
|
112
|
+
*/
|
|
113
|
+
position: PropTypes.oneOf(["static", "relative", "fixed", "absolute", "sticky"])
|
|
108
114
|
} : void 0;
|
|
109
115
|
HvNavigationSlider.defaultProps = {
|
|
110
116
|
topPosition: 44,
|
|
111
|
-
panelWidth: 300
|
|
117
|
+
panelWidth: 300,
|
|
118
|
+
position: "fixed"
|
|
112
119
|
};
|
|
113
120
|
export default withStyles(useStyles, {
|
|
114
121
|
name: "HvNavigationSlider"
|
|
@@ -1 +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":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,OAAO,QAAQ,OAAO;AAChD,SAASC,UAAU,QAAQ,aAAa;AACxC,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,oBAAoB,IAAIC,wBAAwB,QAAQ,kCAAkC;AAEnG,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,UAAU,MAAM,cAAc;AACrC,SAASC,oBAAoB,EAAEC,qBAAqB,EAAEC,iBAAiB,QAAQ,SAAS;AAExF,OAAOC,SAAS,MAAM,UAAU;AAAC;AAAA;AAEjC,MAAMC,kBAAkB,GAAG,CAAC;EAC1BC,EAAE;EACFC,kBAAkB;EAClBC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC,WAAW;EACXC;AACF,CAAC,KAAK;EACJ,MAAMC,OAAO,
|
|
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","position","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","oneOf","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 position,\n}) => {\n const classes = useStyles({ topPosition, panelWidth, position })();\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 * Position of the component.\n */\n position: PropTypes.oneOf([\"static\", \"relative\", \"fixed\", \"absolute\", \"sticky\"]),\n};\n\nHvNavigationSlider.defaultProps = {\n topPosition: 44,\n panelWidth: 300,\n position: \"fixed\",\n};\n\nexport default withStyles(useStyles, { name: \"HvNavigationSlider\" })(HvNavigationSlider);\n"],"mappings":"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"}
|
|
@@ -1 +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:
|
|
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: props.position,\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,MAAMC,MAAM,GAAIC,KAAK,IACnBF,UAAU,CAAC,OAAO;EAChBG,SAAS,EAAE;IACTC,QAAQ,EAAEF,KAAK,CAACE,QAAQ;IACxBC,IAAI,EAAE,CAAC;IACPC,GAAG,EAAEJ,KAAK,CAACK;EACb,CAAC;EACDC,IAAI,EAAE;IACJC,KAAK,EAAEP,KAAK,CAACQ,UAAU;IACvBC,MAAM,EAAG,gBAAeT,KAAK,CAACK,WAAY,KAAI;IAC9CK,cAAc,EAAE;EAClB,CAAC;EACDC,MAAM,EAAE;IACNC,SAAS,EAAE;EACb;AACF,CAAC,CAAC,CAAC;AAEL,eAAeb,MAAM"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "4.5.
|
|
3
|
+
"version": "4.5.1",
|
|
4
4
|
"description": "A collection of contributed React components for the Hitachi Vantara's Design System.",
|
|
5
5
|
"homepage": "https://github.com/lumada-design/hv-uikit-react",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"react-dom": "^16.13.1 || ^17.0.2"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@hitachivantara/uikit-react-core": "^4.4.
|
|
47
|
+
"@hitachivantara/uikit-react-core": "^4.4.4",
|
|
48
48
|
"@hitachivantara/uikit-react-icons": "^4.0.6",
|
|
49
49
|
"clsx": "^1.2.1",
|
|
50
50
|
"core-js": "^3.26.1",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"publishConfig": {
|
|
65
65
|
"access": "public"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "8240bb1bd8a948c5a7abf9cf7d1c7de8356e9d6a"
|
|
68
68
|
}
|