@proximus/lavender-cells-native 0.1.0-alpha.6 → 1.1.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/PxCell.d.ts.map +1 -1
- package/dist/PxCell.js +4 -4
- package/dist/PxCellCheckbox.d.ts.map +1 -1
- package/dist/PxCellCheckbox.js +2 -11
- package/dist/PxCellRadio.d.ts.map +1 -1
- package/dist/PxCellRadio.js +2 -4
- package/dist/PxEntrypoint.d.ts.map +1 -1
- package/dist/PxEntrypoint.js +1 -1
- package/package.json +13 -43
- package/CHANGELOG.md +0 -14
- package/dist/far/away/package.json +0 -38
- package/src/PxCell.tsx +0 -199
- package/src/PxCellCheckbox.tsx +0 -68
- package/src/PxCellRadio.tsx +0 -59
- package/src/PxEntrypoint.tsx +0 -13
- package/src/index.ts +0 -4
- package/tsconfig.json +0 -8
package/dist/PxCell.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PxCell.d.ts","sourceRoot":"","sources":["../src/PxCell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,OAAQ,SAAQ,kBAAkB;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB,CAAC,EAAE,kBAAkB,CAAC;IAC9C,YAAY,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;CAClD;AAID,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,WAAW,EACX,OAAO,EACP,eAAe,EACf,cAAc,EACd,MAAM,EACN,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,MAAM,EACN,IAAc,EACd,UAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,EACR,wBAAwB,EACxB,YAAqB,EACrB,SAAiB,GAClB,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"PxCell.d.ts","sourceRoot":"","sources":["../src/PxCell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,OAAQ,SAAQ,kBAAkB;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB,CAAC,EAAE,kBAAkB,CAAC;IAC9C,YAAY,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;CAClD;AAID,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,WAAW,EACX,OAAO,EACP,eAAe,EACf,cAAc,EACd,MAAM,EACN,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,MAAM,EACN,IAAc,EACd,UAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,EACR,wBAAwB,EACxB,YAAqB,EACrB,SAAiB,GAClB,EAAE,OAAO,qBA+HT"}
|
package/dist/PxCell.js
CHANGED
|
@@ -52,12 +52,12 @@ export function PxCell({ label, description, onPress, backgroundColor, container
|
|
|
52
52
|
fontSize: theme.t('TextSizeLabelLMobile').number,
|
|
53
53
|
color: theme.t('ColorTextNeutralDefault'),
|
|
54
54
|
},
|
|
55
|
-
], disabled: disabled }, label),
|
|
55
|
+
], disabled: disabled, ...(testID && e2eID(`${testID}-cell-title`)) }, label),
|
|
56
56
|
description && (React.createElement(Body, { ...a11y({
|
|
57
57
|
...labelsAccessibilityProps,
|
|
58
58
|
accessible,
|
|
59
59
|
importantForAccessibility: accessible ? 'yes' : 'no',
|
|
60
|
-
}), ...e2eID(`${testID}
|
|
60
|
+
}), ...(testID && e2eID(`${testID}-cell-description`)), style: [
|
|
61
61
|
{
|
|
62
62
|
fontSize: theme.t('TextSizeLabelMMobile').number,
|
|
63
63
|
color: theme.t('ColorTextNeutralDefault'),
|
|
@@ -72,7 +72,7 @@ export function PxCell({ label, description, onPress, backgroundColor, container
|
|
|
72
72
|
textAlign: 'right',
|
|
73
73
|
fontSize: theme.t('TextSizeLabelLMobile').number,
|
|
74
74
|
color: theme.t('ColorTextNeutralDefault'),
|
|
75
|
-
}, disabled: disabled }, suffixLabel),
|
|
75
|
+
}, disabled: disabled, ...(testID && e2eID(`${testID}-cell-title-right`)) }, suffixLabel),
|
|
76
76
|
description && (React.createElement(Body, { ...a11y({
|
|
77
77
|
...labelsAccessibilityProps,
|
|
78
78
|
accessible,
|
|
@@ -80,7 +80,7 @@ export function PxCell({ label, description, onPress, backgroundColor, container
|
|
|
80
80
|
}), style: {
|
|
81
81
|
color: theme.t('ColorTextNeutralDefault'),
|
|
82
82
|
fontSize: theme.t('TextSizeLabelMMobile').number,
|
|
83
|
-
}, ...e2eID(`${testID}
|
|
83
|
+
}, ...(testID && e2eID(`${testID}-cell-description-right`)), disabled: disabled }, suffixDescription)))),
|
|
84
84
|
suffix),
|
|
85
85
|
separator && React.createElement(PxSeparator, null)));
|
|
86
86
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PxCellCheckbox.d.ts","sourceRoot":"","sources":["../src/PxCellCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAU,MAAM,UAAU,CAAC;AAI3C,wBAAgB,cAAc,CAC5B,KAAK,EAAE,OAAO,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"PxCellCheckbox.d.ts","sourceRoot":"","sources":["../src/PxCellCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAU,MAAM,UAAU,CAAC;AAI3C,wBAAgB,cAAc,CAC5B,KAAK,EAAE,OAAO,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,qBA8C/D"}
|
package/dist/PxCellCheckbox.js
CHANGED
|
@@ -7,21 +7,12 @@ export function PxCellCheckbox(props) {
|
|
|
7
7
|
const checkbox = (React.createElement(PxCheckBox, { disabled: props.disabled, accessibilityLabel: props.label, accessibilityHint: props.description, wrapperStyle: {
|
|
8
8
|
height: 32,
|
|
9
9
|
justifyContent: 'center',
|
|
10
|
-
},
|
|
11
|
-
// checkboxStyle={{
|
|
12
|
-
// // Not applied on Android because of a weird visual bug
|
|
13
|
-
// ...(Platform.OS === 'ios' && {
|
|
14
|
-
// width: 16,
|
|
15
|
-
// height: 16,
|
|
16
|
-
// }),
|
|
17
|
-
// backgroundColor: 'transparent',
|
|
18
|
-
// }}
|
|
19
|
-
checked: props.checked, onChange: props.onPress, testID: props.testID }));
|
|
10
|
+
}, checked: props.checked, onChange: props.onPress, ...(props.testID && { testID: `${props.testID}-cell` }) }));
|
|
20
11
|
return (React.createElement(PxCell, { ...props, onPress: undefined, accessible: false, prefix: side === 'left' ? (React.createElement(View, { style: styles.prefix },
|
|
21
12
|
checkbox,
|
|
22
13
|
props.prefix)) : (props.prefix), suffix: side === 'right' ? (React.createElement(View, { style: styles.prefix },
|
|
23
14
|
props.suffix,
|
|
24
|
-
checkbox)) : (props.suffix) }));
|
|
15
|
+
checkbox)) : (props.suffix), testID: props.testID }));
|
|
25
16
|
}
|
|
26
17
|
const styles = StyleSheet.create({
|
|
27
18
|
prefix: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PxCellRadio.d.ts","sourceRoot":"","sources":["../src/PxCellRadio.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAU,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,WAAW,CACzB,KAAK,EAAE,OAAO,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"PxCellRadio.d.ts","sourceRoot":"","sources":["../src/PxCellRadio.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAU,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,WAAW,CACzB,KAAK,EAAE,OAAO,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,qBA0C/D"}
|
package/dist/PxCellRadio.js
CHANGED
|
@@ -4,14 +4,12 @@ import React from 'react';
|
|
|
4
4
|
import { StyleSheet, View } from 'react-native';
|
|
5
5
|
export function PxCellRadio(props) {
|
|
6
6
|
const { side = 'right' } = props;
|
|
7
|
-
const radioButton = (React.createElement(PxRadioButton, { size: 20, accessibilityLabel: props.label, accessibilityHint: props.description,
|
|
8
|
-
accessible: false,
|
|
9
|
-
}, checked: props.checked, onPress: props.onPress, testID: props.testID }));
|
|
7
|
+
const radioButton = (React.createElement(PxRadioButton, { size: 20, accessibilityLabel: props.label, accessibilityHint: props.description, checked: props.checked, onPress: props.onPress, ...(props.testID && { testID: `${props.testID}-cell` }) }));
|
|
10
8
|
return (React.createElement(PxCell, { ...props, accessible: false, prefix: side === 'left' ? (React.createElement(View, { style: styles.prefix },
|
|
11
9
|
radioButton,
|
|
12
10
|
props.prefix)) : (props.prefix), suffix: side === 'right' ? (React.createElement(View, { style: styles.prefix },
|
|
13
11
|
props.suffix,
|
|
14
|
-
radioButton)) : (props.suffix) }));
|
|
12
|
+
radioButton)) : (props.suffix), testID: props.testID }));
|
|
15
13
|
}
|
|
16
14
|
const styles = StyleSheet.create({
|
|
17
15
|
prefix: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PxEntrypoint.d.ts","sourceRoot":"","sources":["../src/PxEntrypoint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAU,MAAM,UAAU,CAAC;AAG3C,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"PxEntrypoint.d.ts","sourceRoot":"","sources":["../src/PxEntrypoint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAU,MAAM,UAAU,CAAC;AAG3C,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,qBAS1C"}
|
package/dist/PxEntrypoint.js
CHANGED
|
@@ -2,5 +2,5 @@ import React from 'react';
|
|
|
2
2
|
import { PxCell } from './PxCell';
|
|
3
3
|
import { PxIcon } from '@proximus/lavender-icon-native';
|
|
4
4
|
export function PxEntrypoint(props) {
|
|
5
|
-
return (React.createElement(PxCell, { ...props, accessibilityRole: 'button', suffix: React.createElement(PxIcon, { name: 'chevron_right' }) }));
|
|
5
|
+
return (React.createElement(PxCell, { ...props, accessibilityRole: 'button', suffix: React.createElement(PxIcon, { name: 'chevron_right' }), testID: props.testID }));
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,53 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-cells-native",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0-alpha.0",
|
|
4
4
|
"description": "Lavender cell list component",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"main": "
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
7
10
|
"type": "module",
|
|
8
|
-
"scripts": {
|
|
9
|
-
"clean": "rm -rf dist",
|
|
10
|
-
"transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
|
|
11
|
-
"prepublish": "yarn clean && yarn transform-package-json && yarn build",
|
|
12
|
-
"build": "npx tsc -p tsconfig.json"
|
|
13
|
-
},
|
|
14
11
|
"peerDependencies": {
|
|
15
|
-
"@proximus/lavender-checkbox-native": "
|
|
16
|
-
"@proximus/lavender-common-native": "
|
|
17
|
-
"@proximus/lavender-icon-native": "
|
|
18
|
-
"@proximus/lavender-radio-native": "
|
|
19
|
-
"@proximus/lavender-separator-native": "
|
|
20
|
-
"@proximus/lavender-styling-native": "
|
|
21
|
-
"@proximus/lavender-texts-native": "
|
|
22
|
-
},
|
|
23
|
-
"devDependencies": {
|
|
24
|
-
"@proximus/lavender-checkbox-native": "0.1.0-alpha.6",
|
|
25
|
-
"@proximus/lavender-common-native": "0.1.0-alpha.6",
|
|
26
|
-
"@proximus/lavender-icon-native": "0.1.0-alpha.6",
|
|
27
|
-
"@proximus/lavender-radio-native": "0.1.0-alpha.6",
|
|
28
|
-
"@proximus/lavender-separator-native": "0.1.0-alpha.5",
|
|
29
|
-
"@proximus/lavender-styling-native": "0.1.0-alpha.5",
|
|
30
|
-
"@proximus/lavender-texts-native": "0.1.0-alpha.6"
|
|
12
|
+
"@proximus/lavender-checkbox-native": "*",
|
|
13
|
+
"@proximus/lavender-common-native": "*",
|
|
14
|
+
"@proximus/lavender-icon-native": "*",
|
|
15
|
+
"@proximus/lavender-radio-native": "*",
|
|
16
|
+
"@proximus/lavender-separator-native": "*",
|
|
17
|
+
"@proximus/lavender-styling-native": "*",
|
|
18
|
+
"@proximus/lavender-texts-native": "*"
|
|
31
19
|
},
|
|
32
20
|
"publishConfig": {
|
|
33
21
|
"access": "public"
|
|
34
|
-
}
|
|
35
|
-
"lerna": {
|
|
36
|
-
"command": {
|
|
37
|
-
"publish": {
|
|
38
|
-
"assets": [
|
|
39
|
-
{
|
|
40
|
-
"from": "dist/far/away/package.json",
|
|
41
|
-
"to": "."
|
|
42
|
-
},
|
|
43
|
-
"dist/*.js",
|
|
44
|
-
"dist/*.d.ts",
|
|
45
|
-
"dist/*.d.ts.map",
|
|
46
|
-
"src",
|
|
47
|
-
"package.json"
|
|
48
|
-
]
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
"gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
|
|
22
|
+
}
|
|
53
23
|
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
# Change Log
|
|
2
|
-
|
|
3
|
-
All notable changes to this project will be documented in this file.
|
|
4
|
-
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
-
|
|
6
|
-
# [0.1.0-alpha.6](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-cells-native@0.1.0-alpha.5...@proximus/lavender-cells-native@0.1.0-alpha.6) (2025-09-26)
|
|
7
|
-
|
|
8
|
-
**Note:** Version bump only for package @proximus/lavender-cells-native
|
|
9
|
-
|
|
10
|
-
# [0.1.0-alpha.5](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-cells-native@0.1.0-alpha.4...@proximus/lavender-cells-native@0.1.0-alpha.5) (2025-09-25)
|
|
11
|
-
|
|
12
|
-
### Bug Fixes
|
|
13
|
-
|
|
14
|
-
- **BCRI-000000:** no free space on gh runner during build ([#27](https://github.com/Pxs-Corporate/react-native-lavender/issues/27)) ([a7c8604](https://github.com/Pxs-Corporate/react-native-lavender/commit/a7c86043b5cefcb10fd768d449c5718fbabe87ec))
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@proximus/lavender-cells-native",
|
|
3
|
-
"version": "0.1.0-alpha.6",
|
|
4
|
-
"description": "Lavender cell list component",
|
|
5
|
-
"license": "MIT",
|
|
6
|
-
"main": "dist/index.js",
|
|
7
|
-
"type": "module",
|
|
8
|
-
"peerDependencies": {
|
|
9
|
-
"@proximus/lavender-checkbox-native": "*",
|
|
10
|
-
"@proximus/lavender-common-native": "*",
|
|
11
|
-
"@proximus/lavender-icon-native": "*",
|
|
12
|
-
"@proximus/lavender-radio-native": "*",
|
|
13
|
-
"@proximus/lavender-separator-native": "*",
|
|
14
|
-
"@proximus/lavender-styling-native": "*",
|
|
15
|
-
"@proximus/lavender-texts-native": "*"
|
|
16
|
-
},
|
|
17
|
-
"publishConfig": {
|
|
18
|
-
"access": "public"
|
|
19
|
-
},
|
|
20
|
-
"lerna": {
|
|
21
|
-
"command": {
|
|
22
|
-
"publish": {
|
|
23
|
-
"assets": [
|
|
24
|
-
{
|
|
25
|
-
"from": "dist/far/away/package.json",
|
|
26
|
-
"to": "."
|
|
27
|
-
},
|
|
28
|
-
"dist/*.js",
|
|
29
|
-
"dist/*.d.ts",
|
|
30
|
-
"dist/*.d.ts.map",
|
|
31
|
-
"src",
|
|
32
|
-
"package.json"
|
|
33
|
-
]
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
|
-
"gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
|
|
38
|
-
}
|
package/src/PxCell.tsx
DELETED
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
AccessibilityProps,
|
|
3
|
-
StyleProp,
|
|
4
|
-
StyleSheet,
|
|
5
|
-
TouchableOpacity,
|
|
6
|
-
View,
|
|
7
|
-
ViewStyle,
|
|
8
|
-
} from 'react-native';
|
|
9
|
-
import { a11y, e2eID } from '@proximus/lavender-common-native';
|
|
10
|
-
import { Body, Header } from '@proximus/lavender-texts-native';
|
|
11
|
-
import { PxSeparator } from '@proximus/lavender-separator-native';
|
|
12
|
-
import { useTheme } from '@proximus/lavender-styling-native';
|
|
13
|
-
import React, { ReactElement, ReactNode } from 'react';
|
|
14
|
-
|
|
15
|
-
export interface IPxCell extends AccessibilityProps {
|
|
16
|
-
label: string;
|
|
17
|
-
description?: string;
|
|
18
|
-
containerStyle?: StyleProp<ViewStyle>;
|
|
19
|
-
backgroundColor?: 'Default' | 'Light';
|
|
20
|
-
onPress?: () => void;
|
|
21
|
-
prefix?: ReactNode;
|
|
22
|
-
suffix?: ReactElement;
|
|
23
|
-
suffixLabel?: string;
|
|
24
|
-
suffixDescription?: string;
|
|
25
|
-
type?: 'naked' | 'contained';
|
|
26
|
-
testID?: string;
|
|
27
|
-
disabled?: boolean;
|
|
28
|
-
separator?: boolean;
|
|
29
|
-
labelsAccessibilityProps?: AccessibilityProps;
|
|
30
|
-
borderRadius?: 'top' | 'bottom' | 'all' | 'none';
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const BORDER_RADIUS = 8;
|
|
34
|
-
|
|
35
|
-
export function PxCell({
|
|
36
|
-
label,
|
|
37
|
-
description,
|
|
38
|
-
onPress,
|
|
39
|
-
backgroundColor,
|
|
40
|
-
containerStyle,
|
|
41
|
-
prefix,
|
|
42
|
-
suffix,
|
|
43
|
-
suffixLabel,
|
|
44
|
-
suffixDescription,
|
|
45
|
-
testID,
|
|
46
|
-
type = 'naked',
|
|
47
|
-
accessible = true,
|
|
48
|
-
accessibilityRole,
|
|
49
|
-
accessibilityLabel,
|
|
50
|
-
accessibilityHint,
|
|
51
|
-
disabled,
|
|
52
|
-
labelsAccessibilityProps,
|
|
53
|
-
borderRadius = 'none',
|
|
54
|
-
separator = false,
|
|
55
|
-
}: IPxCell) {
|
|
56
|
-
const { theme } = useTheme();
|
|
57
|
-
|
|
58
|
-
return (
|
|
59
|
-
<TouchableOpacity
|
|
60
|
-
{...a11y({
|
|
61
|
-
accessibilityRole,
|
|
62
|
-
accessible,
|
|
63
|
-
importantForAccessibility: accessible ? 'yes' : 'no',
|
|
64
|
-
accessibilityLabel: accessibilityLabel || label,
|
|
65
|
-
accessibilityHint: accessibilityHint || description,
|
|
66
|
-
})}
|
|
67
|
-
disabled={disabled || !onPress}
|
|
68
|
-
onPress={onPress}
|
|
69
|
-
{...e2eID(testID)}
|
|
70
|
-
>
|
|
71
|
-
<View
|
|
72
|
-
style={[
|
|
73
|
-
styles.container,
|
|
74
|
-
containerStyle,
|
|
75
|
-
{
|
|
76
|
-
backgroundColor:
|
|
77
|
-
type === 'naked'
|
|
78
|
-
? 'transparent'
|
|
79
|
-
: backgroundColor
|
|
80
|
-
? theme.t(`ColorBackgroundContainer${backgroundColor}Default`)
|
|
81
|
-
: theme.t('ColorBackgroundContainerDefaultDefault'),
|
|
82
|
-
borderTopLeftRadius: ['top', 'all'].includes(borderRadius)
|
|
83
|
-
? BORDER_RADIUS
|
|
84
|
-
: 0,
|
|
85
|
-
borderTopEndRadius: ['top', 'all'].includes(borderRadius)
|
|
86
|
-
? BORDER_RADIUS
|
|
87
|
-
: 0,
|
|
88
|
-
borderBottomLeftRadius: ['bottom', 'all'].includes(borderRadius)
|
|
89
|
-
? BORDER_RADIUS
|
|
90
|
-
: 0,
|
|
91
|
-
borderBottomRightRadius: ['bottom', 'all'].includes(borderRadius)
|
|
92
|
-
? BORDER_RADIUS
|
|
93
|
-
: 0,
|
|
94
|
-
borderRadius: 20,
|
|
95
|
-
},
|
|
96
|
-
disabled && {
|
|
97
|
-
backgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
|
|
98
|
-
},
|
|
99
|
-
]}
|
|
100
|
-
>
|
|
101
|
-
{!!prefix && <View style={styles.leftComponent}>{prefix}</View>}
|
|
102
|
-
<View style={styles.content}>
|
|
103
|
-
<Header
|
|
104
|
-
{...a11y({
|
|
105
|
-
...labelsAccessibilityProps,
|
|
106
|
-
accessible,
|
|
107
|
-
importantForAccessibility: accessible ? 'yes' : 'no',
|
|
108
|
-
})}
|
|
109
|
-
style={[
|
|
110
|
-
{
|
|
111
|
-
fontSize: theme.t('TextSizeLabelLMobile').number,
|
|
112
|
-
color: theme.t('ColorTextNeutralDefault'),
|
|
113
|
-
},
|
|
114
|
-
]}
|
|
115
|
-
disabled={disabled}
|
|
116
|
-
>
|
|
117
|
-
{label}
|
|
118
|
-
</Header>
|
|
119
|
-
{description && (
|
|
120
|
-
<Body
|
|
121
|
-
{...a11y({
|
|
122
|
-
...labelsAccessibilityProps,
|
|
123
|
-
accessible,
|
|
124
|
-
importantForAccessibility: accessible ? 'yes' : 'no',
|
|
125
|
-
})}
|
|
126
|
-
{...e2eID(`${testID}_subTitle`)}
|
|
127
|
-
style={[
|
|
128
|
-
{
|
|
129
|
-
fontSize: theme.t('TextSizeLabelMMobile').number,
|
|
130
|
-
color: theme.t('ColorTextNeutralDefault'),
|
|
131
|
-
},
|
|
132
|
-
]}
|
|
133
|
-
disabled={disabled}
|
|
134
|
-
>
|
|
135
|
-
{description}
|
|
136
|
-
</Body>
|
|
137
|
-
)}
|
|
138
|
-
</View>
|
|
139
|
-
{suffixLabel && suffixDescription && (
|
|
140
|
-
<View style={styles.suffixLabelDescription}>
|
|
141
|
-
<Header
|
|
142
|
-
{...a11y({
|
|
143
|
-
...labelsAccessibilityProps,
|
|
144
|
-
accessible,
|
|
145
|
-
importantForAccessibility: accessible ? 'yes' : 'no',
|
|
146
|
-
})}
|
|
147
|
-
style={{
|
|
148
|
-
textAlign: 'right',
|
|
149
|
-
fontSize: theme.t('TextSizeLabelLMobile').number,
|
|
150
|
-
color: theme.t('ColorTextNeutralDefault'),
|
|
151
|
-
}}
|
|
152
|
-
disabled={disabled}
|
|
153
|
-
>
|
|
154
|
-
{suffixLabel}
|
|
155
|
-
</Header>
|
|
156
|
-
{description && (
|
|
157
|
-
<Body
|
|
158
|
-
{...a11y({
|
|
159
|
-
...labelsAccessibilityProps,
|
|
160
|
-
accessible,
|
|
161
|
-
importantForAccessibility: accessible ? 'yes' : 'no',
|
|
162
|
-
})}
|
|
163
|
-
style={{
|
|
164
|
-
color: theme.t('ColorTextNeutralDefault'),
|
|
165
|
-
fontSize: theme.t('TextSizeLabelMMobile').number,
|
|
166
|
-
}}
|
|
167
|
-
{...e2eID(`${testID}_subTitle`)}
|
|
168
|
-
disabled={disabled}
|
|
169
|
-
>
|
|
170
|
-
{suffixDescription}
|
|
171
|
-
</Body>
|
|
172
|
-
)}
|
|
173
|
-
</View>
|
|
174
|
-
)}
|
|
175
|
-
{suffix}
|
|
176
|
-
</View>
|
|
177
|
-
{separator && <PxSeparator />}
|
|
178
|
-
</TouchableOpacity>
|
|
179
|
-
);
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
const styles = StyleSheet.create({
|
|
183
|
-
container: {
|
|
184
|
-
flexDirection: 'row',
|
|
185
|
-
padding: 16,
|
|
186
|
-
alignItems: 'center',
|
|
187
|
-
gap: 16,
|
|
188
|
-
},
|
|
189
|
-
content: {
|
|
190
|
-
flex: 1,
|
|
191
|
-
},
|
|
192
|
-
leftComponent: {
|
|
193
|
-
justifyContent: 'center',
|
|
194
|
-
alignItems: 'center',
|
|
195
|
-
},
|
|
196
|
-
suffixLabelDescription: {
|
|
197
|
-
alignSelf: 'flex-end',
|
|
198
|
-
},
|
|
199
|
-
});
|
package/src/PxCellCheckbox.tsx
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { IPxCell, PxCell } from './PxCell';
|
|
3
|
-
import { PxCheckBox } from '@proximus/lavender-checkbox-native';
|
|
4
|
-
import { StyleSheet, View } from 'react-native';
|
|
5
|
-
|
|
6
|
-
export function PxCellCheckbox(
|
|
7
|
-
props: IPxCell & { checked: boolean; side?: 'left' | 'right' }
|
|
8
|
-
) {
|
|
9
|
-
const { side = 'right' } = props;
|
|
10
|
-
const checkbox = (
|
|
11
|
-
<PxCheckBox
|
|
12
|
-
disabled={props.disabled}
|
|
13
|
-
accessibilityLabel={props.label}
|
|
14
|
-
accessibilityHint={props.description}
|
|
15
|
-
wrapperStyle={{
|
|
16
|
-
height: 32,
|
|
17
|
-
justifyContent: 'center',
|
|
18
|
-
}}
|
|
19
|
-
// checkboxStyle={{
|
|
20
|
-
// // Not applied on Android because of a weird visual bug
|
|
21
|
-
// ...(Platform.OS === 'ios' && {
|
|
22
|
-
// width: 16,
|
|
23
|
-
// height: 16,
|
|
24
|
-
// }),
|
|
25
|
-
// backgroundColor: 'transparent',
|
|
26
|
-
// }}
|
|
27
|
-
checked={props.checked}
|
|
28
|
-
onChange={props.onPress}
|
|
29
|
-
testID={props.testID}
|
|
30
|
-
/>
|
|
31
|
-
);
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<PxCell
|
|
35
|
-
{...props}
|
|
36
|
-
onPress={undefined} // override onPress to prevent double tap
|
|
37
|
-
accessible={false}
|
|
38
|
-
prefix={
|
|
39
|
-
side === 'left' ? (
|
|
40
|
-
<View style={styles.prefix}>
|
|
41
|
-
{checkbox}
|
|
42
|
-
{props.prefix}
|
|
43
|
-
</View>
|
|
44
|
-
) : (
|
|
45
|
-
props.prefix
|
|
46
|
-
)
|
|
47
|
-
}
|
|
48
|
-
suffix={
|
|
49
|
-
side === 'right' ? (
|
|
50
|
-
<View style={styles.prefix}>
|
|
51
|
-
{props.suffix}
|
|
52
|
-
{checkbox}
|
|
53
|
-
</View>
|
|
54
|
-
) : (
|
|
55
|
-
props.suffix
|
|
56
|
-
)
|
|
57
|
-
}
|
|
58
|
-
/>
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
const styles = StyleSheet.create({
|
|
63
|
-
prefix: {
|
|
64
|
-
flexDirection: 'row',
|
|
65
|
-
gap: 16,
|
|
66
|
-
alignItems: 'center',
|
|
67
|
-
},
|
|
68
|
-
});
|
package/src/PxCellRadio.tsx
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { PxRadioButton } from '@proximus/lavender-radio-native';
|
|
2
|
-
import { IPxCell, PxCell } from './PxCell';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { StyleSheet, View } from 'react-native';
|
|
5
|
-
|
|
6
|
-
export function PxCellRadio(
|
|
7
|
-
props: IPxCell & { checked: boolean; side?: 'left' | 'right' }
|
|
8
|
-
) {
|
|
9
|
-
const { side = 'right' } = props;
|
|
10
|
-
|
|
11
|
-
const radioButton = (
|
|
12
|
-
<PxRadioButton
|
|
13
|
-
size={20}
|
|
14
|
-
accessibilityLabel={props.label}
|
|
15
|
-
accessibilityHint={props.description}
|
|
16
|
-
labelA11y={{
|
|
17
|
-
accessible: false,
|
|
18
|
-
}}
|
|
19
|
-
checked={props.checked}
|
|
20
|
-
onPress={props.onPress}
|
|
21
|
-
testID={props.testID}
|
|
22
|
-
/>
|
|
23
|
-
);
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<PxCell
|
|
27
|
-
{...props}
|
|
28
|
-
accessible={false}
|
|
29
|
-
prefix={
|
|
30
|
-
side === 'left' ? (
|
|
31
|
-
<View style={styles.prefix}>
|
|
32
|
-
{radioButton}
|
|
33
|
-
{props.prefix}
|
|
34
|
-
</View>
|
|
35
|
-
) : (
|
|
36
|
-
props.prefix
|
|
37
|
-
)
|
|
38
|
-
}
|
|
39
|
-
suffix={
|
|
40
|
-
side === 'right' ? (
|
|
41
|
-
<View style={styles.prefix}>
|
|
42
|
-
{props.suffix}
|
|
43
|
-
{radioButton}
|
|
44
|
-
</View>
|
|
45
|
-
) : (
|
|
46
|
-
props.suffix
|
|
47
|
-
)
|
|
48
|
-
}
|
|
49
|
-
/>
|
|
50
|
-
);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
const styles = StyleSheet.create({
|
|
54
|
-
prefix: {
|
|
55
|
-
flexDirection: 'row',
|
|
56
|
-
gap: 16,
|
|
57
|
-
alignItems: 'center',
|
|
58
|
-
},
|
|
59
|
-
});
|
package/src/PxEntrypoint.tsx
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { IPxCell, PxCell } from './PxCell';
|
|
3
|
-
import { PxIcon } from '@proximus/lavender-icon-native';
|
|
4
|
-
|
|
5
|
-
export function PxEntrypoint(props: IPxCell) {
|
|
6
|
-
return (
|
|
7
|
-
<PxCell
|
|
8
|
-
{...props}
|
|
9
|
-
accessibilityRole={'button'}
|
|
10
|
-
suffix={<PxIcon name={'chevron_right'} />}
|
|
11
|
-
/>
|
|
12
|
-
);
|
|
13
|
-
}
|
package/src/index.ts
DELETED