react-crud-mobile 1.0.104 → 1.0.106

package/dist/react-crud-mobile.esm.js

@@ -1,6 +1,6 @@
-import React, { useState, createElement, useRef, useEffect, useLayoutEffect } from 'react';
-import { Utils, ScopeUtils, Scope, CrudUtils, ComponentUtils, HtmlUtils } from 'react-crud-utils';
-import { View, StyleSheet, TouchableOpacity, Text, Linking, TouchableHighlight, Switch, TextInput, Image } from 'react-native';
+import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { Utils, ScopeUtils, CrudUtils, HtmlUtils, ComponentUtils } from 'react-crud-utils';
+import { View, StyleSheet, TouchableOpacity, Text, Linking, TouchableHighlight, Switch, TextInput, FlatList, Image } from 'react-native';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { Ionicons as Ionicons$1 } from '@expo/vector-icons';
@@ -125,413 +125,6 @@ var styles = /*#__PURE__*/StyleSheet.create({
   }
 });
 
-function ElGridColumn(props) {
-  var _props$column;
-  var scope = props.scope;
-  var col = Utils.nvl((_props$column = props.column) == null ? void 0 : _props$column.props, {});
-  var _useState = useState(new Scope(col, scope, scope.crud)),
-    colScope = _useState[0];
-  var getStyleClass = function getStyleClass() {
-    var def = Utils.nvl(props.styleClass, "");
-    return "ui-grid-col " + def + " " + colScope.getStyleClass("column");
-  };
-  return /*#__PURE__*/jsx("td", {
-    className: getStyleClass(),
-    style: colScope.getStyle("column"),
-    colSpan: props.colspan,
-    children: /*#__PURE__*/jsx(UIChildren, {
-      scope: scope,
-      children: props.children
-    })
-  });
-}
-
-function ElGridCheck(_ref) {
-  var scope = _ref.scope,
-    value = _ref.value,
-    rowIndex = _ref.rowIndex;
-  var original = scope.original;
-  var _useState = useState(0),
-    index = _useState[0],
-    setIndex = _useState[1];
-  var key = scope.key('check', rowIndex, 's', index);
-  var check = function check() {
-    var cs = scope.crudSearch;
-    if (cs) {
-      if (!cs.selecteds) {
-        cs.selecteds = {};
-      }
-      var itemValue = Utils.nvl(original.itemValue, 'id');
-      var _key = value[itemValue];
-      if (typeof _key !== 'undefined') {
-        if (typeof cs.selecteds[_key] === 'undefined') {
-          cs.selecteds[_key] = value;
-        } else {
-          delete cs.selecteds[_key];
-        }
-      }
-    }
-    setIndex(++index);
-  };
-  var getCheckIcon = function getCheckIcon() {
-    if (isChecked()) {
-      return /*#__PURE__*/jsx(Ionicons, {});
-    }
-    return /*#__PURE__*/jsx(Ionicons, {});
-  };
-  var isChecked = function isChecked() {
-    var cs = scope.crudSearch;
-    if (cs) {
-      if (!cs.selecteds) {
-        cs.selecteds = {};
-      }
-      var itemValue = Utils.nvl(original.itemValue, 'id');
-      var _key2 = value[itemValue];
-      if (typeof _key2 !== 'undefined') {
-        if (typeof cs.selecteds[_key2] !== 'undefined') {
-          return true;
-        }
-      }
-    }
-    return false;
-  };
-  return /*#__PURE__*/jsx(UI.Button, {
-    icon: getCheckIcon(),
-    click: {
-      action: check
-    }
-  }, key);
-}
-
-function ElGridRow(props) {
-  var expansion = props.expansion;
-  var value = props.value;
-  var scope = props.scope;
-  var index = props.index;
-  var original = scope.original;
-  var row = CrudUtils.create('row', {
-    index: index,
-    row: true,
-    itemVar: scope.original.itemVar,
-    parent: scope.crudSearch,
-    data: value
-  });
-  var _useState = useState(false),
-    expanded = _useState[0],
-    setExpanded = _useState[1];
-  var _useState2 = useState(new Scope(scope.original, scope, row)),
-    rowScope = _useState2[0];
-  var getRowStyleClass = function getRowStyleClass() {
-    var s = 'ui-grid-row';
-    s = s + ' ui-grid-row-';
-    if (index % 2 == 0) {
-      s = s + 'even';
-    } else {
-      s = s + 'odd';
-    }
-    return s;
-  };
-  var cols = ComponentUtils.getChild(props, 'Column');
-  var colspan = cols.length;
-  var ExpansionStatus = function ExpansionStatus() {
-    return /*#__PURE__*/jsxs(Fragment, {
-      children: [!expanded && /*#__PURE__*/jsx(Ionicons, {}), expanded && /*#__PURE__*/jsx(Ionicons, {})]
-    });
-  };
-  var onExpansion = function onExpansion() {
-    setExpanded(!expanded);
-  };
-  var hasExpansion = !Utils.isEmpty(expansion);
-  var multiple = original.multiple;
-  if (hasExpansion) colspan++;
-  if (multiple) colspan++;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs("tr", {
-      className: getRowStyleClass(),
-      style: rowScope.getStyle('row'),
-      children: [hasExpansion && /*#__PURE__*/jsx(ElGridColumn, {
-        scope: rowScope,
-        styleClass: "ui-click ui-icon-only ui-expansion",
-        children: /*#__PURE__*/jsx(UI.Button, {
-          icon: /*#__PURE__*/jsx(ExpansionStatus, {}),
-          click: onExpansion
-        })
-      }, 'r' + index + 'e'), multiple && /*#__PURE__*/jsx(ElGridColumn, {
-        scope: rowScope,
-        styleClass: "ui-click ui-icon-only ui-multiple",
-        children: /*#__PURE__*/jsx(ElGridCheck, {
-          scope: scope,
-          value: value,
-          rowIndex: index
-        }, 'check-' + index)
-      }, 'r' + index + 'c'), cols.map(function (col, i) {
-        return /*#__PURE__*/jsx(ElGridColumn, {
-          column: col,
-          scope: rowScope,
-          children: col
-        }, 'r' + index + 'c' + i);
-      })]
-    }), expanded && /*#__PURE__*/jsx("tr", {
-      className: getRowStyleClass(),
-      style: rowScope.getStyle('row'),
-      children: /*#__PURE__*/jsx(ElGridColumn, {
-        scope: rowScope,
-        colspan: colspan,
-        children: /*#__PURE__*/jsx(UIChildren, _extends({}, props, {
-          crud: row,
-          children: expansion
-        }))
-      }, 'r' + index + '-expanded')
-    })]
-  });
-}
-
-function ElGridPaginator(_ref) {
-  var scope = _ref.scope,
-    next = _ref.next,
-    previous = _ref.previous,
-    first = _ref.first,
-    size = _ref.size,
-    last = _ref.last,
-    position = _ref.position;
-  var _useState = useState([10, 20, 30, 50, 100, 200, 500]),
-    sizes = _useState[0];
-  var defaults = {
-    crud: scope.crudSearch,
-    owner: scope,
-    variant: scope.attr('variant', 'text')
-  };
-  var paginatorPosition = Utils.nvl(scope.original.paginatorPosition, 'bottom');
-  if (paginatorPosition !== position) {
-    return /*#__PURE__*/jsx(Fragment, {});
-  }
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(UI.Button, _extends({
-      field: "first",
-      space: 0,
-      rendered: first !== false
-    }, defaults, {
-      click: "first",
-      icon: /*#__PURE__*/jsx(Ionicons, {})
-    })), /*#__PURE__*/jsx(UI.Button, _extends({
-      field: "previous",
-      space: 0,
-      rendered: previous !== false,
-      click: "previous"
-    }, defaults, {
-      icon: /*#__PURE__*/jsx(Ionicons, {})
-    })), /*#__PURE__*/jsx(UI.Select, _extends({
-      field: "size",
-      space: 0,
-      rendered: size !== false,
-      "default": 10
-    }, defaults, {
-      data: sizes,
-      change: "search"
-    })), /*#__PURE__*/jsx(UI.Button, _extends({
-      field: "next",
-      space: 0,
-      rendered: next !== false
-    }, defaults, {
-      click: "next",
-      icon: /*#__PURE__*/jsx(Ionicons, {})
-    })), /*#__PURE__*/jsx(UI.Button, _extends({
-      field: "last",
-      space: 0,
-      rendered: last !== false
-    }, defaults, {
-      click: "last",
-      icon: /*#__PURE__*/jsx(Ionicons, {})
-    }))]
-  });
-}
-
-function ElGridTop(props) {
-  var scope = props.scope;
-  return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/jsxs(UI.Output, {
-      styleClass: "ui-grid-top",
-      children: [/*#__PURE__*/jsxs(UI.Output, {
-        field: "search",
-        position: "left",
-        space: 4,
-        children: [/*#__PURE__*/jsx(UI.Include, _extends({}, props, {
-          "transient": true,
-          name: "top",
-          position: "left"
-        })), /*#__PURE__*/jsx(UI.Text, {
-          field: "query",
-          space: 0,
-          label: "Pesquisar",
-          placeholder: scope.attr('placeholder', 'Pesquisar'),
-          children: /*#__PURE__*/jsx(UI.Define, {
-            name: "right",
-            children: /*#__PURE__*/jsx(UI.Button, {
-              field: "search",
-              icon: /*#__PURE__*/jsx(Ionicons, {}),
-              space: 0,
-              variant: "text",
-              owner: scope,
-              click: 'search'
-            })
-          })
-        })]
-      }), /*#__PURE__*/jsxs(UI.Output, {
-        position: "right",
-        space: 8,
-        children: [/*#__PURE__*/jsx(UI.Include, _extends({}, props, {
-          "transient": true,
-          name: "top",
-          position: "right"
-        })), /*#__PURE__*/jsx(ElGridPaginator, {
-          scope: scope,
-          last: false,
-          first: false,
-          position: "top"
-        })]
-      })]
-    })
-  });
-}
-
-function ElGridFilter(props) {
-  return /*#__PURE__*/jsx(Fragment, {});
-}
-
-function ElGridBotom(props) {
-  var scope = props.scope;
-  var children = props.children;
-  return /*#__PURE__*/jsx("div", {
-    className: "ui-grid-bottom",
-    children: /*#__PURE__*/jsxs("div", {
-      className: "ui-grid-bottom-inner",
-      children: [/*#__PURE__*/jsx(UI.Include, _extends({}, props, {
-        "transient": true,
-        name: "bottomLeft"
-      })), /*#__PURE__*/jsx(ElGridPaginator, {
-        scope: scope,
-        position: "bottom",
-        children: children
-      }), /*#__PURE__*/jsx(UI.Include, _extends({}, props, {
-        "transient": true,
-        name: "bottomRight"
-      }))]
-    })
-  });
-}
-
-function UIIcon(props) {
-  var handlePress = function handlePress() {
-    Linking.openURL('https://reactnative.dev/');
-  };
-  return /*#__PURE__*/jsx(TouchableOpacity, {
-    onPress: handlePress,
-    children: /*#__PURE__*/jsx(Text, {
-      style: styles$1.link,
-      children: "Clique aqui para acessar o React Native"
-    })
-  });
-}
-var styles$1 = {
-  link: {}
-};
-
-function ElLabel(props) {
-  var scope = props.scope;
-  var original = scope.original;
-  var defaultPos = 'outside';
-  var elPos = Utils.nvl(original.labelPos, defaultPos);
-  var lbPos = Utils.nvl(props.position, defaultPos);
-  if (elPos != lbPos) {
-    return /*#__PURE__*/jsx(Fragment, {});
-  }
-  var CustomIcon = function CustomIcon() {
-    if (!scope.is('type', 'list', 'grid')) {
-      return /*#__PURE__*/jsx(Fragment, {});
-    }
-    if (typeof original.icon === 'string') {
-      return /*#__PURE__*/jsx("div", {
-        className: "ui-label-icon",
-        children: /*#__PURE__*/jsx(UIIcon, {
-          className: scope.getIcon()
-        })
-      });
-    }
-    return /*#__PURE__*/jsx("div", {
-      className: "ui-label-icon",
-      children: original.icon
-    });
-  };
-  var label = scope.getLabel();
-  return /*#__PURE__*/jsxs("div", {
-    className: 'ui-label ui-label-' + lbPos,
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "ui-label-left",
-      children: [/*#__PURE__*/jsx(UI.Include, _extends({}, props, {
-        "transient": true,
-        name: "label",
-        position: "left"
-      })), /*#__PURE__*/jsx(CustomIcon, {}), label && /*#__PURE__*/jsx("div", {
-        className: "ui-label-value",
-        children: label
-      })]
-    }), /*#__PURE__*/jsx("div", {
-      className: "ui-label-right",
-      children: /*#__PURE__*/jsx(UI.Include, _extends({}, props, {
-        "transient": true,
-        name: "label",
-        position: "right"
-      }))
-    })]
-  });
-}
-
-function ElGrid(props) {
-  var scope = props.scope;
-  var items = scope.getItems();
-  var expansion = ComponentUtils.getDefine(props, 'expansion');
-  return /*#__PURE__*/jsxs("div", {
-    className: scope.getStyleClass('inner'),
-    style: scope.getStyle('inner'),
-    children: [/*#__PURE__*/jsx(ElLabel, _extends({}, props, {
-      scope: scope,
-      position: "outside"
-    })), /*#__PURE__*/jsxs("div", {
-      className: scope.getStyleClass('child'),
-      style: scope.getStyle('child'),
-      children: [/*#__PURE__*/jsx(ElLabel, _extends({}, props, {
-        scope: scope,
-        position: "inside"
-      })), /*#__PURE__*/jsxs("div", {
-        className: "ui-data",
-        children: [/*#__PURE__*/jsx(ElGridTop, _extends({}, props, {
-          scope: scope
-        })), /*#__PURE__*/jsx(ElGridFilter, {
-          scope: scope
-        }), /*#__PURE__*/jsx("div", {
-          className: "ui-grid-data",
-          children: /*#__PURE__*/jsx("table", {
-            className: "ui-grid ui-table",
-            children: /*#__PURE__*/jsx("tbody", {
-              children: items.map(function (row, i) {
-                return /*#__PURE__*/createElement(ElGridRow, _extends({}, props, {
-                  expansion: expansion,
-                  key: 'r' + i,
-                  scope: scope,
-                  value: row,
-                  index: i
-                }));
-              })
-            })
-          })
-        })]
-      }), /*#__PURE__*/jsx(ElGridBotom, _extends({}, props, {
-        scope: scope
-      }))]
-    })]
-  });
-}
-
 function ElTabs(props) {
   var scope = props.scope;
   var _useState = useState(0),
@@ -703,12 +296,12 @@ function UIAutoComplete(props) {
   return /*#__PURE__*/jsx(TouchableOpacity, {
     onPress: handlePress,
     children: /*#__PURE__*/jsx(Text, {
-      style: styles$2.link,
+      style: styles$1.link,
       children: "Clique aqui para acessar o React Native"
     })
   });
 }
-var styles$2 = {
+var styles$1 = {
   link: {}
 };
 
@@ -720,59 +313,23 @@ function UIComplete(_ref) {
   });
 }
 
-function ElRepeatRow(props) {
-  var value = props.value;
-  var scope = props.scope;
-  var index = props.index;
-  var row = CrudUtils.create("row", {
-    index: index,
-    row: true,
-    itemVar: scope.original.itemVar,
-    parent: scope.crudSearch,
-    data: value
-  });
-  var _useState = useState(new Scope(scope.original, scope, row)),
-    rowScope = _useState[0];
-  var getRowStyleClass = function getRowStyleClass() {
-    var s = rowScope.getStyleClass("row");
-    s = s + " ui-repeat-row-";
-    if (index % 2 == 0) {
-      s = s + "even";
-    } else {
-      s = s + "odd";
-    }
-    return s;
+function UILink(props) {
+  var handlePress = function handlePress() {
+    Linking.openURL('https://reactnative.dev/');
   };
-  return /*#__PURE__*/jsx("div", {
-    className: getRowStyleClass(),
-    style: rowScope.getStyle("row"),
-    children: /*#__PURE__*/jsx(UIChildren, _extends({
-      "transient": true
-    }, props, {
-      crud: row,
-      children: props.children
-    }))
-  });
-}
-
-function ElRepeat(props) {
-  var scope = props.scope;
-  var items = scope.getItems();
-  return /*#__PURE__*/jsx("div", {
-    className: scope.getStyleClass('inner'),
-    style: scope.getStyle('inner'),
-    children: items.map(function (row, i) {
-      return /*#__PURE__*/createElement(ElRepeatRow, _extends({}, props, {
-        key: 'r' + i,
-        scope: scope,
-        value: row,
-        index: i
-      }));
+  return /*#__PURE__*/jsx(TouchableOpacity, {
+    onPress: handlePress,
+    children: /*#__PURE__*/jsx(Text, {
+      style: styles$2.link,
+      children: "Clique aqui para acessar o React Native"
     })
   });
 }
+var styles$2 = {
+  link: {}
+};
 
-function UILink(props) {
+function UIIcon(props) {
   var handlePress = function handlePress() {
     Linking.openURL('https://reactnative.dev/');
   };
@@ -951,6 +508,46 @@ var styles$7 = /*#__PURE__*/StyleSheet.create({
   }
 });
 
+function UIList(props) {
+  var scope = props.scope;
+  var items = scope.getItems();
+  return /*#__PURE__*/jsx(FlatList, {
+    data: items // Dados da lista
+    ,
+    keyExtractor: function keyExtractor(item) {
+      return item.id;
+    } // Chave única
+    ,
+    renderItem: function renderItem(_ref) {
+      var item = _ref.item;
+      return /*#__PURE__*/jsx(View, {
+        style: styles$8.item,
+        children: /*#__PURE__*/jsx(Text, {
+          style: styles$8.text,
+          children: item.name
+        })
+      });
+    }
+  });
+}
+var styles$8 = /*#__PURE__*/StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#fff'
+  },
+  item: {
+    padding: 15,
+    marginVertical: 8,
+    backgroundColor: '#f9c2ff',
+    borderRadius: 8
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold'
+  }
+});
+
 function UIElement(props) {
   var _useState = useState(ScopeUtils.create(props)),
     scope = _useState[0];
@@ -969,10 +566,7 @@ function UIElement(props) {
     setIndex(++index);
   };
   var router = {
-    list: ElGrid,
-    grid: ElGrid,
-    label: ElLabel,
-    repeat: ElRepeat,
+    list: UIList,
     tabs: ElTabs,
     chart: ElChart
   };
@@ -1060,7 +654,7 @@ function UIElement(props) {
     var _elementStyle$type, _elementStyle$type2;
     var type = Utils.nvl(original.type, 'none');
     var key = Utils.nvl(part, 'root');
-    var def = _extends({}, styles$8[key], elementStyle == null || (_elementStyle$type = elementStyle[type]) == null ? void 0 : _elementStyle$type[key]);
+    var def = _extends({}, styles$9[key], elementStyle == null || (_elementStyle$type = elementStyle[type]) == null ? void 0 : _elementStyle$type[key]);
     var hasChild = hasChildren();
     if (!part && !hasChild) {
       def = _extends({}, def);
@@ -1260,7 +854,7 @@ elementStyle.card = /*#__PURE__*/StyleSheet.create({
     paddingTop: 5
   }
 });
-var styles$8 = /*#__PURE__*/StyleSheet.create({
+var styles$9 = /*#__PURE__*/StyleSheet.create({
   root: {
     gap: 5,
     flexDirection: 'column',
@@ -1287,7 +881,7 @@ var withChildStyles = /*#__PURE__*/StyleSheet.create({
   }
 });
 
-function ElInclude(props) {
+function UIInclude(props) {
   if (props.rendered === false) {
     return /*#__PURE__*/jsx(Fragment, {});
   }
@@ -1341,7 +935,7 @@ var UI = {
     }));
   },
   Include: function Include(props) {
-    return /*#__PURE__*/jsx(ElInclude, _extends({}, props));
+    return /*#__PURE__*/jsx(UIInclude, _extends({}, props));
   },
   Column: function Column(_ref) {
     var props = _objectWithoutPropertiesLoose(_ref, _excluded);