react-crud-mobile 1.0.476 → 1.0.478

package/src/elements/core/UIList.tsx

@@ -1,162 +1,162 @@
-import React, { useState } from 'react';
-import { ChildType, 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(original.cols, 1);
-  const rowWidth = Math.floor(100 / cols) + '%';
-  const items = Utils.nvl(scope.getItems(), []);
-  const styles = { repeat: stylesRepeat, list: stylesList }?.[original.type];
-
-  const onClick = (item: any) => {
-    scope.call('click', { value: item, item, edit: true });
-  };
-
-  const getStyle = (key: string, extra?: any) => {
-    return scope.getStyle(key, { ...extra, ...styles[key] });
-  };
-
-  const getRowStyle = (extra?: any) => {
-    let row = getStyle('row', {});
-
-    if (cols > 0) {
-      row.width = rowWidth;
-    }
-
-    return row;
-  };
-
-  const getContainerStyle = (extra?: any) => {
-    let row = getStyle('container', {});
-
-    if (cols > 1) {
-      row = { ...row, flexDirection: 'row', flexWrap: 'wrap' };
-    }
-
-    return row;
-  };
-
-  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 (
-    <>
-      {original.search !== false && (
-        <UI.Text
-          placeholder="Pesquisar..."
-          field="query"
-          crud={crud}
-          right={<Ionicons name="search" size={20} color="#888" />}
-        />
-      )}
-
-      <View style={getContainerStyle()}>
-        <Empty />
-        {items.map((item: any, i: number) => (
-          <TouchableHighlight
-            key={`k-${i}`}
-            style={getRowStyle()}
-            underlayColor={'transparent'}
-            onPress={e => {
-              onClick(item);
-            }}
-          >
-            <View style={getStyle('rowInner')}>
-              <UIListRow scope={scope} item={item} index={i}>
-                {props.children}
-              </UIListRow>
-            </View>
-          </TouchableHighlight>
-        ))}
-      </View>
-    </>
-  );
-}
-
-const stylesList = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'stretch',
-  },
-  row: {
-    padding: 5,
-    width: '100%',
-  },
-  rowInner: {
-    flexGrow: 1, // ✅ cresce conforme o conteúdo
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5f5f5',
-    borderRadius: 8,
-    padding: 10,
-    width: '100%',
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});
-
-const stylesRepeat = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 10,
-    alignItems: 'stretch',
-  },
-  row: {
-    padding: 0,
-    width: '100%',
-  },
-  rowInner: {
-    flexGrow: 1, // ✅ cresce conforme o conteúdo
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 0,
-    width: '100%',
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});
+import React, { useState } from 'react';
+import { ChildType, 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(original.cols, 1);
+  const rowWidth = Math.floor(100 / cols) + '%';
+  const items = Utils.nvl(scope.getItems(), []);
+  const styles = { repeat: stylesRepeat, list: stylesList }?.[original.type];
+
+  const onClick = (item: any) => {
+    scope.call('click', { value: item, item, edit: true });
+  };
+
+  const getStyle = (key: string, extra?: any) => {
+    return scope.getStyle(key, { ...extra, ...styles[key] });
+  };
+
+  const getRowStyle = (extra?: any) => {
+    let row = getStyle('row', {});
+
+    if (cols > 0) {
+      row.width = rowWidth;
+    }
+
+    return row;
+  };
+
+  const getContainerStyle = (extra?: any) => {
+    let row = getStyle('container', {});
+
+    if (cols > 1) {
+      row = { ...row, flexDirection: 'row', flexWrap: 'wrap' };
+    }
+
+    return row;
+  };
+
+  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 (
+    <>
+      {original.search !== false && (
+        <UI.Text
+          placeholder="Pesquisar..."
+          field="query"
+          crud={crud}
+          right={<Ionicons name="search" size={20} color="#888" />}
+        />
+      )}
+
+      <View style={getContainerStyle()}>
+        <Empty />
+        {items.map((item: any, i: number) => (
+          <TouchableHighlight
+            key={`k-${i}`}
+            style={getRowStyle()}
+            underlayColor={'transparent'}
+            onPress={e => {
+              onClick(item);
+            }}
+          >
+            <View style={getStyle('rowInner')}>
+              <UIListRow scope={scope} item={item} index={i}>
+                {props.children}
+              </UIListRow>
+            </View>
+          </TouchableHighlight>
+        ))}
+      </View>
+    </>
+  );
+}
+
+const stylesList = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'stretch',
+  },
+  row: {
+    padding: 5,
+    width: '100%',
+  },
+  rowInner: {
+    flexGrow: 1, // ✅ cresce conforme o conteúdo
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+    borderRadius: 8,
+    padding: 10,
+    width: '100%',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+const stylesRepeat = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
+    alignItems: 'stretch',
+  },
+  row: {
+    padding: 0,
+    width: '100%',
+  },
+  rowInner: {
+    flexGrow: 1, // ✅ cresce conforme o conteúdo
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 0,
+    width: '100%',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});

package/src/elements/core/UIListRow.tsx

@@ -1,32 +1,32 @@
-import React, { useState } from 'react';
-import { ChildType, ScopeUtils, Utils } from 'react-crud-utils';
-import UIChildren from '../UIChildren';
-
-interface UIListRowType extends ChildType {
-  item: any;
-  index: number;
-}
-
-export default function UIListRow(props: UIListRowType) {
-  const parent = props.scope;
-  const item = props.item;
-  const index = props.index;
-  const name = `${parent.key('row', index)}`;
-  const row = {
-    parent,
-    name,
-    crud: parent.crud,
-    index,
-    type: 'row',
-    data: item,
-  };
-  let [scope] = useState(ScopeUtils.create(row));
-
-  return (
-    <>
-      <UIChildren scope={scope} crud={scope.crud}>
-        {props.children}
-      </UIChildren>
-    </>
-  );
-}
+import React, { useState } from 'react';
+import { ChildType, ScopeUtils, Utils } from 'react-crud-utils';
+import UIChildren from '../UIChildren';
+
+interface UIListRowType extends ChildType {
+  item: any;
+  index: number;
+}
+
+export default function UIListRow(props: UIListRowType) {
+  const parent = props.scope;
+  const item = props.item;
+  const index = props.index;
+  const name = `${parent.key('row', index)}`;
+  const row = {
+    parent,
+    name,
+    crud: parent.crud,
+    index,
+    type: 'row',
+    data: item,
+  };
+  let [scope] = useState(ScopeUtils.create(row));
+
+  return (
+    <>
+      <UIChildren scope={scope} crud={scope.crud}>
+        {props.children}
+      </UIChildren>
+    </>
+  );
+}

package/src/elements/core/UIModal.tsx

@@ -1,134 +1,134 @@
-import { useEffect, useState } from 'react';
-import {
-  ChildType,
-  CrudUtils,
-  MethodType,
-  useTheme,
-  Utils,
-} from 'react-crud-utils';
-import {
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  Modal,
-  View,
-  StatusBar,
-  SafeAreaView,
-  ScrollView,
-} from 'react-native';
-import UIChildren from '../UIChildren';
-
-export default function UIModal(props: ChildType) {
-  let [modalVisible, setModalVisible] = useState(false);
-
-  const scope = props.scope;
-  const label = scope.getLabel();
-  const theme = useTheme();
-
-  const style = (part: string, extra?: any) => {
-    let st = { ...styles[part], ...extra };
-
-    return { ...scope.getStyle(part, st) };
-  };
-
-  const toggle = vis => {
-    modalVisible = vis;
-    setModalVisible(modalVisible);
-  };
-
-  scope.show = (args?: MethodType) => {
-    let { crud } = args;
-    let name = scope.getName('modal');
-    let data = Utils.nvl(args.item, {});
-    let edit = args.edit === true;
-    let d = CrudUtils.create('dialog', {
-      parent: crud,
-      name,
-      data,
-      edit,
-      scope,
-    });
-
-    scope.currentDialog = d;
-
-    toggle(true);
-  };
-
-  scope.hide = (args?: MethodType) => {
-    scope.currentDialog = null;
-
-    toggle(false);
-  };
-
-  useEffect(() => {
-    StatusBar.setBarStyle('light-content');
-    StatusBar.setBackgroundColor?.(theme.colors.primary);
-  }, [modalVisible]);
-
-  if (!scope.currentDialog) {
-    return <></>;
-  }
-
-  return (
-    <Modal
-      animationType="slide"
-      transparent={true}
-      visible={modalVisible}
-      onRequestClose={() => setModalVisible(false)}
-    >
-      <SafeAreaView style={style('modalSafe')}>
-        <View style={style('modalHeader')}>
-          <TouchableOpacity
-            onPress={() => setModalVisible(false)}
-            style={style('modalCloseButton')}
-          >
-            <Text style={style('modalCloseText')}>X</Text>
-          </TouchableOpacity>
-          <Text style={style('modalTitle')}>{label}</Text>
-        </View>
-        <ScrollView
-          contentContainerStyle={{ flexGrow: 1 }}
-          style={style('modalContent')}
-        >
-          <View style={{ flex: 1 }}>
-            <UIChildren scope={scope} crud={scope.currentDialog}>
-              {props.children}
-            </UIChildren>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </Modal>
-  );
-}
-
-const styles = StyleSheet.create({
-  modalSafe: {
-    flex: 1,
-    backgroundColor: 'primary',
-    width: '100%',
-  },
-  modalHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 15,
-    backgroundColor: 'primary',
-  },
-  modalCloseButton: {
-    padding: 10,
-  },
-  modalCloseText: {
-    fontSize: 18,
-    color: 'white',
-  },
-  modalTitle: {
-    fontSize: 18,
-    color: 'white',
-    fontWeight: 'bold',
-    marginLeft: 10,
-  },
-  modalContent: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-    padding: 20,
-  },
-});
+import { useEffect, useState } from 'react';
+import {
+  ChildType,
+  CrudUtils,
+  MethodType,
+  useTheme,
+  Utils,
+} from 'react-crud-utils';
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  View,
+  StatusBar,
+  SafeAreaView,
+  ScrollView,
+} from 'react-native';
+import UIChildren from '../UIChildren';
+
+export default function UIModal(props: ChildType) {
+  let [modalVisible, setModalVisible] = useState(false);
+
+  const scope = props.scope;
+  const label = scope.getLabel();
+  const theme = useTheme();
+
+  const style = (part: string, extra?: any) => {
+    let st = { ...styles[part], ...extra };
+
+    return { ...scope.getStyle(part, st) };
+  };
+
+  const toggle = vis => {
+    modalVisible = vis;
+    setModalVisible(modalVisible);
+  };
+
+  scope.show = (args?: MethodType) => {
+    let { crud } = args;
+    let name = scope.getName('modal');
+    let data = Utils.nvl(args.item, {});
+    let edit = args.edit === true;
+    let d = CrudUtils.create('dialog', {
+      parent: crud,
+      name,
+      data,
+      edit,
+      scope,
+    });
+
+    scope.currentDialog = d;
+
+    toggle(true);
+  };
+
+  scope.hide = (args?: MethodType) => {
+    scope.currentDialog = null;
+
+    toggle(false);
+  };
+
+  useEffect(() => {
+    StatusBar.setBarStyle('light-content');
+    StatusBar.setBackgroundColor?.(theme.colors.primary);
+  }, [modalVisible]);
+
+  if (!scope.currentDialog) {
+    return <></>;
+  }
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={() => setModalVisible(false)}
+    >
+      <SafeAreaView style={style('modalSafe')}>
+        <View style={style('modalHeader')}>
+          <TouchableOpacity
+            onPress={() => setModalVisible(false)}
+            style={style('modalCloseButton')}
+          >
+            <Text style={style('modalCloseText')}>X</Text>
+          </TouchableOpacity>
+          <Text style={style('modalTitle')}>{label}</Text>
+        </View>
+        <ScrollView
+          contentContainerStyle={{ flexGrow: 1 }}
+          style={style('modalContent')}
+        >
+          <View style={{ flex: 1 }}>
+            <UIChildren scope={scope} crud={scope.currentDialog}>
+              {props.children}
+            </UIChildren>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalSafe: {
+    flex: 1,
+    backgroundColor: 'primary',
+    width: '100%',
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 15,
+    backgroundColor: 'primary',
+  },
+  modalCloseButton: {
+    padding: 10,
+  },
+  modalCloseText: {
+    fontSize: 18,
+    color: 'white',
+  },
+  modalTitle: {
+    fontSize: 18,
+    color: 'white',
+    fontWeight: 'bold',
+    marginLeft: 10,
+  },
+  modalContent: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+    padding: 20,
+  },
+});