react-crud-mobile 1.0.671 → 1.0.673

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 (35) hide show
  1. package/dist/react-crud-mobile.cjs.development.js +1 -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 +2 -2
  6. package/dist/react-crud-mobile.esm.js.map +1 -1
  7. package/package.json +73 -73
  8. package/src/elements/UI.tsx +67 -67
  9. package/src/elements/UIChildren.tsx +139 -139
  10. package/src/elements/UIComplete.tsx +14 -14
  11. package/src/elements/UIElement.tsx +625 -625
  12. package/src/elements/UITag.tsx +13 -13
  13. package/src/elements/charts/ElChart.tsx +10 -10
  14. package/src/elements/core/SafeView.tsx +63 -63
  15. package/src/elements/core/UIAutoComplete.tsx +17 -17
  16. package/src/elements/core/UIButton.tsx +85 -85
  17. package/src/elements/core/UIIcon.tsx +8 -8
  18. package/src/elements/core/UIInclude.tsx +40 -40
  19. package/src/elements/core/UIInput.tsx +69 -69
  20. package/src/elements/core/UILink.tsx +17 -17
  21. package/src/elements/core/UIList.tsx +133 -133
  22. package/src/elements/core/UIListItem.tsx +32 -32
  23. package/src/elements/core/UIListRow.tsx +117 -117
  24. package/src/elements/core/UIModal.tsx +181 -181
  25. package/src/elements/core/UIOption.tsx +17 -17
  26. package/src/elements/core/UIQuantity.tsx +97 -97
  27. package/src/elements/core/UIRadio.tsx +17 -17
  28. package/src/elements/core/UISelect.tsx +135 -135
  29. package/src/elements/core/UISwitch.tsx +27 -27
  30. package/src/elements/core/UIToggle.tsx +102 -102
  31. package/src/elements/core/UIView.tsx +55 -55
  32. package/src/elements/index.ts +1 -1
  33. package/src/elements/tabs/ElTabs.tsx +178 -178
  34. package/src/hooks/useIsVisible.ts +39 -39
  35. package/src/index.ts +1 -1
@@ -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,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 { useTheme } 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
- const theme = useTheme();
25
- const dismissKeyboard = () => {
26
- if (Platform.OS !== 'web') {
27
- Keyboard.dismiss();
28
- }
29
- };
30
-
31
- useEffect(() => {
32
- StatusBar.setBarStyle('light-content');
33
- StatusBar.setBackgroundColor?.(theme.colors.primary);
34
- }, []);
35
-
36
- return (
37
- <SafeAreaProvider>
38
- <StatusBar barStyle="light-content" />
39
- <SafeAreaContextView
40
- style={{
41
- backgroundColor: theme.colors?.primary,
42
- ...props.viewStyle,
43
- flex: 1,
44
- }}
45
- >
46
- <KeyboardAvoidingView
47
- behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
48
- style={{
49
- flex: 1, // 🔹 Ocupa 100% da tela
50
- justifyContent: 'center',
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 } 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
+ const theme = ThemeUtils.getCurrentTheme();
25
+ const dismissKeyboard = () => {
26
+ if (Platform.OS !== 'web') {
27
+ Keyboard.dismiss();
28
+ }
29
+ };
30
+
31
+ useEffect(() => {
32
+ StatusBar.setBarStyle('light-content');
33
+ StatusBar.setBackgroundColor?.(theme.colors.primary);
34
+ }, []);
35
+
36
+ return (
37
+ <SafeAreaProvider>
38
+ <StatusBar barStyle="light-content" />
39
+ <SafeAreaContextView
40
+ style={{
41
+ backgroundColor: theme.colors?.primary,
42
+ ...props.viewStyle,
43
+ flex: 1,
44
+ }}
45
+ >
46
+ <KeyboardAvoidingView
47
+ behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
48
+ style={{
49
+ flex: 1, // 🔹 Ocupa 100% da tela
50
+ justifyContent: 'center',
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,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,85 +1,85 @@
1
- import { Ionicons } from '@expo/vector-icons';
2
- import { ChildType } from 'react-crud-utils';
3
- import { Text, TouchableHighlight, View } from 'react-native';
4
-
5
- export default function UIButton(props: ChildType) {
6
- let scope = props.scope;
7
- let element = scope.original;
8
-
9
- let color = element.color;
10
- let label = element.label;
11
- let icon = element.icon;
12
-
13
- if (!color) color = 'primaryLight';
14
-
15
- const styles: any = {
16
- buttonLabel: {
17
- color: '#ffffff',
18
- fontWeight: '500',
19
- fontSize: 16,
20
- paddingRight: 10,
21
- paddingLeft: 10,
22
- },
23
- buttonInner: {
24
- flexDirection: 'row',
25
- alignItems: 'center',
26
- justifyContent: 'center',
27
- height: 44,
28
- minWidth: 44,
29
- },
30
- buttonIcon: {
31
- color: '#fff',
32
- fontSize: 18,
33
- },
34
- button: {
35
- alignItems: 'center',
36
- margin: 'auto',
37
- width: '100%',
38
- textAlign: 'center',
39
- verticalAling: 'middle',
40
- borderRadius: 24,
41
- backgroundColor: color,
42
- color: '#ffffff',
43
- justifyContent: 'center',
44
- flex: 1,
45
- },
46
- };
47
-
48
- const onClick = (e: any) => {
49
- scope.call('click', {});
50
- };
51
-
52
- const style = (part: string, extra?: any) => {
53
- let s = { ...styles[part], ...extra };
54
- return scope.getStyle(part, s);
55
- };
56
-
57
- let extra: any = {};
58
-
59
- if (!label) {
60
- extra.button = { width: 'auto' };
61
- extra.icon = { padding: 5 };
62
- } else if (icon) {
63
- extra.button = { padding: 0, paddingHorizontal: 20 };
64
- }
65
- return (
66
- <TouchableHighlight
67
- underlayColor={'transparent'}
68
- onPress={onClick}
69
- style={style('button', extra.button)}
70
- >
71
- <View style={style('buttonInner')}>
72
- {icon && (
73
- <>
74
- <Ionicons
75
- size={30}
76
- style={style('buttonIcon', extra.icon)}
77
- name={icon}
78
- />
79
- </>
80
- )}
81
- {label && <Text style={style('buttonLabel')}>{label}</Text>}
82
- </View>
83
- </TouchableHighlight>
84
- );
85
- }
1
+ import { Ionicons } from '@expo/vector-icons';
2
+ import { ChildType } from 'react-crud-utils';
3
+ import { Text, TouchableHighlight, View } from 'react-native';
4
+
5
+ export default function UIButton(props: ChildType) {
6
+ let scope = props.scope;
7
+ let element = scope.original;
8
+
9
+ let color = element.color;
10
+ let label = element.label;
11
+ let icon = element.icon;
12
+
13
+ if (!color) color = 'primaryLight';
14
+
15
+ const styles: any = {
16
+ buttonLabel: {
17
+ color: '#ffffff',
18
+ fontWeight: '500',
19
+ fontSize: 16,
20
+ paddingRight: 10,
21
+ paddingLeft: 10,
22
+ },
23
+ buttonInner: {
24
+ flexDirection: 'row',
25
+ alignItems: 'center',
26
+ justifyContent: 'center',
27
+ height: 44,
28
+ minWidth: 44,
29
+ },
30
+ buttonIcon: {
31
+ color: '#fff',
32
+ fontSize: 18,
33
+ },
34
+ button: {
35
+ alignItems: 'center',
36
+ margin: 'auto',
37
+ width: '100%',
38
+ textAlign: 'center',
39
+ verticalAling: 'middle',
40
+ borderRadius: 24,
41
+ backgroundColor: color,
42
+ color: '#ffffff',
43
+ justifyContent: 'center',
44
+ flex: 1,
45
+ },
46
+ };
47
+
48
+ const onClick = (e: any) => {
49
+ scope.call('click', {});
50
+ };
51
+
52
+ const style = (part: string, extra?: any) => {
53
+ let s = { ...styles[part], ...extra };
54
+ return scope.getStyle(part, s);
55
+ };
56
+
57
+ let extra: any = {};
58
+
59
+ if (!label) {
60
+ extra.button = { width: 'auto' };
61
+ extra.icon = { padding: 5 };
62
+ } else if (icon) {
63
+ extra.button = { padding: 0, paddingHorizontal: 20 };
64
+ }
65
+ return (
66
+ <TouchableHighlight
67
+ underlayColor={'transparent'}
68
+ onPress={onClick}
69
+ style={style('button', extra.button)}
70
+ >
71
+ <View style={style('buttonInner')}>
72
+ {icon && (
73
+ <>
74
+ <Ionicons
75
+ size={30}
76
+ style={style('buttonIcon', extra.icon)}
77
+ name={icon}
78
+ />
79
+ </>
80
+ )}
81
+ {label && <Text style={style('buttonLabel')}>{label}</Text>}
82
+ </View>
83
+ </TouchableHighlight>
84
+ );
85
+ }
@@ -1,8 +1,8 @@
1
- import { Ionicons } from '@expo/vector-icons';
2
- import { ChildType } from 'react-crud-utils';
3
-
4
- export default function UIIcon({ scope }: ChildType) {
5
- let name = scope.getValue();
6
-
7
- return <Ionicons name={name} style={scope.getStyle('icon')} />;
8
- }
1
+ import { Ionicons } from '@expo/vector-icons';
2
+ import { ChildType } from 'react-crud-utils';
3
+
4
+ export default function UIIcon({ scope }: ChildType) {
5
+ let name = scope.getValue();
6
+
7
+ return <Ionicons name={name} style={scope.getStyle('icon')} />;
8
+ }
@@ -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,69 +1,69 @@
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.nvl(scope.getValue(), '');
9
-
10
- let label = scope.getLabel();
11
- let placeholder = scope.getPart('placeholder', null, label);
12
- let el = scope.original;
13
-
14
- const [value, setValue] = useState(initial);
15
-
16
- let onChange = v => {
17
- scope.changeValue(v);
18
-
19
- setValue(v);
20
- };
21
-
22
- const style = (part: string, extra?: any) => {
23
- return { ...scope.getStyle(part, styles[part]), ...extra };
24
- };
25
-
26
- return (
27
- <>
28
- {scope.getPart('left')}
29
- <TextInput
30
- style={style('input')}
31
- onChangeText={onChange}
32
- value={value}
33
- placeholder={placeholder}
34
- />
35
- {el.icon && (
36
- <Ionicons
37
- name={el.icon}
38
- size={scope.attr('iconSize', 20)}
39
- color={scope.attr('iconColor', '#888')}
40
- />
41
- )}
42
- {scope.getPart('right')}
43
- </>
44
- );
45
- }
46
-
47
- const styles = StyleSheet.create({
48
- base: {
49
- flexDirection: 'row',
50
- alignItems: 'center',
51
- borderWidth: 1,
52
- borderColor: 'borderColor',
53
- borderRadius: 20,
54
- paddingHorizontal: 10,
55
- paddingVertical: 5,
56
- padding: 10,
57
- paddingLeft: 5,
58
- paddingRight: 10,
59
- },
60
- icon: {
61
- marginRight: 10, // Espaço entre ícone e input
62
- },
63
- input: {
64
- marginHorizontal: 0,
65
- marginVertical: 0,
66
- height: 40,
67
- flex: 1, // Para o input ocupar o espaço restante
68
- },
69
- });
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.nvl(scope.getValue(), '');
9
+
10
+ let label = scope.getLabel();
11
+ let placeholder = scope.getPart('placeholder', null, label);
12
+ let el = scope.original;
13
+
14
+ const [value, setValue] = useState(initial);
15
+
16
+ let onChange = v => {
17
+ scope.changeValue(v);
18
+
19
+ setValue(v);
20
+ };
21
+
22
+ const style = (part: string, extra?: any) => {
23
+ return { ...scope.getStyle(part, styles[part]), ...extra };
24
+ };
25
+
26
+ return (
27
+ <>
28
+ {scope.getPart('left')}
29
+ <TextInput
30
+ style={style('input')}
31
+ onChangeText={onChange}
32
+ value={value}
33
+ placeholder={placeholder}
34
+ />
35
+ {el.icon && (
36
+ <Ionicons
37
+ name={el.icon}
38
+ size={scope.attr('iconSize', 20)}
39
+ color={scope.attr('iconColor', '#888')}
40
+ />
41
+ )}
42
+ {scope.getPart('right')}
43
+ </>
44
+ );
45
+ }
46
+
47
+ const styles = StyleSheet.create({
48
+ base: {
49
+ flexDirection: 'row',
50
+ alignItems: 'center',
51
+ borderWidth: 1,
52
+ borderColor: 'borderColor',
53
+ borderRadius: 20,
54
+ paddingHorizontal: 10,
55
+ paddingVertical: 5,
56
+ padding: 10,
57
+ paddingLeft: 5,
58
+ paddingRight: 10,
59
+ },
60
+ icon: {
61
+ marginRight: 10, // Espaço entre ícone e input
62
+ },
63
+ input: {
64
+ marginHorizontal: 0,
65
+ marginVertical: 0,
66
+ height: 40,
67
+ flex: 1, // Para o input ocupar o espaço restante
68
+ },
69
+ });
@@ -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
+ };