react-crud-mobile 1.0.433 → 1.0.435

package/src/elements/core/UIToggle.tsx

@@ -1,102 +1,102 @@
-import React, { useState } from 'react';
-import { ChildType, Utils } from 'react-crud-utils';
-import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
-import UIListRow from './UIListRow';
-
-export default function UIToggle(props: ChildType) {
-  const scope = props.scope;
-  const options = Utils.nvl(scope.getOptions(), []);
-  const value = scope.getInputValue();
-
-  let [index, setIndex] = useState(0);
-
-  const isSelected = (item: any) => {
-    return item?.value === value;
-  };
-
-  const onClick = (item: any) => {
-    scope.changeValue(item.object);
-    setIndex(++index);
-  };
-
-  const Item = ({ item, index }) => {
-    let selected = isSelected(item);
-    let style: any = { ...styles.text };
-
-    if (selected) style.color = '#ffffff';
-
-    if (Utils.isEmpty(props.children)) {
-      return <Text style={style}>{item.label}</Text>;
-    }
-
-    return (
-      <UIListRow scope={scope} item={item.object} index={index}>
-        {props.children}
-      </UIListRow>
-    );
-  };
-
-  const getItemStyle = (item: any) => {
-    let style = { ...styles.item, ...scope.getStyle('item') };
-
-    let wPart = 100 / options.length;
-    let width = Math.floor(wPart) + '%';
-
-    if (isSelected(item)) {
-      let selectedColor = scope.getPart('selectedColor', undefined, 'primary');
-      let st = scope.getStyle('selected', {
-        backgroundColor: selectedColor,
-        color: '#ffffff',
-      });
-
-      style = { ...style, ...st };
-
-      if (!style.color) {
-        style.color = '#ffffff';
-      }
-    }
-
-    style.width = width;
-
-    return style;
-  };
-
-  return (
-    <>
-      {options.map((item: any, i: number) => (
-        <TouchableHighlight
-          key={`k-${i}`}
-          style={getItemStyle(item)}
-          onPress={e => {
-            onClick(item);
-          }}
-        >
-          <Item item={item} index={i} />
-        </TouchableHighlight>
-      ))}
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    gap: 10,
-    justifyContent: 'center',
-    flexDirection: 'row',
-  },
-  item: {
-    padding: 15,
-    marginVertical: 8,
-    backgroundColor: '#f5f5f5',
-    borderRadius: 8,
-    justifyContent: 'center',
-    width: 'auto',
-    flexDirection: 'row',
-  },
-  text: {
-    fontSize: 16,
-    fontWeight: 500,
-  },
-});
+import React, { useState } from 'react';
+import { ChildType, Utils } from 'react-crud-utils';
+import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
+import UIListRow from './UIListRow';
+
+export default function UIToggle(props: ChildType) {
+  const scope = props.scope;
+  const options = Utils.nvl(scope.getOptions(), []);
+  const value = scope.getInputValue();
+
+  let [index, setIndex] = useState(0);
+
+  const isSelected = (item: any) => {
+    return item?.value === value;
+  };
+
+  const onClick = (item: any) => {
+    scope.changeValue(item.object);
+    setIndex(++index);
+  };
+
+  const Item = ({ item, index }) => {
+    let selected = isSelected(item);
+    let style: any = { ...styles.text };
+
+    if (selected) style.color = '#ffffff';
+
+    if (Utils.isEmpty(props.children)) {
+      return <Text style={style}>{item.label}</Text>;
+    }
+
+    return (
+      <UIListRow scope={scope} item={item.object} index={index}>
+        {props.children}
+      </UIListRow>
+    );
+  };
+
+  const getItemStyle = (item: any) => {
+    let style = { ...styles.item, ...scope.getStyle('item') };
+
+    let wPart = 100 / options.length;
+    let width = Math.floor(wPart) + '%';
+
+    if (isSelected(item)) {
+      let selectedColor = scope.getPart('selectedColor', undefined, 'primary');
+      let st = scope.getStyle('selected', {
+        backgroundColor: selectedColor,
+        color: '#ffffff',
+      });
+
+      style = { ...style, ...st };
+
+      if (!style.color) {
+        style.color = '#ffffff';
+      }
+    }
+
+    style.width = width;
+
+    return style;
+  };
+
+  return (
+    <>
+      {options.map((item: any, i: number) => (
+        <TouchableHighlight
+          key={`k-${i}`}
+          style={getItemStyle(item)}
+          onPress={e => {
+            onClick(item);
+          }}
+        >
+          <Item item={item} index={i} />
+        </TouchableHighlight>
+      ))}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    gap: 10,
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  item: {
+    padding: 15,
+    marginVertical: 8,
+    backgroundColor: '#f5f5f5',
+    borderRadius: 8,
+    justifyContent: 'center',
+    width: 'auto',
+    flexDirection: 'row',
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: 500,
+  },
+});

package/src/elements/core/UIView.tsx

@@ -0,0 +1,62 @@
+import { StatusBar } from 'expo-status-bar';
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import {
+  SafeAreaProvider,
+  SafeAreaView as SafeAreaContextView,
+} from 'react-native-safe-area-context';
+
+import UIChildren from '../UIChildren';
+import { ChildType } from 'react-crud-utils';
+
+export default function UIView({ scope, children }: ChildType) {
+  const header = scope.getPart('header', null, []);
+  const dismissKeyboard = () => {
+    if (Platform.OS !== 'web') {
+      Keyboard.dismiss();
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <StatusBar style="dark" />
+      <SafeAreaContextView style={scope.getStyle('view', styles.view)}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={{
+            flex: 1, // 🔹 Ocupa 100% da tela
+            justifyContent: 'center',
+          }}
+        >
+          {header}
+          <View style={scope.getStyle('container', styles.container)}>
+            <ScrollView keyboardShouldPersistTaps="handled">
+              <TouchableWithoutFeedback
+                onPress={dismissKeyboard}
+                accessible={false}
+              >
+                <UIChildren scope={scope}>{children}</UIChildren>
+              </TouchableWithoutFeedback>
+            </ScrollView>
+          </View>
+        </KeyboardAvoidingView>
+      </SafeAreaContextView>
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'background',
+  },
+  view: {
+    backgroundColor: 'primary',
+  },
+});

package/src/elements/index.ts

@@ -1 +1 @@
-export { default as UI } from "./UI";
+export { default as UI } from "./UI";

package/src/elements/tabs/ElTabs.tsx

@@ -1,178 +1,178 @@
-import React, { useState, useEffect } from 'react';
-import UIChildren from '../UIChildren';
-import UI from '../UI';
-
-import Ionicons from '@expo/vector-icons/Ionicons';
-import { ChildType, CrudUtils, Utils } from 'react-crud-utils';
-
-export default function ElTabs(props: ChildType) {
-  let scope = props.scope;
-  let [selectedIndex, setSelectedIndex]: any = useState(0);
-  let element = scope.original;
-  let items = scope.getItems();
-  let counter = 0;
-
-  let tabs: any = [];
-  let [selected, setSelected]: any = useState(null);
-
-  const onChangeTab = (tab: any, validate = true) => {
-    if (tab) {
-      scope.execute({
-        event: {
-          validate,
-          validateScope: element.validateScope,
-          action: () => {
-            scope.changeValue(tab.data);
-
-            selected = tab;
-            selectedIndex = tab.index;
-
-            setSelectedIndex(selectedIndex);
-            setSelected(tab);
-          },
-        },
-      });
-    }
-  };
-
-  const getStyleClass = (t: any) => {
-    let s = 'ui-tabs-item ui-click';
-
-    if (selected?.index === t.index) {
-      s = s + ' ui-tab-selected';
-    }
-    return s;
-  };
-
-  const addTab = (child: any, item: any) => {
-    let original = { ...child.props };
-
-    if (!item) {
-      item = scope.crud.data;
-    }
-
-    let crudTab = CrudUtils.create('tabs', {
-      data: item,
-      changed: item,
-      parent: scope.crud,
-    });
-
-    let element = Utils.resolve(original, crudTab);
-
-    if (element.rendered === false) {
-      return;
-    }
-
-    tabs.push({
-      ...element,
-      child,
-      element,
-      original,
-      index: counter++,
-      data: item,
-    });
-  };
-
-  React.Children.map(props.children, (child, index) => {
-    if (Utils.isEmpty(items)) {
-      addTab(child, {});
-    } else {
-      for (const i in items) {
-        let o = items[i];
-
-        addTab(child, o);
-      }
-    }
-  });
-
-  if (!selected) {
-    onChangeTab(tabs[selectedIndex], false);
-  }
-
-  const nav = (i: any) => {
-    let t = tabs[selectedIndex + i];
-
-    onChangeTab(t);
-  };
-
-  const previous = () => {
-    nav(-1);
-  };
-
-  const next = () => {
-    nav(1);
-  };
-
-  let isStepper = element.layout === 'stepper';
-
-  return (
-    <div
-      className={scope.getStyleClass('inner')}
-      style={scope.getStyle('inner')}
-    >
-      <div className="ui-tabs-content">
-        <div className="ui-tabs-items">
-          {tabs.map((t: any, i: number) => (
-            <div
-              key={Utils.key(element.id, 'tab', i)}
-              className={getStyleClass(t)}
-              onClick={() => {
-                onChangeTab(t);
-              }}
-            >
-              {isStepper && <div className="ui-tab-item-divisor" />}
-              <div className="ui-tab-item-inner">
-                {isStepper && <div className="ui-step-line" />}
-                <div className="ui-tab-item-label">
-                  {isStepper ? t.index + 1 : t.label}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-        {selected && (
-          <>
-            {isStepper && <div className="ui-tabs-label">{selected.label}</div>}
-            <div className="ui-tabs-area">
-              <UIChildren {...props} scope={scope}>
-                {selected.child}
-              </UIChildren>
-            </div>
-            {element.layout === 'stepper' && (
-              <div className="ui-tabs-actions">
-                <UI.Output space={6} layout="left">
-                  <UI.Include
-                    {...props}
-                    transient
-                    name="left"
-                    default={
-                      <UI.Button
-                        rendered={selectedIndex > 0}
-                        icon={<Ionicons />}
-                        click={previous}
-                      />
-                    }
-                  />
-                </UI.Output>
-                <UI.Output space={6} layout="right">
-                  <UI.Include
-                    {...props}
-                    transient
-                    name="right"
-                    default={
-                      <UI.Button
-                        rendered={selectedIndex < tabs.length - 1}
-                        icon={<Ionicons />}
-                        click={next}
-                      />
-                    }
-                  />
-                </UI.Output>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
+import React, { useState, useEffect } from 'react';
+import UIChildren from '../UIChildren';
+import UI from '../UI';
+
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { ChildType, CrudUtils, Utils } from 'react-crud-utils';
+
+export default function ElTabs(props: ChildType) {
+  let scope = props.scope;
+  let [selectedIndex, setSelectedIndex]: any = useState(0);
+  let element = scope.original;
+  let items = scope.getItems();
+  let counter = 0;
+
+  let tabs: any = [];
+  let [selected, setSelected]: any = useState(null);
+
+  const onChangeTab = (tab: any, validate = true) => {
+    if (tab) {
+      scope.execute({
+        event: {
+          validate,
+          validateScope: element.validateScope,
+          action: () => {
+            scope.changeValue(tab.data);
+
+            selected = tab;
+            selectedIndex = tab.index;
+
+            setSelectedIndex(selectedIndex);
+            setSelected(tab);
+          },
+        },
+      });
+    }
+  };
+
+  const getStyleClass = (t: any) => {
+    let s = 'ui-tabs-item ui-click';
+
+    if (selected?.index === t.index) {
+      s = s + ' ui-tab-selected';
+    }
+    return s;
+  };
+
+  const addTab = (child: any, item: any) => {
+    let original = { ...child.props };
+
+    if (!item) {
+      item = scope.crud.data;
+    }
+
+    let crudTab = CrudUtils.create('tabs', {
+      data: item,
+      changed: item,
+      parent: scope.crud,
+    });
+
+    let element = Utils.resolve(original, crudTab);
+
+    if (element.rendered === false) {
+      return;
+    }
+
+    tabs.push({
+      ...element,
+      child,
+      element,
+      original,
+      index: counter++,
+      data: item,
+    });
+  };
+
+  React.Children.map(props.children, (child, index) => {
+    if (Utils.isEmpty(items)) {
+      addTab(child, {});
+    } else {
+      for (const i in items) {
+        let o = items[i];
+
+        addTab(child, o);
+      }
+    }
+  });
+
+  if (!selected) {
+    onChangeTab(tabs[selectedIndex], false);
+  }
+
+  const nav = (i: any) => {
+    let t = tabs[selectedIndex + i];
+
+    onChangeTab(t);
+  };
+
+  const previous = () => {
+    nav(-1);
+  };
+
+  const next = () => {
+    nav(1);
+  };
+
+  let isStepper = element.layout === 'stepper';
+
+  return (
+    <div
+      className={scope.getStyleClass('inner')}
+      style={scope.getStyle('inner')}
+    >
+      <div className="ui-tabs-content">
+        <div className="ui-tabs-items">
+          {tabs.map((t: any, i: number) => (
+            <div
+              key={Utils.key(element.id, 'tab', i)}
+              className={getStyleClass(t)}
+              onClick={() => {
+                onChangeTab(t);
+              }}
+            >
+              {isStepper && <div className="ui-tab-item-divisor" />}
+              <div className="ui-tab-item-inner">
+                {isStepper && <div className="ui-step-line" />}
+                <div className="ui-tab-item-label">
+                  {isStepper ? t.index + 1 : t.label}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        {selected && (
+          <>
+            {isStepper && <div className="ui-tabs-label">{selected.label}</div>}
+            <div className="ui-tabs-area">
+              <UIChildren {...props} scope={scope}>
+                {selected.child}
+              </UIChildren>
+            </div>
+            {element.layout === 'stepper' && (
+              <div className="ui-tabs-actions">
+                <UI.Output space={6} layout="left">
+                  <UI.Include
+                    {...props}
+                    transient
+                    name="left"
+                    default={
+                      <UI.Button
+                        rendered={selectedIndex > 0}
+                        icon={<Ionicons />}
+                        click={previous}
+                      />
+                    }
+                  />
+                </UI.Output>
+                <UI.Output space={6} layout="right">
+                  <UI.Include
+                    {...props}
+                    transient
+                    name="right"
+                    default={
+                      <UI.Button
+                        rendered={selectedIndex < tabs.length - 1}
+                        icon={<Ionicons />}
+                        click={next}
+                      />
+                    }
+                  />
+                </UI.Output>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -1 +1 @@
-export * from './elements';
+export * from './elements';