react-crud-mobile 1.0.242 → 1.0.244

package/src/elements/core/UIToggle.tsx

@@ -1,85 +1,91 @@
-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 onClick = (item: any) => {
-    scope.changeValue(item.object);
-    setIndex(++index);
-  };
-
-  const Item = ({ item, index }) => {
-    if (Utils.isEmpty(props.children)) {
-      return <Text>{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') };
-
-    if (item?.value === value) {
-      style = { ...style, ...scope.getStyle('selected') };
-
-      style.backgroundColor = scope.getPart(
-        'selectedColor',
-        undefined,
-        '#55a46f'
-      );
-    }
-
-    return style;
-  };
-
-  return (
-    <>
-      <View style={styles.container}>
-        {options.map((item: any, i: number) => (
-          <TouchableHighlight
-            key={`k-${i}`}
-            style={getItemStyle(item)}
-            onPress={e => {
-              onClick(item);
-            }}
-          >
-            <Item item={item} index={i} />
-          </TouchableHighlight>
-        ))}
-      </View>
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    gap: 10,
-    justifyContent: 'center',
-    flexDirection: 'row',
-  },
-  item: {
-    padding: 15,
-    marginVertical: 8,
-    backgroundColor: '#f5f5f5',
-    borderRadius: 8,
-    width: 'auto',
-    flexDirection: 'row',
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});
+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 onClick = (item: any) => {
+    scope.changeValue(item.object);
+    setIndex(++index);
+  };
+
+  const Item = ({ item, index }) => {
+    if (Utils.isEmpty(props.children)) {
+      return <Text>{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') };
+
+    if (item?.value === value) {
+      let st = scope.getStyle('selected');
+
+      style = { ...style, ...st };
+
+      style.backgroundColor = scope.getPart(
+        'selectedColor',
+        undefined,
+        '#55a46f'
+      );
+
+      if (!st.color) {
+        st.color = '#ffffff';
+      }
+    }
+
+    return style;
+  };
+
+  return (
+    <>
+      <View style={styles.container}>
+        {options.map((item: any, i: number) => (
+          <TouchableHighlight
+            key={`k-${i}`}
+            style={getItemStyle(item)}
+            onPress={e => {
+              onClick(item);
+            }}
+          >
+            <Item item={item} index={i} />
+          </TouchableHighlight>
+        ))}
+      </View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    gap: 10,
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  item: {
+    padding: 15,
+    marginVertical: 8,
+    backgroundColor: '#f5f5f5',
+    borderRadius: 8,
+    width: 'auto',
+    flexDirection: 'row',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});

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";