react-crud-mobile 1.3.46 → 1.3.48

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.46",
+  "version": "1.3.48",
   "license": "MIT",
   "description": "Uma biblioteca de componentes para React Native",
   "main": "dist/index.js",

package/src/elements/core/UISelect.tsx

@@ -8,12 +8,14 @@ import {
   View,
   StatusBar,
   SafeAreaView,
+  ScrollView,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import UI from '../UI';
 import MobileUtils from '../../utils/MobileUtils';
 
 export default function UISelect(props: ChildType) {
+  const [modalVisible, setModalVisible] = useState(false);
   const scope = props.scope;
   const element = scope.original;
   const items = Utils.nvl(scope.getOptions(), []);
@@ -21,12 +23,11 @@ export default function UISelect(props: ChildType) {
   const value = scope.getDisplayValue();
   const theme = scope.getTheme();
   const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
-  const dlgName = scope.getName('dialog');
-
   const handlePress = () => {
-    scope.call('click', { click: { action: 'dialog', dialog: dlgName } });
+    setModalVisible(!modalVisible);
   };
 
+  const scrollRef = useRef(null);
   const iconColor = Utils.nvl(theme.colors?.text, '#100e0e');
   const modalColor = Utils.nvl(headerStyle.color, 'white');
   const defaults = { color: modalColor };
@@ -40,6 +41,8 @@ export default function UISelect(props: ChildType) {
     } else {
       scope.changeValue(value);
     }
+
+    setModalVisible(false);
   };
 
   const style = (part: string, extra?: any) => {
@@ -47,9 +50,19 @@ export default function UISelect(props: ChildType) {
 
     return scope.getStyle(part, all);
   };
+
+  const isModalVisible = () => {
+    return modalVisible;
+  };
+  //v4
+
+  useEffect(() => {
+    MobileUtils.syncTheme();
+  }, [modalVisible]);
+
   return (
     <View
-      key={scope.getName(`${scope.getPart('modal')}`)}
+      key={scope.getName(`${scope.getPart('modal')}_${modalVisible}`)}
       style={style('selectRoot')}
     >
       <TouchableOpacity onPress={handlePress} style={style('selectInput')}>
@@ -63,22 +76,53 @@ export default function UISelect(props: ChildType) {
           style={style('iconStyle', {})}
         />
       </TouchableOpacity>
-      <UI.Dialog name={dlgName} label="Selecione">
-        <UI.List
-          data={items}
-          name={scope.getName('list')}
-          layout="card"
-          click={onClick}
-          rowStyle={{
-            paddingLeft: 15,
-            paddinRight: 15,
-            ...scope.original?.rowStyle,
-          }}
-          {...scope.original?.listProps}
-        >
-          <UI.Value value="#{@this.label}" />
-        </UI.List>
-      </UI.Dialog>
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={isModalVisible()}
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <SafeAreaView style={style('modalTop')} />
+        <SafeAreaView style={style('modalSafe')}>
+          <View style={scope.getStyle('header', headerStyle)}>
+            <TouchableOpacity
+              onPress={handlePress}
+              style={style('modalCloseButton')}
+            >
+              <Ionicons
+                name="close"
+                size={24}
+                color={modalColor}
+                style={style('modalCloseText', defaults)}
+              />
+            </TouchableOpacity>
+            <Text style={style('modalTitle', defaults)}>{placeholder}</Text>
+          </View>
+          <ScrollView
+            contentContainerStyle={{ flexGrow: 1, paddingBottom: 50 }}
+            style={style('modalContent')}
+            nestedScrollEnabled={true}
+            ref={scrollRef}
+          >
+            <View style={{ flex: 1 }}>
+              <UI.List
+                data={items}
+                name={scope.getName('list')}
+                layout="card"
+                click={onClick}
+                rowStyle={{
+                  paddingLeft: 15,
+                  paddinRight: 15,
+                  ...scope.original?.rowStyle,
+                }}
+                {...scope.original?.listProps}
+              >
+                <UI.Value value="#{@this.label}" />
+              </UI.List>
+            </View>
+          </ScrollView>
+        </SafeAreaView>
+      </Modal>
     </View>
   );
 }