react-crud-mobile 1.3.52 → 1.3.53

package/src/elements/core/UIView.tsx

@@ -1,94 +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: {},
-});
+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/index.ts

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