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.
@@ -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 main = ViewUtils.getCrud('view');
24
- const theme = scope.getTheme();
25
- const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
26
- const handlePress = () => {
27
- setModalVisible(!modalVisible);
28
- };
29
-
30
- const iconColor = Utils.nvl(theme.colors?.text, '#100e0e');
31
- const modalColor = Utils.nvl(headerStyle.color, 'white');
32
- const defaults = { color: modalColor };
33
- const onClick = ({ crud, value }: MethodType) => {
34
- let val = value as any;
35
-
36
- if (element.isObject && val?.object) {
37
- scope.changeValue(val?.object);
38
- } else if (val?.value) {
39
- scope.changeValue(val?.value);
40
- } else {
41
- scope.changeValue(value);
42
- }
43
-
44
- setModalVisible(false);
45
- };
46
-
47
- const style = (part: string, extra?: any) => {
48
- let all = { ...styles[part], ...extra };
49
-
50
- return scope.getStyle(part, all);
51
- };
52
-
53
- const isModalVisible = () => {
54
- return modalVisible;
55
- };
56
- //v4
57
-
58
- useEffect(() => {
59
- MobileUtils.syncTheme();
60
- }, [modalVisible]);
61
-
62
- return (
63
- <View
64
- key={scope.getName(`${scope.getPart('modal')}_${modalVisible}`)}
65
- style={style('selectRoot')}
66
- >
67
- <TouchableOpacity onPress={handlePress} style={style('selectInput')}>
68
- <Text style={style('selectLabel')}>
69
- {Utils.nvl(value, placeholder)}
70
- </Text>
71
- <Ionicons
72
- name="chevron-down-outline"
73
- size={scope.getPart('iconSize', null, 24)}
74
- color={scope.getPart('iconColor', null, iconColor)}
75
- style={style('iconStyle', {})}
76
- />
77
- </TouchableOpacity>
78
- <Modal
79
- animationType="slide"
80
- transparent={true}
81
- visible={isModalVisible()}
82
- onRequestClose={() => setModalVisible(false)}
83
- >
84
- <SafeAreaView style={style('modalTop')} />
85
- <SafeAreaView style={style('modalSafe')}>
86
- <View style={scope.getStyle('header', headerStyle)}>
87
- <TouchableOpacity
88
- onPress={() => setModalVisible(false)}
89
- style={style('modalCloseButton')}
90
- >
91
- <Ionicons
92
- name="close"
93
- size={24}
94
- color={modalColor}
95
- style={style('modalCloseText', defaults)}
96
- />
97
- </TouchableOpacity>
98
- <Text style={style('modalTitle')}>{placeholder}</Text>
99
- </View>
100
- <View style={style('modalContent')}>
101
- <UI.List
102
- data={items}
103
- name={scope.getName('list')}
104
- layout="card"
105
- click={onClick}
106
- rowStyle={{
107
- paddingLeft: 15,
108
- paddinRight: 15,
109
- ...scope.original?.rowStyle,
110
- }}
111
- {...scope.original?.listProps}
112
- >
113
- <UI.Value value="#{@this.label}" />
114
- </UI.List>
115
- </View>
116
- </SafeAreaView>
117
- </Modal>
118
- </View>
119
- );
120
- }
121
-
122
- const styles = StyleSheet.create({
123
- selectRoot: {
124
- justifyContent: 'flex-start',
125
- alignItems: 'flex-start',
126
- flex: 1,
127
- },
128
- selectInput: {
129
- width: '100%',
130
- flexDirection: 'row',
131
- borderRadius: 5,
132
- paddingHorizontal: 15,
133
- paddingVertical: 10,
134
- },
135
- selectLabel: { flex: 1 },
136
- modalTop: {
137
- backgroundColor: 'primary',
138
- width: '100%',
139
- },
140
- modalSafe: {
141
- flex: 1,
142
- width: '100%',
143
- backgroundColor: 'background',
144
- },
145
- modalCloseButton: {
146
- padding: 10,
147
- },
148
- modalCloseText: {
149
- fontSize: 18,
150
- color: 'white',
151
- },
152
- modalTitle: {
153
- fontSize: 18,
154
- fontWeight: 'bold',
155
- marginLeft: 10,
156
- },
157
- modalContent: {
158
- flex: 1,
159
- backgroundColor: 'background',
160
- paddingTop: 10,
161
- paddingBottom: 10,
162
- paddingLeft: 15,
163
- paddingRight: 15,
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
+ }