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.
- package/dist/react-crud-mobile.cjs.development.js +2 -8
- package/dist/react-crud-mobile.cjs.development.js.map +1 -1
- package/dist/react-crud-mobile.cjs.production.min.js +1 -1
- package/dist/react-crud-mobile.cjs.production.min.js.map +1 -1
- package/dist/react-crud-mobile.esm.js +2 -8
- 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 +872 -878
- 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/UIButton.tsx +144 -144
- package/src/elements/core/UIHeader.tsx +38 -38
- package/src/elements/core/UIIcon.tsx +32 -32
- package/src/elements/core/UIInclude.tsx +40 -40
- package/src/elements/core/UIInput.tsx +149 -149
- package/src/elements/core/UIList.tsx +180 -180
- package/src/elements/core/UIListRow.tsx +132 -132
- package/src/elements/core/UIModal.tsx +212 -212
- package/src/elements/core/UIOrder.tsx +194 -194
- package/src/elements/core/UIQuantity.tsx +98 -98
- package/src/elements/core/UISelect.tsx +194 -194
- 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/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
|
+
}
|