react-crud-mobile 1.0.673 → 1.0.678

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.673",
+  "version": "1.0.678",
   "license": "MIT",
   "description": "Uma biblioteca de componentes para React Native",
   "main": "dist/index.js",
@@ -44,7 +44,7 @@
     "@react-native-vector-icons/ionicons": "^7.4.0",
     "@react-native-vector-icons/material-icons": "^0.0.1",
     "react": "19.0.0",
-    "react-crud-utils": "^0.1.266",
+    "react-crud-utils": "^0.1.268",
     "react-dom": "19.0.0",
     "react-native": "0.79.2",
     "react-native-gesture-handler": "~2.24.0",

package/src/elements/UI.tsx

@@ -1,14 +1,18 @@
-import { ListType } from 'react-crud-utils';
-import { UserType } from 'react-crud-utils';
-import { InputType } from 'react-crud-utils';
-import { ChartType } from 'react-crud-utils';
-import { ContainerType } from 'react-crud-utils';
-import { ListInputType } from 'react-crud-utils';
+import {
+  ListType,
+  UserType,
+  InputType,
+  ChartType,
+  ContainerType,
+  ListInputType,
+  TabsType,
+  DefineType,
+  ButtonType,
+  IconType,
+  LinkType,
+} from 'react-crud-utils';
 import UIElement from './UIElement';
-import { TabsType } from 'react-crud-utils';
-import { DefineType } from 'react-crud-utils';
-import { ButtonType } from 'react-crud-utils';
-import { LinkType } from 'react-crud-utils';
+
 import UIInclude from './core/UIInclude';
 import SafeView from './core/SafeView';
 
@@ -30,7 +34,7 @@ const UI = {
   Email: (props: InputType) => <UIElement {...props} type="email" />,
   Button: (props: ButtonType) => <UIElement {...props} type="button" />,
   Link: (props: LinkType) => <UIElement {...props} type="link" />,
-  Icon: (props: ButtonType) => <UIElement {...props} type="icon" />,
+  Icon: (props: IconType) => <UIElement {...props} type="icon" />,
   Output: (props: ContainerType) => <UIElement {...props} type="output" />,
   Form: (props: ContainerType) => <UIElement {...props} type="form" />,
   Crud: (props: ContainerType) => <UIElement {...props} type="crud" />,

package/src/elements/core/SafeView.tsx

@@ -11,7 +11,7 @@ import {
   SafeAreaProvider,
   SafeAreaView as SafeAreaContextView,
 } from 'react-native-safe-area-context';
-import { ThemeUtils, useTheme } from 'react-crud-utils';
+import { ThemeUtils, useTheme, Utils } from 'react-crud-utils';
 import { useEffect } from 'react';
 
 interface SafeViewType {
@@ -21,7 +21,12 @@ interface SafeViewType {
 }
 
 export default function SafeView(props: SafeViewType) {
-  const theme = ThemeUtils.getCurrentTheme();
+  let theme = ThemeUtils.getCurrentTheme();
+
+  if (Utils.isEmpty(theme)) {
+    theme = useTheme();
+  }
+
   const dismissKeyboard = () => {
     if (Platform.OS !== 'web') {
       Keyboard.dismiss();

package/src/elements/core/UIAutoComplete.tsx

@@ -1,17 +1,17 @@
-import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
-
-export default function UIAutoComplete(props: any) {
-  const handlePress = () => {
-    Linking.openURL('https://reactnative.dev/');
-  };
-
-  return (
-    <TouchableOpacity onPress={handlePress}>
-      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
-    </TouchableOpacity>
-  );
-}
-
-const styles = {
-  link: {},
-};
+import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+
+export default function UIAutoComplete(props: any) {
+  const handlePress = () => {
+    Linking.openURL('https://reactnative.dev/');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/UIIcon.tsx

@@ -1,8 +1,25 @@
-import { Ionicons } from '@expo/vector-icons';
-import { ChildType } from 'react-crud-utils';
+import {
+  Ionicons,
+  MaterialCommunityIcons,
+  AntDesign,
+  Entypo,
+  EvilIcons,
+} from '@expo/vector-icons';
+
+import { ChildType, Utils } from 'react-crud-utils';
 
 export default function UIIcon({ scope }: ChildType) {
   let name = scope.getValue();
+  let libs: any = {
+    ion: Ionicons,
+    ant: AntDesign,
+    entypo: Entypo,
+    evil: EvilIcons,
+    material: MaterialCommunityIcons,
+  };
+
+  let library = Utils.nvl(scope.original.library, 'ion');
+  let Aux = libs[library];
 
-  return <Ionicons name={name} style={scope.getStyle('icon')} />;
+  return <Aux name={name} style={scope.getStyle('icon')} />;
 }

package/src/elements/core/UILink.tsx

@@ -1,17 +1,17 @@
-import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
-
-export default function UILink(props: any) {
-  const handlePress = () => {
-    Linking.openURL('https://reactnative.dev/');
-  };
-
-  return (
-    <TouchableOpacity onPress={handlePress}>
-      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
-    </TouchableOpacity>
-  );
-}
-
-const styles = {
-  link: {},
-};
+import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+
+export default function UILink(props: any) {
+  const handlePress = () => {
+    Linking.openURL('https://reactnative.dev/');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/UIListItem.tsx

@@ -1,32 +1,32 @@
-import { useState } from 'react';
-import { ChildType, Utils } from 'react-crud-utils';
-import { FlatList, StyleSheet, Switch, Text, View } from 'react-native';
-
-interface UIListItemType extends ChildType {
-  data: any;
-}
-
-export default function UIListItem(props: UIListItemType) {
-  const scope = props.scope;
-  const crud = props.crud;
-
-  return <View style={styles.item}></View>;
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: '#fff',
-  },
-  item: {
-    padding: 15,
-    marginVertical: 8,
-    backgroundColor: '#f9c2ff',
-    borderRadius: 8,
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});
+import { useState } from 'react';
+import { ChildType, Utils } from 'react-crud-utils';
+import { FlatList, StyleSheet, Switch, Text, View } from 'react-native';
+
+interface UIListItemType extends ChildType {
+  data: any;
+}
+
+export default function UIListItem(props: UIListItemType) {
+  const scope = props.scope;
+  const crud = props.crud;
+
+  return <View style={styles.item}></View>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#fff',
+  },
+  item: {
+    padding: 15,
+    marginVertical: 8,
+    backgroundColor: '#f9c2ff',
+    borderRadius: 8,
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});

package/src/elements/core/UIOption.tsx

@@ -1,17 +1,17 @@
-import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
-
-export default function UIOption(props: any) {
-  const handlePress = () => {
-    Linking.openURL('https://reactnative.dev/');
-  };
-
-  return (
-    <TouchableOpacity onPress={handlePress}>
-      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
-    </TouchableOpacity>
-  );
-}
-
-const styles = {
-  link: {},
-};
+import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+
+export default function UIOption(props: any) {
+  const handlePress = () => {
+    Linking.openURL('https://reactnative.dev/');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/UIRadio.tsx

@@ -1,17 +1,17 @@
-import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
-
-export default function UIRadio(props: any) {
-  const handlePress = () => {
-    Linking.openURL('https://reactnative.dev/');
-  };
-
-  return (
-    <TouchableOpacity onPress={handlePress}>
-      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
-    </TouchableOpacity>
-  );
-}
-
-const styles = {
-  link: {},
-};
+import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+
+export default function UIRadio(props: any) {
+  const handlePress = () => {
+    Linking.openURL('https://reactnative.dev/');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/UISwitch.tsx

@@ -1,27 +1,27 @@
-import { useState } from 'react';
-import { ChildType, Utils } from 'react-crud-utils';
-import { Switch } from 'react-native';
-
-export default function UISwitch(props: ChildType) {
-  const scope = props.scope;
-  const initial = Utils.nvl(scope.getValue(), false) as boolean;
-  const [value, setValue] = useState(initial);
-
-  let onChange = v => {
-    scope.changeValue(v);
-
-    setValue(v);
-  };
-
-  return (
-    <Switch
-      value={value}
-      style={scope.getStyle('element')}
-      onValueChange={onChange} // Alterna o estado
-    />
-  );
-}
-
-const styles = {
-  link: {},
-};
+import { useState } from 'react';
+import { ChildType, Utils } from 'react-crud-utils';
+import { Switch } from 'react-native';
+
+export default function UISwitch(props: ChildType) {
+  const scope = props.scope;
+  const initial = Utils.nvl(scope.getValue(), false) as boolean;
+  const [value, setValue] = useState(initial);
+
+  let onChange = v => {
+    scope.changeValue(v);
+
+    setValue(v);
+  };
+
+  return (
+    <Switch
+      value={value}
+      style={scope.getStyle('element')}
+      onValueChange={onChange} // Alterna o estado
+    />
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/hooks/useIsVisible.ts

@@ -1,39 +1,39 @@
-import { useEffect, useState } from 'react';
-import { Scope } from 'react-crud-utils';
-import { Dimensions, Platform } from 'react-native';
-
-export function useIsVisible(ref: any, scope: Scope) {
-  const [isVisible, setIsVisible] = useState(scope.visible === true);
-
-  useEffect(() => {
-    const checkVisibility = () => {
-      if (!ref.current || isVisible || !scope.original?.useIsInView) return;
-
-      if (Platform.OS === 'web') {
-        const rect = ref.current.getBoundingClientRect?.();
-
-        if (rect && typeof window !== 'undefined') {
-          const windowHeight = window.innerHeight;
-          const visible = rect.top < windowHeight && rect.bottom > 0;
-
-          if (visible) scope.visible = visible;
-
-          setIsVisible(visible);
-        }
-      } else {
-        ref.current.measureInWindow?.((x, y, width, height) => {
-          const windowHeight = Dimensions.get('window').height;
-          const visible = y < windowHeight && y + height > 0;
-
-          if (visible) scope.visible = visible;
-          setIsVisible(visible);
-        });
-      }
-    };
-
-    const interval = setInterval(checkVisibility, 300); // roda a cada 300ms
-    return () => clearInterval(interval);
-  }, [ref]);
-
-  return isVisible;
-}
+import { useEffect, useState } from 'react';
+import { Scope } from 'react-crud-utils';
+import { Dimensions, Platform } from 'react-native';
+
+export function useIsVisible(ref: any, scope: Scope) {
+  const [isVisible, setIsVisible] = useState(scope.visible === true);
+
+  useEffect(() => {
+    const checkVisibility = () => {
+      if (!ref.current || isVisible || !scope.original?.useIsInView) return;
+
+      if (Platform.OS === 'web') {
+        const rect = ref.current.getBoundingClientRect?.();
+
+        if (rect && typeof window !== 'undefined') {
+          const windowHeight = window.innerHeight;
+          const visible = rect.top < windowHeight && rect.bottom > 0;
+
+          if (visible) scope.visible = visible;
+
+          setIsVisible(visible);
+        }
+      } else {
+        ref.current.measureInWindow?.((x, y, width, height) => {
+          const windowHeight = Dimensions.get('window').height;
+          const visible = y < windowHeight && y + height > 0;
+
+          if (visible) scope.visible = visible;
+          setIsVisible(visible);
+        });
+      }
+    };
+
+    const interval = setInterval(checkVisibility, 300); // roda a cada 300ms
+    return () => clearInterval(interval);
+  }, [ref]);
+
+  return isVisible;
+}