ikualo-ui-kit-mobile 1.9.4 → 1.9.5
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/app.json
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
|
-
import Svg, {Path } from
|
|
2
|
-
import useStore from
|
|
1
|
+
import Svg, { Path } from 'react-native-svg';
|
|
2
|
+
import useStore from '../../../src/store';
|
|
3
3
|
|
|
4
|
-
export const InfoIcon = (props:{style?:any}) => {
|
|
5
|
-
|
|
4
|
+
export const InfoIcon = (props: { style?: any }) => {
|
|
5
|
+
const theme = useStore().theme;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
return (
|
|
8
|
+
<Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
9
|
+
<Path
|
|
10
|
+
id="Vector"
|
|
11
|
+
d="M9 5H11V7H9V5ZM10 15C10.55 15 11 14.55 11 14V10C11 9.45 10.55 9 10 9C9.45 9 9 9.45 9 10V14C9 14.55 9.45 15 10 15ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z"
|
|
12
|
+
fill={theme.colors.freezed}
|
|
13
|
+
/>
|
|
14
|
+
</Svg>
|
|
15
|
+
);
|
|
16
|
+
};
|
|
@@ -8,6 +8,7 @@ export const getStyleAlerts = (theme: ITheme) =>
|
|
|
8
8
|
borderRadius: 4,
|
|
9
9
|
borderLeftWidth: 8,
|
|
10
10
|
padding: 16,
|
|
11
|
+
overflow: 'hidden',
|
|
11
12
|
},
|
|
12
13
|
'alert--absolute': {
|
|
13
14
|
position: 'absolute',
|
|
@@ -22,24 +23,24 @@ export const getStyleAlerts = (theme: ITheme) =>
|
|
|
22
23
|
width: '100%',
|
|
23
24
|
},
|
|
24
25
|
'alert--info': {
|
|
25
|
-
|
|
26
|
-
borderLeftColor: theme.colors.info,
|
|
26
|
+
borderLeftColor: theme.colors.freezed,
|
|
27
27
|
borderRadius: 16,
|
|
28
|
+
overflow: 'hidden',
|
|
28
29
|
},
|
|
29
30
|
'alert--warning': {
|
|
30
|
-
|
|
31
|
-
borderLeftColor: theme.colors.warning,
|
|
31
|
+
borderLeftColor: theme.colors.orange_400,
|
|
32
32
|
borderRadius: 16,
|
|
33
|
+
overflow: 'hidden',
|
|
33
34
|
},
|
|
34
35
|
'alert--success': {
|
|
35
|
-
backgroundColor: theme.colors.background_alert,
|
|
36
36
|
borderLeftColor: theme.colors.success,
|
|
37
37
|
borderRadius: 16,
|
|
38
|
+
overflow: 'hidden',
|
|
38
39
|
},
|
|
39
40
|
'alert--error': {
|
|
40
|
-
backgroundColor: theme.colors.background_alert,
|
|
41
41
|
borderLeftColor: theme.colors.error,
|
|
42
42
|
borderRadius: 16,
|
|
43
|
+
overflow: 'hidden',
|
|
43
44
|
},
|
|
44
45
|
'alert-container-text': {
|
|
45
46
|
flexDirection: 'row',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ikualo-ui-kit-mobile",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.5",
|
|
4
4
|
"main": "src/index.ts",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "expo start",
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
"@react-navigation/stack": "^6.3.29",
|
|
17
17
|
"expo": "~52.0.20",
|
|
18
18
|
"expo-application": "~6.0.1",
|
|
19
|
+
"expo-blur": "~14.0.3",
|
|
19
20
|
"expo-linear-gradient": "~14.0.1",
|
|
20
21
|
"expo-updates": "~0.26.10",
|
|
21
22
|
"react": "^18.3.1",
|
|
@@ -7,6 +7,7 @@ import { IFAlertInfo } from '../../models';
|
|
|
7
7
|
import { InfoIcon, SuccessIcon, WarningIcon } from '../../../assets/icons/svgs';
|
|
8
8
|
import { Text } from '../../';
|
|
9
9
|
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
|
|
10
|
+
import { BlurView } from 'expo-blur';
|
|
10
11
|
|
|
11
12
|
export const Alert = (props: IFAlertInfo) => {
|
|
12
13
|
const { text, title, type, onClose, miliSeconds, customStyles, position = 'absolute' } = props;
|
|
@@ -30,7 +31,10 @@ export const Alert = (props: IFAlertInfo) => {
|
|
|
30
31
|
<>
|
|
31
32
|
{position === 'absolute' ? (
|
|
32
33
|
<Portal>
|
|
33
|
-
<
|
|
34
|
+
<BlurView
|
|
35
|
+
intensity={80}
|
|
36
|
+
tint={theme.dark ? 'light' : 'dark'}
|
|
37
|
+
experimentalBlurMethod="dimezisBlurView"
|
|
34
38
|
style={[
|
|
35
39
|
styleAlerts['alert'],
|
|
36
40
|
styleAlerts['alert--absolute'],
|
|
@@ -38,32 +42,53 @@ export const Alert = (props: IFAlertInfo) => {
|
|
|
38
42
|
customStyles,
|
|
39
43
|
]}
|
|
40
44
|
>
|
|
41
|
-
<View
|
|
42
|
-
{
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
45
|
+
<Animated.View
|
|
46
|
+
style={[
|
|
47
|
+
styleAlerts['alert'],
|
|
48
|
+
styleAlerts['alert--absolute'],
|
|
49
|
+
styleAlerts[`alert--${type}`],
|
|
50
|
+
customStyles,
|
|
51
|
+
]}
|
|
52
|
+
>
|
|
53
|
+
<View style={styleAlerts['alert-container-text']}>
|
|
54
|
+
{icons.find((icon) => icon.name === type)?.icon}
|
|
55
|
+
<Text fontWeight={'MontserratBold700'} fontSize={14} color={theme.colors.white_50}>
|
|
56
|
+
{title}
|
|
57
|
+
</Text>
|
|
58
|
+
</View>
|
|
59
|
+
{text && <View style={styleAlerts['alert-body']}>{text}</View>}
|
|
60
|
+
</Animated.View>
|
|
61
|
+
</BlurView>
|
|
49
62
|
</Portal>
|
|
50
63
|
) : (
|
|
51
|
-
<
|
|
64
|
+
<BlurView
|
|
65
|
+
intensity={80}
|
|
66
|
+
tint={theme.dark ? 'light' : 'dark'}
|
|
67
|
+
experimentalBlurMethod="dimezisBlurView"
|
|
52
68
|
style={[
|
|
53
69
|
styleAlerts['alert'],
|
|
54
|
-
styleAlerts['alert--
|
|
70
|
+
styleAlerts['alert--absolute'],
|
|
55
71
|
styleAlerts[`alert--${type}`],
|
|
56
72
|
customStyles,
|
|
57
73
|
]}
|
|
58
74
|
>
|
|
59
|
-
<View
|
|
60
|
-
{
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
75
|
+
<Animated.View
|
|
76
|
+
style={[
|
|
77
|
+
styleAlerts['alert'],
|
|
78
|
+
styleAlerts['alert--relative'],
|
|
79
|
+
styleAlerts[`alert--${type}`],
|
|
80
|
+
customStyles,
|
|
81
|
+
]}
|
|
82
|
+
>
|
|
83
|
+
<View style={styleAlerts['alert-container-text']}>
|
|
84
|
+
{icons.find((icon) => icon.name === type)?.icon}
|
|
85
|
+
<Text fontWeight={'MontserratBold700'} fontSize={14} color={theme.colors.white_50}>
|
|
86
|
+
{title}
|
|
87
|
+
</Text>
|
|
88
|
+
</View>
|
|
89
|
+
{text && <View style={styleAlerts['alert-body']}>{text}</View>}
|
|
90
|
+
</Animated.View>
|
|
91
|
+
</BlurView>
|
|
67
92
|
)}
|
|
68
93
|
</>
|
|
69
94
|
);
|