@umituz/react-native-design-system 2.8.37 → 2.8.40
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/package.json +1 -1
- package/src/atoms/button/AtomicButton.tsx +21 -20
- package/src/atoms/card/styles/cardStyles.ts +1 -1
- package/src/atoms/chip/AtomicChip.tsx +10 -13
- package/src/exports/molecules.ts +2 -0
- package/src/molecules/ListItem.tsx +12 -6
- package/src/molecules/alerts/AlertBanner.tsx +6 -7
- package/src/molecules/alerts/AlertToast.tsx +6 -7
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-design-system",
|
|
3
|
-
"version": "2.8.
|
|
3
|
+
"version": "2.8.40",
|
|
4
4
|
"description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, and onboarding utilities",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"types": "./src/index.ts",
|
|
@@ -72,32 +72,33 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
|
|
|
72
72
|
|
|
73
73
|
return (
|
|
74
74
|
<TouchableOpacity
|
|
75
|
-
style={
|
|
75
|
+
style={[
|
|
76
|
+
containerStyle,
|
|
77
|
+
iconPosition === 'right' && buttonStyles.rowReverse,
|
|
78
|
+
]}
|
|
76
79
|
onPress={handlePress}
|
|
77
80
|
activeOpacity={activeOpacity}
|
|
78
81
|
disabled={isDisabled}
|
|
79
82
|
testID={testID}
|
|
80
83
|
>
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
) : null}
|
|
84
|
+
{loading ? (
|
|
85
|
+
<AtomicSpinner
|
|
86
|
+
size="sm"
|
|
87
|
+
color={iconColor as string}
|
|
88
|
+
style={iconPosition === 'right' ? buttonStyles.iconRight : buttonStyles.iconLeft}
|
|
89
|
+
/>
|
|
90
|
+
) : (showIcon && icon) ? (
|
|
91
|
+
<AtomicIcon
|
|
92
|
+
name={icon}
|
|
93
|
+
customSize={config.iconSize}
|
|
94
|
+
customColor={iconColor as string | undefined}
|
|
95
|
+
style={iconPosition === 'right' ? buttonStyles.iconRight : buttonStyles.iconLeft}
|
|
96
|
+
/>
|
|
97
|
+
) : null}
|
|
96
98
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
</View>
|
|
99
|
+
<AtomicText style={buttonTextStyle}>
|
|
100
|
+
{buttonText}
|
|
101
|
+
</AtomicText>
|
|
101
102
|
</TouchableOpacity>
|
|
102
103
|
);
|
|
103
104
|
});
|
|
@@ -12,7 +12,7 @@ export const getCardVariantStyles = (variant: CardVariant, tokens: DesignTokens)
|
|
|
12
12
|
container: {
|
|
13
13
|
backgroundColor: tokens.colors.surface,
|
|
14
14
|
borderWidth: 1,
|
|
15
|
-
borderColor: tokens.colors.outlineVariant ||
|
|
15
|
+
borderColor: tokens.colors.outlineVariant || tokens.colors.border,
|
|
16
16
|
},
|
|
17
17
|
},
|
|
18
18
|
outlined: {
|
|
@@ -67,8 +67,15 @@ export const AtomicChip: React.FC<AtomicChipProps> = React.memo(({
|
|
|
67
67
|
|
|
68
68
|
const iconColor = finalTextColor;
|
|
69
69
|
|
|
70
|
-
const
|
|
71
|
-
|
|
70
|
+
const Component = (clickable && onPress && !disabled) ? TouchableOpacity : View;
|
|
71
|
+
const componentProps = (clickable && onPress && !disabled) ? { onPress, activeOpacity } : {};
|
|
72
|
+
|
|
73
|
+
return (
|
|
74
|
+
<Component
|
|
75
|
+
style={[chipStyle, style]}
|
|
76
|
+
testID={testID}
|
|
77
|
+
{...componentProps}
|
|
78
|
+
>
|
|
72
79
|
{leadingIcon && (
|
|
73
80
|
<AtomicIcon
|
|
74
81
|
name={leadingIcon}
|
|
@@ -92,18 +99,8 @@ export const AtomicChip: React.FC<AtomicChipProps> = React.memo(({
|
|
|
92
99
|
style={{ marginLeft: tokens.spacing.xs }}
|
|
93
100
|
/>
|
|
94
101
|
)}
|
|
95
|
-
</
|
|
102
|
+
</Component>
|
|
96
103
|
);
|
|
97
|
-
|
|
98
|
-
if (clickable && onPress && !disabled) {
|
|
99
|
-
return (
|
|
100
|
-
<TouchableOpacity onPress={onPress} activeOpacity={activeOpacity}>
|
|
101
|
-
{content}
|
|
102
|
-
</TouchableOpacity>
|
|
103
|
-
);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
return content;
|
|
107
104
|
});
|
|
108
105
|
|
|
109
106
|
AtomicChip.displayName = 'AtomicChip';
|
package/src/exports/molecules.ts
CHANGED
|
@@ -17,18 +17,24 @@ export const ListItem: React.FC<ListItemProps> = ({
|
|
|
17
17
|
return (
|
|
18
18
|
<Component style={[listItemStyles.container, disabled ? listItemStyles.disabled : undefined, style]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
|
|
19
19
|
{leftIcon && (
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
<AtomicIcon
|
|
21
|
+
name={leftIcon}
|
|
22
|
+
color={disabled ? 'surfaceVariant' : 'primary'}
|
|
23
|
+
size="md"
|
|
24
|
+
style={listItemStyles.iconContainer}
|
|
25
|
+
/>
|
|
23
26
|
)}
|
|
24
27
|
<View style={listItemStyles.content}>
|
|
25
28
|
<AtomicText type="bodyLarge" color={disabled ? 'surfaceVariant' : 'onSurface'} numberOfLines={1}>{title}</AtomicText>
|
|
26
29
|
{subtitle && <AtomicText type="bodySmall" color="surfaceVariant" numberOfLines={2} style={listItemStyles.subtitle}>{subtitle}</AtomicText>}
|
|
27
30
|
</View>
|
|
28
31
|
{rightIcon && onPress && (
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
+
<AtomicIcon
|
|
33
|
+
name={rightIcon}
|
|
34
|
+
color="surfaceVariant"
|
|
35
|
+
size="sm"
|
|
36
|
+
style={{ marginLeft: tokens.spacing.md }}
|
|
37
|
+
/>
|
|
32
38
|
)}
|
|
33
39
|
</Component>
|
|
34
40
|
);
|
|
@@ -74,13 +74,12 @@ export function AlertBanner({ alert }: AlertBannerProps) {
|
|
|
74
74
|
<View style={styles.content}>
|
|
75
75
|
<View style={styles.row}>
|
|
76
76
|
{alert.icon && (
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
</View>
|
|
77
|
+
<AtomicIcon
|
|
78
|
+
name={alert.icon}
|
|
79
|
+
customSize={20}
|
|
80
|
+
customColor={textColor}
|
|
81
|
+
style={{ marginRight: tokens.spacing.sm }}
|
|
82
|
+
/>
|
|
84
83
|
)}
|
|
85
84
|
|
|
86
85
|
<View style={styles.textContainer}>
|
|
@@ -89,13 +89,12 @@ export function AlertToast({ alert }: AlertToastProps) {
|
|
|
89
89
|
<Pressable onPress={handleDismiss} style={styles.content}>
|
|
90
90
|
<View style={styles.row}>
|
|
91
91
|
{alert.icon && (
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
</View>
|
|
92
|
+
<AtomicIcon
|
|
93
|
+
name={alert.icon}
|
|
94
|
+
customSize={20}
|
|
95
|
+
customColor={textColor}
|
|
96
|
+
style={{ marginRight: tokens.spacing.sm }}
|
|
97
|
+
/>
|
|
99
98
|
)}
|
|
100
99
|
|
|
101
100
|
<View style={styles.textContainer}>
|