react-crud-mobile 1.1.3 → 1.3.2

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} />;
+}

package/src/elements/core/UIToggle.tsx

@@ -0,0 +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: 10,
+    marginVertical: 8,
+    backgroundColor: 'background',
+    borderRadius: 8,
+    justifyContent: 'center',
+    width: 'auto',
+    flexDirection: 'row',
+  },
+  text: {
+    fontSize: 15,
+    fontWeight: '500',
+  },
+});

package/src/elements/core/UIView.tsx

@@ -0,0 +1,94 @@
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import UIChildren from '../UIChildren';
+import {
+  ChildType,
+  ComponentUtils,
+  HtmlUtils,
+  Utils,
+  ViewUtils,
+} from 'react-crud-utils';
+import { useEffect, useRef } from 'react';
+import UIToast from './UIToast';
+import MobileUtils from '../../utils/MobileUtils';
+
+export default function UIView({ scope, children }: ChildType) {
+  const theme = scope.getTheme();
+  const header = scope.getPart('header', null, []);
+  const headerStyle = Utils.nvl(theme.styles?.defaults?.header, {});
+  const headerTextStyle = Utils.nvl(theme.styles?.defaults?.headerText, {});
+  const scrollRef = useRef(null);
+
+  useEffect(() => {
+    MobileUtils.syncTheme();
+  }, []);
+
+  const onScroll = () => {
+    const crud = ViewUtils.getCrud();
+
+    Utils.each(crud.scroll, s => {
+      if (s.onScroll) {
+        s.onScroll.call(s);
+      }
+    });
+  };
+
+  let headerStyleFull = Utils.call(() => {
+    let css = scope.getStyle('header', headerStyle);
+    let bg = css.backgroundColor;
+
+    if (bg) {
+      css.color = HtmlUtils.getTextColor(bg);
+    }
+    return css;
+  });
+
+  let hasHeader = !Utils.isEmpty(header);
+  let AuxHeader = () => {
+    if (typeof header === 'string') {
+      return <Text style={headerTextStyle}>{header}</Text>;
+    }
+    return <>{header}</>;
+  };
+
+  scope.put('scrollRef', scrollRef);
+
+  ComponentUtils.setViewScope(scope);
+
+  return (
+    <>
+      {hasHeader && (
+        <View style={headerStyleFull}>
+          <AuxHeader />
+        </View>
+      )}
+      <View style={scope.getStyle('container', styles.container)}>
+        <ScrollView
+          onScroll={onScroll}
+          scrollEventThrottle={16}
+          ref={scrollRef}
+          nestedScrollEnabled={true}
+          keyboardShouldPersistTaps="handled"
+          contentContainerStyle={scope.getStyle('contentContainer', {
+            paddingBottom: 50,
+          })}
+          style={scope.getStyle('scroll', styles.scroll)}
+        >
+          <UIChildren scope={scope}>{children}</UIChildren>
+        </ScrollView>
+      </View>
+      <UIToast /> {/* <- este componente precisa estar aqui */}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  scroll: {
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 15,
+    paddingRight: 15,
+  },
+  container: {},
+  view: {},
+});

package/src/hooks/useIsVisible.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import { Scope } from 'react-crud-utils';
+import { Dimensions, Platform } from 'react-native';
+
+export function useIsVisible(ref: any, scope: Scope) {
+  const [isVisible, setIsVisible] = useState(scope.visible === true);
+
+  useEffect(() => {
+    const checkVisibility = () => {
+      if (!ref.current || isVisible || !scope.original?.useIsInView) return;
+
+      if (Platform.OS === 'web') {
+        const rect = ref.current.getBoundingClientRect?.();
+
+        if (rect && typeof window !== 'undefined') {
+          const windowHeight = window.innerHeight;
+          const visible = rect.top < windowHeight && rect.bottom > 0;
+
+          if (visible) scope.visible = visible;
+
+          setIsVisible(visible);
+        }
+      } else {
+        ref.current.measureInWindow?.((x, y, width, height) => {
+          const windowHeight = Dimensions.get('window').height;
+          const visible = y < windowHeight && y + height > 0;
+
+          if (visible) scope.visible = visible;
+          setIsVisible(visible);
+        });
+      }
+    };
+
+    const interval = setInterval(checkVisibility, 300); // roda a cada 300ms
+    return () => clearInterval(interval);
+  }, [ref]);
+
+  return isVisible;
+}

package/src/index.ts

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

package/src/utils/MobileUtils.ts

@@ -0,0 +1,12 @@
+//import { ThemeUtils, Utils } from 'react-crud-utils';
+//import { StatusBar } from 'react-native';
+
+export default class MobileUtils {
+  static syncTheme() {
+    // let current = ThemeUtils.getCurrentTheme();
+    //let dec: any = { light: 'light-content', dark: 'dark-content' };
+    //let name = Utils.nvl(dec[current?.theme], dec.light);
+    //StatusBar.setBarStyle?.(name);
+    //StatusBar.setBackgroundColor?.(current?.colors?.theme);
+  }
+}

package/src/elements/card/ElCard.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import UIChildren from '../UIChildren';
-import ElLabel from '../grid/ElLabel';
-import ElInclude from '../grid/ElInclude';
-import { ChildType } from 'react-crud-utils';
-
-export default function ElCard(props: ChildType) {
-  let scope = props.scope;
-
-  return (
-    <div
-      className={scope.getStyleClass('inner')}
-      style={scope.getStyle('inner')}
-    >
-      <ElLabel {...props} scope={scope}></ElLabel>
-      <UIChildren {...props} scope={scope} />
-
-      <div
-        className={scope.getStyleClass('bottom')}
-        style={scope.getStyle('bottom')}
-      >
-        <ElInclude {...props} scope={scope} name="bottom" />
-      </div>
-    </div>
-  );
-}

package/src/elements/core/AutoComplete.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
-
-export default function AutoComplete(props: any) {
-  const handlePress = () => {
-    Linking.openURL('https://reactnative.dev/');
-  };
-
-  return (
-    <TouchableOpacity onPress={handlePress}>
-      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
-    </TouchableOpacity>
-  );
-}
-
-const styles = {
-  link: {},
-};

package/src/elements/core/Button.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
-
-export default function Button(props: any) {
-  const handlePress = () => {
-    Linking.openURL('https://reactnative.dev/');
-  };
-
-  return (
-    <TouchableOpacity onPress={handlePress}>
-      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
-    </TouchableOpacity>
-  );
-}
-
-const styles = {
-  link: {},
-};

package/src/elements/core/Option.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
-
-export default function Option(props: any) {
-  const handlePress = () => {
-    Linking.openURL('https://reactnative.dev/');
-  };
-
-  return (
-    <TouchableOpacity onPress={handlePress}>
-      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
-    </TouchableOpacity>
-  );
-}
-
-const styles = {
-  link: {},
-};

package/src/elements/core/Select.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
-
-export default function Select(props: any) {
-  const handlePress = () => {
-    Linking.openURL('https://reactnative.dev/');
-  };
-
-  return (
-    <TouchableOpacity onPress={handlePress}>
-      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
-    </TouchableOpacity>
-  );
-}
-
-const styles = {
-  link: {},
-};

package/src/elements/core/Switch.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
-
-export default function Switch(props: any) {
-  const handlePress = () => {
-    Linking.openURL('https://reactnative.dev/');
-  };
-
-  return (
-    <TouchableOpacity onPress={handlePress}>
-      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
-    </TouchableOpacity>
-  );
-}
-
-const styles = {
-  link: {},
-};

package/src/elements/grid/ElGrid.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-
-import ElGridRow from './ElGridRow';
-import ElGridTop from './ElGridTop';
-import ElGridFilter from './ElGridFilter';
-import ElGridBotom from './ElGridBotom';
-import ElLabel from './ElLabel';
-import { ChildType, ComponentUtils, Scope } from 'react-crud-utils';
-
-export default function ElGrid(props: ChildType) {
-  let scope: Scope = props.scope;
-  let items: any = scope.getItems();
-  let expansion = ComponentUtils.getDefine(props, 'expansion');
-
-  return (
-    <div
-      className={scope.getStyleClass('inner')}
-      style={scope.getStyle('inner')}
-    >
-      <ElLabel {...props} scope={scope} position="outside"></ElLabel>
-      <div
-        className={scope.getStyleClass('child')}
-        style={scope.getStyle('child')}
-      >
-        <ElLabel {...props} scope={scope} position="inside"></ElLabel>
-        <div className="ui-data">
-          <ElGridTop {...props} scope={scope}></ElGridTop>
-          <ElGridFilter scope={scope}></ElGridFilter>
-          <div className="ui-grid-data">
-            <table className="ui-grid ui-table">
-              <tbody>
-                {items.map((row: any, i: number) => (
-                  <ElGridRow
-                    {...props}
-                    expansion={expansion}
-                    key={'r' + i}
-                    scope={scope}
-                    value={row}
-                    index={i}
-                  />
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <ElGridBotom {...props} scope={scope} />
-      </div>
-    </div>
-  );
-}

package/src/elements/grid/ElGridBotom.tsx

@@ -1,21 +0,0 @@
-import React, { useState } from "react";
-import ElGridPaginator from "./ElGridPaginator";
-import UI from "../UI";
-import { ChildType } from "react-crud-utils";
-
-export default function ElGridBotom(props: ChildType) {
-  let scope = props.scope;
-  let children = props.children;
-
-  return (
-    <div className="ui-grid-bottom">
-      <div className="ui-grid-bottom-inner">
-        <UI.Include {...props} transient name="bottomLeft" />
-        <ElGridPaginator scope={scope} position="bottom">
-          {children}
-        </ElGridPaginator>
-        <UI.Include {...props} transient name="bottomRight" />
-      </div>
-    </div>
-  );
-}

package/src/elements/grid/ElGridCheck.tsx

@@ -1,67 +0,0 @@
-import UI from '../UI';
-import Ionicons from '@expo/vector-icons/Ionicons';
-import { useState } from 'react';
-import { GridRowType, Utils } from 'react-crud-utils';
-
-export default function ElGridCheck({ scope, value, rowIndex }: GridRowType) {
-  let original = scope.original;
-  let [index, setIndex] = useState(0);
-  let key = scope.key('check', rowIndex, 's', index);
-
-  let check = () => {
-    let cs = scope.crudSearch;
-
-    if (cs) {
-      if (!cs.selecteds) {
-        cs.selecteds = {};
-      }
-
-      let itemValue = Utils.nvl(original.itemValue, 'id');
-      let key = value[itemValue];
-
-      if (typeof key !== 'undefined') {
-        if (typeof cs.selecteds[key] === 'undefined') {
-          cs.selecteds[key] = value;
-        } else {
-          delete cs.selecteds[key];
-        }
-      }
-    }
-    setIndex(++index);
-  };
-
-  let getCheckIcon = () => {
-    if (isChecked()) {
-      return <Ionicons />;
-    }
-    return <Ionicons />;
-  };
-
-  let isChecked = () => {
-    let cs = scope.crudSearch;
-
-    if (cs) {
-      if (!cs.selecteds) {
-        cs.selecteds = {};
-      }
-
-      let itemValue = Utils.nvl(original.itemValue, 'id');
-      let key = value[itemValue];
-
-      if (typeof key !== 'undefined') {
-        if (typeof cs.selecteds[key] !== 'undefined') {
-          return true;
-        }
-      }
-    }
-    return false;
-  };
-
-  return (
-    <UI.Button
-      key={key}
-      icon={getCheckIcon()}
-      click={{ action: check }}
-    ></UI.Button>
-  );
-}

package/src/elements/grid/ElGridColumn.tsx

@@ -1,32 +0,0 @@
-import React, { useState } from "react";
-import UIChildren from "../UIChildren";
-import { Scope, Utils } from "react-crud-utils";
-
-interface ElGridColumnType {
-  scope: Scope;
-  styleClass?: string;
-  children?: any;
-  colspan?: number;
-  column?: any;
-}
-
-export default function ElGridColumn(props: ElGridColumnType) {
-  let scope = props.scope;
-  let col = Utils.nvl(props.column?.props, {});
-  let [colScope] = useState(new Scope(col, scope, scope.crud));
-
-  let getStyleClass = () => {
-    let def = Utils.nvl(props.styleClass, "");
-
-    return "ui-grid-col " + def + " " + colScope.getStyleClass("column");
-  };
-  return (
-    <td
-      className={getStyleClass()}
-      style={colScope.getStyle("column")}
-      colSpan={props.colspan}
-    >
-      <UIChildren scope={scope}>{props.children}</UIChildren>
-    </td>
-  );
-}

package/src/elements/grid/ElGridFilter.tsx

@@ -1,5 +0,0 @@
-import { ChildType } from "react-crud-utils";
-
-export default function ElGridFilter(props: ChildType) {
-  return <></>;
-}