react-crud-mobile 1.3.20 → 1.3.22

package/dist/react-crud-mobile.esm.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useContext, useLayoutEffect, createContext } from 'react';
 import { Utils, ScopeUtils, CrudUtils, ViewUtils, ComponentUtils, HtmlUtils, ThemeUtils, useTheme } from 'react-crud-utils';
-import { View, StyleSheet, TouchableOpacity, Text, Linking, TouchableHighlight, Modal, SafeAreaView, StatusBar, Switch, TextInput, Platform, Dimensions, ScrollView, Alert, Image, KeyboardAvoidingView, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Text, Linking, TouchableHighlight, Modal, SafeAreaView, Switch, TextInput, Platform, Dimensions, ScrollView, Alert, Image, StatusBar, KeyboardAvoidingView, TouchableWithoutFeedback, Keyboard } from 'react-native';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { Ionicons as Ionicons$1, AntDesign, Entypo, EvilIcons, MaterialCommunityIcons } from '@expo/vector-icons';
@@ -496,7 +496,7 @@ var MobileUtils = /*#__PURE__*/function () {
 }();
 
 function UISelect(props) {
-  var _theme$colors;
+  var _theme$styles, _theme$colors;
   var _useState = useState(false),
     modalVisible = _useState[0],
     setModalVisible = _useState[1];
@@ -507,6 +507,7 @@ function UISelect(props) {
   var value = scope.getDisplayValue();
   var main = ViewUtils.getCrud('view');
   var theme = scope.getTheme();
+  var headerStyle = Utils.nvl((_theme$styles = theme.styles) == null || (_theme$styles = _theme$styles.defaults) == null ? void 0 : _theme$styles.header, {});
   var handlePress = function handlePress() {
     var _modalVisible = !modalVisible;
     main.data.selectIsOpen = _modalVisible;
@@ -550,17 +551,19 @@ function UISelect(props) {
         color: scope.getPart('iconColor', null, iconColor),
         style: style('iconStyle', {})
       })]
-    }), /*#__PURE__*/jsx(Modal, {
+    }), /*#__PURE__*/jsxs(Modal, {
       animationType: "slide",
       transparent: true,
       visible: isModalVisible(),
       onRequestClose: function onRequestClose() {
         return setModalVisible(false);
       },
-      children: /*#__PURE__*/jsxs(SafeAreaView, {
+      children: [/*#__PURE__*/jsx(SafeAreaView, {
+        style: style('modalTop')
+      }), /*#__PURE__*/jsxs(SafeAreaView, {
         style: style('modalSafe'),
         children: [/*#__PURE__*/jsxs(View, {
-          style: style('modalHeader'),
+          style: scope.getStyle('header', headerStyle),
           children: [/*#__PURE__*/jsx(TouchableOpacity, {
             onPress: function onPress() {
               return setModalVisible(false);
@@ -585,7 +588,7 @@ function UISelect(props) {
             })
           })
         })]
-      })
+      })]
     })]
   });
 }
@@ -605,16 +608,14 @@ var styles$3 = /*#__PURE__*/StyleSheet.create({
   selectLabel: {
     flex: 1
   },
+  modalTop: {
+    backgroundColor: 'primary',
+    width: '100%'
+  },
   modalSafe: {
     flex: 1,
-    backgroundColor: 'background',
-    paddingTop: StatusBar.currentHeight || 0
-  },
-  modalHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 15,
-    backgroundColor: 'theme'
+    width: '100%',
+    backgroundColor: 'background'
   },
   modalCloseButton: {
     padding: 10
@@ -625,17 +626,16 @@ var styles$3 = /*#__PURE__*/StyleSheet.create({
   },
   modalTitle: {
     fontSize: 18,
-    color: 'white',
     fontWeight: 'bold',
     marginLeft: 10
   },
   modalContent: {
     flex: 1,
-    width: '100%',
-    alignSelf: 'flex-start',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    padding: 20
+    backgroundColor: 'background',
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 15,
+    paddingRight: 15
   }
 });