react-crud-mobile 1.0.340 → 1.0.341

package/dist/elements/core/UIModal.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ChildType } from 'react-crud-utils';
+export default function UIModal(props: ChildType): import("react").JSX.Element;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.340",
+  "version": "1.0.341",
   "license": "MIT",
   "description": "Uma biblioteca de componentes para React Native",
   "main": "dist/index.js",
@@ -50,7 +50,7 @@
     "@types/react-native": "^0.72.0",
     "babel-plugin-module-resolver": "^5.0.0",
     "react": "^18.3.1",
-    "react-crud-utils": "^0.1.92",
+    "react-crud-utils": "^0.1.93",
     "react-dom": "^18.3.1",
     "react-native": "0.76.9",
     "react-native-screens": "^4.10.0",

package/src/elements/core/UIModal.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { ChildType, MethodType, useTheme, Utils } from 'react-crud-utils';
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  View,
+  StatusBar,
+  SafeAreaView,
+} from 'react-native';
+import UIChildren from '../UIChildren';
+
+export default function UIModal(props: ChildType) {
+  const [modalVisible, setModalVisible] = useState(false);
+  const scope = props.scope;
+  const label = scope.getLabel();
+  const theme = useTheme();
+
+  const handlePress = () => {
+    setModalVisible(!modalVisible);
+  };
+
+  const onClick = ({ crud, value }: MethodType) => {
+    scope.changeValue(value);
+    handlePress();
+  };
+
+  const style = (part: string, extra?: any) => {
+    return { ...styles[part], ...scope.getStyle(part), ...extra };
+  };
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={() => setModalVisible(false)}
+    >
+      <StatusBar
+        barStyle="dark-content"
+        backgroundColor={theme.colors.primary}
+      />
+      <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>
+        <View style={style('modalContent')}>
+          <UIChildren scope={scope}>{props.children}</UIChildren>
+        </View>
+      </SafeAreaView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalSafe: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+    paddingTop: StatusBar.currentHeight || 0, // Considera a altura da barra de status no Android
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 15,
+    backgroundColor: '#6200ea',
+  },
+  modalCloseButton: {
+    padding: 10,
+  },
+  modalCloseText: {
+    fontSize: 18,
+    color: 'white',
+  },
+  modalTitle: {
+    fontSize: 18,
+    color: 'white',
+    fontWeight: 'bold',
+    marginLeft: 10,
+  },
+  modalContent: {
+    flex: 1,
+    width: '100%',
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    padding: 20,
+  },
+});