react-crud-mobile 1.3.302 → 1.3.304

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,40 +1,40 @@
1
- import UIChildren from '../UIChildren';
2
- import { ComponentUtils, DefineType, Utils } from 'react-crud-utils';
3
-
4
- export default function UIInclude(props: DefineType) {
5
- if (props.rendered === false) {
6
- return <></>;
7
- }
8
-
9
- let includes = ComponentUtils.getDefine(props, props.name, props.position);
10
-
11
- if (Utils.isEmpty(includes)) {
12
- includes = props.default;
13
- }
14
-
15
- if (!Utils.isEmpty(includes)) {
16
- let Aux = (tagProp: any) => {
17
- let Tag: any = props.tag;
18
-
19
- if (!Utils.isEmpty(Tag)) {
20
- return <Tag {...tagProp}>{tagProp.children}</Tag>;
21
- }
22
- return <>{tagProp.children}</>;
23
- };
24
-
25
- return (
26
- <Aux {...props.tagProps}>
27
- <UIChildren
28
- transient
29
- {...props}
30
- scope={props.scope}
31
- crud={props.crud}
32
- part={props.name}
33
- >
34
- {includes}
35
- </UIChildren>
36
- </Aux>
37
- );
38
- }
39
- return <>{includes}</>;
40
- }
1
+ import UIChildren from '../UIChildren';
2
+ import { ComponentUtils, DefineType, Utils } from 'react-crud-utils';
3
+
4
+ export default function UIInclude(props: DefineType) {
5
+ if (props.rendered === false) {
6
+ return <></>;
7
+ }
8
+
9
+ let includes = ComponentUtils.getDefine(props, props.name, props.position);
10
+
11
+ if (Utils.isEmpty(includes)) {
12
+ includes = props.default;
13
+ }
14
+
15
+ if (!Utils.isEmpty(includes)) {
16
+ let Aux = (tagProp: any) => {
17
+ let Tag: any = props.tag;
18
+
19
+ if (!Utils.isEmpty(Tag)) {
20
+ return <Tag {...tagProp}>{tagProp.children}</Tag>;
21
+ }
22
+ return <>{tagProp.children}</>;
23
+ };
24
+
25
+ return (
26
+ <Aux {...props.tagProps}>
27
+ <UIChildren
28
+ transient
29
+ {...props}
30
+ scope={props.scope}
31
+ crud={props.crud}
32
+ part={props.name}
33
+ >
34
+ {includes}
35
+ </UIChildren>
36
+ </Aux>
37
+ );
38
+ }
39
+ return <>{includes}</>;
40
+ }
@@ -1,132 +1,133 @@
1
- import { useState } from 'react';
2
- import { ChildType, Utils } from 'react-crud-utils';
3
- import { StyleSheet, TextInput, View } from 'react-native';
4
- import { Ionicons } from '@expo/vector-icons';
5
-
6
- export default function UIInput(props: ChildType) {
7
- let scope = props.scope;
8
- let initial = Utils.call(() => {
9
- let val = Utils.nvl(scope.getValue(), '');
10
-
11
- if (val && val?.push) {
12
- return val.join(', ').trim();
13
- }
14
- return val;
15
- });
16
-
17
- let label = scope.getLabel();
18
- let placeholder = scope.getPart('placeholder', null, label);
19
- let el = scope.original;
20
-
21
- const element = scope.original;
22
- const [height, setHeight] = useState(80);
23
- const [value, setValue] = useState(initial);
24
-
25
- let onChange = v => {
26
- v = scope.changeValue(v);
27
-
28
- setValue(v);
29
- };
30
-
31
- const style = (part: string, extra?: any) => {
32
- return { ...scope.getStyle(part, styles[part]), ...extra };
33
- };
34
-
35
- const CustomIcon = () => {
36
- let icon = el.icon;
37
-
38
- if (icon) {
39
- if (typeof icon === 'string') {
40
- return (
41
- <>
42
- {el.icon && (
43
- <Ionicons
44
- name={el.icon}
45
- size={scope.attr('iconSize', 20)}
46
- color={scope.attr('iconColor', '#888')}
47
- />
48
- )}
49
- </>
50
- );
51
- }
52
- return <>{icon}</>;
53
- }
54
- return <></>;
55
- };
56
-
57
- let type = scope.getPart('type', null, 'text');
58
- let decode = {
59
- textarea: {
60
- multiline: true,
61
- autoHeight: element.autoHeight !== false,
62
- textAlignVertical: 'top',
63
- numberOfLines: 5,
64
- style: { height: Math.max(80, height) },
65
- },
66
- };
67
-
68
- //v4
69
- let defs = { ...Utils.nvl(decode[type], {}), ...element.inputProps };
70
- let inputStyle = { ...style('input'), ...style(type) };
71
-
72
- if (defs.autoHeight) {
73
- defs.onContentSizeChange = event => {
74
- setHeight(event.nativeEvent.contentSize.height);
75
- };
76
-
77
- inputStyle = { ...inputStyle, ...defs.style };
78
- }
79
-
80
- return (
81
- <>
82
- <View style={style('base')}>
83
- {scope.getPart('left')}
84
- <TextInput
85
- onChangeText={onChange}
86
- value={value}
87
- placeholder={placeholder}
88
- {...defs}
89
- style={inputStyle}
90
- />
91
- <CustomIcon />
92
- </View>
93
- {scope.getPart('right')}
94
- </>
95
- );
96
- }
97
-
98
- const styles = StyleSheet.create({
99
- base: {
100
- flex: 1,
101
- width: '100%',
102
- paddingBottom: 0,
103
- paddingTop: 0,
104
- alignItems: 'center',
105
- borderWidth: 1,
106
- borderColor: 'borderColor',
107
- borderRadius: 5,
108
- paddingHorizontal: 15,
109
- alignSelf: 'flex-start',
110
- flexDirection: 'row',
111
- flexWrap: 'wrap',
112
- gap: 10,
113
- },
114
- icon: {
115
- marginRight: 10, // Espaço entre ícone e input
116
- },
117
- input: {
118
- marginHorizontal: 0,
119
- marginVertical: 0,
120
- height: 40,
121
- width: '100%',
122
- flex: 1, // Para o input ocupar o espaço restante
123
- },
124
- textarea: {
125
- marginHorizontal: 0,
126
- marginVertical: 0,
127
- width: '100%',
128
- height: 'auto',
129
- alignSelf: 'stretch',
130
- flex: 1, // Para o input ocupar o espaço restante
131
- },
132
- });
1
+ import { useState } from 'react';
2
+ import { ChildType, Utils } from 'react-crud-utils';
3
+ import { StyleSheet, TextInput, View } from 'react-native';
4
+ import { Ionicons } from '@expo/vector-icons';
5
+
6
+ export default function UIInput(props: ChildType) {
7
+ let scope = props.scope;
8
+ let initial = Utils.call(() => {
9
+ let val = Utils.nvl(scope.getValue(), '');
10
+
11
+ if (val && val?.push) {
12
+ return val.join(', ').trim();
13
+ }
14
+ return val;
15
+ });
16
+
17
+ let label = scope.getLabel();
18
+ let placeholder = scope.getPart('placeholder', null, label);
19
+ let el = scope.original;
20
+
21
+ const element = scope.original;
22
+ const [height, setHeight] = useState(80);
23
+ const [value, setValue] = useState(initial);
24
+
25
+ let onChange = v => {
26
+ v = scope.changeValue(v);
27
+
28
+ setValue(v);
29
+ };
30
+
31
+ const style = (part: string, extra?: any) => {
32
+ return { ...scope.getStyle(part, styles[part]), ...extra };
33
+ };
34
+
35
+ const CustomIcon = () => {
36
+ let icon = el.icon;
37
+
38
+ if (icon) {
39
+ if (typeof icon === 'string') {
40
+ return (
41
+ <>
42
+ {el.icon && (
43
+ <Ionicons
44
+ name={el.icon}
45
+ size={scope.attr('iconSize', 20)}
46
+ color={scope.attr('iconColor', '#888')}
47
+ />
48
+ )}
49
+ </>
50
+ );
51
+ }
52
+ return <>{icon}</>;
53
+ }
54
+ return <></>;
55
+ };
56
+
57
+ let type = scope.getPart('type', null, 'text');
58
+ let decode = {
59
+ textarea: {
60
+ multiline: true,
61
+ autoHeight: element.autoHeight !== false,
62
+ textAlignVertical: 'top',
63
+ numberOfLines: 5,
64
+ style: { height: Math.max(80, height) },
65
+ baseStyle: { paddingVertical: 10 },
66
+ },
67
+ };
68
+
69
+ //v4
70
+ let defs = { ...Utils.nvl(decode[type], {}), ...element.inputProps };
71
+ let inputStyle = { ...style('input'), ...style(type) };
72
+
73
+ if (defs.autoHeight) {
74
+ defs.onContentSizeChange = event => {
75
+ setHeight(event.nativeEvent.contentSize.height);
76
+ };
77
+
78
+ inputStyle = { ...inputStyle, ...defs.style };
79
+ }
80
+
81
+ return (
82
+ <>
83
+ <View style={style('base', defs?.baseStyle)}>
84
+ {scope.getPart('left')}
85
+ <TextInput
86
+ onChangeText={onChange}
87
+ value={value}
88
+ placeholder={placeholder}
89
+ {...defs}
90
+ style={inputStyle}
91
+ />
92
+ <CustomIcon />
93
+ </View>
94
+ {scope.getPart('right')}
95
+ </>
96
+ );
97
+ }
98
+
99
+ const styles = StyleSheet.create({
100
+ base: {
101
+ flex: 1,
102
+ width: '100%',
103
+ paddingBottom: 0,
104
+ paddingTop: 0,
105
+ alignItems: 'center',
106
+ borderWidth: 1,
107
+ borderColor: 'borderColor',
108
+ borderRadius: 5,
109
+ paddingHorizontal: 15,
110
+ alignSelf: 'flex-start',
111
+ flexDirection: 'row',
112
+ flexWrap: 'wrap',
113
+ gap: 10,
114
+ },
115
+ icon: {
116
+ marginRight: 10, // Espaço entre ícone e input
117
+ },
118
+ input: {
119
+ marginHorizontal: 0,
120
+ marginVertical: 0,
121
+ height: 40,
122
+ width: '100%',
123
+ flex: 1, // Para o input ocupar o espaço restante
124
+ },
125
+ textarea: {
126
+ marginHorizontal: 0,
127
+ marginVertical: 0,
128
+ width: '100%',
129
+ height: 'auto',
130
+ alignSelf: 'stretch',
131
+ flex: 1, // Para o input ocupar o espaço restante
132
+ },
133
+ });
@@ -1,17 +1,17 @@
1
- import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
2
-
3
- export default function UILink(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 UILink(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
+ };