react-crud-mobile 1.3.359 → 1.3.360

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.
Files changed (32) hide show
  1. package/dist/react-crud-mobile.cjs.development.js +2 -8
  2. package/dist/react-crud-mobile.cjs.development.js.map +1 -1
  3. package/dist/react-crud-mobile.cjs.production.min.js +1 -1
  4. package/dist/react-crud-mobile.cjs.production.min.js.map +1 -1
  5. package/dist/react-crud-mobile.esm.js +2 -8
  6. package/dist/react-crud-mobile.esm.js.map +1 -1
  7. package/package.json +76 -76
  8. package/src/elements/UI.tsx +77 -77
  9. package/src/elements/UIChildren.tsx +142 -142
  10. package/src/elements/UIComplete.tsx +14 -14
  11. package/src/elements/UIElement.tsx +872 -878
  12. package/src/elements/UITag.tsx +13 -13
  13. package/src/elements/charts/ElChart.tsx +10 -10
  14. package/src/elements/core/GestureView.tsx +16 -16
  15. package/src/elements/core/SafeView.tsx +63 -63
  16. package/src/elements/core/UIButton.tsx +144 -144
  17. package/src/elements/core/UIHeader.tsx +38 -38
  18. package/src/elements/core/UIIcon.tsx +32 -32
  19. package/src/elements/core/UIInclude.tsx +40 -40
  20. package/src/elements/core/UIInput.tsx +149 -149
  21. package/src/elements/core/UIList.tsx +180 -180
  22. package/src/elements/core/UIListRow.tsx +132 -132
  23. package/src/elements/core/UIModal.tsx +212 -212
  24. package/src/elements/core/UIOrder.tsx +194 -194
  25. package/src/elements/core/UIQuantity.tsx +98 -98
  26. package/src/elements/core/UISelect.tsx +194 -194
  27. package/src/elements/core/UIToast.tsx +44 -44
  28. package/src/elements/core/UIToggle.tsx +114 -114
  29. package/src/elements/core/UIView.tsx +69 -69
  30. package/src/elements/index.ts +1 -1
  31. package/src/elements/tabs/ElTabs.tsx +178 -178
  32. package/src/index.ts +1 -1
@@ -1,194 +1,194 @@
1
- import { 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
- SafeAreaView,
10
- ScrollView,
11
- } from 'react-native';
12
- import { Ionicons } from '@expo/vector-icons';
13
- import UI from '../UI';
14
-
15
- export default function UISelect(props: ChildType) {
16
- const [modalVisible, setModalVisible] = useState(false);
17
- const scope = props.scope;
18
- const original = scope.original;
19
- const items = Utils.nvl(scope.getOptions(), []);
20
- const placeholder = scope.attr('placeholder', 'Selecione...');
21
- const value = scope.getDisplayValue();
22
- const theme = scope.getTheme();
23
- const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
24
- const handlePress = () => {
25
- setModalVisible(!modalVisible);
26
- };
27
-
28
- const scrollRef = useRef(null);
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 (original.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
-
56
- const getLabelStyle = () => {
57
- const css: any = style('selectLabel');
58
- let fs = parseInt(css.fontSize);
59
-
60
- if (!fs) {
61
- fs = 14;
62
- }
63
-
64
- let lh = Utils.nvl(css.lineHeight, fs + 2);
65
-
66
- css.fontSize = fs;
67
- css.lineHeight = lh;
68
-
69
- return css;
70
- };
71
-
72
- const labelStyle = getLabelStyle();
73
- const defIconSize = Utils.nvl(labelStyle.fontSize, 14) + 2;
74
- const iconSize = scope.getPart('iconSize', null, defIconSize);
75
-
76
- //v4
77
-
78
- return (
79
- <View
80
- key={scope.getName(`${scope.getPart('modal')}_${modalVisible}`)}
81
- style={style('selectRoot')}
82
- >
83
- <TouchableOpacity onPress={handlePress} style={style('selectInput')}>
84
- <Text style={labelStyle}>{Utils.nvl(value, placeholder)}</Text>
85
- <Ionicons
86
- name="chevron-down-outline"
87
- size={iconSize}
88
- color={scope.getPart('iconColor', null, iconColor)}
89
- style={style('iconStyle', {})}
90
- />
91
- </TouchableOpacity>
92
- <Modal
93
- animationType="slide"
94
- transparent={true}
95
- visible={isModalVisible()}
96
- onRequestClose={() => setModalVisible(false)}
97
- >
98
- <SafeAreaView style={style('modalTop')} />
99
- <SafeAreaView style={style('modalSafe')}>
100
- <View style={scope.getStyle('header', headerStyle)}>
101
- <TouchableOpacity
102
- onPress={handlePress}
103
- style={style('modalCloseButton')}
104
- >
105
- <Ionicons
106
- name="close"
107
- size={24}
108
- color={modalColor}
109
- style={style('modalCloseText', defaults)}
110
- />
111
- </TouchableOpacity>
112
- <Text style={style('modalTitle', defaults)}>{placeholder}</Text>
113
- </View>
114
- <ScrollView
115
- contentContainerStyle={{ flexGrow: 1, paddingBottom: 50 }}
116
- style={style('modalContent')}
117
- nestedScrollEnabled={true}
118
- ref={scrollRef}
119
- >
120
- <View
121
- style={{
122
- flex: 1,
123
- paddingLeft: 15,
124
- paddingRight: 15,
125
- paddingTop: 10,
126
- paddingBottom: 10,
127
- }}
128
- >
129
- <UI.List
130
- data={items}
131
- name={scope.getName('list')}
132
- layout="card"
133
- search={original.search === true}
134
- click={onClick}
135
- rowStyle={{
136
- paddingLeft: 15,
137
- paddinRight: 15,
138
- ...original?.rowStyle,
139
- }}
140
- {...original?.listProps}
141
- >
142
- <UI.Value value="#{@this.label}" />
143
- </UI.List>
144
- </View>
145
- </ScrollView>
146
- </SafeAreaView>
147
- </Modal>
148
- </View>
149
- );
150
- }
151
-
152
- const styles = StyleSheet.create({
153
- selectRoot: {
154
- justifyContent: 'flex-start',
155
- alignItems: 'flex-start',
156
- flex: 1,
157
- },
158
- selectInput: {
159
- width: '100%',
160
- flexDirection: 'row',
161
- borderRadius: 5,
162
- paddingHorizontal: 15,
163
- borderWidth: 1,
164
- borderStyle: 'solid',
165
- borderColor: '#dedede',
166
- paddingVertical: 10,
167
- },
168
- selectLabel: { flex: 1, fontSize: 14 },
169
- modalTop: {
170
- backgroundColor: 'primary',
171
- width: '100%',
172
- },
173
- modalSafe: {
174
- flex: 1,
175
- width: '100%',
176
- backgroundColor: 'background',
177
- },
178
- modalCloseButton: {
179
- padding: 10,
180
- },
181
- modalCloseText: {
182
- fontSize: 18,
183
- color: 'white',
184
- },
185
- modalTitle: {
186
- fontSize: 18,
187
- fontWeight: 'bold',
188
- marginLeft: 10,
189
- },
190
- modalContent: {
191
- flex: 1,
192
- backgroundColor: 'background',
193
- },
194
- });
1
+ import { 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
+ SafeAreaView,
10
+ ScrollView,
11
+ } from 'react-native';
12
+ import { Ionicons } from '@expo/vector-icons';
13
+ import UI from '../UI';
14
+
15
+ export default function UISelect(props: ChildType) {
16
+ const [modalVisible, setModalVisible] = useState(false);
17
+ const scope = props.scope;
18
+ const original = scope.original;
19
+ const items = Utils.nvl(scope.getOptions(), []);
20
+ const placeholder = scope.attr('placeholder', 'Selecione...');
21
+ const value = scope.getDisplayValue();
22
+ const theme = scope.getTheme();
23
+ const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
24
+ const handlePress = () => {
25
+ setModalVisible(!modalVisible);
26
+ };
27
+
28
+ const scrollRef = useRef(null);
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 (original.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
+
56
+ const getLabelStyle = () => {
57
+ const css: any = style('selectLabel');
58
+ let fs = parseInt(css.fontSize);
59
+
60
+ if (!fs) {
61
+ fs = 14;
62
+ }
63
+
64
+ let lh = Utils.nvl(css.lineHeight, fs + 2);
65
+
66
+ css.fontSize = fs;
67
+ css.lineHeight = lh;
68
+
69
+ return css;
70
+ };
71
+
72
+ const labelStyle = getLabelStyle();
73
+ const defIconSize = Utils.nvl(labelStyle.fontSize, 14) + 2;
74
+ const iconSize = scope.getPart('iconSize', null, defIconSize);
75
+
76
+ //v4
77
+
78
+ return (
79
+ <View
80
+ key={scope.getName(`${scope.getPart('modal')}_${modalVisible}`)}
81
+ style={style('selectRoot')}
82
+ >
83
+ <TouchableOpacity onPress={handlePress} style={style('selectInput')}>
84
+ <Text style={labelStyle}>{Utils.nvl(value, placeholder)}</Text>
85
+ <Ionicons
86
+ name="chevron-down-outline"
87
+ size={iconSize}
88
+ color={scope.getPart('iconColor', null, iconColor)}
89
+ style={style('iconStyle', {})}
90
+ />
91
+ </TouchableOpacity>
92
+ <Modal
93
+ animationType="slide"
94
+ transparent={true}
95
+ visible={isModalVisible()}
96
+ onRequestClose={() => setModalVisible(false)}
97
+ >
98
+ <SafeAreaView style={style('modalTop')} />
99
+ <SafeAreaView style={style('modalSafe')}>
100
+ <View style={scope.getStyle('header', headerStyle)}>
101
+ <TouchableOpacity
102
+ onPress={handlePress}
103
+ style={style('modalCloseButton')}
104
+ >
105
+ <Ionicons
106
+ name="close"
107
+ size={24}
108
+ color={modalColor}
109
+ style={style('modalCloseText', defaults)}
110
+ />
111
+ </TouchableOpacity>
112
+ <Text style={style('modalTitle', defaults)}>{placeholder}</Text>
113
+ </View>
114
+ <ScrollView
115
+ contentContainerStyle={{ flexGrow: 1, paddingBottom: 50 }}
116
+ style={style('modalContent')}
117
+ nestedScrollEnabled={true}
118
+ ref={scrollRef}
119
+ >
120
+ <View
121
+ style={{
122
+ flex: 1,
123
+ paddingLeft: 15,
124
+ paddingRight: 15,
125
+ paddingTop: 10,
126
+ paddingBottom: 10,
127
+ }}
128
+ >
129
+ <UI.List
130
+ data={items}
131
+ name={scope.getName('list')}
132
+ layout="card"
133
+ search={original.search === true}
134
+ click={onClick}
135
+ rowStyle={{
136
+ paddingLeft: 15,
137
+ paddinRight: 15,
138
+ ...original?.rowStyle,
139
+ }}
140
+ {...original?.listProps}
141
+ >
142
+ <UI.Value value="#{@this.label}" />
143
+ </UI.List>
144
+ </View>
145
+ </ScrollView>
146
+ </SafeAreaView>
147
+ </Modal>
148
+ </View>
149
+ );
150
+ }
151
+
152
+ const styles = StyleSheet.create({
153
+ selectRoot: {
154
+ justifyContent: 'flex-start',
155
+ alignItems: 'flex-start',
156
+ flex: 1,
157
+ },
158
+ selectInput: {
159
+ width: '100%',
160
+ flexDirection: 'row',
161
+ borderRadius: 5,
162
+ paddingHorizontal: 15,
163
+ borderWidth: 1,
164
+ borderStyle: 'solid',
165
+ borderColor: '#dedede',
166
+ paddingVertical: 10,
167
+ },
168
+ selectLabel: { flex: 1, fontSize: 14 },
169
+ modalTop: {
170
+ backgroundColor: 'primary',
171
+ width: '100%',
172
+ },
173
+ modalSafe: {
174
+ flex: 1,
175
+ width: '100%',
176
+ backgroundColor: 'background',
177
+ },
178
+ modalCloseButton: {
179
+ padding: 10,
180
+ },
181
+ modalCloseText: {
182
+ fontSize: 18,
183
+ color: 'white',
184
+ },
185
+ modalTitle: {
186
+ fontSize: 18,
187
+ fontWeight: 'bold',
188
+ marginLeft: 10,
189
+ },
190
+ modalContent: {
191
+ flex: 1,
192
+ backgroundColor: 'background',
193
+ },
194
+ });
@@ -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
+ }