@widergy/mobile-ui 1.33.2 → 1.33.3
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
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [1.33.3](https://github.com/widergy/mobile-ui/compare/v1.33.2...v1.33.3) (2025-01-16)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* [UGC-1142] ellipsize utselectablecard ([#406](https://github.com/widergy/mobile-ui/issues/406)) ([1ab4e62](https://github.com/widergy/mobile-ui/commit/1ab4e622d3744f1c0f86c29ed79d4d6758b5509d))
|
|
7
|
+
|
|
1
8
|
## [1.33.2](https://github.com/widergy/mobile-ui/compare/v1.33.1...v1.33.2) (2025-01-13)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# UTSelectableCard
|
|
2
|
+
|
|
3
|
+
## Description
|
|
4
|
+
|
|
5
|
+
`UTSelectableCard` is a customizable card component that provides selection capabilities, supports various layouts, and can display additional information, tooltips, and icons. It is designed to be flexible and themeable to fit different UI requirements.
|
|
6
|
+
|
|
7
|
+
## Props
|
|
8
|
+
|
|
9
|
+
| Name | Type | Default | Description |
|
|
10
|
+
| ---------------- | -------------------- | ---------- | --------------------------------------------------------------------------------------------- |
|
|
11
|
+
| `additionalInfo` | `additionalInfoType` | `{}` | Contains `description` and `title` to display supplementary information in the card. |
|
|
12
|
+
| `appearance` | `string` | `'white'` | Defines the card's appearance. Supported values: `white`, `gray`. |
|
|
13
|
+
| `checkIcon` | `bool` | `true` | Whether to show a check icon when the card is selected. |
|
|
14
|
+
| `description` | `string` | | Secondary text shown below the title. |
|
|
15
|
+
| `disabled` | `bool` | `false` | Disables the card, preventing interactions and applying a disabled style. |
|
|
16
|
+
| `Icon` | `iconType` | | Icon configuration. Supports `url`, `name`, `shade`, `size`, or a custom `Component`. |
|
|
17
|
+
| `numberOfLines` | `number` | | Determines the amount of lines the text can span. If the text overflows it will be ellipsized |
|
|
18
|
+
| `onPress` | `func` | | Function triggered when the card is pressed. |
|
|
19
|
+
| `selected` | `bool` | `false` | Indicates whether the card is selected. |
|
|
20
|
+
| `size` | `string` | `'medium'` | Controls the size of the card. Supported values: `medium`, `small`. |
|
|
21
|
+
| `style` | `object` | | Custom styles to apply to the card. |
|
|
22
|
+
| `titleText` | `string` | | Main text displayed at the top of the card. |
|
|
23
|
+
| `tooltip` | `string` | | Tooltip content to display next to the title. |
|
|
24
|
+
|
|
25
|
+
## Appearance
|
|
26
|
+
|
|
27
|
+
The `appearance` prop defines the visual style of the card:
|
|
28
|
+
|
|
29
|
+
- **white**: Light background with no border by default.
|
|
30
|
+
- **gray**: Subtle gray background with borders.
|
|
31
|
+
|
|
32
|
+
## Size
|
|
33
|
+
|
|
34
|
+
The `size` prop affects the padding and dimensions of the card:
|
|
35
|
+
|
|
36
|
+
- **medium**: Larger padding for spacious layouts.
|
|
37
|
+
- **small**: Compact layout with reduced padding.
|
|
38
|
+
|
|
39
|
+
## Custom Types
|
|
40
|
+
|
|
41
|
+
| Type | Shape |
|
|
42
|
+
| ------------------ | -------------------------------------------------------------------------------------------- |
|
|
43
|
+
| additionalInfoType | `{ title: string, description: string }` |
|
|
44
|
+
| iconType | `{ url: string, name: string, Component: React.ComponentType, shade: string, size: number }` |
|
|
45
|
+
|
|
46
|
+
## Example
|
|
47
|
+
|
|
48
|
+
### Basic Usage
|
|
49
|
+
|
|
50
|
+
```jsx
|
|
51
|
+
import React from 'react';
|
|
52
|
+
import { View } from 'react-native';
|
|
53
|
+
import UTSelectableCard from './UTSelectableCard';
|
|
54
|
+
|
|
55
|
+
const Example = () => {
|
|
56
|
+
return (
|
|
57
|
+
<View style={{ padding: 20 }}>
|
|
58
|
+
<UTSelectableCard
|
|
59
|
+
titleText="Example Card"
|
|
60
|
+
description="This is a description."
|
|
61
|
+
onPress={() => alert('Card Pressed')}
|
|
62
|
+
selected={true}
|
|
63
|
+
Icon={{ name: 'IconName', size: 24 }}
|
|
64
|
+
tooltip="More Info"
|
|
65
|
+
size="medium"
|
|
66
|
+
/>
|
|
67
|
+
</View>
|
|
68
|
+
);
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
export default Example;
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### With Additional Info
|
|
75
|
+
|
|
76
|
+
```jsx
|
|
77
|
+
<UTSelectableCard
|
|
78
|
+
titleText="Card with Info"
|
|
79
|
+
description="Primary description"
|
|
80
|
+
additionalInfo={{ title: 'Info Title', description: 'Additional details here' }}
|
|
81
|
+
selected={false}
|
|
82
|
+
/>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Notes
|
|
86
|
+
|
|
87
|
+
- Ensure to define custom styles through the `style` prop or the project theme.
|
|
88
|
+
- The `Icon` prop supports multiple configurations, allowing for flexibility in icon rendering.
|
|
89
|
+
- Theming is managed through `useTheme` and can be extended for specific requirements.
|
|
@@ -20,6 +20,7 @@ const UTSelectableCard = ({
|
|
|
20
20
|
description,
|
|
21
21
|
disabled = false,
|
|
22
22
|
Icon,
|
|
23
|
+
numberOfLines,
|
|
23
24
|
onPress,
|
|
24
25
|
selected = false,
|
|
25
26
|
size = 'medium',
|
|
@@ -71,13 +72,14 @@ const UTSelectableCard = ({
|
|
|
71
72
|
<Icon.Component style={themedStyles.icon} />
|
|
72
73
|
))}
|
|
73
74
|
<View style={themedStyles.textContainer}>
|
|
74
|
-
<View style={themedStyles.column}>
|
|
75
|
+
<View style={[themedStyles.column, themedStyles.leftColumn]}>
|
|
75
76
|
<View style={[themedStyles.titleAndTooltip, selected && themedStyles.selectedTitleAndTooltip]}>
|
|
76
77
|
<UTLabel
|
|
77
78
|
colorTheme={colorTheme}
|
|
78
|
-
|
|
79
|
-
variant="subtitle1"
|
|
79
|
+
numberOfLines={numberOfLines}
|
|
80
80
|
style={tooltip && themedStyles.titleMargin}
|
|
81
|
+
variant="subtitle1"
|
|
82
|
+
weight="medium"
|
|
81
83
|
>
|
|
82
84
|
{titleText}
|
|
83
85
|
</UTLabel>
|
|
@@ -88,7 +90,11 @@ const UTSelectableCard = ({
|
|
|
88
90
|
)}
|
|
89
91
|
</View>
|
|
90
92
|
{description && (
|
|
91
|
-
<UTLabel
|
|
93
|
+
<UTLabel
|
|
94
|
+
numberOfLines={numberOfLines}
|
|
95
|
+
colorTheme={selected ? 'accent' : 'gray'}
|
|
96
|
+
style={themedStyles.description}
|
|
97
|
+
>
|
|
92
98
|
{description}
|
|
93
99
|
</UTLabel>
|
|
94
100
|
)}
|
|
@@ -127,6 +133,7 @@ UTSelectableCard.propTypes = {
|
|
|
127
133
|
description: string,
|
|
128
134
|
disabled: bool,
|
|
129
135
|
Icon: shape({ name: string, shade: string, size: number }),
|
|
136
|
+
numberOfLines: number,
|
|
130
137
|
onPress: func,
|
|
131
138
|
selected: bool,
|
|
132
139
|
size: string,
|
|
@@ -60,6 +60,7 @@ export const ownSizeStyles = {
|
|
|
60
60
|
|
|
61
61
|
export const ownStyles = StyleSheet.create({
|
|
62
62
|
additionalInfo: {
|
|
63
|
+
marginLeft: 8,
|
|
63
64
|
textAlign: 'right'
|
|
64
65
|
},
|
|
65
66
|
checkIcon: {
|
|
@@ -79,6 +80,7 @@ export const ownStyles = StyleSheet.create({
|
|
|
79
80
|
icon: {
|
|
80
81
|
marginRight: 16
|
|
81
82
|
},
|
|
83
|
+
leftColumn: { flexShrink: 1 },
|
|
82
84
|
outerContainer: {
|
|
83
85
|
borderRadius: 4
|
|
84
86
|
},
|
|
@@ -89,6 +91,7 @@ export const ownStyles = StyleSheet.create({
|
|
|
89
91
|
display: 'flex',
|
|
90
92
|
flexDirection: 'row',
|
|
91
93
|
flexGrow: 1,
|
|
94
|
+
flexShrink: 1,
|
|
92
95
|
justifyContent: 'space-between'
|
|
93
96
|
},
|
|
94
97
|
titleAndTooltip: {
|
package/package.json
CHANGED