react-crud-mobile 1.3.184 → 1.3.186

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-crud-mobile",
-  "version": "1.3.184",
+  "version": "1.3.186",
   "license": "MIT",
   "description": "Uma biblioteca de componentes para React Native",
   "main": "dist/index.js",

package/src/elements/UIElement.tsx

@@ -57,7 +57,7 @@ export default function UIElement(props: ElementType) {
   const theme = Utils.nvl(props.theme, ctx?.theme);
 
   let crud: Crud = Utils.nvl(props.crud, ctx?.crud);
-  let [scope] = useState(ScopeUtils.create({ crud, ...props, theme }));
+  let scope = ScopeUtils.create({ crud, ...props, theme });
   let [index, setIndex] = useState(0);
   let [error, setError]: string | any = useState(null);
 

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/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/UIOrder.tsx

@@ -8,6 +8,7 @@ import DraggableFlatList, {
 } from 'react-native-draggable-flatlist';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import UIHeader from './UIHeader';
+import UIChildren from '../UIChildren';
 
 export default function UIOrder(props: ChildType) {
   const scope = props.scope;
@@ -86,6 +87,24 @@ export default function UIOrder(props: ChildType) {
     } else {
       css = { ...css, ...row.getStyle('rowUnSelected', {}) };
     }
+    const Child = () => {
+      if (Utils.isEmpty(props.children)) {
+        return (
+          <>
+            <MaterialCommunityIcons name="drag" size={24} color="black" />
+            <Text style={styles.text}>{scope.getItemLabel(item)}</Text>
+          </>
+        );
+      }
+
+      return (
+        <>
+          <UIChildren transient scope={row} crud={row.crud}>
+            {props.children}
+          </UIChildren>
+        </>
+      );
+    };
     return (
       <ScaleDecorator>
         <TouchableOpacity
@@ -97,8 +116,7 @@ export default function UIOrder(props: ChildType) {
           delayLongPress={100}
           onLongPress={drag} // Initiate drag on long press
         >
-          <MaterialCommunityIcons name="drag" size={24} color="black" />
-          <Text style={styles.text}>{scope.getItemLabel(item)}</Text>
+          <Child />
         </TouchableOpacity>
       </ScaleDecorator>
     );

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/UISlider.tsx

@@ -1,61 +1,61 @@
-import { useState } from 'react';
-import { ChildType, ComponentUtils, Utils } from 'react-crud-utils';
-import { Switch } from 'react-native';
-import Slider from '@react-native-community/slider';
-
-export default function UISlider(props: ChildType) {
-  const scope = props.scope;
-  const initial = Utils.nvl(scope.getValue(), 0);
-  const [value, setValue] = useState(initial);
-
-  //redeploy 0
-
-  let onChange = v => {
-    v = Utils.nvl(v, 0);
-
-    console.log(v);
-
-    scope.changeValue(v);
-
-    setValue(v);
-  };
-
-  let step = scope.attr('step', 1);
-  let min = scope.attr('min', 0);
-  let max = scope.attr('min', 100);
-
-  let onSlideScroll = (scrollEnabled: boolean) => {
-    let viewScope = ComponentUtils.getViewScope();
-
-    if (scope.original.debug) {
-      console.log(viewScope);
-    }
-
-    if (viewScope) {
-      let scrollRef = viewScope.get('scrollRef');
-
-      if (scrollRef) scrollRef.current?.setNativeProps?.({ scrollEnabled });
-    }
-  };
-  return (
-    <>
-      <Slider
-        minimumValue={min}
-        maximumValue={max}
-        step={step}
-        minimumTrackTintColor="#1EB1FC"
-        maximumTrackTintColor="#d3d3d3"
-        thumbTintColor="#1EB1FC"
-        value={value}
-        onSlidingStart={() => onSlideScroll(false)}
-        onSlidingComplete={() => onSlideScroll(true)}
-        style={{ width: '100%', height: 40, ...scope.getStyle('element') }}
-        onValueChange={onChange} // Alterna o estado
-      />
-    </>
-  );
-}
-
-const styles = {
-  link: {},
-};
+import { useState } from 'react';
+import { ChildType, ComponentUtils, Utils } from 'react-crud-utils';
+import { Switch } from 'react-native';
+import Slider from '@react-native-community/slider';
+
+export default function UISlider(props: ChildType) {
+  const scope = props.scope;
+  const initial = Utils.nvl(scope.getValue(), 0);
+  const [value, setValue] = useState(initial);
+
+  //redeploy 0
+
+  let onChange = v => {
+    v = Utils.nvl(v, 0);
+
+    console.log(v);
+
+    scope.changeValue(v);
+
+    setValue(v);
+  };
+
+  let step = scope.attr('step', 1);
+  let min = scope.attr('min', 0);
+  let max = scope.attr('min', 100);
+
+  let onSlideScroll = (scrollEnabled: boolean) => {
+    let viewScope = ComponentUtils.getViewScope();
+
+    if (scope.original.debug) {
+      console.log(viewScope);
+    }
+
+    if (viewScope) {
+      let scrollRef = viewScope.get('scrollRef');
+
+      if (scrollRef) scrollRef.current?.setNativeProps?.({ scrollEnabled });
+    }
+  };
+  return (
+    <>
+      <Slider
+        minimumValue={min}
+        maximumValue={max}
+        step={step}
+        minimumTrackTintColor="#1EB1FC"
+        maximumTrackTintColor="#d3d3d3"
+        thumbTintColor="#1EB1FC"
+        value={value}
+        onSlidingStart={() => onSlideScroll(false)}
+        onSlidingComplete={() => onSlideScroll(true)}
+        style={{ width: '100%', height: 40, ...scope.getStyle('element') }}
+        onValueChange={onChange} // Alterna o estado
+      />
+    </>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/UIStatusBar.tsx

@@ -1,5 +1,5 @@
-import { StatusBar } from 'expo-status-bar';
-
-export default function UIStatusBar() {
-  return <StatusBar style="dark" backgroundColor="#f5f5f5" />;
-}
+import { StatusBar } from 'expo-status-bar';
+
+export default function UIStatusBar() {
+  return <StatusBar style="dark" backgroundColor="#f5f5f5" />;
+}

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;
+}

package/src/utils/MobileUtils.ts

@@ -1,12 +1,12 @@
-//import { ThemeUtils, Utils } from 'react-crud-utils';
-//import { StatusBar } from 'react-native';
-
-export default class MobileUtils {
-  static syncTheme() {
-    // let current = ThemeUtils.getCurrentTheme();
-    //let dec: any = { light: 'light-content', dark: 'dark-content' };
-    //let name = Utils.nvl(dec[current?.theme], dec.light);
-    //StatusBar.setBarStyle?.(name);
-    //StatusBar.setBackgroundColor?.(current?.colors?.theme);
-  }
-}
+//import { ThemeUtils, Utils } from 'react-crud-utils';
+//import { StatusBar } from 'react-native';
+
+export default class MobileUtils {
+  static syncTheme() {
+    // let current = ThemeUtils.getCurrentTheme();
+    //let dec: any = { light: 'light-content', dark: 'dark-content' };
+    //let name = Utils.nvl(dec[current?.theme], dec.light);
+    //StatusBar.setBarStyle?.(name);
+    //StatusBar.setBackgroundColor?.(current?.colors?.theme);
+  }
+}