react-crud-mobile 1.0.341 → 1.0.343

package/dist/elements/UI.d.ts

@@ -11,6 +11,7 @@ import { ButtonType } from 'react-crud-utils';
 import { LinkType } from 'react-crud-utils';
 declare const UI: {
     List: (props: ListType) => import("react").JSX.Element;
+    Row: (props: UserType) => import("react").JSX.Element;
     Value: (props: UserType) => import("react").JSX.Element;
     Label: (props: UserType) => import("react").JSX.Element;
     Repeat: (props: ListType) => import("react").JSX.Element;

package/dist/react-crud-mobile.cjs.development.js

@@ -936,6 +936,98 @@ function UIQuantity(props) {
   });
 }
 
+function UIModal(props) {
+  var _useState = React.useState(false),
+    modalVisible = _useState[0],
+    setModalVisible = _useState[1];
+  var scope = props.scope;
+  var label = scope.getLabel();
+  var theme = reactCrudUtils.useTheme();
+  var style = function style(part, extra) {
+    return _extends({}, styles$a[part], scope.getStyle(part), extra);
+  };
+  var toggle = function toggle(vis) {
+    modalVisible = vis;
+    setModalVisible(modalVisible);
+  };
+  scope.show = function () {
+    toggle(true);
+  };
+  scope.hide = function () {
+    toggle(true);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(reactNative.Modal, {
+    animationType: "slide",
+    transparent: true,
+    visible: modalVisible,
+    onRequestClose: function onRequestClose() {
+      return setModalVisible(false);
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(reactNative.StatusBar, {
+      barStyle: "dark-content",
+      backgroundColor: theme.colors.primary
+    }), /*#__PURE__*/jsxRuntime.jsxs(reactNative.SafeAreaView, {
+      style: style('modalSafe'),
+      children: [/*#__PURE__*/jsxRuntime.jsxs(reactNative.View, {
+        style: style('modalHeader'),
+        children: [/*#__PURE__*/jsxRuntime.jsx(reactNative.TouchableOpacity, {
+          onPress: function onPress() {
+            return setModalVisible(false);
+          },
+          style: style('modalCloseButton'),
+          children: /*#__PURE__*/jsxRuntime.jsx(reactNative.Text, {
+            style: style('modalCloseText'),
+            children: "X"
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(reactNative.Text, {
+          style: style('modalTitle'),
+          children: label
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
+        style: style('modalContent'),
+        children: /*#__PURE__*/jsxRuntime.jsx(UIChildren, {
+          scope: scope,
+          children: props.children
+        })
+      })]
+    })]
+  });
+}
+var styles$a = /*#__PURE__*/reactNative.StyleSheet.create({
+  modalSafe: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+    paddingTop: reactNative.StatusBar.currentHeight || 0
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 15,
+    backgroundColor: '#6200ea'
+  },
+  modalCloseButton: {
+    padding: 10
+  },
+  modalCloseText: {
+    fontSize: 18,
+    color: 'white'
+  },
+  modalTitle: {
+    fontSize: 18,
+    color: 'white',
+    fontWeight: 'bold',
+    marginLeft: 10
+  },
+  modalContent: {
+    flex: 1,
+    width: '100%',
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    padding: 20
+  }
+});
+
 function UIElement(props) {
   var _original$list, _original$load;
   var _useState = React.useState(reactCrudUtils.ScopeUtils.create(props)),
@@ -956,6 +1048,7 @@ function UIElement(props) {
   };
   var router = {
     list: UIList,
+    dialog: UIModal,
     repeat: UIList,
     tabs: ElTabs,
     chart: ElChart
@@ -1045,7 +1138,7 @@ function UIElement(props) {
     var _elementStyle$type;
     var type = reactCrudUtils.Utils.nvl(original.type, 'none');
     var key = reactCrudUtils.Utils.nvl(part, 'root');
-    var def = _extends({}, styles$a[key], elementStyle == null || (_elementStyle$type = elementStyle[type]) == null ? void 0 : _elementStyle$type[key]);
+    var def = _extends({}, styles$b[key], elementStyle == null || (_elementStyle$type = elementStyle[type]) == null ? void 0 : _elementStyle$type[key]);
     var hasChild = hasChildren();
     if (!part && !hasChild) {
       def = _extends({}, def);
@@ -1241,7 +1334,8 @@ elementStyle.card = /*#__PURE__*/reactNative.StyleSheet.create({
     paddingTop: 5,
     alignSelf: 'flex-start',
     flexDirection: 'row',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    gap: 10
   }
 });
 elementStyle.input = /*#__PURE__*/reactNative.StyleSheet.create({
@@ -1285,7 +1379,7 @@ elementStyle.toggle = /*#__PURE__*/reactNative.StyleSheet.create({
   })
 });
 elementStyle.list = /*#__PURE__*/_extends({}, elementStyle.card);
-var styles$a = /*#__PURE__*/reactNative.StyleSheet.create({
+var styles$b = /*#__PURE__*/reactNative.StyleSheet.create({
   root: {
     gap: 5,
     flexDirection: 'column',
@@ -1300,8 +1394,7 @@ var styles$a = /*#__PURE__*/reactNative.StyleSheet.create({
     paddingBottom: 5
   },
   inner: {
-    width: '100%',
-    marginBottom: 10
+    width: '100%'
   }
 });
 var withChildStyles = /*#__PURE__*/reactNative.StyleSheet.create({
@@ -1358,6 +1451,11 @@ var UI = {
       type: "list"
     }));
   },
+  Row: function Row(props) {
+    return /*#__PURE__*/jsxRuntime.jsx(UIElement, _extends({}, props, {
+      type: "row"
+    }));
+  },
   Value: function Value(props) {
     return /*#__PURE__*/jsxRuntime.jsx(UIElement, _extends({}, props, {
       type: "value"