react-crud-mobile 1.0.585 → 1.0.587

package/src/elements/core/UISelect.tsx

@@ -1,122 +1,69 @@
-import { useState } from 'react';
-import { ChildType, MethodType, useTheme, Utils } from 'react-crud-utils';
-import {
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  Modal,
-  View,
-  StatusBar,
-  SafeAreaView,
-} from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import UI from '../UI';
-
-export default function UISelect(props: ChildType) {
-  const [modalVisible, setModalVisible] = useState(false);
-  const scope = props.scope;
-  const items = Utils.nvl(scope.getOptions(), []);
-  const placeholder = scope.attr('placeholder', 'Selecione...');
-  const value = scope.getDisplayValue();
-  const theme = useTheme();
-
-  const handlePress = () => {
-    setModalVisible(!modalVisible);
-  };
-
-  const onClick = ({ crud, value }: MethodType) => {
-    scope.changeValue(value);
-    handlePress();
-  };
-
-  const style = (part: string, extra?: any) => {
-    return { ...styles[part], ...scope.getStyle(part), ...extra };
-  };
-
-  return (
-    <View style={style('selectRoot')}>
-      <TouchableOpacity onPress={handlePress} style={style('selectInput')}>
-        <Text style={style('selectLabel')}>
-          {Utils.nvl(value, placeholder)}
-        </Text>
-        <Ionicons name="arrow-down" size={20} color="#888" />
-      </TouchableOpacity>
-      <Modal
-        animationType="slide"
-        transparent={true}
-        visible={modalVisible}
-        onRequestClose={() => setModalVisible(false)}
-      >
-        <StatusBar
-          barStyle="dark-content"
-          backgroundColor={theme.colors.primary}
-        />
-        <SafeAreaView style={style('modalSafe')}>
-          <View style={style('modalHeader')}>
-            <TouchableOpacity
-              onPress={() => setModalVisible(false)}
-              style={style('modalCloseButton')}
-            >
-              <Text style={style('modalCloseText')}>X</Text>
-            </TouchableOpacity>
-            <Text style={style('modalTitle')}>{placeholder}</Text>
-          </View>
-          <View style={style('modalContent')}>
-            <UI.List data={items} name={scope.getName('list')} click={onClick}>
-              <UI.Value value="#{@this.label}" />
-            </UI.List>
-          </View>
-        </SafeAreaView>
-      </Modal>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  selectRoot: {
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start',
-  },
-  selectInput: {
-    width: '100%',
-    flexDirection: 'row',
-    borderWidth: 1,
-    borderColor: '#a9a9a9',
-    borderRadius: 20,
-    paddingHorizontal: 15,
-    paddingVertical: 10,
-  },
-  selectLabel: { flex: 1 },
-  modalSafe: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-    paddingTop: StatusBar.currentHeight || 0, // Considera a altura da barra de status no Android
-  },
-  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,
-  },
-});
+import { useState } from 'react';
+import { ChildType, MethodType, Utils } from 'react-crud-utils';
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  StatusBar,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import UI from '../UI';
+
+export default function UISelect(props: ChildType) {
+  const scope = props.scope;
+  const items = Utils.nvl(scope.getOptions(), []);
+  const placeholder = scope.attr('placeholder', 'Selecione...');
+  const value = scope.getDisplayValue();
+  const modalName = `${scope.getName()}_Modal`;
+
+  const handlePress = () => {
+    scope.hide();
+  };
+
+  const onClick = ({ crud, value }: MethodType) => {
+    scope.changeValue(value);
+    handlePress();
+  };
+
+  const style = (part: string, extra?: any) => {
+    return { ...styles[part], ...scope.getStyle(part), ...extra };
+  };
+
+  const onStartModal = ({ crud, scope }: MethodType) => {
+    console.log(crud, scope);
+  };
+
+  return (
+    <View style={style('selectRoot')}>
+      <TouchableOpacity onPress={handlePress} style={style('selectInput')}>
+        <Text style={style('selectLabel')}>
+          {Utils.nvl(value, placeholder)}
+        </Text>
+        <Ionicons name="arrow-down" size={20} color="#888" />
+      </TouchableOpacity>
+      <UI.Dialog name={modalName} onStart={onStartModal}>
+        <UI.List data={items} name={scope.getName('list')} click={onClick}>
+          <UI.Value value="#{@this.label}" />
+        </UI.List>
+      </UI.Dialog>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  selectRoot: {
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  selectInput: {
+    width: '100%',
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: '#a9a9a9',
+    borderRadius: 20,
+    paddingHorizontal: 15,
+    paddingVertical: 10,
+  },
+  selectLabel: { flex: 1 },
+});

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

@@ -1,42 +1,42 @@
-import { ScrollView, StyleSheet, View } from 'react-native';
-
-import UIChildren from '../UIChildren';
-import { ChildType, useTheme } from 'react-crud-utils';
-import { useEffect } from 'react';
-import { StatusBar } from 'react-native';
-
-export default function UIView({ scope, children }: ChildType) {
-  const theme = useTheme();
-  const header = scope.getPart('header', null, []);
-
-  useEffect(() => {
-    StatusBar.setBarStyle('light-content');
-    StatusBar.setBackgroundColor?.(theme.colors.primary);
-  }, []);
-  return (
-    <>
-      {header}
-      <View style={scope.getStyle('container', styles.container)}>
-        <ScrollView
-          keyboardShouldPersistTaps="handled"
-          contentContainerStyle={scope.getStyle('contentContainer', {})}
-          style={scope.getStyle('scroll', styles.scroll)}
-        >
-          <UIChildren scope={scope}>{children}</UIChildren>
-        </ScrollView>
-      </View>
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  scroll: {
-    padding: 10,
-  },
-  container: {
-    backgroundColor: 'primary',
-  },
-  view: {
-    backgroundColor: 'primary',
-  },
-});
+import { ScrollView, StyleSheet, View } from 'react-native';
+
+import UIChildren from '../UIChildren';
+import { ChildType, useTheme } from 'react-crud-utils';
+import { useEffect } from 'react';
+import { StatusBar } from 'react-native';
+
+export default function UIView({ scope, children }: ChildType) {
+  const theme = useTheme();
+  const header = scope.getPart('header', null, []);
+
+  useEffect(() => {
+    StatusBar.setBarStyle('light-content');
+    StatusBar.setBackgroundColor?.(theme.colors.primary);
+  }, []);
+  return (
+    <>
+      {header}
+      <View style={scope.getStyle('container', styles.container)}>
+        <ScrollView
+          keyboardShouldPersistTaps="handled"
+          contentContainerStyle={scope.getStyle('contentContainer', {})}
+          style={scope.getStyle('scroll', styles.scroll)}
+        >
+          <UIChildren scope={scope}>{children}</UIChildren>
+        </ScrollView>
+      </View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  scroll: {
+    padding: 10,
+  },
+  container: {
+    backgroundColor: 'primary',
+  },
+  view: {
+    backgroundColor: 'primary',
+  },
+});

package/src/elements/index.ts

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