react-crud-mobile 1.3.46 → 1.3.47

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

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useRef, useContext, useLayoutEffect, createContext } from 'react';
+import React, { useState, useRef, useEffect, useContext, useLayoutEffect, createContext } from 'react';
 import { Utils, ScopeUtils, CrudUtils, ComponentUtils, ViewUtils, HtmlUtils, ThemeUtils, useTheme } from 'react-crud-utils';
-import { View, StyleSheet, TouchableOpacity, Text, Linking, TouchableHighlight, Switch, TextInput, Platform, Dimensions, Modal, SafeAreaView, ScrollView, Alert, Image, StatusBar, KeyboardAvoidingView, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Text, Linking, TouchableHighlight, Modal, SafeAreaView, ScrollView, Switch, TextInput, Platform, Dimensions, 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';
@@ -481,8 +481,25 @@ function UIButton(props) {
   });
 }
 
+//import { ThemeUtils, Utils } from 'react-crud-utils';
+//import { StatusBar } from 'react-native';
+var MobileUtils = /*#__PURE__*/function () {
+  function MobileUtils() {}
+  MobileUtils.syncTheme = function syncTheme() {
+    // let current = ThemeUtils.getCurrentTheme();
+    //let dec: any = { light: 'light-content', dark: 'dark-content' };
+    //let name = Utils.nvl(dec[current?.theme], dec.light);
+    //StatusBar.setBarStyle?.(name);
+    //StatusBar.setBackgroundColor?.(current?.colors?.theme);
+  };
+  return MobileUtils;
+}();
+
 function UISelect(props) {
-  var _theme$styles, _theme$colors, _scope$original, _scope$original2;
+  var _theme$styles, _theme$colors, _scope$original, _scope$original2, _scope$original3, _scope$original4;
+  var _useState = useState(false),
+    modalVisible = _useState[0],
+    setModalVisible = _useState[1];
   var scope = props.scope;
   var element = scope.original;
   var items = Utils.nvl(scope.getOptions(), []);
@@ -490,17 +507,15 @@ function UISelect(props) {
   var value = scope.getDisplayValue();
   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 dlgName = scope.getName('dialog');
   var handlePress = function handlePress() {
-    scope.call('click', {
-      click: {
-        action: 'dialog',
-        dialog: dlgName
-      }
-    });
+    setModalVisible(!modalVisible);
   };
+  var scrollRef = useRef(null);
   var iconColor = Utils.nvl((_theme$colors = theme.colors) == null ? void 0 : _theme$colors.text, '#100e0e');
   var modalColor = Utils.nvl(headerStyle.color, 'white');
+  var defaults = {
+    color: modalColor
+  };
   var onClick = function onClick(_ref) {
     var value = _ref.value;
     var val = value;
@@ -511,11 +526,19 @@ function UISelect(props) {
     } else {
       scope.changeValue(value);
     }
+    setModalVisible(false);
   };
   var style = function style(part, extra) {
     var all = _extends({}, styles$3[part], extra);
     return scope.getStyle(part, all);
   };
+  var isModalVisible = function isModalVisible() {
+    return modalVisible;
+  };
+  //v4
+  useEffect(function () {
+    MobileUtils.syncTheme();
+  }, [modalVisible]);
   return /*#__PURE__*/jsxs(View, {
     style: style('selectRoot'),
     children: [/*#__PURE__*/jsxs(TouchableOpacity, {
@@ -530,25 +553,101 @@ function UISelect(props) {
         color: scope.getPart('iconColor', null, iconColor),
         style: style('iconStyle', {})
       })]
-    }), /*#__PURE__*/jsx(UI.Dialog, {
-      name: dlgName,
-      label: "Selecione",
-      children: /*#__PURE__*/jsx(UI.List, _extends({
-        data: items,
-        name: scope.getName('list'),
-        layout: "card",
-        click: onClick,
-        rowStyle: _extends({
-          paddingLeft: 15,
-          paddinRight: 15
-        }, (_scope$original = scope.original) == null ? void 0 : _scope$original.rowStyle)
-      }, (_scope$original2 = scope.original) == null ? void 0 : _scope$original2.listProps, {
-        children: /*#__PURE__*/jsx(UI.Value, {
-          value: "#{@this.label}"
-        })
-      }))
+    }), /*#__PURE__*/jsxs(Modal, {
+      animationType: "slide",
+      transparent: true,
+      visible: isModalVisible(),
+      onRequestClose: function onRequestClose() {
+        return setModalVisible(false);
+      },
+      children: [/*#__PURE__*/jsx(SafeAreaView, {
+        style: style('modalTop')
+      }), /*#__PURE__*/jsxs(SafeAreaView, {
+        style: style('modalSafe'),
+        children: [/*#__PURE__*/jsxs(View, {
+          style: scope.getStyle('header', headerStyle),
+          children: [/*#__PURE__*/jsx(TouchableOpacity, {
+            onPress: handlePress,
+            style: style('modalCloseButton'),
+            children: /*#__PURE__*/jsx(Ionicons$1, {
+              name: "close",
+              size: 24,
+              color: modalColor,
+              style: style('modalCloseText', defaults)
+            })
+          }), /*#__PURE__*/jsx(Text, {
+            style: style('modalTitle', defaults),
+            children: placeholder
+          })]
+        }), /*#__PURE__*/jsx(ScrollView, {
+          contentContainerStyle: {
+            flexGrow: 1,
+            paddingBottom: 50
+          },
+          style: style('modalContent'),
+          nestedScrollEnabled: true,
+          ref: scrollRef,
+          children: /*#__PURE__*/jsx(View, {
+            style: {
+              flex: 1
+            },
+            children: /*#__PURE__*/jsx(UI.List, _extends({
+              data: items,
+              name: scope.getName('list'),
+              layout: "card",
+              click: onClick,
+              rowStyle: _extends({
+                paddingLeft: 15,
+                paddinRight: 15
+              }, (_scope$original = scope.original) == null ? void 0 : _scope$original.rowStyle)
+            }, (_scope$original2 = scope.original) == null ? void 0 : _scope$original2.listProps, {
+              children: /*#__PURE__*/jsx(UI.Value, {
+                value: "#{@this.label}"
+              })
+            }))
+          })
+        })]
+      }), /*#__PURE__*/jsx(SafeAreaView, {
+        style: style('modalTop')
+      }), /*#__PURE__*/jsxs(SafeAreaView, {
+        style: style('modalSafe'),
+        children: [/*#__PURE__*/jsxs(View, {
+          style: scope.getStyle('header', headerStyle),
+          children: [/*#__PURE__*/jsx(TouchableOpacity, {
+            onPress: function onPress() {
+              return setModalVisible(false);
+            },
+            style: style('modalCloseButton'),
+            children: /*#__PURE__*/jsx(Ionicons$1, {
+              name: "close",
+              size: 24,
+              color: modalColor,
+              style: style('modalCloseText', defaults)
+            })
+          }), /*#__PURE__*/jsx(Text, {
+            style: style('modalTitle'),
+            children: placeholder
+          })]
+        }), /*#__PURE__*/jsx(View, {
+          style: style('modalContent'),
+          children: /*#__PURE__*/jsx(UI.List, _extends({
+            data: items,
+            name: scope.getName('list'),
+            layout: "card",
+            click: onClick,
+            rowStyle: _extends({
+              paddingLeft: 15,
+              paddinRight: 15
+            }, (_scope$original3 = scope.original) == null ? void 0 : _scope$original3.rowStyle)
+          }, (_scope$original4 = scope.original) == null ? void 0 : _scope$original4.listProps, {
+            children: /*#__PURE__*/jsx(UI.Value, {
+              value: "#{@this.label}"
+            })
+          }))
+        })]
+      })]
     })]
-  }, scope.getName("" + scope.getPart('modal')));
+  }, scope.getName(scope.getPart('modal') + "_" + modalVisible));
 }
 var styles$3 = /*#__PURE__*/StyleSheet.create({
   selectRoot: {
@@ -1450,20 +1549,6 @@ var styles$8 = /*#__PURE__*/StyleSheet.create({
   }
 });
 
-//import { ThemeUtils, Utils } from 'react-crud-utils';
-//import { StatusBar } from 'react-native';
-var MobileUtils = /*#__PURE__*/function () {
-  function MobileUtils() {}
-  MobileUtils.syncTheme = function syncTheme() {
-    // let current = ThemeUtils.getCurrentTheme();
-    //let dec: any = { light: 'light-content', dark: 'dark-content' };
-    //let name = Utils.nvl(dec[current?.theme], dec.light);
-    //StatusBar.setBarStyle?.(name);
-    //StatusBar.setBackgroundColor?.(current?.colors?.theme);
-  };
-  return MobileUtils;
-}();
-
 function UIView(_ref) {
   var _theme$styles, _theme$styles2;
   var scope = _ref.scope,