react-crud-mobile 1.3.332 → 1.3.334

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

@@ -1,39 +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;
-}
+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

@@ -1,12 +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);
-  }
-}
+//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);
+  }
+}