react-crud-mobile 1.1.2 → 1.3.1

package/src/elements/core/UIListRow.tsx

@@ -0,0 +1,123 @@
+import React, { useRef, useState } from 'react';
+import { ChildType, ScopeUtils, Utils } from 'react-crud-utils';
+import UIChildren from '../UIChildren';
+import { StyleSheet, TouchableHighlight, View } from 'react-native';
+import { useIsVisible } from '../../hooks/useIsVisible';
+
+interface UIListRowType extends ChildType {
+  item: any;
+  index: number;
+}
+
+export default function UIListRow(props: UIListRowType) {
+  const scope = props.scope;
+  const index = props.index;
+  const original = scope.original;
+  const item = props.item;
+  const cols = scope.getPart('cols', undefined, -1);
+  const rowWidth = Math.floor(100 / cols) + '%';
+  const styles = { repeat: stylesRepeat, list: stylesList }?.[original.type];
+  const name = `${scope.key('row', index, '')}`;
+  const [row] = useState(
+    ScopeUtils.create({
+      ...original,
+      parent: scope,
+      name,
+      crud: scope.crud,
+      index,
+      type: 'row',
+      data: item,
+    })
+  );
+
+  const targetRef = useRef(null);
+  const isVisible = useIsVisible(targetRef, row);
+
+  const onClick = (item: any) => {
+    row.call('click', { value: item, item, edit: true, index });
+  };
+
+  const Child = () => {
+    if (!isVisible && original.useIsInView && !row.visible && index > 20) {
+      return <></>;
+    }
+    return (
+      <>
+        <UIChildren scope={row} crud={row.crud}>
+          {props.children}
+        </UIChildren>
+      </>
+    );
+  };
+
+  const ListItem = () => {
+    let [updateIndex, setUpdateIndex] = useState(0);
+    let key = scope.key('item');
+
+    const getRowStyle = () => {
+      let css = row.getStyle('row', { ...styles.row, minHeight: 40 });
+
+      if (cols > 0) {
+        css.width = rowWidth;
+      }
+
+      return css;
+    };
+
+    row.update = () => {
+      scope.updateIndex = scope.updateIndex + 1;
+
+      setUpdateIndex(++updateIndex);
+    };
+
+    let renderedRow = row.getPart('renderedItem', undefined, true);
+
+    if (renderedRow === false) {
+      return <></>;
+    }
+
+    if (!original.click) {
+      return (
+        <View key={key} style={getRowStyle()} ref={targetRef}>
+          <Child />
+        </View>
+      );
+    }
+    return (
+      <TouchableHighlight
+        key={key}
+        style={getRowStyle()}
+        underlayColor={'transparent'}
+        ref={targetRef}
+        onPress={e => {
+          e.stopPropagation();
+          onClick(item);
+        }}
+      >
+        <Child />
+      </TouchableHighlight>
+    );
+  };
+
+  return <ListItem />;
+}
+
+const stylesList = StyleSheet.create({
+  row: {
+    padding: 5,
+    margin: 0,
+    width: '100%',
+    backgroundColor: 'background',
+    gap: 10,
+    borderRadius: 8,
+    justifyContent: 'center',
+  },
+});
+
+const stylesRepeat = StyleSheet.create({
+  row: {
+    padding: 0,
+    width: '100%',
+    justifyContent: 'center',
+  },
+});

package/src/elements/core/UIModal.tsx

@@ -0,0 +1,204 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  ChildType,
+  ComponentUtils,
+  CrudUtils,
+  MethodType,
+  useTheme,
+  Utils,
+  ViewUtils,
+} from 'react-crud-utils';
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  View,
+  StatusBar,
+  SafeAreaView,
+  ScrollView,
+} from 'react-native';
+import UIChildren from '../UIChildren';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import UIToast from './UIToast';
+import MobileUtils from '../../utils/MobileUtils';
+
+export default function UIModal(props: ChildType) {
+  let [modalVisible, setModalVisible] = useState(false);
+  let [index, setIndex] = useState(0);
+  let main = ViewUtils.getCrud('view');
+
+  const scope = props.scope;
+  const label = scope.getLabel();
+  const theme = scope.getTheme();
+  const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
+  const scrollRef = useRef(null);
+
+  const style = (part: string, extra?: any) => {
+    let st = { ...styles[part], ...extra };
+
+    return { ...scope.getStyle(part, st) };
+  };
+
+  const onClose = () => {
+    scope.close({ scope, crud: scope.currentDialog, event: {} });
+  };
+
+  const toggle = vis => {
+    modalVisible = vis;
+    setModalVisible(modalVisible);
+  };
+
+  scope.update = () => {
+    setIndex(++index);
+  };
+
+  scope.dialogShow = (args?: MethodType) => {
+    let { crud } = args;
+    let name = scope.getName('modal');
+    let edit = args.edit === true;
+    let def: any = {};
+    let rowItem = null;
+
+    if (crud.is('row')) {
+      def.parent = crud.parent.parent;
+      def.search = crud.parent;
+
+      rowItem = crud.data;
+    } else if (crud.is('search')) {
+      def.parent = crud.parent;
+      def.search = crud;
+    }
+
+    let data = Utils.nvl(args.item, rowItem, {});
+
+    let d = CrudUtils.create('dialog', {
+      parent: crud,
+      root: crud,
+      name,
+      dialog: main.dialog,
+      data,
+      edit,
+      scope,
+      ...def,
+    });
+
+    main.dialog = d;
+
+    scope.currentDialog = d;
+
+    toggle(true);
+    scope.update();
+  };
+
+  scope.dialogHide = (args?: MethodType) => {
+    let old = scope.currentDialog;
+
+    main.dialog = Utils.nvl(old.dialog, null);
+    scope.currentDialog = null;
+
+    toggle(false);
+
+    if (main.dialog?.scope) {
+      main.dialog.scope.update();
+    }
+    scope.update();
+  };
+
+  useEffect(() => {
+    MobileUtils.syncTheme();
+  }, [modalVisible]);
+
+  let curr = scope.currentDialog;
+
+  if (!curr) {
+    return <></>;
+  }
+
+  if (curr.uuid !== main.dialog?.uuid) {
+    return <></>;
+  }
+
+  const headerRight = ComponentUtils.getDefine(props, 'header', 'right');
+
+  scope.put('scrollRef', scrollRef);
+
+  ComponentUtils.setViewScope(scope);
+
+  let color = Utils.nvl(headerStyle.color, 'white');
+  let defaults = { color };
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={onClose}
+    >
+      <SafeAreaView style={style('modalTop')} />
+      <SafeAreaView style={style('modalSafe')}>
+        <View style={scope.getStyle('header', headerStyle)}>
+          <TouchableOpacity onPress={onClose} style={style('modalCloseButton')}>
+            <Ionicons
+              name="chevron-back-outline"
+              size={24}
+              color={color}
+              style={style('modalCloseText', defaults)}
+            />
+          </TouchableOpacity>
+          <Text style={style('modalTitle', defaults)}>{label}</Text>
+          {!Utils.isEmpty(headerRight) && (
+            <UIChildren scope={scope} crud={scope.currentDialog} transient>
+              {headerRight}
+            </UIChildren>
+          )}
+        </View>
+        <ScrollView
+          contentContainerStyle={{ flexGrow: 1, paddingBottom: 50 }}
+          style={style('modalContent')}
+          nestedScrollEnabled={true}
+          ref={scrollRef}
+        >
+          <View style={{ flex: 1 }}>
+            <UIChildren scope={scope} crud={scope.currentDialog}>
+              {props.children}
+            </UIChildren>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+      <UIToast />
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalTop: {
+    backgroundColor: 'primary',
+    width: '100%',
+  },
+  modalSafe: {
+    flex: 1,
+    width: '100%',
+    backgroundColor: 'background',
+  },
+  modalCloseButton: {
+    padding: 10,
+  },
+  modalCloseText: {
+    fontSize: 18,
+    color: 'white',
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginLeft: 10,
+  },
+  modalContent: {
+    flex: 1,
+    backgroundColor: 'background',
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 15,
+    paddingRight: 15,
+  },
+});

package/src/elements/core/{Input.tsx → UIOption.tsx}

@@ -1,7 +1,6 @@
-import React from 'react';
 import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
 
-export default function Input(props: any) {
+export default function UIOption(props: any) {
   const handlePress = () => {
     Linking.openURL('https://reactnative.dev/');
   };

package/src/elements/core/UIQuantity.tsx

@@ -0,0 +1,98 @@
+import { Ionicons } from '@expo/vector-icons';
+import { useState } from 'react';
+import { ChildType, Utils } from 'react-crud-utils';
+import { Text, TouchableHighlight, View } from 'react-native';
+
+export default function UIQuantity(props: ChildType) {
+  const scope = props.scope;
+  const element = scope.original;
+
+  let [index, setIndex] = useState(0);
+
+  const value = scope.getValue(0);
+
+  let color = element.color;
+
+  if (!color) color = 'primary';
+
+  const btn = {
+    padding: 0,
+    alignItems: 'center',
+    height: 30,
+    width: 30,
+    textAlign: 'center',
+    verticalAling: 'middle',
+    borderRadius: 24,
+    backgroundColor: color,
+    color: '#ffffff',
+    justifyContent: 'center',
+  };
+
+  const styles: any = {
+    buttonLabel: {
+      color: '#ffffff',
+      fontWeight: '500',
+      fontSize: 16,
+    },
+    value: {
+      flex: 1,
+      flexDirection: 'row',
+      textAlign: 'center',
+      fontWeight: '500',
+    },
+    buttonInner: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    buttonIcon: {
+      color: '#fff',
+      fontSize: 18,
+    },
+    button: btn,
+    addButton: {
+      ...btn,
+    },
+    delButton: {
+      ...btn,
+    },
+  };
+
+  const change = (val: number) => {
+    scope.changeValue(value + val);
+    setIndex(++index);
+  };
+
+  const onClickAdd = () => {
+    change(1);
+  };
+
+  const onClickDel = () => {
+    change(-1);
+  };
+
+  const style = (part: string, extra?: any) => {
+    let s = { ...styles[part], ...extra };
+    return scope.getStyle(part, s);
+  };
+
+  return (
+    <>
+      <TouchableHighlight
+        underlayColor={'transparent'}
+        onPress={onClickDel}
+        style={style('delButton')}
+      >
+        <Ionicons size={30} style={style('buttonIcon')} name="remove" />
+      </TouchableHighlight>
+      <Text style={style('value')}>{Utils.nvl(value, 0)}</Text>
+      <TouchableHighlight
+        underlayColor={'transparent'}
+        onPress={onClickAdd}
+        style={style('addButton')}
+      >
+        <Ionicons size={30} style={style('buttonIcon')} name="add" />
+      </TouchableHighlight>
+    </>
+  );
+}

package/src/elements/core/{Radio.tsx → UIRadio.tsx}

@@ -1,7 +1,6 @@
-import React from 'react';
 import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
 
-export default function Radio(props: any) {
+export default function UIRadio(props: any) {
   const handlePress = () => {
     Linking.openURL('https://reactnative.dev/');
   };

package/src/elements/core/UISelect.tsx

@@ -0,0 +1,135 @@
+import { useState } from 'react';
+import {
+  ChildType,
+  MethodType,
+  useTheme,
+  Utils,
+  ViewUtils,
+} 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 main = ViewUtils.getCrud('view');
+
+  const handlePress = () => {
+    const _modalVisible = !modalVisible;
+
+    main.data.selectIsOpen = _modalVisible;
+    setModalVisible(_modalVisible);
+  };
+
+  const onClick = ({ crud, value }: MethodType) => {
+    scope.changeValue(value);
+    handlePress();
+  };
+
+  const style = (part: string, extra?: any) => {
+    return { ...styles[part], ...scope.getStyle(part), ...extra };
+  };
+
+  const isModalVisible = () => {
+    return modalVisible;
+  };
+
+  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={isModalVisible()}
+        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',
+    flex: 1,
+  },
+  selectInput: {
+    width: '100%',
+    flexDirection: 'row',
+    borderRadius: 5,
+    paddingHorizontal: 15,
+    paddingVertical: 10,
+  },
+  selectLabel: { flex: 1 },
+  modalSafe: {
+    flex: 1,
+    backgroundColor: 'background',
+    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,
+  },
+});

package/src/elements/core/UISlider.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { ChildType, ComponentUtils, Utils } from 'react-crud-utils';
+import { Switch } from 'react-native';
+import Slider from '@react-native-community/slider';
+
+export default function UISlider(props: ChildType) {
+  const scope = props.scope;
+  const initial = Utils.nvl(scope.getValue(), 0);
+  const [value, setValue] = useState(initial);
+
+  //redeploy 0
+
+  let onChange = v => {
+    v = Utils.nvl(v, 0);
+
+    console.log(v);
+
+    scope.changeValue(v);
+
+    setValue(v);
+  };
+
+  let step = scope.attr('step', 1);
+  let min = scope.attr('min', 0);
+  let max = scope.attr('min', 100);
+
+  let onSlideScroll = (scrollEnabled: boolean) => {
+    let viewScope = ComponentUtils.getViewScope();
+
+    if (scope.original.debug) {
+      console.log(viewScope);
+    }
+
+    if (viewScope) {
+      let scrollRef = viewScope.get('scrollRef');
+
+      if (scrollRef) scrollRef.current?.setNativeProps?.({ scrollEnabled });
+    }
+  };
+  return (
+    <>
+      <Slider
+        minimumValue={min}
+        maximumValue={max}
+        step={step}
+        minimumTrackTintColor="#1EB1FC"
+        maximumTrackTintColor="#d3d3d3"
+        thumbTintColor="#1EB1FC"
+        value={value}
+        onSlidingStart={() => onSlideScroll(false)}
+        onSlidingComplete={() => onSlideScroll(true)}
+        style={{ width: '100%', height: 40, ...scope.getStyle('element') }}
+        onValueChange={onChange} // Alterna o estado
+      />
+    </>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/UISwitch.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { ChildType, Utils } from 'react-crud-utils';
+import { Switch } from 'react-native';
+
+export default function UISwitch(props: ChildType) {
+  const scope = props.scope;
+  const initial = Utils.nvl(scope.getValue(), false) as boolean;
+  const [value, setValue] = useState(initial);
+
+  let onChange = v => {
+    scope.changeValue(v);
+
+    setValue(v);
+  };
+
+  return (
+    <Switch
+      value={value}
+      style={scope.getStyle('element')}
+      onValueChange={onChange} // Alterna o estado
+    />
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/UIToast.tsx

@@ -0,0 +1,44 @@
+import { StyleSheet } from 'react-native';
+import Toast, { BaseToast, ErrorToast } from 'react-native-toast-message';
+
+export default function UIToast() {
+  const toastConfig = {
+    success: props => (
+      <BaseToast
+        {...props}
+        style={styles.darkToast}
+        contentContainerStyle={{ paddingHorizontal: 15 }}
+        text1Style={styles.text}
+        text2Style={styles.text}
+      />
+    ),
+    error: props => (
+      <ErrorToast
+        {...props}
+        style={styles.darkToast}
+        text1Style={styles.text}
+        text2Style={styles.text}
+      />
+    ),
+    info: props => (
+      <BaseToast
+        {...props}
+        style={styles.darkToast}
+        text1Style={styles.text}
+        text2Style={styles.text}
+      />
+    ),
+  };
+
+  const styles = StyleSheet.create({
+    darkToast: {
+      backgroundColor: 'rgba(34, 34, 34, 0.85)',
+      borderLeftColor: '#222', // borda mais escura
+    },
+    text: {
+      color: '#fff', // letras brancas
+      textAlign: 'center',
+    },
+  });
+  return <Toast config={toastConfig} />;
+}