react-crud-mobile 1.0.147 → 1.0.149

package/src/elements/UITag.tsx

@@ -1,13 +1,13 @@
-import React, { useState } from "react";
-import { Utils } from "react-crud-utils";
-
-interface UITagType {
-  name: string;
-  [otherOptions: string]: unknown;
-}
-
-export default function UITag(props: UITagType) {
-  let Aux = Utils.nvl(props.name, "span");
-
-  return <Aux {...props} />;
-}
+import React, { useState } from "react";
+import { Utils } from "react-crud-utils";
+
+interface UITagType {
+  name: string;
+  [otherOptions: string]: unknown;
+}
+
+export default function UITag(props: UITagType) {
+  let Aux = Utils.nvl(props.name, "span");
+
+  return <Aux {...props} />;
+}

package/src/elements/charts/ElChart.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import { ChildType, Scope, Utils } from "react-crud-utils";
-
-export default function ElChart(props: ChildType) {
-  let scope: Scope = props.scope;
-  let items: any = scope.getItems();
-  let columns = Utils.asList(scope.original.columns);
-
-  return <div className="ui-chart-data"></div>;
-}
+import React from "react";
+import { ChildType, Scope, Utils } from "react-crud-utils";
+
+export default function ElChart(props: ChildType) {
+  let scope: Scope = props.scope;
+  let items: any = scope.getItems();
+  let columns = Utils.asList(scope.original.columns);
+
+  return <div className="ui-chart-data"></div>;
+}

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,56 +1,55 @@
-import { useState } from 'react';
-import { ChildType, Utils } from 'react-crud-utils';
-import { StyleSheet, TextInput, View } from 'react-native';
-
-export default function UIInput(props: ChildType) {
-  let scope = props.scope;
-  let initial = Utils.nvl(scope.getValue(), '');
-
-  let label = scope.getLabel();
-  let placeholder = scope.getPart('placeholder', null, label);
-  let el = scope.original;
-
-  const [value, setValue] = useState(initial);
-
-  let onChange = v => {
-    scope.changeValue(v);
-
-    setValue(v);
-  };
-
-  return (
-    <View style={styles.base}>
-      {scope.getPart('left')}
-      <TextInput
-        style={styles.input}
-        onChangeText={onChange}
-        value={value}
-        placeholder={placeholder}
-      />
-      {scope.getPart('right')}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  base: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: '#a9a9a9',
-    borderRadius: 20,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    padding: 10,
-    paddingLeft: 20,
-    paddingRight: 20,
-  },
-  icon: {
-    marginRight: 10, // Espaço entre ícone e input
-  },
-  input: {
-    marginHorizontal: 10,
-    marginVertical: 5,
-    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';
+
+export default function UIInput(props: ChildType) {
+  let scope = props.scope;
+  let initial = Utils.nvl(scope.getValue(), '');
+
+  let label = scope.getLabel();
+  let placeholder = scope.getPart('placeholder', null, label);
+  let el = scope.original;
+
+  const [value, setValue] = useState(initial);
+
+  let onChange = v => {
+    scope.changeValue(v);
+
+    setValue(v);
+  };
+
+  return (
+    <View style={styles.base}>
+      {scope.getPart('left')}
+      <TextInput
+        style={styles.input}
+        onChangeText={onChange}
+        value={value}
+        placeholder={placeholder}
+      />
+      {scope.getPart('right')}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#a9a9a9',
+    borderRadius: 20,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    padding: 10,
+    paddingLeft: 5,
+    paddingRight: 10,
+  },
+  icon: {
+    marginRight: 10, // Espaço entre ícone e input
+  },
+  input: {
+    margin: 10,
+    flex: 1, // Para o input ocupar o espaço restante
+  },
+});

package/src/elements/core/UIList.tsx

@@ -1,51 +1,51 @@
-import React from 'react';
-import { ChildType, Utils } from 'react-crud-utils';
-import { StyleSheet, Text, View } from 'react-native';
-import UIListRow from './UIListRow';
-import UI from '../UI';
-import Icon from 'react-native-vector-icons/FontAwesome';
-
-export default function UIList(props: ChildType) {
-  const scope = props.scope;
-  const crud = scope.crud;
-  const items = Utils.nvl(scope.getItems(), []);
-
-  return (
-    <>
-      <UI.Text
-        placeholder="Pesquisar..."
-        field="query"
-        crud={crud}
-        right={<Icon name="eye" size={20} color="#888" />}
-      />
-
-      <View style={styles.container}>
-        {items.map((item: any, i: number) => (
-          <View key={`k-${i}`} style={styles.item}>
-            <UIListRow scope={scope} item={item} index={i}>
-              {props.children}
-            </UIListRow>
-          </View>
-        ))}
-      </View>
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-  },
-  item: {
-    padding: 15,
-    marginVertical: 8,
-    backgroundColor: '#f5f5f5',
-    borderRadius: 8,
-    width: '100%',
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});
+import React from 'react';
+import { ChildType, Utils } from 'react-crud-utils';
+import { StyleSheet, Text, View } from 'react-native';
+import UIListRow from './UIListRow';
+import UI from '../UI';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+export default function UIList(props: ChildType) {
+  const scope = props.scope;
+  const crud = scope.crud;
+  const items = Utils.nvl(scope.getItems(), []);
+
+  return (
+    <>
+      <UI.Text
+        placeholder="Pesquisar..."
+        field="query"
+        crud={crud}
+        right={<Icon name="eye" size={20} color="#888" />}
+      />
+
+      <View style={styles.container}>
+        {items.map((item: any, i: number) => (
+          <View key={`k-${i}`} style={styles.item}>
+            <UIListRow scope={scope} item={item} index={i}>
+              {props.children}
+            </UIListRow>
+          </View>
+        ))}
+      </View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+  },
+  item: {
+    padding: 15,
+    marginVertical: 8,
+    backgroundColor: '#f5f5f5',
+    borderRadius: 8,
+    width: '100%',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});

package/src/elements/core/UIListRow.tsx

@@ -1,29 +1,29 @@
-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 row = {
-    parent,
-    crud: parent.crud,
-    index: props.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 row = {
+    parent,
+    crud: parent.crud,
+    index: props.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/UISelect.tsx

@@ -1,17 +1,70 @@
-import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+import { useState } from 'react';
+import { ChildType, Utils } from 'react-crud-utils';
+import {
+  Text,
+  TouchableOpacity,
+  Linking,
+  StyleSheet,
+  Modal,
+  View,
+  Button,
+} from 'react-native';
+
+export default function UISelect(props: ChildType) {
+  const [modalVisible, setModalVisible] = useState(false);
+  const scope = props.scope;
+  const crud = scope.crud;
+  const items = Utils.nvl(scope.getOptions(), []);
 
-export default function UISelect(props: any) {
   const handlePress = () => {
-    Linking.openURL('https://reactnative.dev/');
+    setModalVisible(!modalVisible);
   };
 
   return (
-    <TouchableOpacity onPress={handlePress}>
-      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
-    </TouchableOpacity>
+    <>
+      <TouchableOpacity onPress={handlePress}>
+        <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+      </TouchableOpacity>
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={modalVisible}
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View style={styles.modalContainer}>
+          <View style={styles.modalContent}>
+            <Text>Olá! Este é um modal.</Text>
+            <Button title="Fechar" onPress={() => setModalVisible(false)} />
+          </View>
+          {items.map((item: any, i: number) => (
+            <View key={`k-${i}`} style={styles.item}>
+              {item.label}
+            </View>
+          ))}
+        </View>
+      </Modal>
+    </>
   );
 }
 
-const styles = {
+const styles = StyleSheet.create({
   link: {},
-};
+  item: {},
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    padding: 20,
+    borderRadius: 10,
+    alignItems: 'center',
+  },
+});

package/src/elements/index.ts

@@ -1 +1 @@
-export { default as UI } from "./UI";
+export { default as UI } from "./UI";