react-crud-mobile 0.1.7

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

@@ -0,0 +1,1260 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React$1 = require('react');
+var React$1__default = _interopDefault(React$1);
+var reactCrudUtils = require('react-crud-utils');
+var Ionicons = _interopDefault(require('@expo/vector-icons/Ionicons'));
+var reactNative = require('react-native');
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function UIChildren(props) {
+  var _useState = React$1.useState(reactCrudUtils.Utils.nvl(props.scope, reactCrudUtils.ScopeUtils.create(props))),
+    scope = _useState[0];
+  var crud = reactCrudUtils.Utils.nvl(props.crud, scope.crud);
+  var validateScope = reactCrudUtils.Utils.nvl(props.validateScope, "global");
+  var name = reactCrudUtils.Utils.nvl(props.part, "child");
+  if (scope.isInput()) {
+    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null);
+  }
+  var Paint = function Paint(_ref) {
+    var child = _ref.child;
+    if (!child) {
+      return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null);
+    }
+    if (typeof child === "string") {
+      return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, child);
+    }
+    var Custom = child.type;
+    var pps = _extends({}, child.props);
+    delete pps.children;
+    if (typeof Custom === "string") {
+      if (reactCrudUtils.Utils.isEmpty(child.props.children)) {
+        return /*#__PURE__*/React$1__default.createElement(Custom, pps);
+      }
+      return /*#__PURE__*/React$1__default.createElement(Custom, pps, /*#__PURE__*/React$1__default.createElement(UIChildren, _extends({
+        "transient": true,
+        validateScope: validateScope
+      }, child.props, {
+        scope: scope,
+        crud: crud
+      })));
+    } else if (typeof Custom === "function") {
+      return /*#__PURE__*/React$1__default.createElement(Custom, _extends({
+        validateScope: validateScope
+      }, child.props, {
+        parent: scope,
+        crud: crud
+      }));
+    }
+    if (!reactCrudUtils.Utils.isEmpty(child.props.children)) {
+      return /*#__PURE__*/React$1__default.createElement(UIChildren, _extends({
+        validateScope: validateScope
+      }, child.props, {
+        scope: scope,
+        crud: crud,
+        "transient": true
+      }));
+    }
+    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null);
+  };
+  var Draw = function Draw() {
+    if (props.elements) {
+      return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, Object.entries(props.elements).map(function (t, k) {
+        return /*#__PURE__*/React$1__default.createElement(UIElement, _extends({
+          crud: crud
+        }, t[1]));
+      }));
+    }
+    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, React$1__default.Children.map(props.children, function (child) {
+      return /*#__PURE__*/React$1__default.createElement(Paint, {
+        child: child
+      });
+    }));
+  };
+  if (props["transient"]) {
+    return /*#__PURE__*/React$1__default.createElement(Draw, null);
+  }
+  if (reactCrudUtils.Utils.isEmpty(props.children) && reactCrudUtils.Utils.isEmpty(props.elements)) {
+    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null);
+  }
+  return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement("div", _extends({
+    className: scope.getStyleClass(name),
+    style: scope.getStyle(name)
+  }, props.childProps), /*#__PURE__*/React$1__default.createElement(Draw, null)));
+}
+
+function ElGridColumn(props) {
+  var _props$column;
+  var scope = props.scope;
+  var col = reactCrudUtils.Utils.nvl((_props$column = props.column) == null ? void 0 : _props$column.props, {});
+  var _useState = React$1.useState(new reactCrudUtils.Scope(col, scope, scope.crud)),
+    colScope = _useState[0];
+  var getStyleClass = function getStyleClass() {
+    var def = reactCrudUtils.Utils.nvl(props.styleClass, "");
+    return "ui-grid-col " + def + " " + colScope.getStyleClass("column");
+  };
+  return /*#__PURE__*/React$1__default.createElement("td", {
+    className: getStyleClass(),
+    style: colScope.getStyle("column"),
+    colSpan: props.colspan
+  }, /*#__PURE__*/React$1__default.createElement(UIChildren, {
+    scope: scope
+  }, props.children));
+}
+
+function ElGridCheck(_ref) {
+  var scope = _ref.scope,
+    value = _ref.value,
+    rowIndex = _ref.rowIndex;
+  var original = scope.original;
+  var _useState = React$1.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 = reactCrudUtils.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__*/React.createElement(Ionicons, null);
+    }
+    return /*#__PURE__*/React.createElement(Ionicons, null);
+  };
+  var isChecked = function isChecked() {
+    var cs = scope.crudSearch;
+    if (cs) {
+      if (!cs.selecteds) {
+        cs.selecteds = {};
+      }
+      var itemValue = reactCrudUtils.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__*/React.createElement(UI.Button, {
+    key: key,
+    icon: getCheckIcon(),
+    click: {
+      action: check
+    }
+  });
+}
+
+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 = reactCrudUtils.CrudUtils.create('row', {
+    index: index,
+    row: true,
+    itemVar: scope.original.itemVar,
+    parent: scope.crudSearch,
+    data: value
+  });
+  var _useState = React$1.useState(false),
+    expanded = _useState[0],
+    setExpanded = _useState[1];
+  var _useState2 = React$1.useState(new reactCrudUtils.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 = reactCrudUtils.ComponentUtils.getChild(props, 'Column');
+  var colspan = cols.length;
+  var ExpansionStatus = function ExpansionStatus() {
+    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, !expanded && /*#__PURE__*/React$1__default.createElement(Ionicons, null), expanded && /*#__PURE__*/React$1__default.createElement(Ionicons, null));
+  };
+  var onExpansion = function onExpansion() {
+    setExpanded(!expanded);
+  };
+  var hasExpansion = !reactCrudUtils.Utils.isEmpty(expansion);
+  var multiple = original.multiple;
+  if (hasExpansion) colspan++;
+  if (multiple) colspan++;
+  return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement("tr", {
+    className: getRowStyleClass(),
+    style: rowScope.getStyle('row')
+  }, hasExpansion && /*#__PURE__*/React$1__default.createElement(ElGridColumn, {
+    key: 'r' + index + 'e',
+    scope: rowScope,
+    styleClass: "ui-click ui-icon-only ui-expansion"
+  }, /*#__PURE__*/React$1__default.createElement(UI.Button, {
+    icon: /*#__PURE__*/React$1__default.createElement(ExpansionStatus, null),
+    click: onExpansion
+  })), multiple && /*#__PURE__*/React$1__default.createElement(ElGridColumn, {
+    key: 'r' + index + 'c',
+    scope: rowScope,
+    styleClass: "ui-click ui-icon-only ui-multiple"
+  }, /*#__PURE__*/React$1__default.createElement(ElGridCheck, {
+    key: 'check-' + index,
+    scope: scope,
+    value: value,
+    rowIndex: index
+  })), cols.map(function (col, i) {
+    return /*#__PURE__*/React$1__default.createElement(ElGridColumn, {
+      column: col,
+      key: 'r' + index + 'c' + i,
+      scope: rowScope
+    }, col);
+  })), expanded && /*#__PURE__*/React$1__default.createElement("tr", {
+    className: getRowStyleClass(),
+    style: rowScope.getStyle('row')
+  }, /*#__PURE__*/React$1__default.createElement(ElGridColumn, {
+    key: 'r' + index + '-expanded',
+    scope: rowScope,
+    colspan: colspan
+  }, /*#__PURE__*/React$1__default.createElement(UIChildren, _extends({}, props, {
+    crud: row
+  }), expansion))));
+}
+
+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 = React$1.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 = reactCrudUtils.Utils.nvl(scope.original.paginatorPosition, 'bottom');
+  if (paginatorPosition !== position) {
+    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null);
+  }
+  return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement(UI.Button, _extends({
+    field: "first",
+    space: 0,
+    rendered: first !== false
+  }, defaults, {
+    click: "first",
+    icon: /*#__PURE__*/React$1__default.createElement(Ionicons, null)
+  })), /*#__PURE__*/React$1__default.createElement(UI.Button, _extends({
+    field: "previous",
+    space: 0,
+    rendered: previous !== false,
+    click: "previous"
+  }, defaults, {
+    icon: /*#__PURE__*/React$1__default.createElement(Ionicons, null)
+  })), /*#__PURE__*/React$1__default.createElement(UI.Select, _extends({
+    field: "size",
+    space: 0,
+    rendered: size !== false,
+    "default": 10
+  }, defaults, {
+    data: sizes,
+    change: "search"
+  })), /*#__PURE__*/React$1__default.createElement(UI.Button, _extends({
+    field: "next",
+    space: 0,
+    rendered: next !== false
+  }, defaults, {
+    click: "next",
+    icon: /*#__PURE__*/React$1__default.createElement(Ionicons, null)
+  })), /*#__PURE__*/React$1__default.createElement(UI.Button, _extends({
+    field: "last",
+    space: 0,
+    rendered: last !== false
+  }, defaults, {
+    click: "last",
+    icon: /*#__PURE__*/React$1__default.createElement(Ionicons, null)
+  })));
+}
+
+function ElGridTop(props) {
+  var scope = props.scope;
+  return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement(UI.Output, {
+    styleClass: "ui-grid-top"
+  }, /*#__PURE__*/React$1__default.createElement(UI.Output, {
+    field: "search",
+    position: "left",
+    space: 4
+  }, /*#__PURE__*/React$1__default.createElement(UI.Include, _extends({}, props, {
+    "transient": true,
+    name: "top",
+    position: "left"
+  })), /*#__PURE__*/React$1__default.createElement(UI.Text, {
+    field: "query",
+    space: 0,
+    label: "Pesquisar",
+    placeholder: scope.attr('placeholder', 'Pesquisar')
+  }, /*#__PURE__*/React$1__default.createElement(UI.Define, {
+    name: "right"
+  }, /*#__PURE__*/React$1__default.createElement(UI.Button, {
+    field: "search",
+    icon: /*#__PURE__*/React$1__default.createElement(Ionicons, null),
+    space: 0,
+    variant: "text",
+    owner: scope,
+    click: 'search'
+  })))), /*#__PURE__*/React$1__default.createElement(UI.Output, {
+    position: "right",
+    space: 8
+  }, /*#__PURE__*/React$1__default.createElement(UI.Include, _extends({}, props, {
+    "transient": true,
+    name: "top",
+    position: "right"
+  })), /*#__PURE__*/React$1__default.createElement(ElGridPaginator, {
+    scope: scope,
+    last: false,
+    first: false,
+    position: "top"
+  }))));
+}
+
+function ElGridFilter(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+}
+
+function ElGridBotom(props) {
+  var scope = props.scope;
+  var children = props.children;
+  return /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-grid-bottom"
+  }, /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-grid-bottom-inner"
+  }, /*#__PURE__*/React$1__default.createElement(UI.Include, _extends({}, props, {
+    "transient": true,
+    name: "bottomLeft"
+  })), /*#__PURE__*/React$1__default.createElement(ElGridPaginator, {
+    scope: scope,
+    position: "bottom"
+  }, children), /*#__PURE__*/React$1__default.createElement(UI.Include, _extends({}, props, {
+    "transient": true,
+    name: "bottomRight"
+  }))));
+}
+
+function Icon(props) {
+  var handlePress = function handlePress() {
+    reactNative.Linking.openURL('https://reactnative.dev/');
+  };
+  return /*#__PURE__*/React$1__default.createElement(reactNative.TouchableOpacity, {
+    onPress: handlePress
+  }, /*#__PURE__*/React$1__default.createElement(reactNative.Text, {
+    style: styles.link
+  }, "Clique aqui para acessar o React Native"));
+}
+var styles = {
+  link: {}
+};
+
+function ElLabel(props) {
+  var scope = props.scope;
+  var original = scope.original;
+  var defaultPos = 'outside';
+  var elPos = reactCrudUtils.Utils.nvl(original.labelPos, defaultPos);
+  var lbPos = reactCrudUtils.Utils.nvl(props.position, defaultPos);
+  if (elPos != lbPos) {
+    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null);
+  }
+  var CustomIcon = function CustomIcon() {
+    if (!scope.is('type', 'list', 'grid')) {
+      return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null);
+    }
+    if (typeof original.icon === 'string') {
+      return /*#__PURE__*/React$1__default.createElement("div", {
+        className: "ui-label-icon"
+      }, /*#__PURE__*/React$1__default.createElement(Icon, {
+        className: scope.getIcon()
+      }));
+    }
+    return /*#__PURE__*/React$1__default.createElement("div", {
+      className: "ui-label-icon"
+    }, original.icon);
+  };
+  var label = scope.getLabel();
+  return /*#__PURE__*/React$1__default.createElement("div", {
+    className: 'ui-label ui-label-' + lbPos
+  }, /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-label-left"
+  }, /*#__PURE__*/React$1__default.createElement(UI.Include, _extends({}, props, {
+    "transient": true,
+    name: "label",
+    position: "left"
+  })), /*#__PURE__*/React$1__default.createElement(CustomIcon, null), label && /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-label-value"
+  }, label)), /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-label-right"
+  }, /*#__PURE__*/React$1__default.createElement(UI.Include, _extends({}, props, {
+    "transient": true,
+    name: "label",
+    position: "right"
+  }))));
+}
+
+function ElGrid(props) {
+  var scope = props.scope;
+  var items = scope.getItems();
+  var expansion = reactCrudUtils.ComponentUtils.getDefine(props, 'expansion');
+  return /*#__PURE__*/React$1__default.createElement("div", {
+    className: scope.getStyleClass('inner'),
+    style: scope.getStyle('inner')
+  }, /*#__PURE__*/React$1__default.createElement(ElLabel, _extends({}, props, {
+    scope: scope,
+    position: "outside"
+  })), /*#__PURE__*/React$1__default.createElement("div", {
+    className: scope.getStyleClass('child'),
+    style: scope.getStyle('child')
+  }, /*#__PURE__*/React$1__default.createElement(ElLabel, _extends({}, props, {
+    scope: scope,
+    position: "inside"
+  })), /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-data"
+  }, /*#__PURE__*/React$1__default.createElement(ElGridTop, _extends({}, props, {
+    scope: scope
+  })), /*#__PURE__*/React$1__default.createElement(ElGridFilter, {
+    scope: scope
+  }), /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-grid-data"
+  }, /*#__PURE__*/React$1__default.createElement("table", {
+    className: "ui-grid ui-table"
+  }, /*#__PURE__*/React$1__default.createElement("tbody", null, items.map(function (row, i) {
+    return /*#__PURE__*/React$1__default.createElement(ElGridRow, _extends({}, props, {
+      expansion: expansion,
+      key: 'r' + i,
+      scope: scope,
+      value: row,
+      index: i
+    }));
+  }))))), /*#__PURE__*/React$1__default.createElement(ElGridBotom, _extends({}, props, {
+    scope: scope
+  }))));
+}
+
+function ElInclude(props) {
+  if (props.rendered === false) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  var includes = reactCrudUtils.ComponentUtils.getDefine(props, props.name, props.position);
+  if (reactCrudUtils.Utils.isEmpty(includes)) {
+    includes = props["default"];
+  }
+  if (!reactCrudUtils.Utils.isEmpty(includes)) {
+    var Aux = function Aux(tagProp) {
+      var Tag = props.tag;
+      if (!reactCrudUtils.Utils.isEmpty(Tag)) {
+        return /*#__PURE__*/React.createElement(Tag, tagProp, tagProp.children);
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, null, tagProp.children);
+    };
+    return /*#__PURE__*/React.createElement(Aux, props.tagProps, /*#__PURE__*/React.createElement(UIChildren, _extends({
+      "transient": true
+    }, props, {
+      scope: props.scope,
+      crud: props.crud,
+      part: props.name
+    }), includes));
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, includes);
+}
+
+function ElCard(props) {
+  var scope = props.scope;
+  return /*#__PURE__*/React$1__default.createElement("div", {
+    className: scope.getStyleClass('inner'),
+    style: scope.getStyle('inner')
+  }, /*#__PURE__*/React$1__default.createElement(ElLabel, _extends({}, props, {
+    scope: scope
+  })), /*#__PURE__*/React$1__default.createElement(UIChildren, _extends({}, props, {
+    scope: scope
+  })), /*#__PURE__*/React$1__default.createElement("div", {
+    className: scope.getStyleClass('bottom'),
+    style: scope.getStyle('bottom')
+  }, /*#__PURE__*/React$1__default.createElement(ElInclude, _extends({}, props, {
+    scope: scope,
+    name: "bottom"
+  }))));
+}
+
+function ElTabs(props) {
+  var scope = props.scope;
+  var _useState = React$1.useState(0),
+    selectedIndex = _useState[0],
+    setSelectedIndex = _useState[1];
+  var element = scope.original;
+  var items = scope.getItems();
+  var counter = 0;
+  var tabs = [];
+  var _useState2 = React$1.useState(null),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  var onChangeTab = function onChangeTab(tab, validate) {
+    if (validate === void 0) {
+      validate = true;
+    }
+    if (tab) {
+      scope.execute({
+        event: {
+          validate: validate,
+          validateScope: element.validateScope,
+          action: function action() {
+            scope.changeValue(tab.data);
+            selected = tab;
+            selectedIndex = tab.index;
+            setSelectedIndex(selectedIndex);
+            setSelected(tab);
+          }
+        }
+      });
+    }
+  };
+  var getStyleClass = function getStyleClass(t) {
+    var _selected;
+    var s = 'ui-tabs-item ui-click';
+    if (((_selected = selected) == null ? void 0 : _selected.index) === t.index) {
+      s = s + ' ui-tab-selected';
+    }
+    return s;
+  };
+  var addTab = function addTab(child, item) {
+    var original = _extends({}, child.props);
+    if (!item) {
+      item = scope.crud.data;
+    }
+    var crudTab = reactCrudUtils.CrudUtils.create('tabs', {
+      data: item,
+      changed: item,
+      parent: scope.crud
+    });
+    var element = reactCrudUtils.Utils.resolve(original, crudTab);
+    if (element.rendered === false) {
+      return;
+    }
+    tabs.push(_extends({}, element, {
+      child: child,
+      element: element,
+      original: original,
+      index: counter++,
+      data: item
+    }));
+  };
+  React$1__default.Children.map(props.children, function (child, index) {
+    if (reactCrudUtils.Utils.isEmpty(items)) {
+      addTab(child, {});
+    } else {
+      for (var i in items) {
+        var o = items[i];
+        addTab(child, o);
+      }
+    }
+  });
+  if (!selected) {
+    onChangeTab(tabs[selectedIndex], false);
+  }
+  var nav = function nav(i) {
+    var t = tabs[selectedIndex + i];
+    onChangeTab(t);
+  };
+  var previous = function previous() {
+    nav(-1);
+  };
+  var next = function next() {
+    nav(1);
+  };
+  var isStepper = element.layout === 'stepper';
+  return /*#__PURE__*/React$1__default.createElement("div", {
+    className: scope.getStyleClass('inner'),
+    style: scope.getStyle('inner')
+  }, /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-tabs-content"
+  }, /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-tabs-items"
+  }, tabs.map(function (t, i) {
+    return /*#__PURE__*/React$1__default.createElement("div", {
+      key: reactCrudUtils.Utils.key(element.id, 'tab', i),
+      className: getStyleClass(t),
+      onClick: function onClick() {
+        onChangeTab(t);
+      }
+    }, isStepper && /*#__PURE__*/React$1__default.createElement("div", {
+      className: "ui-tab-item-divisor"
+    }), /*#__PURE__*/React$1__default.createElement("div", {
+      className: "ui-tab-item-inner"
+    }, isStepper && /*#__PURE__*/React$1__default.createElement("div", {
+      className: "ui-step-line"
+    }), /*#__PURE__*/React$1__default.createElement("div", {
+      className: "ui-tab-item-label"
+    }, isStepper ? t.index + 1 : t.label)));
+  })), selected && /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, isStepper && /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-tabs-label"
+  }, selected.label), /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-tabs-area"
+  }, /*#__PURE__*/React$1__default.createElement(UIChildren, _extends({}, props, {
+    scope: scope
+  }), selected.child)), element.layout === 'stepper' && /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-tabs-actions"
+  }, /*#__PURE__*/React$1__default.createElement(UI.Output, {
+    space: 6,
+    layout: "left"
+  }, /*#__PURE__*/React$1__default.createElement(UI.Include, _extends({}, props, {
+    "transient": true,
+    name: "left",
+    "default": /*#__PURE__*/React$1__default.createElement(UI.Button, {
+      rendered: selectedIndex > 0,
+      icon: /*#__PURE__*/React$1__default.createElement(Ionicons, null),
+      click: previous
+    })
+  }))), /*#__PURE__*/React$1__default.createElement(UI.Output, {
+    space: 6,
+    layout: "right"
+  }, /*#__PURE__*/React$1__default.createElement(UI.Include, _extends({}, props, {
+    "transient": true,
+    name: "right",
+    "default": /*#__PURE__*/React$1__default.createElement(UI.Button, {
+      rendered: selectedIndex < tabs.length - 1,
+      icon: /*#__PURE__*/React$1__default.createElement(Ionicons, null),
+      click: next
+    })
+  })))))));
+}
+
+function ElChart(props) {
+  var scope = props.scope;
+  var items = scope.getItems();
+  var columns = reactCrudUtils.Utils.asList(scope.original.columns);
+  return /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-chart-data"
+  });
+}
+
+function AutoComplete(props) {
+  var handlePress = function handlePress() {
+    reactNative.Linking.openURL('https://reactnative.dev/');
+  };
+  return /*#__PURE__*/React$1__default.createElement(reactNative.TouchableOpacity, {
+    onPress: handlePress
+  }, /*#__PURE__*/React$1__default.createElement(reactNative.Text, {
+    style: styles$1.link
+  }, "Clique aqui para acessar o React Native"));
+}
+var styles$1 = {
+  link: {}
+};
+
+function UIComplete(_ref) {
+  var defaultsInput = _ref.defaultsInput,
+    defaultsUI = _ref.defaultsUI;
+  return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement(AutoComplete, _extends({}, defaultsInput, defaultsUI)));
+}
+
+function ElRepeatRow(props) {
+  var value = props.value;
+  var scope = props.scope;
+  var index = props.index;
+  var row = reactCrudUtils.CrudUtils.create("row", {
+    index: index,
+    row: true,
+    itemVar: scope.original.itemVar,
+    parent: scope.crudSearch,
+    data: value
+  });
+  var _useState = React$1.useState(new reactCrudUtils.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;
+  };
+  return /*#__PURE__*/React$1__default.createElement("div", {
+    className: getRowStyleClass(),
+    style: rowScope.getStyle("row")
+  }, /*#__PURE__*/React$1__default.createElement(UIChildren, _extends({
+    "transient": true
+  }, props, {
+    crud: row
+  }), props.children));
+}
+
+function ElRepeat(props) {
+  var scope = props.scope;
+  var items = scope.getItems();
+  return /*#__PURE__*/React.createElement("div", {
+    className: scope.getStyleClass('inner'),
+    style: scope.getStyle('inner')
+  }, items.map(function (row, i) {
+    return /*#__PURE__*/React.createElement(ElRepeatRow, _extends({}, props, {
+      key: 'r' + i,
+      scope: scope,
+      value: row,
+      index: i
+    }));
+  }));
+}
+
+function Link(props) {
+  var handlePress = function handlePress() {
+    reactNative.Linking.openURL('https://reactnative.dev/');
+  };
+  return /*#__PURE__*/React$1__default.createElement(reactNative.TouchableOpacity, {
+    onPress: handlePress
+  }, /*#__PURE__*/React$1__default.createElement(reactNative.Text, {
+    style: styles$2.link
+  }, "Clique aqui para acessar o React Native"));
+}
+var styles$2 = {
+  link: {}
+};
+
+function Button(props) {
+  var handlePress = function handlePress() {
+    reactNative.Linking.openURL('https://reactnative.dev/');
+  };
+  return /*#__PURE__*/React$1__default.createElement(reactNative.TouchableOpacity, {
+    onPress: handlePress
+  }, /*#__PURE__*/React$1__default.createElement(reactNative.Text, {
+    style: styles$3.link
+  }, "Clique aqui para acessar o React Native"));
+}
+var styles$3 = {
+  link: {}
+};
+
+function Select(props) {
+  var handlePress = function handlePress() {
+    reactNative.Linking.openURL('https://reactnative.dev/');
+  };
+  return /*#__PURE__*/React$1__default.createElement(reactNative.TouchableOpacity, {
+    onPress: handlePress
+  }, /*#__PURE__*/React$1__default.createElement(reactNative.Text, {
+    style: styles$4.link
+  }, "Clique aqui para acessar o React Native"));
+}
+var styles$4 = {
+  link: {}
+};
+
+function Switch(props) {
+  var handlePress = function handlePress() {
+    reactNative.Linking.openURL('https://reactnative.dev/');
+  };
+  return /*#__PURE__*/React$1__default.createElement(reactNative.TouchableOpacity, {
+    onPress: handlePress
+  }, /*#__PURE__*/React$1__default.createElement(reactNative.Text, {
+    style: styles$5.link
+  }, "Clique aqui para acessar o React Native"));
+}
+var styles$5 = {
+  link: {}
+};
+
+function Option(props) {
+  var handlePress = function handlePress() {
+    reactNative.Linking.openURL('https://reactnative.dev/');
+  };
+  return /*#__PURE__*/React$1__default.createElement(reactNative.TouchableOpacity, {
+    onPress: handlePress
+  }, /*#__PURE__*/React$1__default.createElement(reactNative.Text, {
+    style: styles$6.link
+  }, "Clique aqui para acessar o React Native"));
+}
+var styles$6 = {
+  link: {}
+};
+
+function Radio(props) {
+  var handlePress = function handlePress() {
+    reactNative.Linking.openURL('https://reactnative.dev/');
+  };
+  return /*#__PURE__*/React$1__default.createElement(reactNative.TouchableOpacity, {
+    onPress: handlePress
+  }, /*#__PURE__*/React$1__default.createElement(reactNative.Text, {
+    style: styles$7.link
+  }, "Clique aqui para acessar o React Native"));
+}
+var styles$7 = {
+  link: {}
+};
+
+function Input(props) {
+  var handlePress = function handlePress() {
+    reactNative.Linking.openURL('https://reactnative.dev/');
+  };
+  return /*#__PURE__*/React$1__default.createElement(reactNative.TouchableOpacity, {
+    onPress: handlePress
+  }, /*#__PURE__*/React$1__default.createElement(reactNative.Text, {
+    style: styles$8.link
+  }, "Clique aqui para acessar o React Native"));
+}
+var styles$8 = {
+  link: {}
+};
+
+function UIElement(props) {
+  var _useState = React$1.useState(reactCrudUtils.ScopeUtils.create(props)),
+    scope = _useState[0];
+  var _useState2 = React$1.useState(0),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  var _useState3 = React$1.useState(null),
+    error = _useState3[0],
+    setError = _useState3[1];
+  var options = scope.getOptions();
+  var crud = reactCrudUtils.Utils.nvl(props.crud, scope.crud);
+  var original = scope.original;
+  var type = original.type;
+  var ref = React$1.useRef(null);
+  scope.update = function () {
+    setIndex(++index);
+  };
+  var router = {
+    list: ElGrid,
+    grid: ElGrid,
+    label: ElLabel,
+    card: ElCard,
+    repeat: ElRepeat,
+    tabs: ElTabs,
+    chart: ElChart
+  };
+  var CurrentRouter = function CurrentRouter() {
+    if (router[type]) {
+      var Aux = router[type];
+      return /*#__PURE__*/React$1__default.createElement(Aux, _extends({
+        crud: crud
+      }, props, {
+        scope: scope
+      }));
+    }
+    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null);
+  };
+  var Custom = function Custom() {
+    var c = original.custom;
+    if (c) {
+      if (typeof c === 'string') {
+        return /*#__PURE__*/React$1__default.createElement(UIElement, {
+          element: {
+            value: c,
+            type: 'dummy'
+          },
+          crud: crud
+        });
+      }
+      return /*#__PURE__*/React$1__default.createElement(UIElement, _extends({
+        type: c.type,
+        tag: c.type
+      }, c.props, {
+        crud: crud
+      }));
+    }
+    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null);
+  };
+  if (scope.is('type', 'dummy')) {
+    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, scope.getDisplayValue());
+  }
+  var onCheck = function onCheck() {
+    var v = scope.getValue();
+    var check = !(v === true);
+    onChange({
+      target: {
+        value: check
+      }
+    });
+  };
+  var onChange = function onChange(e) {
+    var val = e.target.value;
+    if (scope.isType('integer', 'int', 'number')) {
+      val = parseInt(val);
+    } else if (scope.isType('decimal')) {
+      val = parseFloat(val);
+    }
+    if (scope.isType('select', 'complete')) {
+      val = scope.getSelectedItem(val);
+    }
+    scope.changeValue(val);
+    scope.update();
+  };
+  var onClick = function onClick(e) {
+    scope.call('click');
+  };
+  var defaultsInput = {
+    label: scope.getLabel(),
+    value: scope.getValue(),
+    onChange: onChange
+  };
+  if (scope.isType('password')) {
+    defaultsInput.type = 'password';
+  }
+  var elStyle = scope.getStyle('element');
+  var defaultsUI = {
+    required: scope.isRequired(),
+    size: 'small',
+    style: elStyle,
+    placeholder: scope.attr('placeholder', 'Digite aqui')
+  };
+  var isChecked = function isChecked() {
+    var v = scope.getValue();
+    return v === true;
+  };
+  var hasChildren = function hasChildren() {
+    if (scope.isInput()) {
+      return false;
+    }
+    return !reactCrudUtils.Utils.isEmpty(props.children) || !reactCrudUtils.Utils.isEmpty(props.elements);
+  };
+  if (!scope.isRendered() || scope.is('type', 'define')) {
+    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null);
+  }
+  scope.error = function (msg) {
+    error = msg;
+    setError(msg);
+  };
+  React$1.useEffect(function () {
+    if (!scope.ready) {
+      scope.ready = true;
+      scope.call('load');
+      if (scope.isType('list', 'repeat')) {
+        scope.search();
+      } else if (original.list) {
+        scope.call('list');
+      }
+      scope.start();
+    }
+  });
+  var CustomIcon = function CustomIcon() {
+    if (typeof original.icon === 'string') {
+      return /*#__PURE__*/React$1__default.createElement(Icon, null, scope.getIcon());
+    }
+    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, original.icon);
+  };
+  var getLabelClass = function getLabelClass(type) {
+    var clss = "ui-text ui-" + type + "-text";
+    var icon = scope.getIcon();
+    if (icon) {
+      clss = clss + (" ui-icon ui-" + type + "-icon");
+    }
+    return clss;
+  };
+  var hasCustomRoute = function hasCustomRoute() {
+    if (router[type]) return true;
+    return false;
+  };
+  scope.open = function (args) {
+    reactNative.Linking.openURL(args.url);
+  };
+  if (scope.isType('dialog')) {
+    var name = original.name;
+    if (!crud.dialogs[name]) {
+      var dlg = {
+        config: _extends({}, original)
+      };
+      dlg.component = function (args) {
+        return /*#__PURE__*/React$1__default.createElement(UIChildren, _extends({}, props, {
+          scope: scope,
+          crud: crud
+        }));
+      };
+      crud.dialogs[name] = dlg;
+    }
+    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null);
+  }
+  React$1.useLayoutEffect(function () {
+    if (ref != null && ref.current && scope.is('type', 'card', 'list', 'tabs', 'stepper')) {
+      var el = ref == null ? void 0 : ref.current;
+      if (el) {
+        var bg = reactCrudUtils.HtmlUtils.getBGColor(el);
+        if (bg === 'rgb(255, 255, 255)') {
+          el.classList.add('ui-dark');
+        } else {
+          el.classList.add('ui-light');
+        }
+      }
+    }
+  });
+  var isShowInner = function isShowInner() {
+    if (hasChildren() || hasCustomRoute()) {
+      return false;
+    }
+    return true;
+  };
+  return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement("div", {
+    className: 'ui-el ' + scope.getStyleClass(),
+    ref: ref,
+    style: scope.getStyle()
+  }, isShowInner() && /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement("div", {
+    className: scope.getStyleClass('inner'),
+    style: scope.getStyle('inner')
+  }, scope.is('type', 'button') && /*#__PURE__*/React$1__default.createElement(Button, _extends({}, defaultsUI, {
+    onClick: onClick,
+    variant: scope.attr('variant', 'outlined')
+  }), original.icon && /*#__PURE__*/React$1__default.createElement(CustomIcon, null), original.label && /*#__PURE__*/React$1__default.createElement("span", {
+    className: getLabelClass('button')
+  }, scope.getLabel())), scope.is('type', 'icon') && /*#__PURE__*/React$1__default.createElement(Icon, _extends({}, defaultsUI, {
+    onClick: onClick,
+    variant: scope.attr('variant', 'outlined')
+  }), scope.getDisplayValue()), scope.is('type', 'link') && /*#__PURE__*/React$1__default.createElement(Link, _extends({}, defaultsUI, {
+    onClick: onClick,
+    variant: scope.attr('variant', 'outlined')
+  }), original.icon && /*#__PURE__*/React$1__default.createElement(CustomIcon, null), original.label && /*#__PURE__*/React$1__default.createElement("span", {
+    className: getLabelClass('link')
+  }, scope.getLabel())), scope.is('type', 'text', 'number', 'phone', 'postalCode', 'money', 'password', 'email') && /*#__PURE__*/React$1__default.createElement(Input, _extends({}, defaultsInput, defaultsUI, {
+    InputProps: _extends({}, original.inputProps)
+  })), scope.is('type', 'complete', 'autocomplete') && /*#__PURE__*/React$1__default.createElement(UIComplete, {
+    scope: scope,
+    defaultsInput: defaultsInput,
+    defaultsUI: defaultsUI
+  }), scope.is('type', 'checkbox', 'boolean', 'switch') && /*#__PURE__*/React$1__default.createElement(Switch, _extends({
+    checked: isChecked()
+  }, defaultsInput, {
+    onChange: onCheck
+  })), scope.is('type', 'select') && /*#__PURE__*/React$1__default.createElement(Select, _extends({}, defaultsInput, defaultsUI, {
+    value: scope.getSelectedValue()
+  }), /*#__PURE__*/React$1__default.createElement(Option, {
+    value: ''
+  }, "Selecione"), options.map(function (row, i) {
+    return /*#__PURE__*/React$1__default.createElement(Option, {
+      key: 'i' + i,
+      value: row.value
+    }, row.label);
+  })), scope.is('type', 'radio') && /*#__PURE__*/React$1__default.createElement(Radio, _extends({}, defaultsInput, defaultsUI, {
+    row: true
+  }), options.map(function (row, i) {
+    return /*#__PURE__*/React$1__default.createElement(Option, {
+      key: 'i' + i,
+      control: /*#__PURE__*/React$1__default.createElement(Radio, defaultsUI),
+      label: row.label,
+      value: row.value
+    });
+  })), scope.is('type', 'custom') && /*#__PURE__*/React$1__default.createElement(Custom, null), scope.is('type', 'column') && /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, scope.is('format', 'img') && /*#__PURE__*/React$1__default.createElement("img", {
+    src: scope.getDisplayValue()
+  }), scope.is('format', 'icon') && /*#__PURE__*/React$1__default.createElement("i", {
+    className: scope.getDisplayValue()
+  }), !scope.is('format', 'icon', 'img') && /*#__PURE__*/React$1__default.createElement("span", null, scope.getDisplayValue())), scope.is('type', 'output') && /*#__PURE__*/React$1__default.createElement("span", null, scope.getDisplayValue())), error && /*#__PURE__*/React$1__default.createElement("div", {
+    className: "ui-error"
+  }, error)), /*#__PURE__*/React$1__default.createElement(CurrentRouter, null), !scope.is('type', 'card', 'tabs', 'grid', 'list', 'define', 'repeat') && /*#__PURE__*/React$1__default.createElement(UIChildren, _extends({}, props, {
+    scope: scope,
+    crud: crud
+  }))));
+}
+
+var _excluded = ["type"];
+var UI = {
+  Grid: function Grid(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "list"
+    }));
+  },
+  Repeat: function Repeat(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "repeat"
+    }));
+  },
+  Define: function Define(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "define"
+    }));
+  },
+  Include: function Include(props) {
+    return /*#__PURE__*/React.createElement(ElInclude, props);
+  },
+  Column: function Column(_ref) {
+    var props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "column"
+    }));
+  },
+  Input: function Input(props) {
+    return /*#__PURE__*/React.createElement(UIElement, props);
+  },
+  Text: function Text(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "text"
+    }));
+  },
+  Email: function Email(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "email"
+    }));
+  },
+  Button: function Button(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "button"
+    }));
+  },
+  Link: function Link(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "link"
+    }));
+  },
+  Icon: function Icon(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "icon"
+    }));
+  },
+  Output: function Output(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "output"
+    }));
+  },
+  Form: function Form(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "form"
+    }));
+  },
+  Crud: function Crud(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "crud"
+    }));
+  },
+  View: function View(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "view",
+      "transient": true
+    }));
+  },
+  Bottom: function Bottom(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "bottom"
+    }));
+  },
+  Dialog: function Dialog(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "dialog"
+    }));
+  },
+  Content: function Content(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "content"
+    }));
+  },
+  Top: function Top(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "top"
+    }));
+  },
+  Card: function Card(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "card"
+    }));
+  },
+  Tab: function Tab(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "tab"
+    }));
+  },
+  Tabs: function Tabs(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "tabs"
+    }));
+  },
+  Step: function Step(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "tab",
+      layout: "step"
+    }));
+  },
+  Stepper: function Stepper(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "tabs",
+      layout: "stepper"
+    }));
+  },
+  Money: function Money(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "money"
+    }));
+  },
+  Chart: function Chart(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "chart"
+    }));
+  },
+  Password: function Password(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "password"
+    }));
+  },
+  Complete: function Complete(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "complete"
+    }));
+  },
+  Checkbox: function Checkbox(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "checkbox"
+    }));
+  },
+  Radio: function Radio(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "radio"
+    }));
+  },
+  Select: function Select(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "select"
+    }));
+  },
+  Entity: function Entity(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "entity"
+    }));
+  },
+  Element: function Element(props) {
+    return /*#__PURE__*/React.createElement(UIElement, _extends({}, props, {
+      type: "element"
+    }));
+  }
+};
+
+exports.UI = UI;
+//# sourceMappingURL=react-crud-mobile.cjs.development.js.map