react-crud-mobile 1.1.2 → 1.3.1

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/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/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: {},
-};