react-crud-mobile 1.1.3 → 1.3.2

package/src/elements/core/SafeView.tsx

@@ -0,0 +1,69 @@
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  StatusBar,
+  StyleProp,
+  TouchableWithoutFeedback,
+  ViewStyle,
+} from 'react-native';
+import {
+  SafeAreaProvider,
+  SafeAreaView as SafeAreaContextView,
+} from 'react-native-safe-area-context';
+import { ThemeUtils, useTheme, Utils } from 'react-crud-utils';
+import { useEffect } from 'react';
+
+interface SafeViewType {
+  safeStyle?: StyleProp<ViewStyle> | any;
+  viewStyle?: StyleProp<ViewStyle> | any;
+  children?: any;
+}
+
+export default function SafeView(props: SafeViewType) {
+  let theme = ThemeUtils.getCurrentTheme();
+
+  if (Utils.isEmpty(theme)) {
+    theme = useTheme();
+  }
+
+  const dismissKeyboard = () => {
+    if (Platform.OS !== 'web') {
+      Keyboard.dismiss();
+    }
+  };
+
+  useEffect(() => {
+    //ajustes tema v1
+    StatusBar.setBarStyle(Utils.nvl(theme.theme, 'light-content'));
+    StatusBar.setBackgroundColor?.(theme.colors.theme);
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <StatusBar barStyle="light-content" />
+      <SafeAreaContextView
+        style={{
+          backgroundColor: theme.colors?.theme,
+          ...props.viewStyle,
+          flex: 1,
+        }}
+      >
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={{
+            flex: 1, // 🔹 Ocupa 100% da tela
+            justifyContent: 'center',
+          }}
+        >
+          <TouchableWithoutFeedback
+            onPress={dismissKeyboard}
+            accessible={false}
+          >
+            <>{props.children}</>
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
+      </SafeAreaContextView>
+    </SafeAreaProvider>
+  );
+}

package/src/elements/core/{Link.tsx → UIAutoComplete.tsx}

@@ -1,18 +1,17 @@
-import React from 'react';
-import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
-
-export default function Link(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/UIButton.tsx

@@ -0,0 +1,139 @@
+import { Ionicons } from '@expo/vector-icons';
+import { ChildType, Utils } from 'react-crud-utils';
+import { Text, TouchableHighlight, View } from 'react-native';
+
+const BUTTONS_SIZE: any = { small: { minWidth: 30, height: 30 } };
+
+export default function UIButton(props: ChildType) {
+  let scope = props.scope;
+  let element = scope.original;
+  let size = Utils.nvl(element.size, 'default');
+  let align = Utils.nvl(element.align, 'center');
+  let variant = Utils.nvl(element.variant, 'default');
+
+  let color = element.color;
+  let label = scope.getLabel();
+  let icon = element.icon;
+
+  //ajuste align v3
+  if (!color) color = 'primaryLight';
+
+  const styles: any = {
+    buttonLabel: {
+      color: '#ffffff',
+      fontWeight: '500',
+      fontSize: 16,
+    },
+    buttonInner: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 44,
+      minWidth: 44,
+    },
+    buttonIcon: {
+      color: '#fff',
+      fontSize: 18,
+    },
+    button: {
+      backgroundColor: color,
+      borderRadius: 24,
+      gap: 10,
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexDirection: 'row',
+    },
+  };
+
+  const onClick = (e: any) => {
+    scope.call('click', {});
+  };
+
+  const style = (part: string, extra?: any) => {
+    let css = { ...styles[part], ...extra };
+
+    if (variant === 'text' || variant === 'outlined') {
+      css.backgroundColor = 'transparent';
+      css.color = Utils.nvl(color, 'text');
+    }
+
+    if (size === 'small') {
+      css.fontSize = 12;
+      css.fontWeight = 500;
+    }
+
+    if (size === 'medium') {
+      css.fontSize = 14;
+      css.fontWeight = 500;
+    }
+
+    if (align === 'left') {
+      css.justifyContent = 'flex-start';
+    }
+
+    return scope.getStyle(part, css);
+  };
+
+  let extra: any = {};
+
+  if (icon) {
+    extra.button = { height: 40, padding: 0 };
+  } else {
+    extra.button = { height: 50 };
+  }
+
+  const buttonStyle = Utils.call(() => {
+    let def: any = { ...extra?.button };
+
+    if (variant === 'outlined') {
+      def.borderWidth = 1;
+      def.borderColor = Utils.nvl(color, 'text');
+    }
+
+    if (size) {
+      def = { ...def, ...BUTTONS_SIZE[size] };
+    }
+
+    let css = style('button', def);
+
+    if (!css.width) {
+      let h = css.height;
+
+      if (typeof h === 'number') {
+        css.minWidth = h;
+      }
+    }
+
+    return css;
+  });
+
+  const buttonLabel = style('buttonLabel');
+  const iconStyle = Utils.call(() => {
+    let css: any = style('buttonIcon', extra.icon);
+
+    css.fontSize = Utils.nvl(buttonLabel.fontSize, css.fontSize);
+
+    return css;
+  });
+
+  return (
+    <TouchableHighlight
+      underlayColor={'transparent'}
+      onPress={onClick}
+      style={buttonStyle}
+    >
+      <>
+        {icon && (
+          <>
+            <Ionicons
+              size={Utils.nvl(element.iconSize, 30)}
+              style={iconStyle}
+              name={icon}
+            />
+          </>
+        )}
+        {label && <Text style={buttonLabel}>{label}</Text>}
+      </>
+    </TouchableHighlight>
+  );
+}

package/src/elements/core/UIIcon.tsx

@@ -0,0 +1,25 @@
+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 <Aux name={name} style={scope.getStyle('icon')} />;
+}

package/src/elements/{grid/ElInclude.tsx → core/UIInclude.tsx}

@@ -1,7 +1,7 @@
-import UIChildren from "../UIChildren";
-import { ComponentUtils, DefineType, Utils } from "react-crud-utils";
+import UIChildren from '../UIChildren';
+import { ComponentUtils, DefineType, Utils } from 'react-crud-utils';
 
-export default function ElInclude(props: DefineType) {
+export default function UIInclude(props: DefineType) {
   if (props.rendered === false) {
     return <></>;
   }

package/src/elements/core/UIInput.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { ChildType, Utils } from 'react-crud-utils';
+import { StyleSheet, TextInput, View } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+export default function UIInput(props: ChildType) {
+  let scope = props.scope;
+  let initial = Utils.call(() => {
+    let val = Utils.nvl(scope.getValue(), '');
+
+    if (val && val?.push) {
+      return val.join(', ').trim();
+    }
+    return val;
+  });
+
+  let label = scope.getLabel();
+  let placeholder = scope.getPart('placeholder', null, label);
+  let el = scope.original;
+
+  const [value, setValue] = useState(initial);
+
+  let onChange = v => {
+    v = scope.changeValue(v);
+
+    setValue(v);
+  };
+
+  const style = (part: string, extra?: any) => {
+    return { ...scope.getStyle(part, styles[part]), ...extra };
+  };
+
+  const CustomIcon = () => {
+    let icon = el.icon;
+
+    if (icon) {
+      if (typeof icon === 'string') {
+        return (
+          <>
+            {el.icon && (
+              <Ionicons
+                name={el.icon}
+                size={scope.attr('iconSize', 20)}
+                color={scope.attr('iconColor', '#888')}
+              />
+            )}
+          </>
+        );
+      }
+      return <>{icon}</>;
+    }
+    return <></>;
+  };
+  return (
+    <>
+      <View style={style('base')}>
+        {scope.getPart('left')}
+        <TextInput
+          style={style('input')}
+          onChangeText={onChange}
+          value={value}
+          placeholder={placeholder}
+        />
+        <CustomIcon />
+      </View>
+      {scope.getPart('right')}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flex: 1,
+    width: '100%',
+    paddingBottom: 0,
+    paddingTop: 0,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'borderColor',
+    borderRadius: 5,
+    paddingHorizontal: 15,
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
+  },
+  icon: {
+    marginRight: 10, // Espaço entre ícone e input
+  },
+  input: {
+    marginHorizontal: 0,
+    marginVertical: 0,
+    height: 40,
+    flex: 1, // Para o input ocupar o espaço restante
+  },
+});

package/src/elements/core/{Icon.tsx → UILink.tsx}

@@ -1,18 +1,17 @@
-import React from 'react';
-import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
-
-export default function Icon(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/UIList.tsx

@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import { ChildType, ComponentUtils, ScopeUtils, Utils } from 'react-crud-utils';
+import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
+import UIListRow from './UIListRow';
+import UI from '../UI';
+import { Ionicons } from '@expo/vector-icons';
+
+export default function UIList(props: ChildType) {
+  const scope = props.scope;
+  const crud = scope.crud;
+  const original = scope.original;
+  const cols = Utils.nvl(scope.getPart('cols', undefined, 1));
+  const styles = { repeat: stylesRepeat, list: stylesList }?.[original.type];
+  const add = ComponentUtils.getDefine(props, 'add');
+  const hideAddWhenEmpty = original.hideAddWhenEmpty;
+
+  const getStyle = (key: string, extra?: any) => {
+    return scope.getStyle(key, { ...extra, ...styles[key] });
+  };
+
+  const getContainerStyle = (extra?: any) => {
+    let row = getStyle('container', {});
+
+    if (cols > 1) {
+      row = { ...row, flexDirection: 'row', flexWrap: 'wrap' };
+    }
+
+    return row;
+  };
+
+  const LocalData = () => {
+    let [index, setIndex] = useState(scope.updateIndex);
+
+    scope.update = () => {
+      scope.updateIndex = ++index;
+
+      setIndex(index);
+    };
+
+    let keyData = scope.key('data');
+
+    const items = Utils.call(() => {
+      let list = Utils.nvl(scope.getItems(), []);
+
+      if (original.search && !original.list?.url) {
+        let query = crud
+          .get('query', '')
+          .toLowerCase()
+          .trim() as string;
+
+        if (query.length > 1) {
+          let filters: any[] = [];
+          let filterBy = Utils.nvl(original.filterBy, 'label');
+
+          Utils.each(list, o => {
+            let label = o[filterBy];
+
+            if (label) {
+              if (label.includes(query)) {
+                filters.push(o);
+              }
+            }
+          });
+
+          return filters;
+        }
+      }
+      return list;
+    });
+
+    const isShowAdd = () => {
+      if (!Utils.isEmpty(items)) {
+        return true;
+      }
+      return hideAddWhenEmpty !== true;
+    };
+
+    let Empty = () => {
+      if (!Utils.isEmpty(items)) {
+        return <></>;
+      }
+
+      let empty = scope.attr('empty', 'Sem registro');
+
+      if (!empty) {
+        return <></>;
+      }
+
+      if (typeof empty === 'string') {
+        return (
+          <Text
+            style={scope.getStyle('empty', {
+              flex: 1,
+              fontWeight: 500,
+              fontSize: 20,
+              padding: 10,
+              textAlign: 'center',
+              justifyContent: 'center',
+              alignItems: 'center',
+            })}
+          >
+            {empty}
+          </Text>
+        );
+      }
+
+      return <>{empty}</>;
+    };
+
+    return (
+      <View key={keyData} style={getContainerStyle()}>
+        <Empty />
+        {items.map((item: any, i: number) => (
+          <UIListRow index={i} item={item} scope={scope}>
+            {props.children}
+          </UIListRow>
+        ))}
+        {isShowAdd() && <>{add}</>}
+      </View>
+    );
+  };
+
+  return (
+    <>
+      {original.search !== false && (
+        <UI.Text
+          placeholder="Pesquisar..."
+          field="query"
+          crud={crud}
+          style={{ marginBottom: 10 }}
+          change={{
+            action: () => {
+              scope.search();
+            },
+          }}
+          icon={<Ionicons name="search" size={20} color="#888" />}
+        />
+      )}
+      <LocalData />
+    </>
+  );
+}
+
+const stylesList = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 10,
+    width: '100%',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+const stylesRepeat = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 10,
+    width: '100%',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});

package/src/elements/core/UIListItem.tsx

@@ -0,0 +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',
+  },
+});