react-crud-mobile 1.3.303 → 1.3.305

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 (42) hide show
  1. package/dist/react-crud-mobile.cjs.development.js +4 -1
  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 +4 -1
  6. package/dist/react-crud-mobile.esm.js.map +1 -1
  7. package/package.json +77 -77
  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 +858 -858
  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/UIAutoComplete.tsx +17 -17
  17. package/src/elements/core/UIButton.tsx +143 -143
  18. package/src/elements/core/UIHeader.tsx +38 -38
  19. package/src/elements/core/UIIcon.tsx +25 -25
  20. package/src/elements/core/UIInclude.tsx +40 -40
  21. package/src/elements/core/UIInput.tsx +133 -132
  22. package/src/elements/core/UILink.tsx +17 -17
  23. package/src/elements/core/UIList.tsx +180 -180
  24. package/src/elements/core/UIListItem.tsx +32 -32
  25. package/src/elements/core/UIListRow.tsx +132 -132
  26. package/src/elements/core/UIModal.tsx +212 -212
  27. package/src/elements/core/UIOption.tsx +17 -17
  28. package/src/elements/core/UIOrder.tsx +194 -194
  29. package/src/elements/core/UIQuantity.tsx +98 -98
  30. package/src/elements/core/UIRadio.tsx +17 -17
  31. package/src/elements/core/UISelect.tsx +175 -175
  32. package/src/elements/core/UISlider.tsx +61 -61
  33. package/src/elements/core/UIStatusBar.tsx +5 -5
  34. package/src/elements/core/UISwitch.tsx +27 -27
  35. package/src/elements/core/UIToast.tsx +44 -44
  36. package/src/elements/core/UIToggle.tsx +102 -102
  37. package/src/elements/core/UIView.tsx +69 -69
  38. package/src/elements/index.ts +1 -1
  39. package/src/elements/tabs/ElTabs.tsx +178 -178
  40. package/src/hooks/useIsVisible.ts +39 -39
  41. package/src/index.ts +1 -1
  42. package/src/utils/MobileUtils.ts +12 -12
@@ -1,212 +1,212 @@
1
- import { useRef, useState } from 'react';
2
- import {
3
- ChildType,
4
- ComponentUtils,
5
- CrudUtils,
6
- MethodType,
7
- Utils,
8
- ViewUtils,
9
- } from 'react-crud-utils';
10
- import {
11
- Text,
12
- TouchableOpacity,
13
- StyleSheet,
14
- Modal,
15
- View,
16
- SafeAreaView,
17
- ScrollView,
18
- } from 'react-native';
19
- import UIChildren from '../UIChildren';
20
- import Ionicons from '@expo/vector-icons/Ionicons';
21
- import UIToast from './UIToast';
22
- import { GestureHandlerRootView } from 'react-native-gesture-handler';
23
-
24
- interface UIModalType extends ChildType {
25
- open?: boolean;
26
- dialog?: any;
27
- }
28
-
29
- export default function UIModal(props: UIModalType) {
30
- const scrollRef = useRef(null);
31
-
32
- let owner = props.scope;
33
- let [index, setIndex] = useState(0);
34
- let dialog = owner.currentDialog;
35
- //v2
36
-
37
- let curr = dialog?.crud;
38
-
39
- if (!dialog) {
40
- return <></>;
41
- }
42
-
43
- dialog.update = () => {
44
- setIndex(++index);
45
- };
46
-
47
- if (dialog.debug) console.log(dialog);
48
-
49
- //const modalVisible = curr.uuid === main.dialog?.crud?.uuid;
50
- const scope = dialog.scope;
51
- const label = scope.getLabel();
52
- const theme = scope.getTheme();
53
- const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
54
- const headerRight = ComponentUtils.getDefine(props, 'header', 'right');
55
- const bottom = ComponentUtils.getDefine(props, 'bottom');
56
-
57
- const style = (part: string, extra?: any) => {
58
- let st = { ...styles[part], ...extra };
59
-
60
- return { ...scope.getStyle(part, st) };
61
- };
62
-
63
- const onClose = () => {
64
- scope.close({ scope, crud: dialog?.crud, event: {} });
65
- };
66
-
67
- scope.put('scrollRef', scrollRef);
68
-
69
- const original = owner.original;
70
-
71
- ComponentUtils.setViewScope(scope);
72
-
73
- let color = Utils.nvl(headerStyle.color, 'white');
74
- let defaults = { color };
75
- let key = `${curr.name}-${index}`;
76
-
77
- let ModalContent = ({ children }) => {
78
- let disableScroll = scope.part('disableScroll', false);
79
- let disableContent = scope.part('disableContent', false);
80
-
81
- if (disableContent) {
82
- return <>{children}</>;
83
- }
84
-
85
- if (disableScroll) {
86
- return <View style={style('modalContent')}>{children}</View>;
87
- }
88
- return (
89
- <ScrollView
90
- contentContainerStyle={{ flexGrow: 1, paddingBottom: 50 }}
91
- style={style('modalContent')}
92
- nestedScrollEnabled={true}
93
- ref={scrollRef}
94
- >
95
- {children}
96
- </ScrollView>
97
- );
98
- };
99
-
100
- const ModalView = ({ children }) => {
101
- if (original.gesture) {
102
- return (
103
- <GestureHandlerRootView
104
- style={{
105
- flex: 1,
106
- }}
107
- >
108
- {children}
109
- </GestureHandlerRootView>
110
- );
111
- }
112
- return <>{children}</>;
113
- };
114
-
115
- const ModalInner = () => {
116
- let Content = () => {
117
- if (dialog?.component) {
118
- let cprops = dialog.props;
119
- let Aux = dialog.component;
120
-
121
- return <Aux key={curr.uuid} crud={curr} {...cprops} />;
122
- }
123
-
124
- return (
125
- <UIChildren scope={scope} crud={curr}>
126
- {props.children}
127
- </UIChildren>
128
- );
129
- };
130
-
131
- let content = <Content />;
132
-
133
- if (original.transient) {
134
- return <View style={style('modalSafe')}>{content}</View>;
135
- }
136
-
137
- return (
138
- <>
139
- <SafeAreaView style={style('modalTop')} />
140
- <SafeAreaView style={style('modalSafe')}>
141
- <View style={scope.getStyle('header', headerStyle)}>
142
- <TouchableOpacity
143
- onPress={onClose}
144
- style={style('modalCloseButton')}
145
- >
146
- <Ionicons
147
- name="chevron-back-outline"
148
- size={24}
149
- color={color}
150
- style={style('modalCloseText', defaults)}
151
- />
152
- </TouchableOpacity>
153
- <Text style={style('modalTitle', defaults)}>{label}</Text>
154
- {!Utils.isEmpty(headerRight) && (
155
- <UIChildren scope={scope} crud={curr} transient>
156
- {headerRight}
157
- </UIChildren>
158
- )}
159
- </View>
160
- <ModalContent>{content}</ModalContent>
161
- {bottom}
162
- </SafeAreaView>
163
- <UIToast />
164
- </>
165
- );
166
- };
167
- return (
168
- <ModalView>
169
- <Modal
170
- key={key}
171
- animationType="slide"
172
- transparent={true}
173
- visible={true}
174
- onRequestClose={onClose}
175
- >
176
- <ModalInner />
177
- </Modal>
178
- </ModalView>
179
- );
180
- }
181
-
182
- const styles = StyleSheet.create({
183
- modalTop: {
184
- backgroundColor: 'primary',
185
- width: '100%',
186
- },
187
- modalSafe: {
188
- flex: 1,
189
- width: '100%',
190
- backgroundColor: 'background',
191
- },
192
- modalCloseButton: {
193
- padding: 10,
194
- },
195
- modalCloseText: {
196
- fontSize: 18,
197
- color: 'white',
198
- },
199
- modalTitle: {
200
- fontSize: 22,
201
- fontWeight: 600,
202
- marginLeft: 10,
203
- },
204
- modalContent: {
205
- flex: 1,
206
- backgroundColor: 'background',
207
- paddingLeft: 15,
208
- paddingRight: 15,
209
- paddingTop: 10,
210
- paddingBottom: 10,
211
- },
212
- });
1
+ import { useRef, useState } from 'react';
2
+ import {
3
+ ChildType,
4
+ ComponentUtils,
5
+ CrudUtils,
6
+ MethodType,
7
+ Utils,
8
+ ViewUtils,
9
+ } from 'react-crud-utils';
10
+ import {
11
+ Text,
12
+ TouchableOpacity,
13
+ StyleSheet,
14
+ Modal,
15
+ View,
16
+ SafeAreaView,
17
+ ScrollView,
18
+ } from 'react-native';
19
+ import UIChildren from '../UIChildren';
20
+ import Ionicons from '@expo/vector-icons/Ionicons';
21
+ import UIToast from './UIToast';
22
+ import { GestureHandlerRootView } from 'react-native-gesture-handler';
23
+
24
+ interface UIModalType extends ChildType {
25
+ open?: boolean;
26
+ dialog?: any;
27
+ }
28
+
29
+ export default function UIModal(props: UIModalType) {
30
+ const scrollRef = useRef(null);
31
+
32
+ let owner = props.scope;
33
+ let [index, setIndex] = useState(0);
34
+ let dialog = owner.currentDialog;
35
+ //v2
36
+
37
+ let curr = dialog?.crud;
38
+
39
+ if (!dialog) {
40
+ return <></>;
41
+ }
42
+
43
+ dialog.update = () => {
44
+ setIndex(++index);
45
+ };
46
+
47
+ if (dialog.debug) console.log(dialog);
48
+
49
+ //const modalVisible = curr.uuid === main.dialog?.crud?.uuid;
50
+ const scope = dialog.scope;
51
+ const label = scope.getLabel();
52
+ const theme = scope.getTheme();
53
+ const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
54
+ const headerRight = ComponentUtils.getDefine(props, 'header', 'right');
55
+ const bottom = ComponentUtils.getDefine(props, 'bottom');
56
+
57
+ const style = (part: string, extra?: any) => {
58
+ let st = { ...styles[part], ...extra };
59
+
60
+ return { ...scope.getStyle(part, st) };
61
+ };
62
+
63
+ const onClose = () => {
64
+ scope.close({ scope, crud: dialog?.crud, event: {} });
65
+ };
66
+
67
+ scope.put('scrollRef', scrollRef);
68
+
69
+ const original = owner.original;
70
+
71
+ ComponentUtils.setViewScope(scope);
72
+
73
+ let color = Utils.nvl(headerStyle.color, 'white');
74
+ let defaults = { color };
75
+ let key = `${curr.name}-${index}`;
76
+
77
+ let ModalContent = ({ children }) => {
78
+ let disableScroll = scope.part('disableScroll', false);
79
+ let disableContent = scope.part('disableContent', false);
80
+
81
+ if (disableContent) {
82
+ return <>{children}</>;
83
+ }
84
+
85
+ if (disableScroll) {
86
+ return <View style={style('modalContent')}>{children}</View>;
87
+ }
88
+ return (
89
+ <ScrollView
90
+ contentContainerStyle={{ flexGrow: 1, paddingBottom: 50 }}
91
+ style={style('modalContent')}
92
+ nestedScrollEnabled={true}
93
+ ref={scrollRef}
94
+ >
95
+ {children}
96
+ </ScrollView>
97
+ );
98
+ };
99
+
100
+ const ModalView = ({ children }) => {
101
+ if (original.gesture) {
102
+ return (
103
+ <GestureHandlerRootView
104
+ style={{
105
+ flex: 1,
106
+ }}
107
+ >
108
+ {children}
109
+ </GestureHandlerRootView>
110
+ );
111
+ }
112
+ return <>{children}</>;
113
+ };
114
+
115
+ const ModalInner = () => {
116
+ let Content = () => {
117
+ if (dialog?.component) {
118
+ let cprops = dialog.props;
119
+ let Aux = dialog.component;
120
+
121
+ return <Aux key={curr.uuid} crud={curr} {...cprops} />;
122
+ }
123
+
124
+ return (
125
+ <UIChildren scope={scope} crud={curr}>
126
+ {props.children}
127
+ </UIChildren>
128
+ );
129
+ };
130
+
131
+ let content = <Content />;
132
+
133
+ if (original.transient) {
134
+ return <View style={style('modalSafe')}>{content}</View>;
135
+ }
136
+
137
+ return (
138
+ <>
139
+ <SafeAreaView style={style('modalTop')} />
140
+ <SafeAreaView style={style('modalSafe')}>
141
+ <View style={scope.getStyle('header', headerStyle)}>
142
+ <TouchableOpacity
143
+ onPress={onClose}
144
+ style={style('modalCloseButton')}
145
+ >
146
+ <Ionicons
147
+ name="chevron-back-outline"
148
+ size={24}
149
+ color={color}
150
+ style={style('modalCloseText', defaults)}
151
+ />
152
+ </TouchableOpacity>
153
+ <Text style={style('modalTitle', defaults)}>{label}</Text>
154
+ {!Utils.isEmpty(headerRight) && (
155
+ <UIChildren scope={scope} crud={curr} transient>
156
+ {headerRight}
157
+ </UIChildren>
158
+ )}
159
+ </View>
160
+ <ModalContent>{content}</ModalContent>
161
+ {bottom}
162
+ </SafeAreaView>
163
+ <UIToast />
164
+ </>
165
+ );
166
+ };
167
+ return (
168
+ <ModalView>
169
+ <Modal
170
+ key={key}
171
+ animationType="slide"
172
+ transparent={true}
173
+ visible={true}
174
+ onRequestClose={onClose}
175
+ >
176
+ <ModalInner />
177
+ </Modal>
178
+ </ModalView>
179
+ );
180
+ }
181
+
182
+ const styles = StyleSheet.create({
183
+ modalTop: {
184
+ backgroundColor: 'primary',
185
+ width: '100%',
186
+ },
187
+ modalSafe: {
188
+ flex: 1,
189
+ width: '100%',
190
+ backgroundColor: 'background',
191
+ },
192
+ modalCloseButton: {
193
+ padding: 10,
194
+ },
195
+ modalCloseText: {
196
+ fontSize: 18,
197
+ color: 'white',
198
+ },
199
+ modalTitle: {
200
+ fontSize: 22,
201
+ fontWeight: 600,
202
+ marginLeft: 10,
203
+ },
204
+ modalContent: {
205
+ flex: 1,
206
+ backgroundColor: 'background',
207
+ paddingLeft: 15,
208
+ paddingRight: 15,
209
+ paddingTop: 10,
210
+ paddingBottom: 10,
211
+ },
212
+ });
@@ -1,17 +1,17 @@
1
- import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
2
-
3
- export default function UIOption(props: any) {
4
- const handlePress = () => {
5
- Linking.openURL('https://reactnative.dev/');
6
- };
7
-
8
- return (
9
- <TouchableOpacity onPress={handlePress}>
10
- <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
11
- </TouchableOpacity>
12
- );
13
- }
14
-
15
- const styles = {
16
- link: {},
17
- };
1
+ import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
2
+
3
+ export default function UIOption(props: any) {
4
+ const handlePress = () => {
5
+ Linking.openURL('https://reactnative.dev/');
6
+ };
7
+
8
+ return (
9
+ <TouchableOpacity onPress={handlePress}>
10
+ <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
11
+ </TouchableOpacity>
12
+ );
13
+ }
14
+
15
+ const styles = {
16
+ link: {},
17
+ };