react-crud-mobile 1.3.1 → 1.3.3

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 (38) hide show
  1. package/dist/react-crud-mobile.cjs.development.js +5 -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 +5 -1
  6. package/dist/react-crud-mobile.esm.js.map +1 -1
  7. package/package.json +75 -75
  8. package/src/elements/UI.tsx +73 -73
  9. package/src/elements/UIChildren.tsx +139 -139
  10. package/src/elements/UIComplete.tsx +14 -14
  11. package/src/elements/UIElement.tsx +696 -692
  12. package/src/elements/UITag.tsx +13 -13
  13. package/src/elements/charts/ElChart.tsx +10 -10
  14. package/src/elements/core/SafeView.tsx +69 -69
  15. package/src/elements/core/UIAutoComplete.tsx +17 -17
  16. package/src/elements/core/UIButton.tsx +139 -139
  17. package/src/elements/core/UIIcon.tsx +25 -25
  18. package/src/elements/core/UIInclude.tsx +40 -40
  19. package/src/elements/core/UIInput.tsx +96 -96
  20. package/src/elements/core/UILink.tsx +17 -17
  21. package/src/elements/core/UIList.tsx +168 -168
  22. package/src/elements/core/UIListItem.tsx +32 -32
  23. package/src/elements/core/UIListRow.tsx +123 -123
  24. package/src/elements/core/UIModal.tsx +204 -204
  25. package/src/elements/core/UIOption.tsx +17 -17
  26. package/src/elements/core/UIQuantity.tsx +98 -98
  27. package/src/elements/core/UIRadio.tsx +17 -17
  28. package/src/elements/core/UISelect.tsx +135 -135
  29. package/src/elements/core/UISlider.tsx +61 -61
  30. package/src/elements/core/UISwitch.tsx +27 -27
  31. package/src/elements/core/UIToast.tsx +44 -44
  32. package/src/elements/core/UIToggle.tsx +102 -102
  33. package/src/elements/core/UIView.tsx +94 -94
  34. package/src/elements/index.ts +1 -1
  35. package/src/elements/tabs/ElTabs.tsx +178 -178
  36. package/src/hooks/useIsVisible.ts +39 -39
  37. package/src/index.ts +1 -1
  38. package/src/utils/MobileUtils.ts +12 -12
@@ -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,69 +1,69 @@
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
- import { useEffect } from 'react';
16
-
17
- interface SafeViewType {
18
- safeStyle?: StyleProp<ViewStyle> | any;
19
- viewStyle?: StyleProp<ViewStyle> | any;
20
- children?: any;
21
- }
22
-
23
- export default function SafeView(props: SafeViewType) {
24
- let theme = ThemeUtils.getCurrentTheme();
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
- useEffect(() => {
37
- //ajustes tema v1
38
- StatusBar.setBarStyle(Utils.nvl(theme.theme, 'light-content'));
39
- StatusBar.setBackgroundColor?.(theme.colors.theme);
40
- }, []);
41
-
42
- return (
43
- <SafeAreaProvider>
44
- <StatusBar barStyle="light-content" />
45
- <SafeAreaContextView
46
- style={{
47
- backgroundColor: theme.colors?.theme,
48
- ...props.viewStyle,
49
- flex: 1,
50
- }}
51
- >
52
- <KeyboardAvoidingView
53
- behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
54
- style={{
55
- flex: 1, // 🔹 Ocupa 100% da tela
56
- justifyContent: 'center',
57
- }}
58
- >
59
- <TouchableWithoutFeedback
60
- onPress={dismissKeyboard}
61
- accessible={false}
62
- >
63
- <>{props.children}</>
64
- </TouchableWithoutFeedback>
65
- </KeyboardAvoidingView>
66
- </SafeAreaContextView>
67
- </SafeAreaProvider>
68
- );
69
- }
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
+ import { useEffect } from 'react';
16
+
17
+ interface SafeViewType {
18
+ safeStyle?: StyleProp<ViewStyle> | any;
19
+ viewStyle?: StyleProp<ViewStyle> | any;
20
+ children?: any;
21
+ }
22
+
23
+ export default function SafeView(props: SafeViewType) {
24
+ let theme = ThemeUtils.getCurrentTheme();
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
+ useEffect(() => {
37
+ //ajustes tema v1
38
+ StatusBar.setBarStyle(Utils.nvl(theme.theme, 'light-content'));
39
+ StatusBar.setBackgroundColor?.(theme.colors.theme);
40
+ }, []);
41
+
42
+ return (
43
+ <SafeAreaProvider>
44
+ <StatusBar barStyle="light-content" />
45
+ <SafeAreaContextView
46
+ style={{
47
+ backgroundColor: theme.colors?.theme,
48
+ ...props.viewStyle,
49
+ flex: 1,
50
+ }}
51
+ >
52
+ <KeyboardAvoidingView
53
+ behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
54
+ style={{
55
+ flex: 1, // 🔹 Ocupa 100% da tela
56
+ justifyContent: 'center',
57
+ }}
58
+ >
59
+ <TouchableWithoutFeedback
60
+ onPress={dismissKeyboard}
61
+ accessible={false}
62
+ >
63
+ <>{props.children}</>
64
+ </TouchableWithoutFeedback>
65
+ </KeyboardAvoidingView>
66
+ </SafeAreaContextView>
67
+ </SafeAreaProvider>
68
+ );
69
+ }
@@ -1,17 +1,17 @@
1
- import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
2
-
3
- export default function UIAutoComplete(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 UIAutoComplete(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,139 +1,139 @@
1
- import { Ionicons } from '@expo/vector-icons';
2
- import { ChildType, Utils } from 'react-crud-utils';
3
- import { Text, TouchableHighlight, View } from 'react-native';
4
-
5
- const BUTTONS_SIZE: any = { small: { minWidth: 30, height: 30 } };
6
-
7
- export default function UIButton(props: ChildType) {
8
- let scope = props.scope;
9
- let element = scope.original;
10
- let size = Utils.nvl(element.size, 'default');
11
- let align = Utils.nvl(element.align, 'center');
12
- let variant = Utils.nvl(element.variant, 'default');
13
-
14
- let color = element.color;
15
- let label = scope.getLabel();
16
- let icon = element.icon;
17
-
18
- //ajuste align v3
19
- if (!color) color = 'primaryLight';
20
-
21
- const styles: any = {
22
- buttonLabel: {
23
- color: '#ffffff',
24
- fontWeight: '500',
25
- fontSize: 16,
26
- },
27
- buttonInner: {
28
- flexDirection: 'row',
29
- alignItems: 'center',
30
- justifyContent: 'center',
31
- height: 44,
32
- minWidth: 44,
33
- },
34
- buttonIcon: {
35
- color: '#fff',
36
- fontSize: 18,
37
- },
38
- button: {
39
- backgroundColor: color,
40
- borderRadius: 24,
41
- gap: 10,
42
- justifyContent: 'center',
43
- alignItems: 'center',
44
- flexDirection: 'row',
45
- },
46
- };
47
-
48
- const onClick = (e: any) => {
49
- scope.call('click', {});
50
- };
51
-
52
- const style = (part: string, extra?: any) => {
53
- let css = { ...styles[part], ...extra };
54
-
55
- if (variant === 'text' || variant === 'outlined') {
56
- css.backgroundColor = 'transparent';
57
- css.color = Utils.nvl(color, 'text');
58
- }
59
-
60
- if (size === 'small') {
61
- css.fontSize = 12;
62
- css.fontWeight = 500;
63
- }
64
-
65
- if (size === 'medium') {
66
- css.fontSize = 14;
67
- css.fontWeight = 500;
68
- }
69
-
70
- if (align === 'left') {
71
- css.justifyContent = 'flex-start';
72
- }
73
-
74
- return scope.getStyle(part, css);
75
- };
76
-
77
- let extra: any = {};
78
-
79
- if (icon) {
80
- extra.button = { height: 40, padding: 0 };
81
- } else {
82
- extra.button = { height: 50 };
83
- }
84
-
85
- const buttonStyle = Utils.call(() => {
86
- let def: any = { ...extra?.button };
87
-
88
- if (variant === 'outlined') {
89
- def.borderWidth = 1;
90
- def.borderColor = Utils.nvl(color, 'text');
91
- }
92
-
93
- if (size) {
94
- def = { ...def, ...BUTTONS_SIZE[size] };
95
- }
96
-
97
- let css = style('button', def);
98
-
99
- if (!css.width) {
100
- let h = css.height;
101
-
102
- if (typeof h === 'number') {
103
- css.minWidth = h;
104
- }
105
- }
106
-
107
- return css;
108
- });
109
-
110
- const buttonLabel = style('buttonLabel');
111
- const iconStyle = Utils.call(() => {
112
- let css: any = style('buttonIcon', extra.icon);
113
-
114
- css.fontSize = Utils.nvl(buttonLabel.fontSize, css.fontSize);
115
-
116
- return css;
117
- });
118
-
119
- return (
120
- <TouchableHighlight
121
- underlayColor={'transparent'}
122
- onPress={onClick}
123
- style={buttonStyle}
124
- >
125
- <>
126
- {icon && (
127
- <>
128
- <Ionicons
129
- size={Utils.nvl(element.iconSize, 30)}
130
- style={iconStyle}
131
- name={icon}
132
- />
133
- </>
134
- )}
135
- {label && <Text style={buttonLabel}>{label}</Text>}
136
- </>
137
- </TouchableHighlight>
138
- );
139
- }
1
+ import { Ionicons } from '@expo/vector-icons';
2
+ import { ChildType, Utils } from 'react-crud-utils';
3
+ import { Text, TouchableHighlight, View } from 'react-native';
4
+
5
+ const BUTTONS_SIZE: any = { small: { minWidth: 30, height: 30 } };
6
+
7
+ export default function UIButton(props: ChildType) {
8
+ let scope = props.scope;
9
+ let element = scope.original;
10
+ let size = Utils.nvl(element.size, 'default');
11
+ let align = Utils.nvl(element.align, 'center');
12
+ let variant = Utils.nvl(element.variant, 'default');
13
+
14
+ let color = element.color;
15
+ let label = scope.getLabel();
16
+ let icon = element.icon;
17
+
18
+ //ajuste align v3
19
+ if (!color) color = 'primaryLight';
20
+
21
+ const styles: any = {
22
+ buttonLabel: {
23
+ color: '#ffffff',
24
+ fontWeight: '500',
25
+ fontSize: 16,
26
+ },
27
+ buttonInner: {
28
+ flexDirection: 'row',
29
+ alignItems: 'center',
30
+ justifyContent: 'center',
31
+ height: 44,
32
+ minWidth: 44,
33
+ },
34
+ buttonIcon: {
35
+ color: '#fff',
36
+ fontSize: 18,
37
+ },
38
+ button: {
39
+ backgroundColor: color,
40
+ borderRadius: 24,
41
+ gap: 10,
42
+ justifyContent: 'center',
43
+ alignItems: 'center',
44
+ flexDirection: 'row',
45
+ },
46
+ };
47
+
48
+ const onClick = (e: any) => {
49
+ scope.call('click', {});
50
+ };
51
+
52
+ const style = (part: string, extra?: any) => {
53
+ let css = { ...styles[part], ...extra };
54
+
55
+ if (variant === 'text' || variant === 'outlined') {
56
+ css.backgroundColor = 'transparent';
57
+ css.color = Utils.nvl(color, 'text');
58
+ }
59
+
60
+ if (size === 'small') {
61
+ css.fontSize = 12;
62
+ css.fontWeight = 500;
63
+ }
64
+
65
+ if (size === 'medium') {
66
+ css.fontSize = 14;
67
+ css.fontWeight = 500;
68
+ }
69
+
70
+ if (align === 'left') {
71
+ css.justifyContent = 'flex-start';
72
+ }
73
+
74
+ return scope.getStyle(part, css);
75
+ };
76
+
77
+ let extra: any = {};
78
+
79
+ if (icon) {
80
+ extra.button = { height: 40, padding: 0 };
81
+ } else {
82
+ extra.button = { height: 50 };
83
+ }
84
+
85
+ const buttonStyle = Utils.call(() => {
86
+ let def: any = { ...extra?.button };
87
+
88
+ if (variant === 'outlined') {
89
+ def.borderWidth = 1;
90
+ def.borderColor = Utils.nvl(color, 'text');
91
+ }
92
+
93
+ if (size) {
94
+ def = { ...def, ...BUTTONS_SIZE[size] };
95
+ }
96
+
97
+ let css = style('button', def);
98
+
99
+ if (!css.width) {
100
+ let h = css.height;
101
+
102
+ if (typeof h === 'number') {
103
+ css.minWidth = h;
104
+ }
105
+ }
106
+
107
+ return css;
108
+ });
109
+
110
+ const buttonLabel = style('buttonLabel');
111
+ const iconStyle = Utils.call(() => {
112
+ let css: any = style('buttonIcon', extra.icon);
113
+
114
+ css.fontSize = Utils.nvl(buttonLabel.fontSize, css.fontSize);
115
+
116
+ return css;
117
+ });
118
+
119
+ return (
120
+ <TouchableHighlight
121
+ underlayColor={'transparent'}
122
+ onPress={onClick}
123
+ style={buttonStyle}
124
+ >
125
+ <>
126
+ {icon && (
127
+ <>
128
+ <Ionicons
129
+ size={Utils.nvl(element.iconSize, 30)}
130
+ style={iconStyle}
131
+ name={icon}
132
+ />
133
+ </>
134
+ )}
135
+ {label && <Text style={buttonLabel}>{label}</Text>}
136
+ </>
137
+ </TouchableHighlight>
138
+ );
139
+ }
@@ -1,25 +1,25 @@
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
-
24
- return <Aux name={name} style={scope.getStyle('icon')} />;
25
- }
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
+
24
+ return <Aux name={name} style={scope.getStyle('icon')} />;
25
+ }
@@ -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
+ }