react-crud-mobile 1.3.359 → 1.3.361
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 +4 -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 +4 -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
package/src/elements/UITag.tsx
CHANGED
@@ -1,13 +1,13 @@
|
|
1
|
-
import React, { useState } from "react";
|
2
|
-
import { Utils } from "react-crud-utils";
|
3
|
-
|
4
|
-
interface UITagType {
|
5
|
-
name: string;
|
6
|
-
[otherOptions: string]: unknown;
|
7
|
-
}
|
8
|
-
|
9
|
-
export default function UITag(props: UITagType) {
|
10
|
-
let Aux = Utils.nvl(props.name, "span");
|
11
|
-
|
12
|
-
return <Aux {...props} />;
|
13
|
-
}
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Utils } from "react-crud-utils";
|
3
|
+
|
4
|
+
interface UITagType {
|
5
|
+
name: string;
|
6
|
+
[otherOptions: string]: unknown;
|
7
|
+
}
|
8
|
+
|
9
|
+
export default function UITag(props: UITagType) {
|
10
|
+
let Aux = Utils.nvl(props.name, "span");
|
11
|
+
|
12
|
+
return <Aux {...props} />;
|
13
|
+
}
|
@@ -1,10 +1,10 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { ChildType, Scope, Utils } from "react-crud-utils";
|
3
|
-
|
4
|
-
export default function ElChart(props: ChildType) {
|
5
|
-
let scope: Scope = props.scope;
|
6
|
-
let items: any = scope.getItems();
|
7
|
-
let columns = Utils.asList(scope.original.columns);
|
8
|
-
|
9
|
-
return <div className="ui-chart-data"></div>;
|
10
|
-
}
|
1
|
+
import React from "react";
|
2
|
+
import { ChildType, Scope, Utils } from "react-crud-utils";
|
3
|
+
|
4
|
+
export default function ElChart(props: ChildType) {
|
5
|
+
let scope: Scope = props.scope;
|
6
|
+
let items: any = scope.getItems();
|
7
|
+
let columns = Utils.asList(scope.original.columns);
|
8
|
+
|
9
|
+
return <div className="ui-chart-data"></div>;
|
10
|
+
}
|
@@ -1,16 +1,16 @@
|
|
1
|
-
import { StyleProp, ViewStyle } from 'react-native';
|
2
|
-
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
3
|
-
|
4
|
-
interface SafeViewType {
|
5
|
-
safeStyle?: StyleProp<ViewStyle> | any;
|
6
|
-
viewStyle?: StyleProp<ViewStyle> | any;
|
7
|
-
children?: any;
|
8
|
-
}
|
9
|
-
|
10
|
-
export default function GestureView(props: SafeViewType) {
|
11
|
-
return (
|
12
|
-
<GestureHandlerRootView style={{ flex: 1 }}>
|
13
|
-
{props.children}
|
14
|
-
</GestureHandlerRootView>
|
15
|
-
);
|
16
|
-
}
|
1
|
+
import { StyleProp, ViewStyle } from 'react-native';
|
2
|
+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
3
|
+
|
4
|
+
interface SafeViewType {
|
5
|
+
safeStyle?: StyleProp<ViewStyle> | any;
|
6
|
+
viewStyle?: StyleProp<ViewStyle> | any;
|
7
|
+
children?: any;
|
8
|
+
}
|
9
|
+
|
10
|
+
export default function GestureView(props: SafeViewType) {
|
11
|
+
return (
|
12
|
+
<GestureHandlerRootView style={{ flex: 1 }}>
|
13
|
+
{props.children}
|
14
|
+
</GestureHandlerRootView>
|
15
|
+
);
|
16
|
+
}
|
@@ -1,63 +1,63 @@
|
|
1
|
-
import {
|
2
|
-
Keyboard,
|
3
|
-
KeyboardAvoidingView,
|
4
|
-
Platform,
|
5
|
-
StatusBar,
|
6
|
-
StyleProp,
|
7
|
-
TouchableWithoutFeedback,
|
8
|
-
ViewStyle,
|
9
|
-
} from 'react-native';
|
10
|
-
import {
|
11
|
-
SafeAreaProvider,
|
12
|
-
SafeAreaView as SafeAreaContextView,
|
13
|
-
} from 'react-native-safe-area-context';
|
14
|
-
import { ThemeUtils, useTheme, Utils } from 'react-crud-utils';
|
15
|
-
|
16
|
-
interface SafeViewType {
|
17
|
-
safeStyle?: StyleProp<ViewStyle> | any;
|
18
|
-
viewStyle?: StyleProp<ViewStyle> | any;
|
19
|
-
children?: any;
|
20
|
-
}
|
21
|
-
|
22
|
-
export default function SafeView(props: SafeViewType) {
|
23
|
-
let theme = ThemeUtils.getCurrentTheme();
|
24
|
-
//v2
|
25
|
-
|
26
|
-
if (Utils.isEmpty(theme)) {
|
27
|
-
theme = useTheme();
|
28
|
-
}
|
29
|
-
|
30
|
-
const dismissKeyboard = () => {
|
31
|
-
if (Platform.OS !== 'web') {
|
32
|
-
Keyboard.dismiss();
|
33
|
-
}
|
34
|
-
};
|
35
|
-
|
36
|
-
return (
|
37
|
-
<SafeAreaProvider>
|
38
|
-
<SafeAreaContextView
|
39
|
-
style={{
|
40
|
-
backgroundColor: theme.colors?.theme,
|
41
|
-
...props.viewStyle,
|
42
|
-
flex: 1,
|
43
|
-
}}
|
44
|
-
>
|
45
|
-
<StatusBar barStyle="dark-content" backgroundColor="#f5f5f5" />
|
46
|
-
<KeyboardAvoidingView
|
47
|
-
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
48
|
-
style={{
|
49
|
-
flex: 1, // 🔹 Ocupa 100% da tela
|
50
|
-
justifyContent: 'flex-start',
|
51
|
-
}}
|
52
|
-
>
|
53
|
-
<TouchableWithoutFeedback
|
54
|
-
onPress={dismissKeyboard}
|
55
|
-
accessible={false}
|
56
|
-
>
|
57
|
-
<>{props.children}</>
|
58
|
-
</TouchableWithoutFeedback>
|
59
|
-
</KeyboardAvoidingView>
|
60
|
-
</SafeAreaContextView>
|
61
|
-
</SafeAreaProvider>
|
62
|
-
);
|
63
|
-
}
|
1
|
+
import {
|
2
|
+
Keyboard,
|
3
|
+
KeyboardAvoidingView,
|
4
|
+
Platform,
|
5
|
+
StatusBar,
|
6
|
+
StyleProp,
|
7
|
+
TouchableWithoutFeedback,
|
8
|
+
ViewStyle,
|
9
|
+
} from 'react-native';
|
10
|
+
import {
|
11
|
+
SafeAreaProvider,
|
12
|
+
SafeAreaView as SafeAreaContextView,
|
13
|
+
} from 'react-native-safe-area-context';
|
14
|
+
import { ThemeUtils, useTheme, Utils } from 'react-crud-utils';
|
15
|
+
|
16
|
+
interface SafeViewType {
|
17
|
+
safeStyle?: StyleProp<ViewStyle> | any;
|
18
|
+
viewStyle?: StyleProp<ViewStyle> | any;
|
19
|
+
children?: any;
|
20
|
+
}
|
21
|
+
|
22
|
+
export default function SafeView(props: SafeViewType) {
|
23
|
+
let theme = ThemeUtils.getCurrentTheme();
|
24
|
+
//v2
|
25
|
+
|
26
|
+
if (Utils.isEmpty(theme)) {
|
27
|
+
theme = useTheme();
|
28
|
+
}
|
29
|
+
|
30
|
+
const dismissKeyboard = () => {
|
31
|
+
if (Platform.OS !== 'web') {
|
32
|
+
Keyboard.dismiss();
|
33
|
+
}
|
34
|
+
};
|
35
|
+
|
36
|
+
return (
|
37
|
+
<SafeAreaProvider>
|
38
|
+
<SafeAreaContextView
|
39
|
+
style={{
|
40
|
+
backgroundColor: theme.colors?.theme,
|
41
|
+
...props.viewStyle,
|
42
|
+
flex: 1,
|
43
|
+
}}
|
44
|
+
>
|
45
|
+
<StatusBar barStyle="dark-content" backgroundColor="#f5f5f5" />
|
46
|
+
<KeyboardAvoidingView
|
47
|
+
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
48
|
+
style={{
|
49
|
+
flex: 1, // 🔹 Ocupa 100% da tela
|
50
|
+
justifyContent: 'flex-start',
|
51
|
+
}}
|
52
|
+
>
|
53
|
+
<TouchableWithoutFeedback
|
54
|
+
onPress={dismissKeyboard}
|
55
|
+
accessible={false}
|
56
|
+
>
|
57
|
+
<>{props.children}</>
|
58
|
+
</TouchableWithoutFeedback>
|
59
|
+
</KeyboardAvoidingView>
|
60
|
+
</SafeAreaContextView>
|
61
|
+
</SafeAreaProvider>
|
62
|
+
);
|
63
|
+
}
|
@@ -1,144 +1,144 @@
|
|
1
|
-
import { Ionicons } from '@expo/vector-icons';
|
2
|
-
import { ChildType, Utils } from 'react-crud-utils';
|
3
|
-
import { Text, TouchableHighlight, View } from 'react-native';
|
4
|
-
import UI from '../UI';
|
5
|
-
|
6
|
-
const BUTTONS_SIZE: any = { small: { minWidth: 30, height: 30 } };
|
7
|
-
|
8
|
-
export default function UIButton(props: ChildType) {
|
9
|
-
let scope = props.scope;
|
10
|
-
let element = scope.original;
|
11
|
-
let size = Utils.nvl(element.size, 'default');
|
12
|
-
let align = Utils.nvl(element.align, 'center');
|
13
|
-
let variant = Utils.nvl(element.variant, 'default');
|
14
|
-
|
15
|
-
let color = element.color;
|
16
|
-
let label = scope.getLabel();
|
17
|
-
let icon = scope.getPart('icon');
|
18
|
-
|
19
|
-
//ajuste align v6
|
20
|
-
if (!color) color = 'primaryLight';
|
21
|
-
|
22
|
-
const styles: any = {
|
23
|
-
buttonLabel: {
|
24
|
-
color: '#ffffff',
|
25
|
-
fontWeight: 400,
|
26
|
-
fontSize: 15,
|
27
|
-
},
|
28
|
-
buttonInner: {
|
29
|
-
flexDirection: 'row',
|
30
|
-
alignItems: 'center',
|
31
|
-
justifyContent: 'center',
|
32
|
-
height: 44,
|
33
|
-
minWidth: 44,
|
34
|
-
},
|
35
|
-
buttonIcon: {
|
36
|
-
color: '#fff',
|
37
|
-
fontSize: 16,
|
38
|
-
},
|
39
|
-
button: {
|
40
|
-
backgroundColor: color,
|
41
|
-
borderRadius: 20,
|
42
|
-
gap: 10,
|
43
|
-
justifyContent: 'center',
|
44
|
-
alignItems: 'center',
|
45
|
-
flexDirection: 'row',
|
46
|
-
},
|
47
|
-
};
|
48
|
-
|
49
|
-
const onClick = (e: any) => {
|
50
|
-
scope.call('click', {});
|
51
|
-
};
|
52
|
-
|
53
|
-
const style = (part: string, extra?: any) => {
|
54
|
-
let css = { ...styles[part], ...extra };
|
55
|
-
|
56
|
-
if (variant === 'text' || variant === 'outlined') {
|
57
|
-
css.backgroundColor = 'transparent';
|
58
|
-
css.color = Utils.nvl(color, 'text');
|
59
|
-
}
|
60
|
-
|
61
|
-
if (size === 'small') {
|
62
|
-
css.fontSize = 12;
|
63
|
-
css.fontWeight = 500;
|
64
|
-
}
|
65
|
-
|
66
|
-
if (size === 'medium') {
|
67
|
-
css.fontSize = 14;
|
68
|
-
css.fontWeight = 500;
|
69
|
-
}
|
70
|
-
|
71
|
-
if (align === 'left') {
|
72
|
-
css.justifyContent = 'flex-start';
|
73
|
-
}
|
74
|
-
|
75
|
-
return scope.getStyle(part, css);
|
76
|
-
};
|
77
|
-
|
78
|
-
let extra: any = {};
|
79
|
-
|
80
|
-
if (icon) {
|
81
|
-
extra.button = { height: 40, padding: 0 };
|
82
|
-
} else {
|
83
|
-
extra.button = { height: 50 };
|
84
|
-
}
|
85
|
-
|
86
|
-
const buttonStyle = Utils.call(() => {
|
87
|
-
let def: any = { ...extra?.button };
|
88
|
-
|
89
|
-
if (variant === 'outlined') {
|
90
|
-
def.borderWidth = 1;
|
91
|
-
def.borderColor = Utils.nvl(color, 'text');
|
92
|
-
}
|
93
|
-
|
94
|
-
if (size) {
|
95
|
-
def = { ...def, ...BUTTONS_SIZE[size] };
|
96
|
-
}
|
97
|
-
|
98
|
-
if (!label) {
|
99
|
-
def = { ...def, borderRadius: 20 };
|
100
|
-
}
|
101
|
-
|
102
|
-
let css = style('button', def);
|
103
|
-
|
104
|
-
if (!css.width) {
|
105
|
-
let h = css.height;
|
106
|
-
|
107
|
-
if (typeof h === 'number') {
|
108
|
-
css.minWidth = h;
|
109
|
-
}
|
110
|
-
}
|
111
|
-
|
112
|
-
return css;
|
113
|
-
});
|
114
|
-
|
115
|
-
const buttonLabel = style('buttonLabel');
|
116
|
-
const iconStyle = Utils.call(() => {
|
117
|
-
let css: any = style('buttonIcon', extra.icon);
|
118
|
-
|
119
|
-
css.fontSize = Utils.nvl(buttonLabel.fontSize, css.fontSize);
|
120
|
-
|
121
|
-
return css;
|
122
|
-
});
|
123
|
-
|
124
|
-
return (
|
125
|
-
<TouchableHighlight
|
126
|
-
underlayColor={'transparent'}
|
127
|
-
onPress={onClick}
|
128
|
-
style={buttonStyle}
|
129
|
-
>
|
130
|
-
<>
|
131
|
-
{icon && (
|
132
|
-
<>
|
133
|
-
<UI.Icon
|
134
|
-
size={Utils.nvl(element.iconSize, 30)}
|
135
|
-
style={iconStyle}
|
136
|
-
value={icon}
|
137
|
-
/>
|
138
|
-
</>
|
139
|
-
)}
|
140
|
-
{label && <Text style={buttonLabel}>{label}</Text>}
|
141
|
-
</>
|
142
|
-
</TouchableHighlight>
|
143
|
-
);
|
144
|
-
}
|
1
|
+
import { Ionicons } from '@expo/vector-icons';
|
2
|
+
import { ChildType, Utils } from 'react-crud-utils';
|
3
|
+
import { Text, TouchableHighlight, View } from 'react-native';
|
4
|
+
import UI from '../UI';
|
5
|
+
|
6
|
+
const BUTTONS_SIZE: any = { small: { minWidth: 30, height: 30 } };
|
7
|
+
|
8
|
+
export default function UIButton(props: ChildType) {
|
9
|
+
let scope = props.scope;
|
10
|
+
let element = scope.original;
|
11
|
+
let size = Utils.nvl(element.size, 'default');
|
12
|
+
let align = Utils.nvl(element.align, 'center');
|
13
|
+
let variant = Utils.nvl(element.variant, 'default');
|
14
|
+
|
15
|
+
let color = element.color;
|
16
|
+
let label = scope.getLabel();
|
17
|
+
let icon = scope.getPart('icon');
|
18
|
+
|
19
|
+
//ajuste align v6
|
20
|
+
if (!color) color = 'primaryLight';
|
21
|
+
|
22
|
+
const styles: any = {
|
23
|
+
buttonLabel: {
|
24
|
+
color: '#ffffff',
|
25
|
+
fontWeight: 400,
|
26
|
+
fontSize: 15,
|
27
|
+
},
|
28
|
+
buttonInner: {
|
29
|
+
flexDirection: 'row',
|
30
|
+
alignItems: 'center',
|
31
|
+
justifyContent: 'center',
|
32
|
+
height: 44,
|
33
|
+
minWidth: 44,
|
34
|
+
},
|
35
|
+
buttonIcon: {
|
36
|
+
color: '#fff',
|
37
|
+
fontSize: 16,
|
38
|
+
},
|
39
|
+
button: {
|
40
|
+
backgroundColor: color,
|
41
|
+
borderRadius: 20,
|
42
|
+
gap: 10,
|
43
|
+
justifyContent: 'center',
|
44
|
+
alignItems: 'center',
|
45
|
+
flexDirection: 'row',
|
46
|
+
},
|
47
|
+
};
|
48
|
+
|
49
|
+
const onClick = (e: any) => {
|
50
|
+
scope.call('click', {});
|
51
|
+
};
|
52
|
+
|
53
|
+
const style = (part: string, extra?: any) => {
|
54
|
+
let css = { ...styles[part], ...extra };
|
55
|
+
|
56
|
+
if (variant === 'text' || variant === 'outlined') {
|
57
|
+
css.backgroundColor = 'transparent';
|
58
|
+
css.color = Utils.nvl(color, 'text');
|
59
|
+
}
|
60
|
+
|
61
|
+
if (size === 'small') {
|
62
|
+
css.fontSize = 12;
|
63
|
+
css.fontWeight = 500;
|
64
|
+
}
|
65
|
+
|
66
|
+
if (size === 'medium') {
|
67
|
+
css.fontSize = 14;
|
68
|
+
css.fontWeight = 500;
|
69
|
+
}
|
70
|
+
|
71
|
+
if (align === 'left') {
|
72
|
+
css.justifyContent = 'flex-start';
|
73
|
+
}
|
74
|
+
|
75
|
+
return scope.getStyle(part, css);
|
76
|
+
};
|
77
|
+
|
78
|
+
let extra: any = {};
|
79
|
+
|
80
|
+
if (icon) {
|
81
|
+
extra.button = { height: 40, padding: 0 };
|
82
|
+
} else {
|
83
|
+
extra.button = { height: 50 };
|
84
|
+
}
|
85
|
+
|
86
|
+
const buttonStyle = Utils.call(() => {
|
87
|
+
let def: any = { ...extra?.button };
|
88
|
+
|
89
|
+
if (variant === 'outlined') {
|
90
|
+
def.borderWidth = 1;
|
91
|
+
def.borderColor = Utils.nvl(color, 'text');
|
92
|
+
}
|
93
|
+
|
94
|
+
if (size) {
|
95
|
+
def = { ...def, ...BUTTONS_SIZE[size] };
|
96
|
+
}
|
97
|
+
|
98
|
+
if (!label) {
|
99
|
+
def = { ...def, borderRadius: 20 };
|
100
|
+
}
|
101
|
+
|
102
|
+
let css = style('button', def);
|
103
|
+
|
104
|
+
if (!css.width) {
|
105
|
+
let h = css.height;
|
106
|
+
|
107
|
+
if (typeof h === 'number') {
|
108
|
+
css.minWidth = h;
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
112
|
+
return css;
|
113
|
+
});
|
114
|
+
|
115
|
+
const buttonLabel = style('buttonLabel');
|
116
|
+
const iconStyle = Utils.call(() => {
|
117
|
+
let css: any = style('buttonIcon', extra.icon);
|
118
|
+
|
119
|
+
css.fontSize = Utils.nvl(buttonLabel.fontSize, css.fontSize);
|
120
|
+
|
121
|
+
return css;
|
122
|
+
});
|
123
|
+
|
124
|
+
return (
|
125
|
+
<TouchableHighlight
|
126
|
+
underlayColor={'transparent'}
|
127
|
+
onPress={onClick}
|
128
|
+
style={buttonStyle}
|
129
|
+
>
|
130
|
+
<>
|
131
|
+
{icon && (
|
132
|
+
<>
|
133
|
+
<UI.Icon
|
134
|
+
size={Utils.nvl(element.iconSize, 30)}
|
135
|
+
style={iconStyle}
|
136
|
+
value={icon}
|
137
|
+
/>
|
138
|
+
</>
|
139
|
+
)}
|
140
|
+
{label && <Text style={buttonLabel}>{label}</Text>}
|
141
|
+
</>
|
142
|
+
</TouchableHighlight>
|
143
|
+
);
|
144
|
+
}
|
@@ -1,38 +1,38 @@
|
|
1
|
-
import { Text, View } from 'react-native';
|
2
|
-
|
3
|
-
import { ChildType, HtmlUtils, Utils } from 'react-crud-utils';
|
4
|
-
|
5
|
-
export default function UIHeader({ scope }: ChildType) {
|
6
|
-
const theme = scope.getTheme();
|
7
|
-
const header = scope.getPart('header', null, []);
|
8
|
-
const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
|
9
|
-
const headerTextStyle = Utils.nvl(theme.styles?.defaults?.headerText, {});
|
10
|
-
|
11
|
-
let headerStyleFull = Utils.call(() => {
|
12
|
-
let css = scope.getStyle('header', headerStyle);
|
13
|
-
let bg = css.backgroundColor;
|
14
|
-
|
15
|
-
if (bg) {
|
16
|
-
css.color = HtmlUtils.getTextColor(bg);
|
17
|
-
}
|
18
|
-
return css;
|
19
|
-
});
|
20
|
-
|
21
|
-
let hasHeader = !Utils.isEmpty(header);
|
22
|
-
let AuxHeader = () => {
|
23
|
-
if (typeof header === 'string') {
|
24
|
-
return <Text style={headerTextStyle}>{header}</Text>;
|
25
|
-
}
|
26
|
-
return <>{header}</>;
|
27
|
-
};
|
28
|
-
|
29
|
-
return (
|
30
|
-
<>
|
31
|
-
{hasHeader && (
|
32
|
-
<View style={headerStyleFull}>
|
33
|
-
<AuxHeader />
|
34
|
-
</View>
|
35
|
-
)}
|
36
|
-
</>
|
37
|
-
);
|
38
|
-
}
|
1
|
+
import { Text, View } from 'react-native';
|
2
|
+
|
3
|
+
import { ChildType, HtmlUtils, Utils } from 'react-crud-utils';
|
4
|
+
|
5
|
+
export default function UIHeader({ scope }: ChildType) {
|
6
|
+
const theme = scope.getTheme();
|
7
|
+
const header = scope.getPart('header', null, []);
|
8
|
+
const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
|
9
|
+
const headerTextStyle = Utils.nvl(theme.styles?.defaults?.headerText, {});
|
10
|
+
|
11
|
+
let headerStyleFull = Utils.call(() => {
|
12
|
+
let css = scope.getStyle('header', headerStyle);
|
13
|
+
let bg = css.backgroundColor;
|
14
|
+
|
15
|
+
if (bg) {
|
16
|
+
css.color = HtmlUtils.getTextColor(bg);
|
17
|
+
}
|
18
|
+
return css;
|
19
|
+
});
|
20
|
+
|
21
|
+
let hasHeader = !Utils.isEmpty(header);
|
22
|
+
let AuxHeader = () => {
|
23
|
+
if (typeof header === 'string') {
|
24
|
+
return <Text style={headerTextStyle}>{header}</Text>;
|
25
|
+
}
|
26
|
+
return <>{header}</>;
|
27
|
+
};
|
28
|
+
|
29
|
+
return (
|
30
|
+
<>
|
31
|
+
{hasHeader && (
|
32
|
+
<View style={headerStyleFull}>
|
33
|
+
<AuxHeader />
|
34
|
+
</View>
|
35
|
+
)}
|
36
|
+
</>
|
37
|
+
);
|
38
|
+
}
|
@@ -1,32 +1,32 @@
|
|
1
|
-
import {
|
2
|
-
Ionicons,
|
3
|
-
MaterialCommunityIcons,
|
4
|
-
AntDesign,
|
5
|
-
Entypo,
|
6
|
-
EvilIcons,
|
7
|
-
} from '@expo/vector-icons';
|
8
|
-
|
9
|
-
import { ChildType, Utils } from 'react-crud-utils';
|
10
|
-
|
11
|
-
export default function UIIcon({ scope }: ChildType) {
|
12
|
-
let name = scope.getValue();
|
13
|
-
let libs: any = {
|
14
|
-
ion: Ionicons,
|
15
|
-
ant: AntDesign,
|
16
|
-
entypo: Entypo,
|
17
|
-
evil: EvilIcons,
|
18
|
-
material: MaterialCommunityIcons,
|
19
|
-
};
|
20
|
-
|
21
|
-
let library = Utils.nvl(scope.original.library, 'ion');
|
22
|
-
let Aux = libs[library];
|
23
|
-
let css: any = scope.getStyle('icon');
|
24
|
-
let fontSize = scope.part('size', 20);
|
25
|
-
let size = scope.part('iconSize', fontSize);
|
26
|
-
|
27
|
-
if (scope.original?.transient) {
|
28
|
-
css = { ...css, ...scope.getStyle() };
|
29
|
-
}
|
30
|
-
|
31
|
-
return <Aux size={size} name={name} style={css} />;
|
32
|
-
}
|
1
|
+
import {
|
2
|
+
Ionicons,
|
3
|
+
MaterialCommunityIcons,
|
4
|
+
AntDesign,
|
5
|
+
Entypo,
|
6
|
+
EvilIcons,
|
7
|
+
} from '@expo/vector-icons';
|
8
|
+
|
9
|
+
import { ChildType, Utils } from 'react-crud-utils';
|
10
|
+
|
11
|
+
export default function UIIcon({ scope }: ChildType) {
|
12
|
+
let name = scope.getValue();
|
13
|
+
let libs: any = {
|
14
|
+
ion: Ionicons,
|
15
|
+
ant: AntDesign,
|
16
|
+
entypo: Entypo,
|
17
|
+
evil: EvilIcons,
|
18
|
+
material: MaterialCommunityIcons,
|
19
|
+
};
|
20
|
+
|
21
|
+
let library = Utils.nvl(scope.original.library, 'ion');
|
22
|
+
let Aux = libs[library];
|
23
|
+
let css: any = scope.getStyle('icon');
|
24
|
+
let fontSize = scope.part('size', 20);
|
25
|
+
let size = scope.part('iconSize', fontSize);
|
26
|
+
|
27
|
+
if (scope.original?.transient) {
|
28
|
+
css = { ...css, ...scope.getStyle() };
|
29
|
+
}
|
30
|
+
|
31
|
+
return <Aux size={size} name={name} style={css} />;
|
32
|
+
}
|