react-crud-mobile 1.3.333 → 1.3.334
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.map +1 -1
- package/dist/react-crud-mobile.cjs.production.min.js.map +1 -1
- package/dist/react-crud-mobile.esm.js.map +1 -1
- package/package.json +76 -76
- package/src/elements/UI.tsx +77 -77
- package/src/elements/UIChildren.tsx +142 -142
- package/src/elements/UIComplete.tsx +14 -14
- package/src/elements/UIElement.tsx +870 -870
- package/src/elements/UITag.tsx +13 -13
- package/src/elements/charts/ElChart.tsx +10 -10
- package/src/elements/core/GestureView.tsx +16 -16
- package/src/elements/core/SafeView.tsx +63 -63
- package/src/elements/core/UIAutoComplete.tsx +17 -17
- package/src/elements/core/UIButton.tsx +143 -143
- package/src/elements/core/UIHeader.tsx +38 -38
- package/src/elements/core/UIIcon.tsx +25 -25
- package/src/elements/core/UIInclude.tsx +40 -40
- package/src/elements/core/UIInput.tsx +147 -147
- package/src/elements/core/UILink.tsx +17 -17
- package/src/elements/core/UIList.tsx +180 -180
- package/src/elements/core/UIListItem.tsx +32 -32
- package/src/elements/core/UIListRow.tsx +132 -132
- package/src/elements/core/UIModal.tsx +212 -212
- package/src/elements/core/UIOption.tsx +17 -17
- package/src/elements/core/UIOrder.tsx +194 -194
- package/src/elements/core/UIQuantity.tsx +98 -98
- package/src/elements/core/UIRadio.tsx +17 -17
- package/src/elements/core/UISelect.tsx +175 -175
- package/src/elements/core/UISlider.tsx +61 -61
- package/src/elements/core/UIStatusBar.tsx +5 -5
- package/src/elements/core/UISwitch.tsx +27 -27
- package/src/elements/core/UIToast.tsx +44 -44
- package/src/elements/core/UIToggle.tsx +114 -114
- package/src/elements/core/UIView.tsx +69 -69
- package/src/elements/index.ts +1 -1
- package/src/elements/tabs/ElTabs.tsx +178 -178
- package/src/hooks/useIsVisible.ts +39 -39
- package/src/index.ts +1 -1
- 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,147 +1,147 @@
|
|
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 = Utils.call(() => {
|
72
|
-
let size = element.size;
|
73
|
-
let css: any = {};
|
74
|
-
|
75
|
-
if (size === 'small') {
|
76
|
-
css.height = 30;
|
77
|
-
css.fontSize = 12;
|
78
|
-
}
|
79
|
-
|
80
|
-
css.fontSize = Utils.nvl(element.fontSize, css.fontSize);
|
81
|
-
css = { ...style(type), ...css, ...style('input') };
|
82
|
-
css.lineHeight = parseInt(css.fontSize) + 2;
|
83
|
-
//v1
|
84
|
-
return css;
|
85
|
-
});
|
86
|
-
|
87
|
-
if (defs.autoHeight) {
|
88
|
-
defs.onContentSizeChange = event => {
|
89
|
-
setHeight(event.nativeEvent.contentSize.height);
|
90
|
-
};
|
91
|
-
|
92
|
-
inputStyle = { ...inputStyle, ...defs.style };
|
93
|
-
}
|
94
|
-
|
95
|
-
return (
|
96
|
-
<>
|
97
|
-
<View style={style('base', defs?.baseStyle)}>
|
98
|
-
{scope.getPart('left')}
|
99
|
-
<TextInput
|
100
|
-
onChangeText={onChange}
|
101
|
-
value={value}
|
102
|
-
placeholder={placeholder}
|
103
|
-
{...defs}
|
104
|
-
style={inputStyle}
|
105
|
-
/>
|
106
|
-
<CustomIcon />
|
107
|
-
</View>
|
108
|
-
{scope.getPart('right')}
|
109
|
-
</>
|
110
|
-
);
|
111
|
-
}
|
112
|
-
|
113
|
-
const styles = StyleSheet.create({
|
114
|
-
base: {
|
115
|
-
flex: 1,
|
116
|
-
width: '100%',
|
117
|
-
paddingBottom: 0,
|
118
|
-
paddingTop: 0,
|
119
|
-
alignItems: 'center',
|
120
|
-
borderWidth: 1,
|
121
|
-
borderColor: 'borderColor',
|
122
|
-
borderRadius: 5,
|
123
|
-
paddingHorizontal: 10,
|
124
|
-
alignSelf: 'flex-start',
|
125
|
-
flexDirection: 'row',
|
126
|
-
flexWrap: 'wrap',
|
127
|
-
gap: 10,
|
128
|
-
},
|
129
|
-
icon: {
|
130
|
-
marginRight: 10, // Espaço entre ícone e input
|
131
|
-
},
|
132
|
-
input: {
|
133
|
-
marginHorizontal: 0,
|
134
|
-
marginVertical: 0,
|
135
|
-
height: 40,
|
136
|
-
width: '100%',
|
137
|
-
flex: 1, // Para o input ocupar o espaço restante
|
138
|
-
},
|
139
|
-
textarea: {
|
140
|
-
marginHorizontal: 0,
|
141
|
-
marginVertical: 0,
|
142
|
-
width: '100%',
|
143
|
-
height: 'auto',
|
144
|
-
alignSelf: 'stretch',
|
145
|
-
flex: 1, // Para o input ocupar o espaço restante
|
146
|
-
},
|
147
|
-
});
|
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 = Utils.call(() => {
|
72
|
+
let size = element.size;
|
73
|
+
let css: any = {};
|
74
|
+
|
75
|
+
if (size === 'small') {
|
76
|
+
css.height = 30;
|
77
|
+
css.fontSize = 12;
|
78
|
+
}
|
79
|
+
|
80
|
+
css.fontSize = Utils.nvl(element.fontSize, css.fontSize);
|
81
|
+
css = { ...style(type), ...css, ...style('input') };
|
82
|
+
css.lineHeight = parseInt(css.fontSize) + 2;
|
83
|
+
//v1
|
84
|
+
return css;
|
85
|
+
});
|
86
|
+
|
87
|
+
if (defs.autoHeight) {
|
88
|
+
defs.onContentSizeChange = event => {
|
89
|
+
setHeight(event.nativeEvent.contentSize.height);
|
90
|
+
};
|
91
|
+
|
92
|
+
inputStyle = { ...inputStyle, ...defs.style };
|
93
|
+
}
|
94
|
+
|
95
|
+
return (
|
96
|
+
<>
|
97
|
+
<View style={style('base', defs?.baseStyle)}>
|
98
|
+
{scope.getPart('left')}
|
99
|
+
<TextInput
|
100
|
+
onChangeText={onChange}
|
101
|
+
value={value}
|
102
|
+
placeholder={placeholder}
|
103
|
+
{...defs}
|
104
|
+
style={inputStyle}
|
105
|
+
/>
|
106
|
+
<CustomIcon />
|
107
|
+
</View>
|
108
|
+
{scope.getPart('right')}
|
109
|
+
</>
|
110
|
+
);
|
111
|
+
}
|
112
|
+
|
113
|
+
const styles = StyleSheet.create({
|
114
|
+
base: {
|
115
|
+
flex: 1,
|
116
|
+
width: '100%',
|
117
|
+
paddingBottom: 0,
|
118
|
+
paddingTop: 0,
|
119
|
+
alignItems: 'center',
|
120
|
+
borderWidth: 1,
|
121
|
+
borderColor: 'borderColor',
|
122
|
+
borderRadius: 5,
|
123
|
+
paddingHorizontal: 10,
|
124
|
+
alignSelf: 'flex-start',
|
125
|
+
flexDirection: 'row',
|
126
|
+
flexWrap: 'wrap',
|
127
|
+
gap: 10,
|
128
|
+
},
|
129
|
+
icon: {
|
130
|
+
marginRight: 10, // Espaço entre ícone e input
|
131
|
+
},
|
132
|
+
input: {
|
133
|
+
marginHorizontal: 0,
|
134
|
+
marginVertical: 0,
|
135
|
+
height: 40,
|
136
|
+
width: '100%',
|
137
|
+
flex: 1, // Para o input ocupar o espaço restante
|
138
|
+
},
|
139
|
+
textarea: {
|
140
|
+
marginHorizontal: 0,
|
141
|
+
marginVertical: 0,
|
142
|
+
width: '100%',
|
143
|
+
height: 'auto',
|
144
|
+
alignSelf: 'stretch',
|
145
|
+
flex: 1, // Para o input ocupar o espaço restante
|
146
|
+
},
|
147
|
+
});
|
@@ -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
|
+
};
|