react-crud-mobile 1.3.43 → 1.3.45
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/react-crud-mobile.cjs.development.js +0 -1
- package/dist/react-crud-mobile.cjs.development.js.map +1 -1
- package/dist/react-crud-mobile.cjs.production.min.js +1 -1
- package/dist/react-crud-mobile.cjs.production.min.js.map +1 -1
- package/dist/react-crud-mobile.esm.js +1 -2
- package/dist/react-crud-mobile.esm.js.map +1 -1
- package/package.json +75 -75
- package/src/elements/UI.tsx +73 -73
- package/src/elements/UIChildren.tsx +139 -139
- package/src/elements/UIComplete.tsx +14 -14
- package/src/elements/UIElement.tsx +701 -701
- package/src/elements/UITag.tsx +13 -13
- package/src/elements/charts/ElChart.tsx +10 -10
- package/src/elements/core/SafeView.tsx +69 -69
- package/src/elements/core/UIButton.tsx +139 -139
- package/src/elements/core/UIIcon.tsx +25 -25
- package/src/elements/core/UIInclude.tsx +40 -40
- package/src/elements/core/UIInput.tsx +96 -96
- package/src/elements/core/UIList.tsx +168 -168
- package/src/elements/core/UIListRow.tsx +123 -123
- package/src/elements/core/UIModal.tsx +206 -206
- package/src/elements/core/UIQuantity.tsx +98 -98
- package/src/elements/core/UISelect.tsx +164 -165
- package/src/elements/core/UIToast.tsx +44 -44
- package/src/elements/core/UIToggle.tsx +102 -102
- package/src/elements/core/UIView.tsx +94 -94
- package/src/elements/index.ts +1 -1
- package/src/elements/tabs/ElTabs.tsx +178 -178
- package/src/index.ts +1 -1
|
@@ -1,98 +1,98 @@
|
|
|
1
|
-
import { Ionicons } from '@expo/vector-icons';
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { ChildType, Utils } from 'react-crud-utils';
|
|
4
|
-
import { Text, TouchableHighlight, View } from 'react-native';
|
|
5
|
-
|
|
6
|
-
export default function UIQuantity(props: ChildType) {
|
|
7
|
-
const scope = props.scope;
|
|
8
|
-
const element = scope.original;
|
|
9
|
-
|
|
10
|
-
let [index, setIndex] = useState(0);
|
|
11
|
-
|
|
12
|
-
const value = scope.getValue(0);
|
|
13
|
-
|
|
14
|
-
let color = element.color;
|
|
15
|
-
|
|
16
|
-
if (!color) color = 'primary';
|
|
17
|
-
|
|
18
|
-
const btn = {
|
|
19
|
-
padding: 0,
|
|
20
|
-
alignItems: 'center',
|
|
21
|
-
height: 30,
|
|
22
|
-
width: 30,
|
|
23
|
-
textAlign: 'center',
|
|
24
|
-
verticalAling: 'middle',
|
|
25
|
-
borderRadius: 24,
|
|
26
|
-
backgroundColor: color,
|
|
27
|
-
color: '#ffffff',
|
|
28
|
-
justifyContent: 'center',
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
const styles: any = {
|
|
32
|
-
buttonLabel: {
|
|
33
|
-
color: '#ffffff',
|
|
34
|
-
fontWeight: '500',
|
|
35
|
-
fontSize: 16,
|
|
36
|
-
},
|
|
37
|
-
value: {
|
|
38
|
-
flex: 1,
|
|
39
|
-
flexDirection: 'row',
|
|
40
|
-
textAlign: 'center',
|
|
41
|
-
fontWeight: '500',
|
|
42
|
-
},
|
|
43
|
-
buttonInner: {
|
|
44
|
-
flexDirection: 'row',
|
|
45
|
-
alignItems: 'center',
|
|
46
|
-
justifyContent: 'center',
|
|
47
|
-
},
|
|
48
|
-
buttonIcon: {
|
|
49
|
-
color: '#fff',
|
|
50
|
-
fontSize: 18,
|
|
51
|
-
},
|
|
52
|
-
button: btn,
|
|
53
|
-
addButton: {
|
|
54
|
-
...btn,
|
|
55
|
-
},
|
|
56
|
-
delButton: {
|
|
57
|
-
...btn,
|
|
58
|
-
},
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
const change = (val: number) => {
|
|
62
|
-
scope.changeValue(value + val);
|
|
63
|
-
setIndex(++index);
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
const onClickAdd = () => {
|
|
67
|
-
change(1);
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
const onClickDel = () => {
|
|
71
|
-
change(-1);
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
const style = (part: string, extra?: any) => {
|
|
75
|
-
let s = { ...styles[part], ...extra };
|
|
76
|
-
return scope.getStyle(part, s);
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
return (
|
|
80
|
-
<>
|
|
81
|
-
<TouchableHighlight
|
|
82
|
-
underlayColor={'transparent'}
|
|
83
|
-
onPress={onClickDel}
|
|
84
|
-
style={style('delButton')}
|
|
85
|
-
>
|
|
86
|
-
<Ionicons size={30} style={style('buttonIcon')} name="remove" />
|
|
87
|
-
</TouchableHighlight>
|
|
88
|
-
<Text style={style('value')}>{Utils.nvl(value, 0)}</Text>
|
|
89
|
-
<TouchableHighlight
|
|
90
|
-
underlayColor={'transparent'}
|
|
91
|
-
onPress={onClickAdd}
|
|
92
|
-
style={style('addButton')}
|
|
93
|
-
>
|
|
94
|
-
<Ionicons size={30} style={style('buttonIcon')} name="add" />
|
|
95
|
-
</TouchableHighlight>
|
|
96
|
-
</>
|
|
97
|
-
);
|
|
98
|
-
}
|
|
1
|
+
import { Ionicons } from '@expo/vector-icons';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { ChildType, Utils } from 'react-crud-utils';
|
|
4
|
+
import { Text, TouchableHighlight, View } from 'react-native';
|
|
5
|
+
|
|
6
|
+
export default function UIQuantity(props: ChildType) {
|
|
7
|
+
const scope = props.scope;
|
|
8
|
+
const element = scope.original;
|
|
9
|
+
|
|
10
|
+
let [index, setIndex] = useState(0);
|
|
11
|
+
|
|
12
|
+
const value = scope.getValue(0);
|
|
13
|
+
|
|
14
|
+
let color = element.color;
|
|
15
|
+
|
|
16
|
+
if (!color) color = 'primary';
|
|
17
|
+
|
|
18
|
+
const btn = {
|
|
19
|
+
padding: 0,
|
|
20
|
+
alignItems: 'center',
|
|
21
|
+
height: 30,
|
|
22
|
+
width: 30,
|
|
23
|
+
textAlign: 'center',
|
|
24
|
+
verticalAling: 'middle',
|
|
25
|
+
borderRadius: 24,
|
|
26
|
+
backgroundColor: color,
|
|
27
|
+
color: '#ffffff',
|
|
28
|
+
justifyContent: 'center',
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const styles: any = {
|
|
32
|
+
buttonLabel: {
|
|
33
|
+
color: '#ffffff',
|
|
34
|
+
fontWeight: '500',
|
|
35
|
+
fontSize: 16,
|
|
36
|
+
},
|
|
37
|
+
value: {
|
|
38
|
+
flex: 1,
|
|
39
|
+
flexDirection: 'row',
|
|
40
|
+
textAlign: 'center',
|
|
41
|
+
fontWeight: '500',
|
|
42
|
+
},
|
|
43
|
+
buttonInner: {
|
|
44
|
+
flexDirection: 'row',
|
|
45
|
+
alignItems: 'center',
|
|
46
|
+
justifyContent: 'center',
|
|
47
|
+
},
|
|
48
|
+
buttonIcon: {
|
|
49
|
+
color: '#fff',
|
|
50
|
+
fontSize: 18,
|
|
51
|
+
},
|
|
52
|
+
button: btn,
|
|
53
|
+
addButton: {
|
|
54
|
+
...btn,
|
|
55
|
+
},
|
|
56
|
+
delButton: {
|
|
57
|
+
...btn,
|
|
58
|
+
},
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const change = (val: number) => {
|
|
62
|
+
scope.changeValue(value + val);
|
|
63
|
+
setIndex(++index);
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
const onClickAdd = () => {
|
|
67
|
+
change(1);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
const onClickDel = () => {
|
|
71
|
+
change(-1);
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
const style = (part: string, extra?: any) => {
|
|
75
|
+
let s = { ...styles[part], ...extra };
|
|
76
|
+
return scope.getStyle(part, s);
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
return (
|
|
80
|
+
<>
|
|
81
|
+
<TouchableHighlight
|
|
82
|
+
underlayColor={'transparent'}
|
|
83
|
+
onPress={onClickDel}
|
|
84
|
+
style={style('delButton')}
|
|
85
|
+
>
|
|
86
|
+
<Ionicons size={30} style={style('buttonIcon')} name="remove" />
|
|
87
|
+
</TouchableHighlight>
|
|
88
|
+
<Text style={style('value')}>{Utils.nvl(value, 0)}</Text>
|
|
89
|
+
<TouchableHighlight
|
|
90
|
+
underlayColor={'transparent'}
|
|
91
|
+
onPress={onClickAdd}
|
|
92
|
+
style={style('addButton')}
|
|
93
|
+
>
|
|
94
|
+
<Ionicons size={30} style={style('buttonIcon')} name="add" />
|
|
95
|
+
</TouchableHighlight>
|
|
96
|
+
</>
|
|
97
|
+
);
|
|
98
|
+
}
|
|
@@ -1,165 +1,164 @@
|
|
|
1
|
-
import { useEffect, useRef, useState } from 'react';
|
|
2
|
-
import { ChildType, MethodType, Utils, ViewUtils } from 'react-crud-utils';
|
|
3
|
-
import {
|
|
4
|
-
Text,
|
|
5
|
-
TouchableOpacity,
|
|
6
|
-
StyleSheet,
|
|
7
|
-
Modal,
|
|
8
|
-
View,
|
|
9
|
-
StatusBar,
|
|
10
|
-
SafeAreaView,
|
|
11
|
-
} from 'react-native';
|
|
12
|
-
import { Ionicons } from '@expo/vector-icons';
|
|
13
|
-
import UI from '../UI';
|
|
14
|
-
import MobileUtils from '../../utils/MobileUtils';
|
|
15
|
-
|
|
16
|
-
export default function UISelect(props: ChildType) {
|
|
17
|
-
const [modalVisible, setModalVisible] = useState(false);
|
|
18
|
-
const scope = props.scope;
|
|
19
|
-
const element = scope.original;
|
|
20
|
-
const items = Utils.nvl(scope.getOptions(), []);
|
|
21
|
-
const placeholder = scope.attr('placeholder', 'Selecione...');
|
|
22
|
-
const value = scope.getDisplayValue();
|
|
23
|
-
const
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<SafeAreaView style={style('
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
</
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
},
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
});
|
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { ChildType, MethodType, Utils, ViewUtils } from 'react-crud-utils';
|
|
3
|
+
import {
|
|
4
|
+
Text,
|
|
5
|
+
TouchableOpacity,
|
|
6
|
+
StyleSheet,
|
|
7
|
+
Modal,
|
|
8
|
+
View,
|
|
9
|
+
StatusBar,
|
|
10
|
+
SafeAreaView,
|
|
11
|
+
} from 'react-native';
|
|
12
|
+
import { Ionicons } from '@expo/vector-icons';
|
|
13
|
+
import UI from '../UI';
|
|
14
|
+
import MobileUtils from '../../utils/MobileUtils';
|
|
15
|
+
|
|
16
|
+
export default function UISelect(props: ChildType) {
|
|
17
|
+
const [modalVisible, setModalVisible] = useState(false);
|
|
18
|
+
const scope = props.scope;
|
|
19
|
+
const element = scope.original;
|
|
20
|
+
const items = Utils.nvl(scope.getOptions(), []);
|
|
21
|
+
const placeholder = scope.attr('placeholder', 'Selecione...');
|
|
22
|
+
const value = scope.getDisplayValue();
|
|
23
|
+
const theme = scope.getTheme();
|
|
24
|
+
const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
|
|
25
|
+
const handlePress = () => {
|
|
26
|
+
setModalVisible(!modalVisible);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const iconColor = Utils.nvl(theme.colors?.text, '#100e0e');
|
|
30
|
+
const modalColor = Utils.nvl(headerStyle.color, 'white');
|
|
31
|
+
const defaults = { color: modalColor };
|
|
32
|
+
const onClick = ({ crud, value }: MethodType) => {
|
|
33
|
+
let val = value as any;
|
|
34
|
+
|
|
35
|
+
if (element.isObject && val?.object) {
|
|
36
|
+
scope.changeValue(val?.object);
|
|
37
|
+
} else if (val?.value) {
|
|
38
|
+
scope.changeValue(val?.value);
|
|
39
|
+
} else {
|
|
40
|
+
scope.changeValue(value);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
setModalVisible(false);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const style = (part: string, extra?: any) => {
|
|
47
|
+
let all = { ...styles[part], ...extra };
|
|
48
|
+
|
|
49
|
+
return scope.getStyle(part, all);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const isModalVisible = () => {
|
|
53
|
+
return modalVisible;
|
|
54
|
+
};
|
|
55
|
+
//v4
|
|
56
|
+
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
MobileUtils.syncTheme();
|
|
59
|
+
}, [modalVisible]);
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<View
|
|
63
|
+
key={scope.getName(`${scope.getPart('modal')}_${modalVisible}`)}
|
|
64
|
+
style={style('selectRoot')}
|
|
65
|
+
>
|
|
66
|
+
<TouchableOpacity onPress={handlePress} style={style('selectInput')}>
|
|
67
|
+
<Text style={style('selectLabel')}>
|
|
68
|
+
{Utils.nvl(value, placeholder)}
|
|
69
|
+
</Text>
|
|
70
|
+
<Ionicons
|
|
71
|
+
name="chevron-down-outline"
|
|
72
|
+
size={scope.getPart('iconSize', null, 24)}
|
|
73
|
+
color={scope.getPart('iconColor', null, iconColor)}
|
|
74
|
+
style={style('iconStyle', {})}
|
|
75
|
+
/>
|
|
76
|
+
</TouchableOpacity>
|
|
77
|
+
<Modal
|
|
78
|
+
animationType="slide"
|
|
79
|
+
transparent={true}
|
|
80
|
+
visible={isModalVisible()}
|
|
81
|
+
onRequestClose={() => setModalVisible(false)}
|
|
82
|
+
>
|
|
83
|
+
<SafeAreaView style={style('modalTop')} />
|
|
84
|
+
<SafeAreaView style={style('modalSafe')}>
|
|
85
|
+
<View style={scope.getStyle('header', headerStyle)}>
|
|
86
|
+
<TouchableOpacity
|
|
87
|
+
onPress={() => setModalVisible(false)}
|
|
88
|
+
style={style('modalCloseButton')}
|
|
89
|
+
>
|
|
90
|
+
<Ionicons
|
|
91
|
+
name="close"
|
|
92
|
+
size={24}
|
|
93
|
+
color={modalColor}
|
|
94
|
+
style={style('modalCloseText', defaults)}
|
|
95
|
+
/>
|
|
96
|
+
</TouchableOpacity>
|
|
97
|
+
<Text style={style('modalTitle')}>{placeholder}</Text>
|
|
98
|
+
</View>
|
|
99
|
+
<View style={style('modalContent')}>
|
|
100
|
+
<UI.List
|
|
101
|
+
data={items}
|
|
102
|
+
name={scope.getName('list')}
|
|
103
|
+
layout="card"
|
|
104
|
+
click={onClick}
|
|
105
|
+
rowStyle={{
|
|
106
|
+
paddingLeft: 15,
|
|
107
|
+
paddinRight: 15,
|
|
108
|
+
...scope.original?.rowStyle,
|
|
109
|
+
}}
|
|
110
|
+
{...scope.original?.listProps}
|
|
111
|
+
>
|
|
112
|
+
<UI.Value value="#{@this.label}" />
|
|
113
|
+
</UI.List>
|
|
114
|
+
</View>
|
|
115
|
+
</SafeAreaView>
|
|
116
|
+
</Modal>
|
|
117
|
+
</View>
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
const styles = StyleSheet.create({
|
|
122
|
+
selectRoot: {
|
|
123
|
+
justifyContent: 'flex-start',
|
|
124
|
+
alignItems: 'flex-start',
|
|
125
|
+
flex: 1,
|
|
126
|
+
},
|
|
127
|
+
selectInput: {
|
|
128
|
+
width: '100%',
|
|
129
|
+
flexDirection: 'row',
|
|
130
|
+
borderRadius: 5,
|
|
131
|
+
paddingHorizontal: 15,
|
|
132
|
+
paddingVertical: 10,
|
|
133
|
+
},
|
|
134
|
+
selectLabel: { flex: 1 },
|
|
135
|
+
modalTop: {
|
|
136
|
+
backgroundColor: 'primary',
|
|
137
|
+
width: '100%',
|
|
138
|
+
},
|
|
139
|
+
modalSafe: {
|
|
140
|
+
flex: 1,
|
|
141
|
+
width: '100%',
|
|
142
|
+
backgroundColor: 'background',
|
|
143
|
+
},
|
|
144
|
+
modalCloseButton: {
|
|
145
|
+
padding: 10,
|
|
146
|
+
},
|
|
147
|
+
modalCloseText: {
|
|
148
|
+
fontSize: 18,
|
|
149
|
+
color: 'white',
|
|
150
|
+
},
|
|
151
|
+
modalTitle: {
|
|
152
|
+
fontSize: 18,
|
|
153
|
+
fontWeight: 'bold',
|
|
154
|
+
marginLeft: 10,
|
|
155
|
+
},
|
|
156
|
+
modalContent: {
|
|
157
|
+
flex: 1,
|
|
158
|
+
backgroundColor: 'background',
|
|
159
|
+
paddingTop: 10,
|
|
160
|
+
paddingBottom: 10,
|
|
161
|
+
paddingLeft: 15,
|
|
162
|
+
paddingRight: 15,
|
|
163
|
+
},
|
|
164
|
+
});
|
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
import { StyleSheet } from 'react-native';
|
|
2
|
-
import Toast, { BaseToast, ErrorToast } from 'react-native-toast-message';
|
|
3
|
-
|
|
4
|
-
export default function UIToast() {
|
|
5
|
-
const toastConfig = {
|
|
6
|
-
success: props => (
|
|
7
|
-
<BaseToast
|
|
8
|
-
{...props}
|
|
9
|
-
style={styles.darkToast}
|
|
10
|
-
contentContainerStyle={{ paddingHorizontal: 15 }}
|
|
11
|
-
text1Style={styles.text}
|
|
12
|
-
text2Style={styles.text}
|
|
13
|
-
/>
|
|
14
|
-
),
|
|
15
|
-
error: props => (
|
|
16
|
-
<ErrorToast
|
|
17
|
-
{...props}
|
|
18
|
-
style={styles.darkToast}
|
|
19
|
-
text1Style={styles.text}
|
|
20
|
-
text2Style={styles.text}
|
|
21
|
-
/>
|
|
22
|
-
),
|
|
23
|
-
info: props => (
|
|
24
|
-
<BaseToast
|
|
25
|
-
{...props}
|
|
26
|
-
style={styles.darkToast}
|
|
27
|
-
text1Style={styles.text}
|
|
28
|
-
text2Style={styles.text}
|
|
29
|
-
/>
|
|
30
|
-
),
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
const styles = StyleSheet.create({
|
|
34
|
-
darkToast: {
|
|
35
|
-
backgroundColor: 'rgba(34, 34, 34, 0.85)',
|
|
36
|
-
borderLeftColor: '#222', // borda mais escura
|
|
37
|
-
},
|
|
38
|
-
text: {
|
|
39
|
-
color: '#fff', // letras brancas
|
|
40
|
-
textAlign: 'center',
|
|
41
|
-
},
|
|
42
|
-
});
|
|
43
|
-
return <Toast config={toastConfig} />;
|
|
44
|
-
}
|
|
1
|
+
import { StyleSheet } from 'react-native';
|
|
2
|
+
import Toast, { BaseToast, ErrorToast } from 'react-native-toast-message';
|
|
3
|
+
|
|
4
|
+
export default function UIToast() {
|
|
5
|
+
const toastConfig = {
|
|
6
|
+
success: props => (
|
|
7
|
+
<BaseToast
|
|
8
|
+
{...props}
|
|
9
|
+
style={styles.darkToast}
|
|
10
|
+
contentContainerStyle={{ paddingHorizontal: 15 }}
|
|
11
|
+
text1Style={styles.text}
|
|
12
|
+
text2Style={styles.text}
|
|
13
|
+
/>
|
|
14
|
+
),
|
|
15
|
+
error: props => (
|
|
16
|
+
<ErrorToast
|
|
17
|
+
{...props}
|
|
18
|
+
style={styles.darkToast}
|
|
19
|
+
text1Style={styles.text}
|
|
20
|
+
text2Style={styles.text}
|
|
21
|
+
/>
|
|
22
|
+
),
|
|
23
|
+
info: props => (
|
|
24
|
+
<BaseToast
|
|
25
|
+
{...props}
|
|
26
|
+
style={styles.darkToast}
|
|
27
|
+
text1Style={styles.text}
|
|
28
|
+
text2Style={styles.text}
|
|
29
|
+
/>
|
|
30
|
+
),
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const styles = StyleSheet.create({
|
|
34
|
+
darkToast: {
|
|
35
|
+
backgroundColor: 'rgba(34, 34, 34, 0.85)',
|
|
36
|
+
borderLeftColor: '#222', // borda mais escura
|
|
37
|
+
},
|
|
38
|
+
text: {
|
|
39
|
+
color: '#fff', // letras brancas
|
|
40
|
+
textAlign: 'center',
|
|
41
|
+
},
|
|
42
|
+
});
|
|
43
|
+
return <Toast config={toastConfig} />;
|
|
44
|
+
}
|