react-crud-mobile 1.0.533 → 1.0.535

package/src/elements/core/UIModal.tsx

@@ -1,165 +1,173 @@
-import { useEffect, useState } from 'react';
-import {
-  ChildType,
-  CrudUtils,
-  MethodType,
-  useTheme,
-  Utils,
-  ViewUtils,
-} from 'react-crud-utils';
-import {
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  Modal,
-  View,
-  StatusBar,
-  SafeAreaView,
-  ScrollView,
-} from 'react-native';
-import UIChildren from '../UIChildren';
-
-export default function UIModal(props: ChildType) {
-  let [modalVisible, setModalVisible] = useState(false);
-  let [index, setIndex] = useState(0);
-  let main = ViewUtils.getCrud('view');
-
-  const scope = props.scope;
-  const label = scope.getLabel();
-  const theme = useTheme();
-
-  const style = (part: string, extra?: any) => {
-    let st = { ...styles[part], ...extra };
-
-    return { ...scope.getStyle(part, st) };
-  };
-
-  const onClose = () => {
-    scope.close({ scope, crud: scope.currentDialog, event: {} });
-  };
-
-  const toggle = vis => {
-    modalVisible = vis;
-    setModalVisible(modalVisible);
-  };
-
-  scope.update = () => {
-    setIndex(++index);
-  };
-  scope.show = (args?: MethodType) => {
-    let { crud } = args;
-    let name = scope.getName('modal');
-    let data = Utils.nvl(args.item, {});
-    let edit = args.edit === true;
-    let def: any = {};
-
-    if (crud.is('search')) {
-      def.parent = crud.parent;
-      def.search = crud;
-    }
-
-    let d = CrudUtils.create('dialog', {
-      parent: crud,
-      name,
-      dialog: main.dialog,
-      data,
-      edit,
-      scope,
-      ...def,
-    });
-
-    main.dialog = d;
-
-    scope.currentDialog = d;
-
-    toggle(true);
-  };
-
-  scope.hide = (args?: MethodType) => {
-    let old = scope.currentDialog;
-
-    main.dialog = Utils.nvl(old.dialog, null);
-    scope.currentDialog = null;
-
-    toggle(false);
-
-    if (main.dialog) {
-      main.dialog.update();
-    }
-  };
-
-  useEffect(() => {
-    StatusBar.setBarStyle('light-content');
-    StatusBar.setBackgroundColor?.(theme.colors.primary);
-  }, [modalVisible]);
-
-  let curr = scope.currentDialog;
-
-  if (!curr) {
-    return <></>;
-  }
-
-  if (curr.uuid !== main.dialog.uuid) {
-    return <></>;
-  }
-
-  return (
-    <Modal
-      animationType="slide"
-      transparent={true}
-      visible={modalVisible}
-      onRequestClose={onClose}
-    >
-      <SafeAreaView style={style('modalSafe')}>
-        <View style={style('modalHeader')}>
-          <TouchableOpacity onPress={onClose} style={style('modalCloseButton')}>
-            <Text style={style('modalCloseText')}>X</Text>
-          </TouchableOpacity>
-          <Text style={style('modalTitle')}>{label}</Text>
-        </View>
-        <ScrollView
-          contentContainerStyle={{ flexGrow: 1 }}
-          style={style('modalContent')}
-        >
-          <View style={{ flex: 1 }}>
-            <UIChildren scope={scope} crud={scope.currentDialog}>
-              {props.children}
-            </UIChildren>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </Modal>
-  );
-}
-
-const styles = StyleSheet.create({
-  modalSafe: {
-    flex: 1,
-    backgroundColor: 'primary',
-    width: '100%',
-  },
-  modalHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 15,
-    backgroundColor: 'primary',
-  },
-  modalCloseButton: {
-    padding: 10,
-  },
-  modalCloseText: {
-    fontSize: 18,
-    color: 'white',
-  },
-  modalTitle: {
-    fontSize: 18,
-    color: 'white',
-    fontWeight: 'bold',
-    marginLeft: 10,
-  },
-  modalContent: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-    padding: 20,
-  },
-});
+import { useEffect, useState } from 'react';
+import {
+  ChildType,
+  ComponentUtils,
+  CrudUtils,
+  MethodType,
+  useTheme,
+  Utils,
+  ViewUtils,
+} from 'react-crud-utils';
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  View,
+  StatusBar,
+  SafeAreaView,
+  ScrollView,
+} from 'react-native';
+import UIChildren from '../UIChildren';
+
+export default function UIModal(props: ChildType) {
+  let [modalVisible, setModalVisible] = useState(false);
+  let [index, setIndex] = useState(0);
+  let main = ViewUtils.getCrud('view');
+
+  const scope = props.scope;
+  const label = scope.getLabel();
+  const theme = useTheme();
+
+  const style = (part: string, extra?: any) => {
+    let st = { ...styles[part], ...extra };
+
+    return { ...scope.getStyle(part, st) };
+  };
+
+  const onClose = () => {
+    scope.close({ scope, crud: scope.currentDialog, event: {} });
+  };
+
+  const toggle = vis => {
+    modalVisible = vis;
+    setModalVisible(modalVisible);
+  };
+
+  scope.update = () => {
+    setIndex(++index);
+  };
+  scope.show = (args?: MethodType) => {
+    let { crud } = args;
+    let name = scope.getName('modal');
+    let data = Utils.nvl(args.item, {});
+    let edit = args.edit === true;
+    let def: any = {};
+
+    if (crud.is('search')) {
+      def.parent = crud.parent;
+      def.search = crud;
+    }
+
+    let d = CrudUtils.create('dialog', {
+      parent: crud,
+      name,
+      dialog: main.dialog,
+      data,
+      edit,
+      scope,
+      ...def,
+    });
+
+    main.dialog = d;
+
+    scope.currentDialog = d;
+
+    toggle(true);
+  };
+
+  scope.hide = (args?: MethodType) => {
+    let old = scope.currentDialog;
+
+    main.dialog = Utils.nvl(old.dialog, null);
+    scope.currentDialog = null;
+
+    toggle(false);
+
+    if (main.dialog?.scope) {
+      main.dialog.scope.update();
+    }
+  };
+
+  useEffect(() => {
+    StatusBar.setBarStyle('light-content');
+    StatusBar.setBackgroundColor?.(theme.colors.primary);
+  }, [modalVisible]);
+
+  let curr = scope.currentDialog;
+
+  if (!curr) {
+    return <></>;
+  }
+
+  if (curr.uuid !== main.dialog.uuid) {
+    return <></>;
+  }
+
+  const headerRight = ComponentUtils.getDefine(props, 'header', 'right');
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={onClose}
+    >
+      <SafeAreaView style={style('modalSafe')}>
+        <View style={style('modalHeader')}>
+          <TouchableOpacity onPress={onClose} style={style('modalCloseButton')}>
+            <Text style={style('modalCloseText')}>X</Text>
+          </TouchableOpacity>
+          <Text style={style('modalTitle')}>{label}</Text>
+          {!Utils.isEmpty(headerRight) && (
+            <UIChildren scope={scope} crud={scope.currentDialog}>
+              {headerRight}
+            </UIChildren>
+          )}
+        </View>
+        <ScrollView
+          contentContainerStyle={{ flexGrow: 1 }}
+          style={style('modalContent')}
+        >
+          <View style={{ flex: 1 }}>
+            <UIChildren scope={scope} crud={scope.currentDialog}>
+              {props.children}
+            </UIChildren>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalSafe: {
+    flex: 1,
+    backgroundColor: 'primary',
+    width: '100%',
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 15,
+    backgroundColor: 'primary',
+  },
+  modalCloseButton: {
+    padding: 10,
+  },
+  modalCloseText: {
+    fontSize: 18,
+    color: 'white',
+  },
+  modalTitle: {
+    fontSize: 18,
+    color: 'white',
+    fontWeight: 'bold',
+    marginLeft: 10,
+  },
+  modalContent: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+    padding: 20,
+  },
+});

package/src/elements/core/UIQuantity.tsx

@@ -1,97 +1,97 @@
-import { Ionicons } from '@expo/vector-icons';
-import { useState } from 'react';
-import { ChildType, Utils } from 'react-crud-utils';
-import { Text, TouchableHighlight, View } from 'react-native';
-
-export default function UIQuantity(props: ChildType) {
-  const scope = props.scope;
-  const element = scope.original;
-
-  let [index, setIndex] = useState(0);
-
-  const value = scope.getValue(0);
-
-  let color = element.color;
-
-  if (!color) color = 'primary';
-
-  const btn = {
-    padding: 10,
-    alignItems: 'center',
-    height: 44,
-    width: 44,
-    textAlign: 'center',
-    verticalAling: 'middle',
-    borderRadius: 24,
-    backgroundColor: color,
-    color: '#ffffff',
-    justifyContent: 'center',
-  };
-
-  const styles: any = {
-    buttonLabel: {
-      color: '#ffffff',
-      fontWeight: '500',
-      fontSize: 16,
-    },
-    value: {
-      flex: 1,
-      flexDirection: 'row',
-      textAlign: 'center',
-    },
-    buttonInner: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    buttonIcon: {
-      color: '#fff',
-      fontSize: 18,
-    },
-    button: btn,
-    addButton: {
-      ...btn,
-    },
-    delButton: {
-      ...btn,
-    },
-  };
-
-  const change = (val: number) => {
-    scope.changeValue(value + val);
-    setIndex(++index);
-  };
-
-  const onClickAdd = () => {
-    change(1);
-  };
-
-  const onClickDel = () => {
-    change(-1);
-  };
-
-  const style = (part: string, extra?: any) => {
-    let s = { ...styles[part], ...extra };
-    return scope.getStyle(part, s);
-  };
-
-  return (
-    <>
-      <TouchableHighlight
-        underlayColor={'transparent'}
-        onPress={onClickDel}
-        style={style('delButton')}
-      >
-        <Ionicons size={30} style={style('buttonIcon')} name="remove" />
-      </TouchableHighlight>
-      <Text style={style('value')}>{Utils.nvl(value, 0)}</Text>
-      <TouchableHighlight
-        underlayColor={'transparent'}
-        onPress={onClickAdd}
-        style={style('addButton')}
-      >
-        <Ionicons size={30} style={style('buttonIcon')} name="add" />
-      </TouchableHighlight>
-    </>
-  );
-}
+import { Ionicons } from '@expo/vector-icons';
+import { useState } from 'react';
+import { ChildType, Utils } from 'react-crud-utils';
+import { Text, TouchableHighlight, View } from 'react-native';
+
+export default function UIQuantity(props: ChildType) {
+  const scope = props.scope;
+  const element = scope.original;
+
+  let [index, setIndex] = useState(0);
+
+  const value = scope.getValue(0);
+
+  let color = element.color;
+
+  if (!color) color = 'primary';
+
+  const btn = {
+    padding: 10,
+    alignItems: 'center',
+    height: 44,
+    width: 44,
+    textAlign: 'center',
+    verticalAling: 'middle',
+    borderRadius: 24,
+    backgroundColor: color,
+    color: '#ffffff',
+    justifyContent: 'center',
+  };
+
+  const styles: any = {
+    buttonLabel: {
+      color: '#ffffff',
+      fontWeight: '500',
+      fontSize: 16,
+    },
+    value: {
+      flex: 1,
+      flexDirection: 'row',
+      textAlign: 'center',
+    },
+    buttonInner: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    buttonIcon: {
+      color: '#fff',
+      fontSize: 18,
+    },
+    button: btn,
+    addButton: {
+      ...btn,
+    },
+    delButton: {
+      ...btn,
+    },
+  };
+
+  const change = (val: number) => {
+    scope.changeValue(value + val);
+    setIndex(++index);
+  };
+
+  const onClickAdd = () => {
+    change(1);
+  };
+
+  const onClickDel = () => {
+    change(-1);
+  };
+
+  const style = (part: string, extra?: any) => {
+    let s = { ...styles[part], ...extra };
+    return scope.getStyle(part, s);
+  };
+
+  return (
+    <>
+      <TouchableHighlight
+        underlayColor={'transparent'}
+        onPress={onClickDel}
+        style={style('delButton')}
+      >
+        <Ionicons size={30} style={style('buttonIcon')} name="remove" />
+      </TouchableHighlight>
+      <Text style={style('value')}>{Utils.nvl(value, 0)}</Text>
+      <TouchableHighlight
+        underlayColor={'transparent'}
+        onPress={onClickAdd}
+        style={style('addButton')}
+      >
+        <Ionicons size={30} style={style('buttonIcon')} name="add" />
+      </TouchableHighlight>
+    </>
+  );
+}