react-crud-mobile 1.3.194 → 1.3.198

package/src/elements/core/UIInclude.tsx

@@ -1,40 +1,40 @@
-import UIChildren from '../UIChildren';
-import { ComponentUtils, DefineType, Utils } from 'react-crud-utils';
-
-export default function UIInclude(props: DefineType) {
-  if (props.rendered === false) {
-    return <></>;
-  }
-
-  let includes = ComponentUtils.getDefine(props, props.name, props.position);
-
-  if (Utils.isEmpty(includes)) {
-    includes = props.default;
-  }
-
-  if (!Utils.isEmpty(includes)) {
-    let Aux = (tagProp: any) => {
-      let Tag: any = props.tag;
-
-      if (!Utils.isEmpty(Tag)) {
-        return <Tag {...tagProp}>{tagProp.children}</Tag>;
-      }
-      return <>{tagProp.children}</>;
-    };
-
-    return (
-      <Aux {...props.tagProps}>
-        <UIChildren
-          transient
-          {...props}
-          scope={props.scope}
-          crud={props.crud}
-          part={props.name}
-        >
-          {includes}
-        </UIChildren>
-      </Aux>
-    );
-  }
-  return <>{includes}</>;
-}
+import UIChildren from '../UIChildren';
+import { ComponentUtils, DefineType, Utils } from 'react-crud-utils';
+
+export default function UIInclude(props: DefineType) {
+  if (props.rendered === false) {
+    return <></>;
+  }
+
+  let includes = ComponentUtils.getDefine(props, props.name, props.position);
+
+  if (Utils.isEmpty(includes)) {
+    includes = props.default;
+  }
+
+  if (!Utils.isEmpty(includes)) {
+    let Aux = (tagProp: any) => {
+      let Tag: any = props.tag;
+
+      if (!Utils.isEmpty(Tag)) {
+        return <Tag {...tagProp}>{tagProp.children}</Tag>;
+      }
+      return <>{tagProp.children}</>;
+    };
+
+    return (
+      <Aux {...props.tagProps}>
+        <UIChildren
+          transient
+          {...props}
+          scope={props.scope}
+          crud={props.crud}
+          part={props.name}
+        >
+          {includes}
+        </UIChildren>
+      </Aux>
+    );
+  }
+  return <>{includes}</>;
+}

package/src/elements/core/UIInput.tsx

@@ -1,96 +1,102 @@
-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
-  },
-});
+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 <></>;
+  };
+
+  let type = scope.getPart('type', 'none');
+  let decode = { textarea: { multiline: true, textAlignVertical: 'top' } };
+  let defs = Utils.nvl(decode[type], {});
+
+  return (
+    <>
+      <View style={style('base')}>
+        {scope.getPart('left')}
+        <TextInput
+          style={style('input')}
+          onChangeText={onChange}
+          value={value}
+          placeholder={placeholder}
+          {...defs}
+        />
+        <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/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/UIList.tsx

@@ -1,168 +1,169 @@
-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 !== false && !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 = Utils.getValue(filterBy, 'none', o).toLowerCase();
-
-            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',
-  },
-});
+import React, { useState } from 'react';
+import { ChildType, ComponentUtils, Utils } from 'react-crud-utils';
+import { StyleSheet, Text, 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 !== false && !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 = Utils.getValue(filterBy, 'none', o).toLowerCase();
+
+            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: 15,
+              padding: 10,
+              textAlign: 'center',
+              width: '100%',
+              justifyContent: 'center',
+              alignItems: 'center',
+            })}
+          >
+            {empty}
+          </Text>
+        );
+      }
+
+      return <>{empty}</>;
+    };
+
+    return (
+      <View 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',
+  },
+});