react-crud-mobile 1.3.99 → 1.3.101

package/src/elements/core/UIListRow.tsx

@@ -1,123 +1,123 @@
-import React, { useRef, useState } from 'react';
-import { ChildType, ScopeUtils, Utils } from 'react-crud-utils';
-import UIChildren from '../UIChildren';
-import { StyleSheet, TouchableHighlight, View } from 'react-native';
-import { useIsVisible } from '../../hooks/useIsVisible';
-
-interface UIListRowType extends ChildType {
-  item: any;
-  index: number;
-}
-
-export default function UIListRow(props: UIListRowType) {
-  const scope = props.scope;
-  const index = props.index;
-  const original = scope.original;
-  const item = props.item;
-  const cols = scope.getPart('cols', undefined, -1);
-  const rowWidth = Math.floor(100 / cols) + '%';
-  const styles = { repeat: stylesRepeat, list: stylesList }?.[original.type];
-  const name = `${scope.key('row', index, '')}`;
-  const [row] = useState(
-    ScopeUtils.create({
-      ...original,
-      parent: scope,
-      name,
-      crud: scope.crud,
-      index,
-      type: 'row',
-      data: item,
-    })
-  );
-
-  const targetRef = useRef(null);
-  const isVisible = useIsVisible(targetRef, row);
-
-  const onClick = (item: any) => {
-    row.call('click', { value: item, item, edit: true, index });
-  };
-
-  const Child = () => {
-    if (!isVisible && original.useIsInView && !row.visible && index > 20) {
-      return <></>;
-    }
-    return (
-      <>
-        <UIChildren scope={row} crud={row.crud}>
-          {props.children}
-        </UIChildren>
-      </>
-    );
-  };
-
-  const ListItem = () => {
-    let [updateIndex, setUpdateIndex] = useState(0);
-    let key = scope.key('item');
-
-    const getRowStyle = () => {
-      let css = row.getStyle('row', { ...styles.row, minHeight: 40 });
-
-      if (cols > 0) {
-        css.width = rowWidth;
-      }
-
-      return css;
-    };
-
-    row.update = () => {
-      scope.updateIndex = scope.updateIndex + 1;
-
-      setUpdateIndex(++updateIndex);
-    };
-
-    let renderedRow = row.getPart('renderedItem', undefined, true);
-
-    if (renderedRow === false) {
-      return <></>;
-    }
-
-    if (!original.click) {
-      return (
-        <View key={key} style={getRowStyle()} ref={targetRef}>
-          <Child />
-        </View>
-      );
-    }
-    return (
-      <TouchableHighlight
-        key={key}
-        style={getRowStyle()}
-        underlayColor={'transparent'}
-        ref={targetRef}
-        onPress={e => {
-          e.stopPropagation();
-          onClick(item);
-        }}
-      >
-        <Child />
-      </TouchableHighlight>
-    );
-  };
-
-  return <ListItem />;
-}
-
-const stylesList = StyleSheet.create({
-  row: {
-    padding: 5,
-    margin: 0,
-    width: '100%',
-    backgroundColor: 'background',
-    gap: 10,
-    borderRadius: 8,
-    justifyContent: 'center',
-  },
-});
-
-const stylesRepeat = StyleSheet.create({
-  row: {
-    padding: 0,
-    width: '100%',
-    justifyContent: 'center',
-  },
-});
+import React, { useRef, useState } from 'react';
+import { ChildType, ScopeUtils, Utils } from 'react-crud-utils';
+import UIChildren from '../UIChildren';
+import { StyleSheet, TouchableHighlight, View } from 'react-native';
+import { useIsVisible } from '../../hooks/useIsVisible';
+
+interface UIListRowType extends ChildType {
+  item: any;
+  index: number;
+}
+
+export default function UIListRow(props: UIListRowType) {
+  const scope = props.scope;
+  const index = props.index;
+  const original = scope.original;
+  const item = props.item;
+  const cols = scope.getPart('cols', undefined, -1);
+  const rowWidth = Math.floor(100 / cols) + '%';
+  const styles = { repeat: stylesRepeat, list: stylesList }?.[original.type];
+  const name = `${scope.key('row', index, '')}`;
+  const [row] = useState(
+    ScopeUtils.create({
+      ...original,
+      parent: scope,
+      name,
+      crud: scope.crud,
+      index,
+      type: 'row',
+      data: item,
+    })
+  );
+
+  const targetRef = useRef(null);
+  const isVisible = useIsVisible(targetRef, row);
+
+  const onClick = (item: any) => {
+    row.call('click', { value: item, item, edit: true, index });
+  };
+
+  const Child = () => {
+    if (!isVisible && original.useIsInView && !row.visible && index > 20) {
+      return <></>;
+    }
+    return (
+      <>
+        <UIChildren scope={row} crud={row.crud}>
+          {props.children}
+        </UIChildren>
+      </>
+    );
+  };
+
+  const ListItem = () => {
+    let [updateIndex, setUpdateIndex] = useState(0);
+    let key = scope.key('item');
+
+    const getRowStyle = () => {
+      let css = row.getStyle('row', { ...styles.row, minHeight: 40 });
+
+      if (cols > 0) {
+        css.width = rowWidth;
+      }
+
+      return css;
+    };
+
+    row.update = () => {
+      scope.updateIndex = scope.updateIndex + 1;
+
+      setUpdateIndex(++updateIndex);
+    };
+
+    let renderedRow = row.getPart('renderedItem', undefined, true);
+
+    if (renderedRow === false) {
+      return <></>;
+    }
+
+    if (!original.click) {
+      return (
+        <View key={key} style={getRowStyle()} ref={targetRef}>
+          <Child />
+        </View>
+      );
+    }
+    return (
+      <TouchableHighlight
+        key={key}
+        style={getRowStyle()}
+        underlayColor={'transparent'}
+        ref={targetRef}
+        onPress={e => {
+          e.stopPropagation();
+          onClick(item);
+        }}
+      >
+        <Child />
+      </TouchableHighlight>
+    );
+  };
+
+  return <ListItem />;
+}
+
+const stylesList = StyleSheet.create({
+  row: {
+    padding: 5,
+    margin: 0,
+    width: '100%',
+    backgroundColor: 'background',
+    gap: 10,
+    borderRadius: 8,
+    justifyContent: 'center',
+  },
+});
+
+const stylesRepeat = StyleSheet.create({
+  row: {
+    padding: 0,
+    width: '100%',
+    justifyContent: 'center',
+  },
+});

package/src/elements/core/UIModal.tsx

@@ -1,174 +1,176 @@
-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';
-
-interface UIModalType extends ChildType {
-  open?: boolean;
-  dialog?: any;
-}
-
-export default function UIModal({
-  scope,
-  open,
-  dialog,
-  ...props
-}: UIModalType) {
-  let [modalVisible, setModalVisible] = useState(open === true);
-  let [index, setIndex] = useState(0);
-  //v6
-
-  const label = scope.getLabel();
-  const theme = scope.getTheme();
-  const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
-  const scrollRef = useRef(null);
-
-  const style = (part: string, extra?: any) => {
-    let st = { ...styles[part], ...extra };
-
-    return { ...scope.getStyle(part, st) };
-  };
-
-  const onClose = () => {
-    scope.close({ scope, crud: scope.currentDialog?.crud, event: {} });
-  };
-
-  scope.toggleDialog = vis => {
-    modalVisible = vis;
-    setModalVisible(modalVisible);
-  };
-
-  scope.update = () => {
-    setIndex(++index);
-  };
-
-  let curr = scope.currentDialog?.crud;
-  let main = ViewUtils.getCrud('view');
-
-  if (!curr) {
-    return <></>;
-  }
-
-  if (curr.uuid !== main.dialog?.crud?.uuid) {
-    return <></>;
-  }
-
-  const headerRight = ComponentUtils.getDefine(props, 'header', 'right');
-  const bottom = ComponentUtils.getDefine(props, 'bottom');
-
-  scope.put('scrollRef', scrollRef);
-
-  ComponentUtils.setViewScope(scope);
-
-  let color = Utils.nvl(headerStyle.color, 'white');
-  let defaults = { color };
-  let key = `${curr.name}-${index}`;
-
-  let Content = () => {
-    if (dialog?.component) {
-      let Aux = dialog?.component;
-
-      return <Aux crud={curr} />;
-    }
-    return (
-      <UIChildren scope={scope} crud={curr}>
-        {props.children}
-      </UIChildren>
-    );
-  };
-
-  return (
-    <Modal
-      key={key}
-      animationType="slide"
-      transparent={true}
-      visible={modalVisible}
-      onRequestClose={onClose}
-    >
-      <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>
-        <ScrollView
-          contentContainerStyle={{ flexGrow: 1, paddingBottom: 50 }}
-          style={style('modalContent')}
-          nestedScrollEnabled={true}
-          ref={scrollRef}
-        >
-          <View
-            style={{
-              flex: 1,
-              paddingLeft: 15,
-              paddingRight: 15,
-              paddingTop: 10,
-              paddingBottom: 10,
-            }}
-          >
-            <Content />
-          </View>
-        </ScrollView>
-        {bottom}
-      </SafeAreaView>
-      <UIToast />
-    </Modal>
-  );
-}
-
-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: 18,
-    fontWeight: 'bold',
-    marginLeft: 10,
-  },
-  modalContent: {
-    flex: 1,
-    backgroundColor: 'background',
-  },
-});
+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 UIStatusBar from './UIStatusBar';
+
+interface UIModalType extends ChildType {
+  open?: boolean;
+  dialog?: any;
+}
+
+export default function UIModal({
+  scope,
+  open,
+  dialog,
+  ...props
+}: UIModalType) {
+  let [modalVisible, setModalVisible] = useState(open === true);
+  let [index, setIndex] = useState(0);
+  //v6
+
+  const label = scope.getLabel();
+  const theme = scope.getTheme();
+  const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
+  const scrollRef = useRef(null);
+
+  const style = (part: string, extra?: any) => {
+    let st = { ...styles[part], ...extra };
+
+    return { ...scope.getStyle(part, st) };
+  };
+
+  const onClose = () => {
+    scope.close({ scope, crud: scope.currentDialog?.crud, event: {} });
+  };
+
+  scope.toggleDialog = vis => {
+    modalVisible = vis;
+    setModalVisible(modalVisible);
+  };
+
+  scope.update = () => {
+    setIndex(++index);
+  };
+
+  let curr = scope.currentDialog?.crud;
+  let main = ViewUtils.getCrud('view');
+
+  if (!curr) {
+    return <></>;
+  }
+
+  if (curr.uuid !== main.dialog?.crud?.uuid) {
+    return <></>;
+  }
+
+  const headerRight = ComponentUtils.getDefine(props, 'header', 'right');
+  const bottom = ComponentUtils.getDefine(props, 'bottom');
+
+  scope.put('scrollRef', scrollRef);
+
+  ComponentUtils.setViewScope(scope);
+
+  let color = Utils.nvl(headerStyle.color, 'white');
+  let defaults = { color };
+  let key = `${curr.name}-${index}`;
+
+  let Content = () => {
+    if (dialog?.component) {
+      let Aux = dialog?.component;
+
+      return <Aux crud={curr} />;
+    }
+    return (
+      <UIChildren scope={scope} crud={curr}>
+        {props.children}
+      </UIChildren>
+    );
+  };
+
+  return (
+    <Modal
+      key={key}
+      animationType="slide"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={onClose}
+    >
+      <UIStatusBar />
+      <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>
+        <ScrollView
+          contentContainerStyle={{ flexGrow: 1, paddingBottom: 50 }}
+          style={style('modalContent')}
+          nestedScrollEnabled={true}
+          ref={scrollRef}
+        >
+          <View
+            style={{
+              flex: 1,
+              paddingLeft: 15,
+              paddingRight: 15,
+              paddingTop: 10,
+              paddingBottom: 10,
+            }}
+          >
+            <Content />
+          </View>
+        </ScrollView>
+        {bottom}
+      </SafeAreaView>
+      <UIToast />
+    </Modal>
+  );
+}
+
+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: 18,
+    fontWeight: 'bold',
+    marginLeft: 10,
+  },
+  modalContent: {
+    flex: 1,
+    backgroundColor: 'background',
+  },
+});