react-crud-mobile 1.3.358 → 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 +3 -9
- 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 +3 -9
- 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,114 +1,114 @@
|
|
1
|
-
import React, { useState } from 'react';
|
2
|
-
import { ChildType, Utils } from 'react-crud-utils';
|
3
|
-
import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
|
4
|
-
import UIListRow from './UIListRow';
|
5
|
-
|
6
|
-
export default function UIToggle(props: ChildType) {
|
7
|
-
const scope = props.scope;
|
8
|
-
const options = Utils.nvl(scope.getOptions(), []);
|
9
|
-
const value = scope.getInputValue();
|
10
|
-
|
11
|
-
let [index, setIndex] = useState(0);
|
12
|
-
|
13
|
-
const isSelected = (item: any) => {
|
14
|
-
return item?.value === value;
|
15
|
-
};
|
16
|
-
|
17
|
-
const onClick = (item: any) => {
|
18
|
-
scope.changeValue(item.object);
|
19
|
-
setIndex(++index);
|
20
|
-
};
|
21
|
-
|
22
|
-
const Item = ({ item, index }) => {
|
23
|
-
let selected = isSelected(item);
|
24
|
-
let style: any = { ...styles.text, ...scope.getStyle('text') };
|
25
|
-
|
26
|
-
if (selected) style.color = '#ffffff';
|
27
|
-
|
28
|
-
if (Utils.isEmpty(props.children)) {
|
29
|
-
return <Text style={style}>{item.label}</Text>;
|
30
|
-
}
|
31
|
-
|
32
|
-
return (
|
33
|
-
<UIListRow scope={scope} item={item.object} index={index}>
|
34
|
-
{props.children}
|
35
|
-
</UIListRow>
|
36
|
-
);
|
37
|
-
};
|
38
|
-
|
39
|
-
const getItemStyle = (item: any) => {
|
40
|
-
let style = { ...styles.item, ...scope.getStyle('item') };
|
41
|
-
|
42
|
-
let wPart = 100 / options.length;
|
43
|
-
let width = Math.floor(wPart) + '%';
|
44
|
-
|
45
|
-
if (isSelected(item)) {
|
46
|
-
let selectedColor = scope.getPart('selectedColor', undefined, 'primary');
|
47
|
-
let st = scope.getStyle('selected', {
|
48
|
-
backgroundColor: selectedColor,
|
49
|
-
color: '#ffffff',
|
50
|
-
});
|
51
|
-
|
52
|
-
style = { ...style, ...st };
|
53
|
-
|
54
|
-
if (!style.color) {
|
55
|
-
style.color = '#ffffff';
|
56
|
-
}
|
57
|
-
|
58
|
-
const backgroundColor = item.backgroundColor;
|
59
|
-
const color = item.color;
|
60
|
-
|
61
|
-
if (item.backgroundColor) style = { ...style, backgroundColor };
|
62
|
-
if (item.color) style = { ...style, color };
|
63
|
-
} else {
|
64
|
-
style.backgroundColor = '#fff';
|
65
|
-
style.color = '#000';
|
66
|
-
}
|
67
|
-
|
68
|
-
style.width = width;
|
69
|
-
|
70
|
-
return style;
|
71
|
-
};
|
72
|
-
|
73
|
-
return (
|
74
|
-
<View style={{ ...styles.container, ...scope.getStyle('items') }}>
|
75
|
-
{options.map((item: any, i: number) => (
|
76
|
-
<TouchableHighlight
|
77
|
-
key={`k-${i}`}
|
78
|
-
style={getItemStyle(item)}
|
79
|
-
onPress={e => {
|
80
|
-
onClick(item);
|
81
|
-
}}
|
82
|
-
>
|
83
|
-
<Item item={item} index={i} />
|
84
|
-
</TouchableHighlight>
|
85
|
-
))}
|
86
|
-
</View>
|
87
|
-
);
|
88
|
-
}
|
89
|
-
|
90
|
-
const styles = StyleSheet.create({
|
91
|
-
container: {
|
92
|
-
flex: 1,
|
93
|
-
width: '100%',
|
94
|
-
justifyContent: 'center',
|
95
|
-
flexDirection: 'row',
|
96
|
-
alignItems: 'center',
|
97
|
-
margin: 3,
|
98
|
-
gap: 5,
|
99
|
-
},
|
100
|
-
item: {
|
101
|
-
backgroundColor: 'background',
|
102
|
-
justifyContent: 'center',
|
103
|
-
alignItems: 'center',
|
104
|
-
width: 'auto',
|
105
|
-
flexDirection: 'row',
|
106
|
-
flex: 1,
|
107
|
-
padding: 5,
|
108
|
-
borderRadius: 2,
|
109
|
-
},
|
110
|
-
text: {
|
111
|
-
fontSize: 13,
|
112
|
-
fontWeight: '400',
|
113
|
-
},
|
114
|
-
});
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
import { ChildType, Utils } from 'react-crud-utils';
|
3
|
+
import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
|
4
|
+
import UIListRow from './UIListRow';
|
5
|
+
|
6
|
+
export default function UIToggle(props: ChildType) {
|
7
|
+
const scope = props.scope;
|
8
|
+
const options = Utils.nvl(scope.getOptions(), []);
|
9
|
+
const value = scope.getInputValue();
|
10
|
+
|
11
|
+
let [index, setIndex] = useState(0);
|
12
|
+
|
13
|
+
const isSelected = (item: any) => {
|
14
|
+
return item?.value === value;
|
15
|
+
};
|
16
|
+
|
17
|
+
const onClick = (item: any) => {
|
18
|
+
scope.changeValue(item.object);
|
19
|
+
setIndex(++index);
|
20
|
+
};
|
21
|
+
|
22
|
+
const Item = ({ item, index }) => {
|
23
|
+
let selected = isSelected(item);
|
24
|
+
let style: any = { ...styles.text, ...scope.getStyle('text') };
|
25
|
+
|
26
|
+
if (selected) style.color = '#ffffff';
|
27
|
+
|
28
|
+
if (Utils.isEmpty(props.children)) {
|
29
|
+
return <Text style={style}>{item.label}</Text>;
|
30
|
+
}
|
31
|
+
|
32
|
+
return (
|
33
|
+
<UIListRow scope={scope} item={item.object} index={index}>
|
34
|
+
{props.children}
|
35
|
+
</UIListRow>
|
36
|
+
);
|
37
|
+
};
|
38
|
+
|
39
|
+
const getItemStyle = (item: any) => {
|
40
|
+
let style = { ...styles.item, ...scope.getStyle('item') };
|
41
|
+
|
42
|
+
let wPart = 100 / options.length;
|
43
|
+
let width = Math.floor(wPart) + '%';
|
44
|
+
|
45
|
+
if (isSelected(item)) {
|
46
|
+
let selectedColor = scope.getPart('selectedColor', undefined, 'primary');
|
47
|
+
let st = scope.getStyle('selected', {
|
48
|
+
backgroundColor: selectedColor,
|
49
|
+
color: '#ffffff',
|
50
|
+
});
|
51
|
+
|
52
|
+
style = { ...style, ...st };
|
53
|
+
|
54
|
+
if (!style.color) {
|
55
|
+
style.color = '#ffffff';
|
56
|
+
}
|
57
|
+
|
58
|
+
const backgroundColor = item.backgroundColor;
|
59
|
+
const color = item.color;
|
60
|
+
|
61
|
+
if (item.backgroundColor) style = { ...style, backgroundColor };
|
62
|
+
if (item.color) style = { ...style, color };
|
63
|
+
} else {
|
64
|
+
style.backgroundColor = '#fff';
|
65
|
+
style.color = '#000';
|
66
|
+
}
|
67
|
+
|
68
|
+
style.width = width;
|
69
|
+
|
70
|
+
return style;
|
71
|
+
};
|
72
|
+
|
73
|
+
return (
|
74
|
+
<View style={{ ...styles.container, ...scope.getStyle('items') }}>
|
75
|
+
{options.map((item: any, i: number) => (
|
76
|
+
<TouchableHighlight
|
77
|
+
key={`k-${i}`}
|
78
|
+
style={getItemStyle(item)}
|
79
|
+
onPress={e => {
|
80
|
+
onClick(item);
|
81
|
+
}}
|
82
|
+
>
|
83
|
+
<Item item={item} index={i} />
|
84
|
+
</TouchableHighlight>
|
85
|
+
))}
|
86
|
+
</View>
|
87
|
+
);
|
88
|
+
}
|
89
|
+
|
90
|
+
const styles = StyleSheet.create({
|
91
|
+
container: {
|
92
|
+
flex: 1,
|
93
|
+
width: '100%',
|
94
|
+
justifyContent: 'center',
|
95
|
+
flexDirection: 'row',
|
96
|
+
alignItems: 'center',
|
97
|
+
margin: 3,
|
98
|
+
gap: 5,
|
99
|
+
},
|
100
|
+
item: {
|
101
|
+
backgroundColor: 'background',
|
102
|
+
justifyContent: 'center',
|
103
|
+
alignItems: 'center',
|
104
|
+
width: 'auto',
|
105
|
+
flexDirection: 'row',
|
106
|
+
flex: 1,
|
107
|
+
padding: 5,
|
108
|
+
borderRadius: 2,
|
109
|
+
},
|
110
|
+
text: {
|
111
|
+
fontSize: 13,
|
112
|
+
fontWeight: '400',
|
113
|
+
},
|
114
|
+
});
|
@@ -1,69 +1,69 @@
|
|
1
|
-
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
2
|
-
|
3
|
-
import UIChildren from '../UIChildren';
|
4
|
-
import { ChildType, ComponentUtils, Utils, ViewUtils } from 'react-crud-utils';
|
5
|
-
import { useRef } from 'react';
|
6
|
-
import UIToast from './UIToast';
|
7
|
-
import UIHeader from './UIHeader';
|
8
|
-
|
9
|
-
export default function UIView({ scope, children }: ChildType) {
|
10
|
-
const scrollRef = useRef(null);
|
11
|
-
const original = scope.original;
|
12
|
-
|
13
|
-
const onScroll = () => {
|
14
|
-
const crud = ViewUtils.getCrud();
|
15
|
-
|
16
|
-
Utils.each(crud.scroll, s => {
|
17
|
-
if (s.onScroll) {
|
18
|
-
s.onScroll.call(s);
|
19
|
-
}
|
20
|
-
});
|
21
|
-
};
|
22
|
-
|
23
|
-
//v3
|
24
|
-
scope.put('scrollRef', scrollRef);
|
25
|
-
|
26
|
-
ComponentUtils.setViewScope(scope);
|
27
|
-
|
28
|
-
let Container = () => {
|
29
|
-
if (original.scroll === false) {
|
30
|
-
return <UIChildren scope={scope}>{children}</UIChildren>;
|
31
|
-
}
|
32
|
-
|
33
|
-
return (
|
34
|
-
<View style={scope.getStyle('container', styles.container)}>
|
35
|
-
<ScrollView
|
36
|
-
onScroll={onScroll}
|
37
|
-
scrollEventThrottle={16}
|
38
|
-
ref={scrollRef}
|
39
|
-
nestedScrollEnabled={true}
|
40
|
-
keyboardShouldPersistTaps="handled"
|
41
|
-
contentContainerStyle={scope.getStyle('contentContainer', {
|
42
|
-
paddingBottom: 50,
|
43
|
-
})}
|
44
|
-
style={scope.getStyle('scroll', styles.scroll)}
|
45
|
-
>
|
46
|
-
<UIChildren scope={scope}>{children}</UIChildren>
|
47
|
-
</ScrollView>
|
48
|
-
</View>
|
49
|
-
);
|
50
|
-
};
|
51
|
-
return (
|
52
|
-
<>
|
53
|
-
<UIHeader scope={scope} />
|
54
|
-
<Container />
|
55
|
-
<UIToast /> {/* <- este componente precisa estar aqui */}
|
56
|
-
</>
|
57
|
-
);
|
58
|
-
}
|
59
|
-
|
60
|
-
const styles = StyleSheet.create({
|
61
|
-
scroll: {
|
62
|
-
paddingTop: 10,
|
63
|
-
paddingBottom: 10,
|
64
|
-
paddingLeft: 15,
|
65
|
-
paddingRight: 15,
|
66
|
-
},
|
67
|
-
container: {},
|
68
|
-
view: {},
|
69
|
-
});
|
1
|
+
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
2
|
+
|
3
|
+
import UIChildren from '../UIChildren';
|
4
|
+
import { ChildType, ComponentUtils, Utils, ViewUtils } from 'react-crud-utils';
|
5
|
+
import { useRef } from 'react';
|
6
|
+
import UIToast from './UIToast';
|
7
|
+
import UIHeader from './UIHeader';
|
8
|
+
|
9
|
+
export default function UIView({ scope, children }: ChildType) {
|
10
|
+
const scrollRef = useRef(null);
|
11
|
+
const original = scope.original;
|
12
|
+
|
13
|
+
const onScroll = () => {
|
14
|
+
const crud = ViewUtils.getCrud();
|
15
|
+
|
16
|
+
Utils.each(crud.scroll, s => {
|
17
|
+
if (s.onScroll) {
|
18
|
+
s.onScroll.call(s);
|
19
|
+
}
|
20
|
+
});
|
21
|
+
};
|
22
|
+
|
23
|
+
//v3
|
24
|
+
scope.put('scrollRef', scrollRef);
|
25
|
+
|
26
|
+
ComponentUtils.setViewScope(scope);
|
27
|
+
|
28
|
+
let Container = () => {
|
29
|
+
if (original.scroll === false) {
|
30
|
+
return <UIChildren scope={scope}>{children}</UIChildren>;
|
31
|
+
}
|
32
|
+
|
33
|
+
return (
|
34
|
+
<View style={scope.getStyle('container', styles.container)}>
|
35
|
+
<ScrollView
|
36
|
+
onScroll={onScroll}
|
37
|
+
scrollEventThrottle={16}
|
38
|
+
ref={scrollRef}
|
39
|
+
nestedScrollEnabled={true}
|
40
|
+
keyboardShouldPersistTaps="handled"
|
41
|
+
contentContainerStyle={scope.getStyle('contentContainer', {
|
42
|
+
paddingBottom: 50,
|
43
|
+
})}
|
44
|
+
style={scope.getStyle('scroll', styles.scroll)}
|
45
|
+
>
|
46
|
+
<UIChildren scope={scope}>{children}</UIChildren>
|
47
|
+
</ScrollView>
|
48
|
+
</View>
|
49
|
+
);
|
50
|
+
};
|
51
|
+
return (
|
52
|
+
<>
|
53
|
+
<UIHeader scope={scope} />
|
54
|
+
<Container />
|
55
|
+
<UIToast /> {/* <- este componente precisa estar aqui */}
|
56
|
+
</>
|
57
|
+
);
|
58
|
+
}
|
59
|
+
|
60
|
+
const styles = StyleSheet.create({
|
61
|
+
scroll: {
|
62
|
+
paddingTop: 10,
|
63
|
+
paddingBottom: 10,
|
64
|
+
paddingLeft: 15,
|
65
|
+
paddingRight: 15,
|
66
|
+
},
|
67
|
+
container: {},
|
68
|
+
view: {},
|
69
|
+
});
|
package/src/elements/index.ts
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export { default as UI } from "./UI";
|
1
|
+
export { default as UI } from "./UI";
|