@pagopa/io-app-design-system 1.16.0 → 1.16.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/lib/commonjs/components/listitems/ListItemInfo.js +18 -14
- package/lib/commonjs/components/listitems/ListItemInfo.js.map +1 -1
- package/lib/module/components/listitems/ListItemInfo.js +18 -14
- package/lib/module/components/listitems/ListItemInfo.js.map +1 -1
- package/lib/typescript/components/listitems/ListItemInfo.d.ts +8 -3
- package/lib/typescript/components/listitems/ListItemInfo.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/listitems/ListItemInfo.tsx +33 -16
|
@@ -10,6 +10,7 @@ var _core = require("../../core");
|
|
|
10
10
|
var _icons = require("../icons");
|
|
11
11
|
var _typography = require("../typography");
|
|
12
12
|
var _buttons = require("../buttons");
|
|
13
|
+
var _badge = require("../badge");
|
|
13
14
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
14
15
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
16
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -19,7 +20,7 @@ const ListItemInfo = _ref => {
|
|
|
19
20
|
value,
|
|
20
21
|
numberOfLines = 2,
|
|
21
22
|
icon,
|
|
22
|
-
|
|
23
|
+
endElement,
|
|
23
24
|
accessibilityLabel,
|
|
24
25
|
testID
|
|
25
26
|
} = _ref;
|
|
@@ -27,43 +28,46 @@ const ListItemInfo = _ref => {
|
|
|
27
28
|
const componentValueToAccessibility = (0, _react.useMemo)(() => typeof value === "string" ? value : "", [value]);
|
|
28
29
|
const listItemAccessibilityLabel = (0, _react.useMemo)(() => accessibilityLabel ? accessibilityLabel : `${label}; ${componentValueToAccessibility}`, [label, componentValueToAccessibility, accessibilityLabel]);
|
|
29
30
|
const itemInfoTextComponent = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
30
|
-
accessible:
|
|
31
|
-
importantForAccessibility:
|
|
32
|
-
accessibilityElementsHidden:
|
|
31
|
+
accessible: endElement === undefined ? true : false,
|
|
32
|
+
importantForAccessibility: endElement === undefined || endElement.type === "badge" ? "yes" : "no-hide-descendants",
|
|
33
|
+
accessibilityElementsHidden: endElement !== undefined && endElement.type !== "badge"
|
|
33
34
|
}, /*#__PURE__*/_react.default.createElement(_typography.LabelSmall, {
|
|
34
35
|
weight: "Regular",
|
|
35
36
|
color: theme["textBody-tertiary"]
|
|
36
37
|
}, label), typeof value === "string" ? /*#__PURE__*/_react.default.createElement(_typography.H6, {
|
|
37
38
|
color: theme["textBody-default"],
|
|
38
39
|
numberOfLines: numberOfLines
|
|
39
|
-
}, value) : value), [label, value, numberOfLines, theme,
|
|
40
|
+
}, value) : value), [label, value, numberOfLines, theme, endElement]);
|
|
40
41
|
const listItemInfoAction = (0, _react.useCallback)(() => {
|
|
41
|
-
if (
|
|
42
|
+
if (endElement) {
|
|
42
43
|
const {
|
|
43
44
|
type,
|
|
44
45
|
componentProps
|
|
45
|
-
} =
|
|
46
|
-
const accessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
|
|
46
|
+
} = endElement;
|
|
47
47
|
switch (type) {
|
|
48
48
|
case "buttonLink":
|
|
49
|
+
const buttonLinkAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
|
|
49
50
|
return /*#__PURE__*/_react.default.createElement(_buttons.ButtonLink, _extends({}, componentProps, {
|
|
50
|
-
accessibilityLabel:
|
|
51
|
+
accessibilityLabel: buttonLinkAccessibilityLabel
|
|
51
52
|
}));
|
|
52
53
|
case "iconButton":
|
|
54
|
+
const iconButtonAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
|
|
53
55
|
return /*#__PURE__*/_react.default.createElement(_buttons.IconButton, _extends({}, componentProps, {
|
|
54
|
-
accessibilityLabel:
|
|
56
|
+
accessibilityLabel: iconButtonAccessibilityLabel
|
|
55
57
|
}));
|
|
58
|
+
case "badge":
|
|
59
|
+
return /*#__PURE__*/_react.default.createElement(_badge.Badge, componentProps);
|
|
56
60
|
default:
|
|
57
61
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
58
62
|
}
|
|
59
63
|
}
|
|
60
64
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
61
|
-
}, [
|
|
65
|
+
}, [endElement, listItemAccessibilityLabel]);
|
|
62
66
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
63
67
|
style: _core.IOListItemStyles.listItem,
|
|
64
68
|
testID: testID,
|
|
65
|
-
accessible:
|
|
66
|
-
accessibilityLabel:
|
|
69
|
+
accessible: endElement === undefined ? true : false,
|
|
70
|
+
accessibilityLabel: listItemAccessibilityLabel
|
|
67
71
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
68
72
|
style: _core.IOListItemStyles.listItemInner
|
|
69
73
|
}, icon && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
@@ -76,7 +80,7 @@ const ListItemInfo = _ref => {
|
|
|
76
80
|
size: _core.IOListItemVisualParams.iconSize
|
|
77
81
|
})), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
78
82
|
style: _core.IOStyles.flex
|
|
79
|
-
}, itemInfoTextComponent),
|
|
83
|
+
}, itemInfoTextComponent), endElement && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
80
84
|
style: {
|
|
81
85
|
marginLeft: _core.IOListItemVisualParams.actionMargin
|
|
82
86
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_core","_icons","_typography","_buttons","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ListItemInfo","_ref","label","value","numberOfLines","icon","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_core","_icons","_typography","_buttons","_badge","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ListItemInfo","_ref","label","value","numberOfLines","icon","endElement","accessibilityLabel","testID","theme","useIOTheme","componentValueToAccessibility","useMemo","listItemAccessibilityLabel","itemInfoTextComponent","createElement","View","accessible","undefined","importantForAccessibility","type","accessibilityElementsHidden","LabelSmall","weight","color","H6","listItemInfoAction","useCallback","componentProps","buttonLinkAccessibilityLabel","ButtonLink","iconButtonAccessibilityLabel","IconButton","Badge","Fragment","style","IOListItemStyles","listItem","listItemInner","marginRight","IOListItemVisualParams","actionMargin","Icon","name","size","iconSize","IOStyles","flex","marginLeft","exports","_default"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemInfo.tsx"],"mappings":"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"}
|
|
@@ -5,13 +5,14 @@ import { IOListItemStyles, IOListItemVisualParams, IOStyles, useIOTheme } from "
|
|
|
5
5
|
import { Icon } from "../icons";
|
|
6
6
|
import { H6, LabelSmall } from "../typography";
|
|
7
7
|
import { ButtonLink, IconButton } from "../buttons";
|
|
8
|
+
import { Badge } from "../badge";
|
|
8
9
|
export const ListItemInfo = _ref => {
|
|
9
10
|
let {
|
|
10
11
|
label,
|
|
11
12
|
value,
|
|
12
13
|
numberOfLines = 2,
|
|
13
14
|
icon,
|
|
14
|
-
|
|
15
|
+
endElement,
|
|
15
16
|
accessibilityLabel,
|
|
16
17
|
testID
|
|
17
18
|
} = _ref;
|
|
@@ -19,43 +20,46 @@ export const ListItemInfo = _ref => {
|
|
|
19
20
|
const componentValueToAccessibility = useMemo(() => typeof value === "string" ? value : "", [value]);
|
|
20
21
|
const listItemAccessibilityLabel = useMemo(() => accessibilityLabel ? accessibilityLabel : `${label}; ${componentValueToAccessibility}`, [label, componentValueToAccessibility, accessibilityLabel]);
|
|
21
22
|
const itemInfoTextComponent = useMemo(() => /*#__PURE__*/React.createElement(View, {
|
|
22
|
-
accessible:
|
|
23
|
-
importantForAccessibility:
|
|
24
|
-
accessibilityElementsHidden:
|
|
23
|
+
accessible: endElement === undefined ? true : false,
|
|
24
|
+
importantForAccessibility: endElement === undefined || endElement.type === "badge" ? "yes" : "no-hide-descendants",
|
|
25
|
+
accessibilityElementsHidden: endElement !== undefined && endElement.type !== "badge"
|
|
25
26
|
}, /*#__PURE__*/React.createElement(LabelSmall, {
|
|
26
27
|
weight: "Regular",
|
|
27
28
|
color: theme["textBody-tertiary"]
|
|
28
29
|
}, label), typeof value === "string" ? /*#__PURE__*/React.createElement(H6, {
|
|
29
30
|
color: theme["textBody-default"],
|
|
30
31
|
numberOfLines: numberOfLines
|
|
31
|
-
}, value) : value), [label, value, numberOfLines, theme,
|
|
32
|
+
}, value) : value), [label, value, numberOfLines, theme, endElement]);
|
|
32
33
|
const listItemInfoAction = useCallback(() => {
|
|
33
|
-
if (
|
|
34
|
+
if (endElement) {
|
|
34
35
|
const {
|
|
35
36
|
type,
|
|
36
37
|
componentProps
|
|
37
|
-
} =
|
|
38
|
-
const accessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
|
|
38
|
+
} = endElement;
|
|
39
39
|
switch (type) {
|
|
40
40
|
case "buttonLink":
|
|
41
|
+
const buttonLinkAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
|
|
41
42
|
return /*#__PURE__*/React.createElement(ButtonLink, _extends({}, componentProps, {
|
|
42
|
-
accessibilityLabel:
|
|
43
|
+
accessibilityLabel: buttonLinkAccessibilityLabel
|
|
43
44
|
}));
|
|
44
45
|
case "iconButton":
|
|
46
|
+
const iconButtonAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
|
|
45
47
|
return /*#__PURE__*/React.createElement(IconButton, _extends({}, componentProps, {
|
|
46
|
-
accessibilityLabel:
|
|
48
|
+
accessibilityLabel: iconButtonAccessibilityLabel
|
|
47
49
|
}));
|
|
50
|
+
case "badge":
|
|
51
|
+
return /*#__PURE__*/React.createElement(Badge, componentProps);
|
|
48
52
|
default:
|
|
49
53
|
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
50
54
|
}
|
|
51
55
|
}
|
|
52
56
|
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
53
|
-
}, [
|
|
57
|
+
}, [endElement, listItemAccessibilityLabel]);
|
|
54
58
|
return /*#__PURE__*/React.createElement(View, {
|
|
55
59
|
style: IOListItemStyles.listItem,
|
|
56
60
|
testID: testID,
|
|
57
|
-
accessible:
|
|
58
|
-
accessibilityLabel:
|
|
61
|
+
accessible: endElement === undefined ? true : false,
|
|
62
|
+
accessibilityLabel: listItemAccessibilityLabel
|
|
59
63
|
}, /*#__PURE__*/React.createElement(View, {
|
|
60
64
|
style: IOListItemStyles.listItemInner
|
|
61
65
|
}, icon && /*#__PURE__*/React.createElement(View, {
|
|
@@ -68,7 +72,7 @@ export const ListItemInfo = _ref => {
|
|
|
68
72
|
size: IOListItemVisualParams.iconSize
|
|
69
73
|
})), /*#__PURE__*/React.createElement(View, {
|
|
70
74
|
style: IOStyles.flex
|
|
71
|
-
}, itemInfoTextComponent),
|
|
75
|
+
}, itemInfoTextComponent), endElement && /*#__PURE__*/React.createElement(View, {
|
|
72
76
|
style: {
|
|
73
77
|
marginLeft: IOListItemVisualParams.actionMargin
|
|
74
78
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useMemo","View","IOListItemStyles","IOListItemVisualParams","IOStyles","useIOTheme","Icon","H6","LabelSmall","ButtonLink","IconButton","ListItemInfo","_ref","label","value","numberOfLines","icon","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useMemo","View","IOListItemStyles","IOListItemVisualParams","IOStyles","useIOTheme","Icon","H6","LabelSmall","ButtonLink","IconButton","Badge","ListItemInfo","_ref","label","value","numberOfLines","icon","endElement","accessibilityLabel","testID","theme","componentValueToAccessibility","listItemAccessibilityLabel","itemInfoTextComponent","createElement","accessible","undefined","importantForAccessibility","type","accessibilityElementsHidden","weight","color","listItemInfoAction","componentProps","buttonLinkAccessibilityLabel","_extends","iconButtonAccessibilityLabel","Fragment","style","listItem","listItemInner","marginRight","actionMargin","name","size","iconSize","flex","marginLeft"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemInfo.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAoBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnE,SAASC,IAAI,QAAQ,cAAc;AACnC,SACEC,gBAAgB,EAChBC,sBAAsB,EACtBC,QAAQ,EACRC,UAAU,QACL,YAAY;AAEnB,SAAkBC,IAAI,QAAQ,UAAU;AACxC,SAASC,EAAE,EAAEC,UAAU,QAAQ,eAAe;AAC9C,SAASC,UAAU,EAAEC,UAAU,QAAQ,YAAY;AACnD,SAASC,KAAK,QAAQ,UAAU;AAgChC,OAAO,MAAMC,YAAY,GAAGC,IAAA,IAQR;EAAA,IARS;IAC3BC,KAAK;IACLC,KAAK;IACLC,aAAa,GAAG,CAAC;IACjBC,IAAI;IACJC,UAAU;IACVC,kBAAkB;IAClBC;EACY,CAAC,GAAAP,IAAA;EACb,MAAMQ,KAAK,GAAGhB,UAAU,CAAC,CAAC;EAC1B,MAAMiB,6BAA6B,GAAGtB,OAAO,CAC3C,MAAO,OAAOe,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAG,EAAG,EAC9C,CAACA,KAAK,CACR,CAAC;EAED,MAAMQ,0BAA0B,GAAGvB,OAAO,CACxC,MACEmB,kBAAkB,GACdA,kBAAkB,GACjB,GAAEL,KAAM,KAAIQ,6BAA8B,EAAC,EAClD,CAACR,KAAK,EAAEQ,6BAA6B,EAAEH,kBAAkB,CAC3D,CAAC;EAED,MAAMK,qBAAqB,GAAGxB,OAAO,CACnC,mBACEF,KAAA,CAAA2B,aAAA,CAACxB,IAAI;IACHyB,UAAU,EAAER,UAAU,KAAKS,SAAS,GAAG,IAAI,GAAG,KAAM;IACpDC,yBAAyB,EACvBV,UAAU,KAAKS,SAAS,IAAIT,UAAU,CAACW,IAAI,KAAK,OAAO,GACnD,KAAK,GACL,qBACL;IACDC,2BAA2B,EACzBZ,UAAU,KAAKS,SAAS,IAAIT,UAAU,CAACW,IAAI,KAAK;EACjD,gBAED/B,KAAA,CAAA2B,aAAA,CAACjB,UAAU;IAACuB,MAAM,EAAC,SAAS;IAACC,KAAK,EAAEX,KAAK,CAAC,mBAAmB;EAAE,GAC5DP,KACS,CAAC,EACZ,OAAOC,KAAK,KAAK,QAAQ,gBACxBjB,KAAA,CAAA2B,aAAA,CAAClB,EAAE;IAACyB,KAAK,EAAEX,KAAK,CAAC,kBAAkB,CAAE;IAACL,aAAa,EAAEA;EAAc,GAChED,KACC,CAAC,GAELA,KAEE,CACP,EACD,CAACD,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAEK,KAAK,EAAEH,UAAU,CACjD,CAAC;EAED,MAAMe,kBAAkB,GAAGlC,WAAW,CAAC,MAAM;IAC3C,IAAImB,UAAU,EAAE;MACd,MAAM;QAAEW,IAAI;QAAEK;MAAe,CAAC,GAAGhB,UAAU;MAE3C,QAAQW,IAAI;QACV,KAAK,YAAY;UACf,MAAMM,4BAA4B,GAAI,GAAEZ,0BAA2B,KAAIW,cAAc,CAACf,kBAAmB,EAAC;UAE1G,oBACErB,KAAA,CAAA2B,aAAA,CAAChB,UAAU,EAAA2B,QAAA,KACLF,cAAc;YAClBf,kBAAkB,EAAEgB;UAA6B,EAClD,CAAC;QAEN,KAAK,YAAY;UACf,MAAME,4BAA4B,GAAI,GAAEd,0BAA2B,KAAIW,cAAc,CAACf,kBAAmB,EAAC;UAC1G,oBACErB,KAAA,CAAA2B,aAAA,CAACf,UAAU,EAAA0B,QAAA,KACLF,cAAc;YAClBf,kBAAkB,EAAEkB;UAA6B,EAClD,CAAC;QAEN,KAAK,OAAO;UACV,oBAAOvC,KAAA,CAAA2B,aAAA,CAACd,KAAK,EAAKuB,cAAiB,CAAC;QACtC;UACE,oBAAOpC,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAAwC,QAAA,MAAI,CAAC;MAChB;IACF;IACA,oBAAOxC,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAAwC,QAAA,MAAI,CAAC;EACd,CAAC,EAAE,CAACpB,UAAU,EAAEK,0BAA0B,CAAC,CAAC;EAE5C,oBACEzB,KAAA,CAAA2B,aAAA,CAACxB,IAAI;IACHsC,KAAK,EAAErC,gBAAgB,CAACsC,QAAS;IACjCpB,MAAM,EAAEA,MAAO;IACfM,UAAU,EAAER,UAAU,KAAKS,SAAS,GAAG,IAAI,GAAG,KAAM;IACpDR,kBAAkB,EAAEI;EAA2B,gBAE/CzB,KAAA,CAAA2B,aAAA,CAACxB,IAAI;IAACsC,KAAK,EAAErC,gBAAgB,CAACuC;EAAc,GACzCxB,IAAI,iBACHnB,KAAA,CAAA2B,aAAA,CAACxB,IAAI;IAACsC,KAAK,EAAE;MAAEG,WAAW,EAAEvC,sBAAsB,CAACwC;IAAa;EAAE,gBAChE7C,KAAA,CAAA2B,aAAA,CAACnB,IAAI;IACHsC,IAAI,EAAE3B,IAAK;IACXe,KAAK,EAAC,UAAU;IAChBa,IAAI,EAAE1C,sBAAsB,CAAC2C;EAAS,CACvC,CACG,CACP,eACDhD,KAAA,CAAA2B,aAAA,CAACxB,IAAI;IAACsC,KAAK,EAAEnC,QAAQ,CAAC2C;EAAK,GAAEvB,qBAA4B,CAAC,EACzDN,UAAU,iBACTpB,KAAA,CAAA2B,aAAA,CAACxB,IAAI;IAACsC,KAAK,EAAE;MAAES,UAAU,EAAE7C,sBAAsB,CAACwC;IAAa;EAAE,GAC9DV,kBAAkB,CAAC,CAChB,CAEJ,CACF,CAAC;AAEX,CAAC;AAED,eAAerB,YAAY"}
|
|
@@ -2,6 +2,7 @@ import React, { ComponentProps } from "react";
|
|
|
2
2
|
import { WithTestID } from "../../utils/types";
|
|
3
3
|
import { IOIcons } from "../icons";
|
|
4
4
|
import { ButtonLink, IconButton } from "../buttons";
|
|
5
|
+
import { Badge } from "../badge";
|
|
5
6
|
type ButtonLinkActionProps = {
|
|
6
7
|
type: "buttonLink";
|
|
7
8
|
componentProps: ComponentProps<typeof ButtonLink>;
|
|
@@ -10,15 +11,19 @@ type IconButtonActionProps = {
|
|
|
10
11
|
type: "iconButton";
|
|
11
12
|
componentProps: ComponentProps<typeof IconButton>;
|
|
12
13
|
};
|
|
13
|
-
type
|
|
14
|
+
type BadgeProps = {
|
|
15
|
+
type: "badge";
|
|
16
|
+
componentProps: ComponentProps<typeof Badge>;
|
|
17
|
+
};
|
|
18
|
+
type EndElementProps = ButtonLinkActionProps | IconButtonActionProps | BadgeProps;
|
|
14
19
|
export type ListItemInfo = WithTestID<{
|
|
15
20
|
label: string;
|
|
16
21
|
value: string | React.ReactNode;
|
|
17
22
|
numberOfLines?: number;
|
|
18
23
|
icon?: IOIcons;
|
|
19
|
-
|
|
24
|
+
endElement?: EndElementProps;
|
|
20
25
|
accessibilityLabel?: string;
|
|
21
26
|
}>;
|
|
22
|
-
export declare const ListItemInfo: ({ label, value, numberOfLines, icon,
|
|
27
|
+
export declare const ListItemInfo: ({ label, value, numberOfLines, icon, endElement, accessibilityLabel, testID }: ListItemInfo) => React.JSX.Element;
|
|
23
28
|
export default ListItemInfo;
|
|
24
29
|
//# sourceMappingURL=ListItemInfo.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemInfo.d.ts","sourceRoot":"","sources":["../../../../src/components/listitems/ListItemInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAwB,MAAM,OAAO,CAAC;AAQpE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAQ,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"ListItemInfo.d.ts","sourceRoot":"","sources":["../../../../src/components/listitems/ListItemInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAwB,MAAM,OAAO,CAAC;AAQpE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAQ,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,cAAc,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;CACnD,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,cAAc,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;CACnD,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;CAC9C,CAAC;AAEF,KAAK,eAAe,GAChB,qBAAqB,GACrB,qBAAqB,GACrB,UAAU,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC,CAAC;AAEH,eAAO,MAAM,YAAY,kFAQtB,YAAY,sBAoGd,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
package/package.json
CHANGED
|
@@ -10,6 +10,7 @@ import { WithTestID } from "../../utils/types";
|
|
|
10
10
|
import { IOIcons, Icon } from "../icons";
|
|
11
11
|
import { H6, LabelSmall } from "../typography";
|
|
12
12
|
import { ButtonLink, IconButton } from "../buttons";
|
|
13
|
+
import { Badge } from "../badge";
|
|
13
14
|
|
|
14
15
|
type ButtonLinkActionProps = {
|
|
15
16
|
type: "buttonLink";
|
|
@@ -21,14 +22,22 @@ type IconButtonActionProps = {
|
|
|
21
22
|
componentProps: ComponentProps<typeof IconButton>;
|
|
22
23
|
};
|
|
23
24
|
|
|
24
|
-
type
|
|
25
|
+
type BadgeProps = {
|
|
26
|
+
type: "badge";
|
|
27
|
+
componentProps: ComponentProps<typeof Badge>;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
type EndElementProps =
|
|
31
|
+
| ButtonLinkActionProps
|
|
32
|
+
| IconButtonActionProps
|
|
33
|
+
| BadgeProps;
|
|
25
34
|
|
|
26
35
|
export type ListItemInfo = WithTestID<{
|
|
27
36
|
label: string;
|
|
28
37
|
value: string | React.ReactNode;
|
|
29
38
|
numberOfLines?: number;
|
|
30
39
|
icon?: IOIcons;
|
|
31
|
-
|
|
40
|
+
endElement?: EndElementProps;
|
|
32
41
|
// Accessibility
|
|
33
42
|
accessibilityLabel?: string;
|
|
34
43
|
}>;
|
|
@@ -38,7 +47,7 @@ export const ListItemInfo = ({
|
|
|
38
47
|
value,
|
|
39
48
|
numberOfLines = 2,
|
|
40
49
|
icon,
|
|
41
|
-
|
|
50
|
+
endElement,
|
|
42
51
|
accessibilityLabel,
|
|
43
52
|
testID
|
|
44
53
|
}: ListItemInfo) => {
|
|
@@ -59,11 +68,15 @@ export const ListItemInfo = ({
|
|
|
59
68
|
const itemInfoTextComponent = useMemo(
|
|
60
69
|
() => (
|
|
61
70
|
<View
|
|
62
|
-
accessible={
|
|
71
|
+
accessible={endElement === undefined ? true : false}
|
|
63
72
|
importantForAccessibility={
|
|
64
|
-
|
|
73
|
+
endElement === undefined || endElement.type === "badge"
|
|
74
|
+
? "yes"
|
|
75
|
+
: "no-hide-descendants"
|
|
76
|
+
}
|
|
77
|
+
accessibilityElementsHidden={
|
|
78
|
+
endElement !== undefined && endElement.type !== "badge"
|
|
65
79
|
}
|
|
66
|
-
accessibilityElementsHidden={action !== undefined}
|
|
67
80
|
>
|
|
68
81
|
<LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
|
|
69
82
|
{label}
|
|
@@ -77,42 +90,46 @@ export const ListItemInfo = ({
|
|
|
77
90
|
)}
|
|
78
91
|
</View>
|
|
79
92
|
),
|
|
80
|
-
[label, value, numberOfLines, theme,
|
|
93
|
+
[label, value, numberOfLines, theme, endElement]
|
|
81
94
|
);
|
|
82
95
|
|
|
83
96
|
const listItemInfoAction = useCallback(() => {
|
|
84
|
-
if (
|
|
85
|
-
const { type, componentProps } =
|
|
97
|
+
if (endElement) {
|
|
98
|
+
const { type, componentProps } = endElement;
|
|
86
99
|
|
|
87
|
-
const accessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
|
|
88
100
|
switch (type) {
|
|
89
101
|
case "buttonLink":
|
|
102
|
+
const buttonLinkAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
|
|
103
|
+
|
|
90
104
|
return (
|
|
91
105
|
<ButtonLink
|
|
92
106
|
{...componentProps}
|
|
93
|
-
accessibilityLabel={
|
|
107
|
+
accessibilityLabel={buttonLinkAccessibilityLabel}
|
|
94
108
|
/>
|
|
95
109
|
);
|
|
96
110
|
case "iconButton":
|
|
111
|
+
const iconButtonAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
|
|
97
112
|
return (
|
|
98
113
|
<IconButton
|
|
99
114
|
{...componentProps}
|
|
100
|
-
accessibilityLabel={
|
|
115
|
+
accessibilityLabel={iconButtonAccessibilityLabel}
|
|
101
116
|
/>
|
|
102
117
|
);
|
|
118
|
+
case "badge":
|
|
119
|
+
return <Badge {...componentProps} />;
|
|
103
120
|
default:
|
|
104
121
|
return <></>;
|
|
105
122
|
}
|
|
106
123
|
}
|
|
107
124
|
return <></>;
|
|
108
|
-
}, [
|
|
125
|
+
}, [endElement, listItemAccessibilityLabel]);
|
|
109
126
|
|
|
110
127
|
return (
|
|
111
128
|
<View
|
|
112
129
|
style={IOListItemStyles.listItem}
|
|
113
130
|
testID={testID}
|
|
114
|
-
accessible={
|
|
115
|
-
accessibilityLabel={
|
|
131
|
+
accessible={endElement === undefined ? true : false}
|
|
132
|
+
accessibilityLabel={listItemAccessibilityLabel}
|
|
116
133
|
>
|
|
117
134
|
<View style={IOListItemStyles.listItemInner}>
|
|
118
135
|
{icon && (
|
|
@@ -125,7 +142,7 @@ export const ListItemInfo = ({
|
|
|
125
142
|
</View>
|
|
126
143
|
)}
|
|
127
144
|
<View style={IOStyles.flex}>{itemInfoTextComponent}</View>
|
|
128
|
-
{
|
|
145
|
+
{endElement && (
|
|
129
146
|
<View style={{ marginLeft: IOListItemVisualParams.actionMargin }}>
|
|
130
147
|
{listItemInfoAction()}
|
|
131
148
|
</View>
|