react-crud-mobile 1.3.359 → 1.3.361

package/src/elements/core/UIModal.tsx

@@ -1,212 +1,212 @@
-import { useRef, useState } from 'react';
-import {
-  ChildType,
-  ComponentUtils,
-  CrudUtils,
-  MethodType,
-  Utils,
-  ViewUtils,
-} from 'react-crud-utils';
-import {
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  Modal,
-  View,
-  SafeAreaView,
-  ScrollView,
-} from 'react-native';
-import UIChildren from '../UIChildren';
-import Ionicons from '@expo/vector-icons/Ionicons';
-import UIToast from './UIToast';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-
-interface UIModalType extends ChildType {
-  open?: boolean;
-  dialog?: any;
-}
-
-export default function UIModal(props: UIModalType) {
-  const scrollRef = useRef(null);
-
-  let owner = props.scope;
-  let [index, setIndex] = useState(0);
-  let dialog = owner.currentDialog;
-  //v2
-
-  let curr = dialog?.crud;
-
-  if (!dialog) {
-    return <></>;
-  }
-
-  dialog.update = () => {
-    setIndex(++index);
-  };
-
-  if (dialog.debug) console.log(dialog);
-
-  //const modalVisible = curr.uuid === main.dialog?.crud?.uuid;
-  const scope = dialog.scope;
-  const label = scope.getLabel();
-  const theme = scope.getTheme();
-  const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
-  const headerRight = ComponentUtils.getDefine(props, 'header', 'right');
-  const bottom = ComponentUtils.getDefine(props, 'bottom');
-
-  const style = (part: string, extra?: any) => {
-    let st = { ...styles[part], ...extra };
-
-    return { ...scope.getStyle(part, st) };
-  };
-
-  const onClose = () => {
-    scope.close({ scope, crud: dialog?.crud, event: {} });
-  };
-
-  scope.put('scrollRef', scrollRef);
-
-  const original = owner.original;
-
-  ComponentUtils.setViewScope(scope);
-
-  let color = Utils.nvl(headerStyle.color, 'white');
-  let defaults = { color };
-  let key = `${curr.name}-${index}`;
-
-  let ModalContent = ({ children }) => {
-    let disableScroll = scope.part('disableScroll', false);
-    let disableContent = scope.part('disableContent', false);
-
-    if (disableContent) {
-      return <>{children}</>;
-    }
-
-    if (disableScroll) {
-      return <View style={style('modalContent')}>{children}</View>;
-    }
-    return (
-      <ScrollView
-        contentContainerStyle={{ flexGrow: 1, paddingBottom: 50 }}
-        style={style('modalContent')}
-        nestedScrollEnabled={true}
-        ref={scrollRef}
-      >
-        {children}
-      </ScrollView>
-    );
-  };
-
-  const ModalView = ({ children }) => {
-    if (original.gesture) {
-      return (
-        <GestureHandlerRootView
-          style={{
-            flex: 1,
-          }}
-        >
-          {children}
-        </GestureHandlerRootView>
-      );
-    }
-    return <>{children}</>;
-  };
-
-  const ModalInner = () => {
-    let Content = () => {
-      if (dialog?.component) {
-        let cprops = dialog.props;
-        let Aux = dialog.component;
-
-        return <Aux key={curr.uuid} crud={curr} {...cprops} />;
-      }
-
-      return (
-        <UIChildren scope={scope} crud={curr}>
-          {props.children}
-        </UIChildren>
-      );
-    };
-
-    let content = <Content />;
-
-    if (original.transient) {
-      return <View style={style('modalSafe')}>{content}</View>;
-    }
-
-    return (
-      <>
-        <SafeAreaView style={style('modalTop')} />
-        <SafeAreaView style={style('modalSafe')}>
-          <View style={scope.getStyle('header', headerStyle)}>
-            <TouchableOpacity
-              onPress={onClose}
-              style={style('modalCloseButton')}
-            >
-              <Ionicons
-                name="chevron-back-outline"
-                size={24}
-                color={color}
-                style={style('modalCloseText', defaults)}
-              />
-            </TouchableOpacity>
-            <Text style={style('modalTitle', defaults)}>{label}</Text>
-            {!Utils.isEmpty(headerRight) && (
-              <UIChildren scope={scope} crud={curr} transient>
-                {headerRight}
-              </UIChildren>
-            )}
-          </View>
-          <ModalContent>{content}</ModalContent>
-          {bottom}
-        </SafeAreaView>
-        <UIToast />
-      </>
-    );
-  };
-  return (
-    <ModalView>
-      <Modal
-        key={key}
-        animationType="slide"
-        transparent={true}
-        visible={true}
-        onRequestClose={onClose}
-      >
-        <ModalInner />
-      </Modal>
-    </ModalView>
-  );
-}
-
-const styles = StyleSheet.create({
-  modalTop: {
-    backgroundColor: 'primary',
-    width: '100%',
-  },
-  modalSafe: {
-    flex: 1,
-    width: '100%',
-    backgroundColor: 'background',
-  },
-  modalCloseButton: {
-    padding: 10,
-  },
-  modalCloseText: {
-    fontSize: 18,
-    color: 'white',
-  },
-  modalTitle: {
-    fontSize: 22,
-    fontWeight: 600,
-    marginLeft: 10,
-  },
-  modalContent: {
-    flex: 1,
-    backgroundColor: 'background',
-    paddingLeft: 15,
-    paddingRight: 15,
-    paddingTop: 10,
-    paddingBottom: 10,
-  },
-});
+import { useRef, useState } from 'react';
+import {
+  ChildType,
+  ComponentUtils,
+  CrudUtils,
+  MethodType,
+  Utils,
+  ViewUtils,
+} from 'react-crud-utils';
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  View,
+  SafeAreaView,
+  ScrollView,
+} from 'react-native';
+import UIChildren from '../UIChildren';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import UIToast from './UIToast';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+interface UIModalType extends ChildType {
+  open?: boolean;
+  dialog?: any;
+}
+
+export default function UIModal(props: UIModalType) {
+  const scrollRef = useRef(null);
+
+  let owner = props.scope;
+  let [index, setIndex] = useState(0);
+  let dialog = owner.currentDialog;
+  //v2
+
+  let curr = dialog?.crud;
+
+  if (!dialog) {
+    return <></>;
+  }
+
+  dialog.update = () => {
+    setIndex(++index);
+  };
+
+  if (dialog.debug) console.log(dialog);
+
+  //const modalVisible = curr.uuid === main.dialog?.crud?.uuid;
+  const scope = dialog.scope;
+  const label = scope.getLabel();
+  const theme = scope.getTheme();
+  const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
+  const headerRight = ComponentUtils.getDefine(props, 'header', 'right');
+  const bottom = ComponentUtils.getDefine(props, 'bottom');
+
+  const style = (part: string, extra?: any) => {
+    let st = { ...styles[part], ...extra };
+
+    return { ...scope.getStyle(part, st) };
+  };
+
+  const onClose = () => {
+    scope.close({ scope, crud: dialog?.crud, event: {} });
+  };
+
+  scope.put('scrollRef', scrollRef);
+
+  const original = owner.original;
+
+  ComponentUtils.setViewScope(scope);
+
+  let color = Utils.nvl(headerStyle.color, 'white');
+  let defaults = { color };
+  let key = `${curr.name}-${index}`;
+
+  let ModalContent = ({ children }) => {
+    let disableScroll = scope.part('disableScroll', false);
+    let disableContent = scope.part('disableContent', false);
+
+    if (disableContent) {
+      return <>{children}</>;
+    }
+
+    if (disableScroll) {
+      return <View style={style('modalContent')}>{children}</View>;
+    }
+    return (
+      <ScrollView
+        contentContainerStyle={{ flexGrow: 1, paddingBottom: 50 }}
+        style={style('modalContent')}
+        nestedScrollEnabled={true}
+        ref={scrollRef}
+      >
+        {children}
+      </ScrollView>
+    );
+  };
+
+  const ModalView = ({ children }) => {
+    if (original.gesture) {
+      return (
+        <GestureHandlerRootView
+          style={{
+            flex: 1,
+          }}
+        >
+          {children}
+        </GestureHandlerRootView>
+      );
+    }
+    return <>{children}</>;
+  };
+
+  const ModalInner = () => {
+    let Content = () => {
+      if (dialog?.component) {
+        let cprops = dialog.props;
+        let Aux = dialog.component;
+
+        return <Aux key={curr.uuid} crud={curr} {...cprops} />;
+      }
+
+      return (
+        <UIChildren scope={scope} crud={curr}>
+          {props.children}
+        </UIChildren>
+      );
+    };
+
+    let content = <Content />;
+
+    if (original.transient) {
+      return <View style={style('modalSafe')}>{content}</View>;
+    }
+
+    return (
+      <>
+        <SafeAreaView style={style('modalTop')} />
+        <SafeAreaView style={style('modalSafe')}>
+          <View style={scope.getStyle('header', headerStyle)}>
+            <TouchableOpacity
+              onPress={onClose}
+              style={style('modalCloseButton')}
+            >
+              <Ionicons
+                name="chevron-back-outline"
+                size={24}
+                color={color}
+                style={style('modalCloseText', defaults)}
+              />
+            </TouchableOpacity>
+            <Text style={style('modalTitle', defaults)}>{label}</Text>
+            {!Utils.isEmpty(headerRight) && (
+              <UIChildren scope={scope} crud={curr} transient>
+                {headerRight}
+              </UIChildren>
+            )}
+          </View>
+          <ModalContent>{content}</ModalContent>
+          {bottom}
+        </SafeAreaView>
+        <UIToast />
+      </>
+    );
+  };
+  return (
+    <ModalView>
+      <Modal
+        key={key}
+        animationType="slide"
+        transparent={true}
+        visible={true}
+        onRequestClose={onClose}
+      >
+        <ModalInner />
+      </Modal>
+    </ModalView>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalTop: {
+    backgroundColor: 'primary',
+    width: '100%',
+  },
+  modalSafe: {
+    flex: 1,
+    width: '100%',
+    backgroundColor: 'background',
+  },
+  modalCloseButton: {
+    padding: 10,
+  },
+  modalCloseText: {
+    fontSize: 18,
+    color: 'white',
+  },
+  modalTitle: {
+    fontSize: 22,
+    fontWeight: 600,
+    marginLeft: 10,
+  },
+  modalContent: {
+    flex: 1,
+    backgroundColor: 'background',
+    paddingLeft: 15,
+    paddingRight: 15,
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+});