@hitachivantara/uikit-react-lab 3.41.10 → 3.41.11
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/CHANGELOG.md +11 -0
- package/dist/DotPagination/DotPagination.d.ts +21 -6
- package/dist/DotPagination/DotPagination.js +12 -24
- package/dist/DotPagination/DotPagination.js.map +1 -1
- package/dist/legacy/DotPagination/DotPagination.d.ts +21 -6
- package/dist/legacy/DotPagination/DotPagination.js +12 -21
- package/dist/legacy/DotPagination/DotPagination.js.map +1 -1
- package/dist/modern/DotPagination/DotPagination.d.ts +21 -6
- package/dist/modern/DotPagination/DotPagination.js +12 -18
- package/dist/modern/DotPagination/DotPagination.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.41.11](https://github.com/lumada-design/hv-uikit-react/compare/@hitachivantara/uikit-react-lab@3.41.10...@hitachivantara/uikit-react-lab@3.41.11) (2022-04-21)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **dotPagination:** added missing typescript definition and description ([38dcda3](https://github.com/lumada-design/hv-uikit-react/commit/38dcda3029c23fbb9ac95b62c02f7db66da16bef))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [3.41.10](https://github.com/lumada-design/hv-uikit-react/compare/@hitachivantara/uikit-react-lab@3.41.9...@hitachivantara/uikit-react-lab@3.41.10) (2022-04-20)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @hitachivantara/uikit-react-lab
|
|
@@ -1,11 +1,26 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
1
|
import { StandardProps } from "@material-ui/core";
|
|
2
|
+
import { HvRadioGroupProps } from "@hitachivantara/uikit-react-core";
|
|
3
3
|
|
|
4
|
-
export type HvDotPaginationClassKey = "root";
|
|
4
|
+
export type HvDotPaginationClassKey = "root" | "horizontal" | "radioRoot";
|
|
5
5
|
|
|
6
|
-
export
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
export interface HvDotPaginationProps
|
|
7
|
+
extends StandardProps<HvRadioGroupProps, HvDotPaginationClassKey> {
|
|
8
|
+
/**
|
|
9
|
+
* The number of pages the component has.
|
|
10
|
+
*/
|
|
11
|
+
pages?: number;
|
|
12
|
+
/**
|
|
13
|
+
* The currently selected page.
|
|
14
|
+
*/
|
|
15
|
+
page?: number;
|
|
16
|
+
/**
|
|
17
|
+
* The callback fired when the page value changes.
|
|
18
|
+
*/
|
|
19
|
+
onPageChange?: (event: Event, page: number) => void;
|
|
20
|
+
/**
|
|
21
|
+
* The callback fired to get the page aria label.
|
|
22
|
+
*/
|
|
23
|
+
getItemAriaLabel?: (page: number) => string;
|
|
24
|
+
}
|
|
10
25
|
|
|
11
26
|
export default function HvDotPagination(props: HvDotPaginationProps): JSX.Element | null;
|
|
@@ -13,12 +13,6 @@ require("core-js/modules/es.string.iterator.js");
|
|
|
13
13
|
|
|
14
14
|
require("core-js/modules/es.array.map.js");
|
|
15
15
|
|
|
16
|
-
require("core-js/modules/es.array.concat.js");
|
|
17
|
-
|
|
18
|
-
require("core-js/modules/es.object.to-string.js");
|
|
19
|
-
|
|
20
|
-
require("core-js/modules/es.regexp.to-string.js");
|
|
21
|
-
|
|
22
16
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
23
17
|
|
|
24
18
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
@@ -37,7 +31,7 @@ var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
|
37
31
|
|
|
38
32
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
39
33
|
|
|
40
|
-
var _excluded = ["className", "classes", "pages", "page", "onPageChange", "getItemAriaLabel"
|
|
34
|
+
var _excluded = ["className", "classes", "pages", "page", "onPageChange", "getItemAriaLabel"];
|
|
41
35
|
|
|
42
36
|
var getSelectorIcons = function getSelectorIcons(classes, options) {
|
|
43
37
|
var disabled = options.disabled;
|
|
@@ -57,7 +51,8 @@ var getSelectorIcons = function getSelectorIcons(classes, options) {
|
|
|
57
51
|
};
|
|
58
52
|
};
|
|
59
53
|
/**
|
|
60
|
-
*
|
|
54
|
+
* Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.
|
|
55
|
+
* This component uses Radio Buttons to represent each page.
|
|
61
56
|
*/
|
|
62
57
|
|
|
63
58
|
|
|
@@ -72,7 +67,6 @@ var HvDotPagination = function HvDotPagination(props) {
|
|
|
72
67
|
page = _props$page === void 0 ? 0 : _props$page,
|
|
73
68
|
onPageChange = props.onPageChange,
|
|
74
69
|
getItemAriaLabel = props.getItemAriaLabel,
|
|
75
|
-
id = props.id,
|
|
76
70
|
others = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
77
71
|
|
|
78
72
|
var range = function range(n) {
|
|
@@ -82,29 +76,28 @@ var HvDotPagination = function HvDotPagination(props) {
|
|
|
82
76
|
};
|
|
83
77
|
|
|
84
78
|
var icons = getSelectorIcons(classes, {});
|
|
85
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
86
|
-
className: (0, _clsx.default)(className, classes.root)
|
|
87
|
-
}, others), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvRadioGroup, {
|
|
79
|
+
return /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvRadioGroup, (0, _extends2.default)({
|
|
80
|
+
className: (0, _clsx.default)(className, classes.root),
|
|
88
81
|
classes: {
|
|
89
82
|
horizontal: classes.horizontal
|
|
90
83
|
},
|
|
91
84
|
orientation: "horizontal"
|
|
92
|
-
}, range(pages).map(function (
|
|
85
|
+
}, others), range(pages).map(function (i) {
|
|
93
86
|
return /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvRadio, {
|
|
94
87
|
classes: {
|
|
95
88
|
root: classes.radioRoot
|
|
96
89
|
},
|
|
97
|
-
key:
|
|
90
|
+
key: i,
|
|
98
91
|
value: i,
|
|
99
92
|
checked: page === i,
|
|
100
|
-
onChange: function onChange() {
|
|
101
|
-
return onPageChange(i);
|
|
93
|
+
onChange: function onChange(event) {
|
|
94
|
+
return onPageChange(event, i);
|
|
102
95
|
},
|
|
103
96
|
icon: icons.radio,
|
|
104
97
|
checkedIcon: icons.radioChecked,
|
|
105
98
|
"aria-label": getItemAriaLabel(i)
|
|
106
99
|
});
|
|
107
|
-
}))
|
|
100
|
+
}));
|
|
108
101
|
};
|
|
109
102
|
|
|
110
103
|
process.env.NODE_ENV !== "production" ? HvDotPagination.propTypes = {
|
|
@@ -139,7 +132,7 @@ process.env.NODE_ENV !== "production" ? HvDotPagination.propTypes = {
|
|
|
139
132
|
pages: _propTypes.default.number,
|
|
140
133
|
|
|
141
134
|
/**
|
|
142
|
-
* The currently selected page
|
|
135
|
+
* The currently selected page.
|
|
143
136
|
*/
|
|
144
137
|
page: _propTypes.default.number,
|
|
145
138
|
|
|
@@ -151,12 +144,7 @@ process.env.NODE_ENV !== "production" ? HvDotPagination.propTypes = {
|
|
|
151
144
|
/**
|
|
152
145
|
* Function called to get the respective aria label.
|
|
153
146
|
*/
|
|
154
|
-
getItemAriaLabel: _propTypes.default.func
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* Component id used to generate unique radio keys ( to avoid repeated keys in case multiple dotPagination components are needed)
|
|
158
|
-
*/
|
|
159
|
-
id: _propTypes.default.number
|
|
147
|
+
getItemAriaLabel: _propTypes.default.func
|
|
160
148
|
} : void 0;
|
|
161
149
|
|
|
162
150
|
var _default = (0, _core.withStyles)(_styles.default, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/DotPagination/DotPagination.js"],"names":["getSelectorIcons","classes","options","disabled","color","undefined","checkedColor","radio","icon","radioChecked","HvDotPagination","props","className","pages","page","onPageChange","getItemAriaLabel","
|
|
1
|
+
{"version":3,"sources":["../../src/DotPagination/DotPagination.js"],"names":["getSelectorIcons","classes","options","disabled","color","undefined","checkedColor","radio","icon","radioChecked","HvDotPagination","props","className","pages","page","onPageChange","getItemAriaLabel","others","range","n","Array","from","v","i","icons","root","horizontal","map","radioRoot","event","propTypes","PropTypes","string","shape","isRequired","number","func","styles","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\nimport { HvRadio, HvRadioGroup } from \"@hitachivantara/uikit-react-core\";\nimport { CurrentStep, RadioButtonUnselected } from \"@hitachivantara/uikit-react-icons\";\nimport styles from \"./styles\";\n\nexport const getSelectorIcons = (classes, options) => {\n const { disabled } = options;\n const color = (disabled && [\"atmo3\", \"atmo5\"]) || undefined;\n const checkedColor = (disabled && [\"atmo3\", \"atmo5\"]) || undefined;\n\n return {\n radio: <RadioButtonUnselected color={color} className={classes.icon} iconSize=\"XS\" />,\n radioChecked: <CurrentStep color={checkedColor} className={classes.icon} iconSize=\"XS\" />,\n };\n};\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nconst HvDotPagination = (props) => {\n const {\n className,\n classes,\n pages = 1,\n page = 0,\n onPageChange,\n getItemAriaLabel,\n ...others\n } = props;\n\n const range = (n) => Array.from(Array(n), (v, i) => i);\n\n const icons = getSelectorIcons(classes, {});\n\n return (\n <HvRadioGroup\n className={clsx(className, classes.root)}\n classes={{ horizontal: classes.horizontal }}\n orientation=\"horizontal\"\n {...others}\n >\n {range(pages).map((i) => (\n <HvRadio\n classes={{ root: classes.radioRoot }}\n key={i}\n value={i}\n checked={page === i}\n onChange={(event) => onPageChange(event, i)}\n icon={icons.radio}\n checkedIcon={icons.radioChecked}\n aria-label={getItemAriaLabel(i)}\n />\n ))}\n </HvRadioGroup>\n );\n};\n\nHvDotPagination.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 radio button group to overrrite horizontal class margins.\n */\n horizontal: PropTypes.string,\n /**\n * Styles applied to the radio root ( to override radio group horizontal )\n */\n radioRoot: PropTypes.string,\n }).isRequired,\n /**\n * The number of pages the component has.\n */\n pages: PropTypes.number,\n /**\n * The currently selected page.\n */\n page: PropTypes.number,\n /**\n * Function called when the page changes.\n */\n onPageChange: PropTypes.func,\n /**\n * Function called to get the respective aria label.\n */\n getItemAriaLabel: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvDotPagination\" })(HvDotPagination);\n"],"file":"DotPagination.js"}
|
|
@@ -1,11 +1,26 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
1
|
import { StandardProps } from "@material-ui/core";
|
|
2
|
+
import { HvRadioGroupProps } from "@hitachivantara/uikit-react-core";
|
|
3
3
|
|
|
4
|
-
export type HvDotPaginationClassKey = "root";
|
|
4
|
+
export type HvDotPaginationClassKey = "root" | "horizontal" | "radioRoot";
|
|
5
5
|
|
|
6
|
-
export
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
export interface HvDotPaginationProps
|
|
7
|
+
extends StandardProps<HvRadioGroupProps, HvDotPaginationClassKey> {
|
|
8
|
+
/**
|
|
9
|
+
* The number of pages the component has.
|
|
10
|
+
*/
|
|
11
|
+
pages?: number;
|
|
12
|
+
/**
|
|
13
|
+
* The currently selected page.
|
|
14
|
+
*/
|
|
15
|
+
page?: number;
|
|
16
|
+
/**
|
|
17
|
+
* The callback fired when the page value changes.
|
|
18
|
+
*/
|
|
19
|
+
onPageChange?: (event: Event, page: number) => void;
|
|
20
|
+
/**
|
|
21
|
+
* The callback fired to get the page aria label.
|
|
22
|
+
*/
|
|
23
|
+
getItemAriaLabel?: (page: number) => string;
|
|
24
|
+
}
|
|
10
25
|
|
|
11
26
|
export default function HvDotPagination(props: HvDotPaginationProps): JSX.Element | null;
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["className", "classes", "pages", "page", "onPageChange", "getItemAriaLabel"
|
|
3
|
+
var _excluded = ["className", "classes", "pages", "page", "onPageChange", "getItemAriaLabel"];
|
|
4
4
|
import "core-js/modules/es.array.from.js";
|
|
5
5
|
import "core-js/modules/es.string.iterator.js";
|
|
6
6
|
import "core-js/modules/es.array.map.js";
|
|
7
|
-
import "core-js/modules/es.array.concat.js";
|
|
8
|
-
import "core-js/modules/es.object.to-string.js";
|
|
9
|
-
import "core-js/modules/es.regexp.to-string.js";
|
|
10
7
|
import React from "react";
|
|
11
8
|
import PropTypes from "prop-types";
|
|
12
9
|
import clsx from "clsx";
|
|
@@ -32,7 +29,8 @@ export var getSelectorIcons = function getSelectorIcons(classes, options) {
|
|
|
32
29
|
};
|
|
33
30
|
};
|
|
34
31
|
/**
|
|
35
|
-
*
|
|
32
|
+
* Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.
|
|
33
|
+
* This component uses Radio Buttons to represent each page.
|
|
36
34
|
*/
|
|
37
35
|
|
|
38
36
|
var HvDotPagination = function HvDotPagination(props) {
|
|
@@ -44,7 +42,6 @@ var HvDotPagination = function HvDotPagination(props) {
|
|
|
44
42
|
page = _props$page === void 0 ? 0 : _props$page,
|
|
45
43
|
onPageChange = props.onPageChange,
|
|
46
44
|
getItemAriaLabel = props.getItemAriaLabel,
|
|
47
|
-
id = props.id,
|
|
48
45
|
others = _objectWithoutProperties(props, _excluded);
|
|
49
46
|
|
|
50
47
|
var range = function range(n) {
|
|
@@ -54,29 +51,28 @@ var HvDotPagination = function HvDotPagination(props) {
|
|
|
54
51
|
};
|
|
55
52
|
|
|
56
53
|
var icons = getSelectorIcons(classes, {});
|
|
57
|
-
return /*#__PURE__*/React.createElement(
|
|
58
|
-
className: clsx(className, classes.root)
|
|
59
|
-
}, others), /*#__PURE__*/React.createElement(HvRadioGroup, {
|
|
54
|
+
return /*#__PURE__*/React.createElement(HvRadioGroup, _extends({
|
|
55
|
+
className: clsx(className, classes.root),
|
|
60
56
|
classes: {
|
|
61
57
|
horizontal: classes.horizontal
|
|
62
58
|
},
|
|
63
59
|
orientation: "horizontal"
|
|
64
|
-
}, range(pages).map(function (
|
|
60
|
+
}, others), range(pages).map(function (i) {
|
|
65
61
|
return /*#__PURE__*/React.createElement(HvRadio, {
|
|
66
62
|
classes: {
|
|
67
63
|
root: classes.radioRoot
|
|
68
64
|
},
|
|
69
|
-
key:
|
|
65
|
+
key: i,
|
|
70
66
|
value: i,
|
|
71
67
|
checked: page === i,
|
|
72
|
-
onChange: function onChange() {
|
|
73
|
-
return onPageChange(i);
|
|
68
|
+
onChange: function onChange(event) {
|
|
69
|
+
return onPageChange(event, i);
|
|
74
70
|
},
|
|
75
71
|
icon: icons.radio,
|
|
76
72
|
checkedIcon: icons.radioChecked,
|
|
77
73
|
"aria-label": getItemAriaLabel(i)
|
|
78
74
|
});
|
|
79
|
-
}))
|
|
75
|
+
}));
|
|
80
76
|
};
|
|
81
77
|
|
|
82
78
|
process.env.NODE_ENV !== "production" ? HvDotPagination.propTypes = {
|
|
@@ -111,7 +107,7 @@ process.env.NODE_ENV !== "production" ? HvDotPagination.propTypes = {
|
|
|
111
107
|
pages: PropTypes.number,
|
|
112
108
|
|
|
113
109
|
/**
|
|
114
|
-
* The currently selected page
|
|
110
|
+
* The currently selected page.
|
|
115
111
|
*/
|
|
116
112
|
page: PropTypes.number,
|
|
117
113
|
|
|
@@ -123,12 +119,7 @@ process.env.NODE_ENV !== "production" ? HvDotPagination.propTypes = {
|
|
|
123
119
|
/**
|
|
124
120
|
* Function called to get the respective aria label.
|
|
125
121
|
*/
|
|
126
|
-
getItemAriaLabel: PropTypes.func
|
|
127
|
-
|
|
128
|
-
/**
|
|
129
|
-
* Component id used to generate unique radio keys ( to avoid repeated keys in case multiple dotPagination components are needed)
|
|
130
|
-
*/
|
|
131
|
-
id: PropTypes.number
|
|
122
|
+
getItemAriaLabel: PropTypes.func
|
|
132
123
|
} : void 0;
|
|
133
124
|
export default withStyles(styles, {
|
|
134
125
|
name: "HvDotPagination"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/DotPagination/DotPagination.js"],"names":["React","PropTypes","clsx","withStyles","HvRadio","HvRadioGroup","CurrentStep","RadioButtonUnselected","styles","getSelectorIcons","classes","options","disabled","color","undefined","checkedColor","radio","icon","radioChecked","HvDotPagination","props","className","pages","page","onPageChange","getItemAriaLabel","
|
|
1
|
+
{"version":3,"sources":["../../../src/DotPagination/DotPagination.js"],"names":["React","PropTypes","clsx","withStyles","HvRadio","HvRadioGroup","CurrentStep","RadioButtonUnselected","styles","getSelectorIcons","classes","options","disabled","color","undefined","checkedColor","radio","icon","radioChecked","HvDotPagination","props","className","pages","page","onPageChange","getItemAriaLabel","others","range","n","Array","from","v","i","icons","root","horizontal","map","radioRoot","event","propTypes","string","shape","isRequired","number","func","name"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AAEA,SAASC,UAAT,QAA2B,mBAA3B;AACA,SAASC,OAAT,EAAkBC,YAAlB,QAAsC,kCAAtC;AACA,SAASC,WAAT,EAAsBC,qBAAtB,QAAmD,mCAAnD;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAUC,OAAV,EAAsB;AACpD,MAAQC,QAAR,GAAqBD,OAArB,CAAQC,QAAR;AACA,MAAMC,KAAK,GAAID,QAAQ,IAAI,CAAC,OAAD,EAAU,OAAV,CAAb,IAAoCE,SAAlD;AACA,MAAMC,YAAY,GAAIH,QAAQ,IAAI,CAAC,OAAD,EAAU,OAAV,CAAb,IAAoCE,SAAzD;AAEA,SAAO;AACLE,IAAAA,KAAK,eAAE,oBAAC,qBAAD;AAAuB,MAAA,KAAK,EAAEH,KAA9B;AAAqC,MAAA,SAAS,EAAEH,OAAO,CAACO,IAAxD;AAA8D,MAAA,QAAQ,EAAC;AAAvE,MADF;AAELC,IAAAA,YAAY,eAAE,oBAAC,WAAD;AAAa,MAAA,KAAK,EAAEH,YAApB;AAAkC,MAAA,SAAS,EAAEL,OAAO,CAACO,IAArD;AAA2D,MAAA,QAAQ,EAAC;AAApE;AAFT,GAAP;AAID,CATM;AAWP;AACA;AACA;AACA;;AACA,IAAME,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAAW;AACjC,MACEC,SADF,GAQID,KARJ,CACEC,SADF;AAAA,MAEEX,OAFF,GAQIU,KARJ,CAEEV,OAFF;AAAA,qBAQIU,KARJ,CAGEE,KAHF;AAAA,MAGEA,KAHF,6BAGU,CAHV;AAAA,oBAQIF,KARJ,CAIEG,IAJF;AAAA,MAIEA,IAJF,4BAIS,CAJT;AAAA,MAKEC,YALF,GAQIJ,KARJ,CAKEI,YALF;AAAA,MAMEC,gBANF,GAQIL,KARJ,CAMEK,gBANF;AAAA,MAOKC,MAPL,4BAQIN,KARJ;;AAUA,MAAMO,KAAK,GAAG,SAARA,KAAQ,CAACC,CAAD;AAAA,WAAOC,KAAK,CAACC,IAAN,CAAWD,KAAK,CAACD,CAAD,CAAhB,EAAqB,UAACG,CAAD,EAAIC,CAAJ;AAAA,aAAUA,CAAV;AAAA,KAArB,CAAP;AAAA,GAAd;;AAEA,MAAMC,KAAK,GAAGxB,gBAAgB,CAACC,OAAD,EAAU,EAAV,CAA9B;AAEA,sBACE,oBAAC,YAAD;AACE,IAAA,SAAS,EAAER,IAAI,CAACmB,SAAD,EAAYX,OAAO,CAACwB,IAApB,CADjB;AAEE,IAAA,OAAO,EAAE;AAAEC,MAAAA,UAAU,EAAEzB,OAAO,CAACyB;AAAtB,KAFX;AAGE,IAAA,WAAW,EAAC;AAHd,KAIMT,MAJN,GAMGC,KAAK,CAACL,KAAD,CAAL,CAAac,GAAb,CAAiB,UAACJ,CAAD;AAAA,wBAChB,oBAAC,OAAD;AACE,MAAA,OAAO,EAAE;AAAEE,QAAAA,IAAI,EAAExB,OAAO,CAAC2B;AAAhB,OADX;AAEE,MAAA,GAAG,EAAEL,CAFP;AAGE,MAAA,KAAK,EAAEA,CAHT;AAIE,MAAA,OAAO,EAAET,IAAI,KAAKS,CAJpB;AAKE,MAAA,QAAQ,EAAE,kBAACM,KAAD;AAAA,eAAWd,YAAY,CAACc,KAAD,EAAQN,CAAR,CAAvB;AAAA,OALZ;AAME,MAAA,IAAI,EAAEC,KAAK,CAACjB,KANd;AAOE,MAAA,WAAW,EAAEiB,KAAK,CAACf,YAPrB;AAQE,oBAAYO,gBAAgB,CAACO,CAAD;AAR9B,MADgB;AAAA,GAAjB,CANH,CADF;AAqBD,CApCD;;AAsCA,wCAAAb,eAAe,CAACoB,SAAhB,GAA4B;AAC1B;AACF;AACA;AACElB,EAAAA,SAAS,EAAEpB,SAAS,CAACuC,MAJK;;AAK1B;AACF;AACA;AACE9B,EAAAA,OAAO,EAAET,SAAS,CAACwC,KAAV,CAAgB;AACvB;AACJ;AACA;AACIP,IAAAA,IAAI,EAAEjC,SAAS,CAACuC,MAJO;;AAKvB;AACJ;AACA;AACIL,IAAAA,UAAU,EAAElC,SAAS,CAACuC,MARC;;AASvB;AACJ;AACA;AACIH,IAAAA,SAAS,EAAEpC,SAAS,CAACuC;AAZE,GAAhB,EAaNE,UArBuB;;AAsB1B;AACF;AACA;AACEpB,EAAAA,KAAK,EAAErB,SAAS,CAAC0C,MAzBS;;AA0B1B;AACF;AACA;AACEpB,EAAAA,IAAI,EAAEtB,SAAS,CAAC0C,MA7BU;;AA8B1B;AACF;AACA;AACEnB,EAAAA,YAAY,EAAEvB,SAAS,CAAC2C,IAjCE;;AAkC1B;AACF;AACA;AACEnB,EAAAA,gBAAgB,EAAExB,SAAS,CAAC2C;AArCF,CAA5B;AAwCA,eAAezC,UAAU,CAACK,MAAD,EAAS;AAAEqC,EAAAA,IAAI,EAAE;AAAR,CAAT,CAAV,CAAgD1B,eAAhD,CAAf","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\nimport { HvRadio, HvRadioGroup } from \"@hitachivantara/uikit-react-core\";\nimport { CurrentStep, RadioButtonUnselected } from \"@hitachivantara/uikit-react-icons\";\nimport styles from \"./styles\";\n\nexport const getSelectorIcons = (classes, options) => {\n const { disabled } = options;\n const color = (disabled && [\"atmo3\", \"atmo5\"]) || undefined;\n const checkedColor = (disabled && [\"atmo3\", \"atmo5\"]) || undefined;\n\n return {\n radio: <RadioButtonUnselected color={color} className={classes.icon} iconSize=\"XS\" />,\n radioChecked: <CurrentStep color={checkedColor} className={classes.icon} iconSize=\"XS\" />,\n };\n};\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nconst HvDotPagination = (props) => {\n const {\n className,\n classes,\n pages = 1,\n page = 0,\n onPageChange,\n getItemAriaLabel,\n ...others\n } = props;\n\n const range = (n) => Array.from(Array(n), (v, i) => i);\n\n const icons = getSelectorIcons(classes, {});\n\n return (\n <HvRadioGroup\n className={clsx(className, classes.root)}\n classes={{ horizontal: classes.horizontal }}\n orientation=\"horizontal\"\n {...others}\n >\n {range(pages).map((i) => (\n <HvRadio\n classes={{ root: classes.radioRoot }}\n key={i}\n value={i}\n checked={page === i}\n onChange={(event) => onPageChange(event, i)}\n icon={icons.radio}\n checkedIcon={icons.radioChecked}\n aria-label={getItemAriaLabel(i)}\n />\n ))}\n </HvRadioGroup>\n );\n};\n\nHvDotPagination.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 radio button group to overrrite horizontal class margins.\n */\n horizontal: PropTypes.string,\n /**\n * Styles applied to the radio root ( to override radio group horizontal )\n */\n radioRoot: PropTypes.string,\n }).isRequired,\n /**\n * The number of pages the component has.\n */\n pages: PropTypes.number,\n /**\n * The currently selected page.\n */\n page: PropTypes.number,\n /**\n * Function called when the page changes.\n */\n onPageChange: PropTypes.func,\n /**\n * Function called to get the respective aria label.\n */\n getItemAriaLabel: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvDotPagination\" })(HvDotPagination);\n"],"file":"DotPagination.js"}
|
|
@@ -1,11 +1,26 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
1
|
import { StandardProps } from "@material-ui/core";
|
|
2
|
+
import { HvRadioGroupProps } from "@hitachivantara/uikit-react-core";
|
|
3
3
|
|
|
4
|
-
export type HvDotPaginationClassKey = "root";
|
|
4
|
+
export type HvDotPaginationClassKey = "root" | "horizontal" | "radioRoot";
|
|
5
5
|
|
|
6
|
-
export
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
export interface HvDotPaginationProps
|
|
7
|
+
extends StandardProps<HvRadioGroupProps, HvDotPaginationClassKey> {
|
|
8
|
+
/**
|
|
9
|
+
* The number of pages the component has.
|
|
10
|
+
*/
|
|
11
|
+
pages?: number;
|
|
12
|
+
/**
|
|
13
|
+
* The currently selected page.
|
|
14
|
+
*/
|
|
15
|
+
page?: number;
|
|
16
|
+
/**
|
|
17
|
+
* The callback fired when the page value changes.
|
|
18
|
+
*/
|
|
19
|
+
onPageChange?: (event: Event, page: number) => void;
|
|
20
|
+
/**
|
|
21
|
+
* The callback fired to get the page aria label.
|
|
22
|
+
*/
|
|
23
|
+
getItemAriaLabel?: (page: number) => string;
|
|
24
|
+
}
|
|
10
25
|
|
|
11
26
|
export default function HvDotPagination(props: HvDotPaginationProps): JSX.Element | null;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
-
const _excluded = ["className", "classes", "pages", "page", "onPageChange", "getItemAriaLabel"
|
|
3
|
+
const _excluded = ["className", "classes", "pages", "page", "onPageChange", "getItemAriaLabel"];
|
|
4
4
|
import React from "react";
|
|
5
5
|
import PropTypes from "prop-types";
|
|
6
6
|
import clsx from "clsx";
|
|
@@ -28,7 +28,8 @@ export const getSelectorIcons = (classes, options) => {
|
|
|
28
28
|
};
|
|
29
29
|
};
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
31
|
+
* Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.
|
|
32
|
+
* This component uses Radio Buttons to represent each page.
|
|
32
33
|
*/
|
|
33
34
|
|
|
34
35
|
const HvDotPagination = props => {
|
|
@@ -38,33 +39,31 @@ const HvDotPagination = props => {
|
|
|
38
39
|
pages = 1,
|
|
39
40
|
page = 0,
|
|
40
41
|
onPageChange,
|
|
41
|
-
getItemAriaLabel
|
|
42
|
-
id
|
|
42
|
+
getItemAriaLabel
|
|
43
43
|
} = props,
|
|
44
44
|
others = _objectWithoutProperties(props, _excluded);
|
|
45
45
|
|
|
46
46
|
const range = n => Array.from(Array(n), (v, i) => i);
|
|
47
47
|
|
|
48
48
|
const icons = getSelectorIcons(classes, {});
|
|
49
|
-
return /*#__PURE__*/React.createElement(
|
|
50
|
-
className: clsx(className, classes.root)
|
|
51
|
-
}, others), /*#__PURE__*/React.createElement(HvRadioGroup, {
|
|
49
|
+
return /*#__PURE__*/React.createElement(HvRadioGroup, _extends({
|
|
50
|
+
className: clsx(className, classes.root),
|
|
52
51
|
classes: {
|
|
53
52
|
horizontal: classes.horizontal
|
|
54
53
|
},
|
|
55
54
|
orientation: "horizontal"
|
|
56
|
-
}, range(pages).map(
|
|
55
|
+
}, others), range(pages).map(i => /*#__PURE__*/React.createElement(HvRadio, {
|
|
57
56
|
classes: {
|
|
58
57
|
root: classes.radioRoot
|
|
59
58
|
},
|
|
60
|
-
key:
|
|
59
|
+
key: i,
|
|
61
60
|
value: i,
|
|
62
61
|
checked: page === i,
|
|
63
|
-
onChange:
|
|
62
|
+
onChange: event => onPageChange(event, i),
|
|
64
63
|
icon: icons.radio,
|
|
65
64
|
checkedIcon: icons.radioChecked,
|
|
66
65
|
"aria-label": getItemAriaLabel(i)
|
|
67
|
-
})))
|
|
66
|
+
})));
|
|
68
67
|
};
|
|
69
68
|
|
|
70
69
|
process.env.NODE_ENV !== "production" ? HvDotPagination.propTypes = {
|
|
@@ -99,7 +98,7 @@ process.env.NODE_ENV !== "production" ? HvDotPagination.propTypes = {
|
|
|
99
98
|
pages: PropTypes.number,
|
|
100
99
|
|
|
101
100
|
/**
|
|
102
|
-
* The currently selected page
|
|
101
|
+
* The currently selected page.
|
|
103
102
|
*/
|
|
104
103
|
page: PropTypes.number,
|
|
105
104
|
|
|
@@ -111,12 +110,7 @@ process.env.NODE_ENV !== "production" ? HvDotPagination.propTypes = {
|
|
|
111
110
|
/**
|
|
112
111
|
* Function called to get the respective aria label.
|
|
113
112
|
*/
|
|
114
|
-
getItemAriaLabel: PropTypes.func
|
|
115
|
-
|
|
116
|
-
/**
|
|
117
|
-
* Component id used to generate unique radio keys ( to avoid repeated keys in case multiple dotPagination components are needed)
|
|
118
|
-
*/
|
|
119
|
-
id: PropTypes.number
|
|
113
|
+
getItemAriaLabel: PropTypes.func
|
|
120
114
|
} : void 0;
|
|
121
115
|
export default withStyles(styles, {
|
|
122
116
|
name: "HvDotPagination"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/DotPagination/DotPagination.js"],"names":["React","PropTypes","clsx","withStyles","HvRadio","HvRadioGroup","CurrentStep","RadioButtonUnselected","styles","getSelectorIcons","classes","options","disabled","color","undefined","checkedColor","radio","icon","radioChecked","HvDotPagination","props","className","pages","page","onPageChange","getItemAriaLabel","
|
|
1
|
+
{"version":3,"sources":["../../../src/DotPagination/DotPagination.js"],"names":["React","PropTypes","clsx","withStyles","HvRadio","HvRadioGroup","CurrentStep","RadioButtonUnselected","styles","getSelectorIcons","classes","options","disabled","color","undefined","checkedColor","radio","icon","radioChecked","HvDotPagination","props","className","pages","page","onPageChange","getItemAriaLabel","others","range","n","Array","from","v","i","icons","root","horizontal","map","radioRoot","event","propTypes","string","shape","isRequired","number","func","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\nimport { HvRadio, HvRadioGroup } from \"@hitachivantara/uikit-react-core\";\nimport { CurrentStep, RadioButtonUnselected } from \"@hitachivantara/uikit-react-icons\";\nimport styles from \"./styles\";\n\nexport const getSelectorIcons = (classes, options) => {\n const { disabled } = options;\n const color = (disabled && [\"atmo3\", \"atmo5\"]) || undefined;\n const checkedColor = (disabled && [\"atmo3\", \"atmo5\"]) || undefined;\n\n return {\n radio: <RadioButtonUnselected color={color} className={classes.icon} iconSize=\"XS\" />,\n radioChecked: <CurrentStep color={checkedColor} className={classes.icon} iconSize=\"XS\" />,\n };\n};\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nconst HvDotPagination = (props) => {\n const {\n className,\n classes,\n pages = 1,\n page = 0,\n onPageChange,\n getItemAriaLabel,\n ...others\n } = props;\n\n const range = (n) => Array.from(Array(n), (v, i) => i);\n\n const icons = getSelectorIcons(classes, {});\n\n return (\n <HvRadioGroup\n className={clsx(className, classes.root)}\n classes={{ horizontal: classes.horizontal }}\n orientation=\"horizontal\"\n {...others}\n >\n {range(pages).map((i) => (\n <HvRadio\n classes={{ root: classes.radioRoot }}\n key={i}\n value={i}\n checked={page === i}\n onChange={(event) => onPageChange(event, i)}\n icon={icons.radio}\n checkedIcon={icons.radioChecked}\n aria-label={getItemAriaLabel(i)}\n />\n ))}\n </HvRadioGroup>\n );\n};\n\nHvDotPagination.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 radio button group to overrrite horizontal class margins.\n */\n horizontal: PropTypes.string,\n /**\n * Styles applied to the radio root ( to override radio group horizontal )\n */\n radioRoot: PropTypes.string,\n }).isRequired,\n /**\n * The number of pages the component has.\n */\n pages: PropTypes.number,\n /**\n * The currently selected page.\n */\n page: PropTypes.number,\n /**\n * Function called when the page changes.\n */\n onPageChange: PropTypes.func,\n /**\n * Function called to get the respective aria label.\n */\n getItemAriaLabel: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvDotPagination\" })(HvDotPagination);\n"],"file":"DotPagination.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "3.41.
|
|
3
|
+
"version": "3.41.11",
|
|
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",
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"publishConfig": {
|
|
84
84
|
"access": "public"
|
|
85
85
|
},
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "451a525a753f5ac358b499f237e6008adcde68db"
|
|
87
87
|
}
|