react-crud-mobile 1.0.592 → 1.0.596

package/src/elements/core/UIList.tsx

@@ -10,30 +10,15 @@ export default function UIList(props: ChildType) {
   const crud = scope.crud;
   const original = scope.original;
   const cols = Utils.nvl(original.cols, 1);
-  const rowWidth = Math.floor(100 / cols) + '%';
   const items = Utils.nvl(scope.getItems(), []);
   const styles = { repeat: stylesRepeat, list: stylesList }?.[original.type];
   const add = ComponentUtils.getDefine(props, 'add');
   const hideAddWhenEmpty = original.hideAddWhenEmpty;
 
-  const onClick = (item: any) => {
-    scope.call('click', { value: item, item, edit: true });
-  };
-
   const getStyle = (key: string, extra?: any) => {
     return scope.getStyle(key, { ...extra, ...styles[key] });
   };
 
-  const getRowStyle = (extra?: any) => {
-    let row = getStyle('row', {});
-
-    if (cols > 0) {
-      row.width = rowWidth;
-    }
-
-    return row;
-  };
-
   const getContainerStyle = (extra?: any) => {
     let row = getStyle('container', {});
 
@@ -83,28 +68,6 @@ export default function UIList(props: ChildType) {
     return <>{empty}</>;
   };
 
-  let RowItem = ({ item, index, children }) => {
-    if (!original.click) {
-      return (
-        <View key={`k-${index}`} style={getRowStyle()}>
-          {children}
-        </View>
-      );
-    }
-    return (
-      <TouchableHighlight
-        key={`k-${index}`}
-        style={getRowStyle()}
-        underlayColor={'transparent'}
-        onPress={e => {
-          e.stopPropagation();
-          onClick(item);
-        }}
-      >
-        {children}
-      </TouchableHighlight>
-    );
-  };
   return (
     <>
       {original.search !== false && (
@@ -119,11 +82,9 @@ export default function UIList(props: ChildType) {
       <View style={getContainerStyle()}>
         <Empty />
         {items.map((item: any, i: number) => (
-          <RowItem index={i} item={item}>
-            <UIListRow scope={scope} item={item} index={i}>
-              {props.children}
-            </UIListRow>
-          </RowItem>
+          <UIListRow scope={scope} item={item} index={i} styles={styles}>
+            {props.children}
+          </UIListRow>
         ))}
         {isShowAdd() && <>{add}</>}
       </View>

package/src/elements/core/UIListRow.tsx

@@ -1,14 +1,17 @@
 import React, { useState } from 'react';
 import { ChildType, ScopeUtils, Utils } from 'react-crud-utils';
 import UIChildren from '../UIChildren';
+import { TouchableHighlight, View } from 'react-native';
 
 interface UIListRowType extends ChildType {
   item: any;
   index: number;
+  styles: any;
 }
 
 export default function UIListRow(props: UIListRowType) {
   const parent = props.scope;
+  const original = parent.original;
   const item = props.item;
   const index = props.index;
   const name = `${parent.key('row', index)}`;
@@ -20,12 +23,56 @@ export default function UIListRow(props: UIListRowType) {
     type: 'row',
     data: item,
   };
-  let [scope] = useState(ScopeUtils.create(row));
+  const styles = props.styles;
+  const cols = Utils.nvl(original.cols, 1);
+  const rowWidth = Math.floor(100 / cols) + '%';
+
+  const [scope] = useState(ScopeUtils.create(row));
+
+  const getStyle = (key: string, extra?: any) => {
+    return scope.getStyle(key, { ...extra, ...styles[key] });
+  };
+
+  const getRowStyle = (extra?: any) => {
+    let row = getStyle('row', {});
+
+    if (cols > 0) {
+      row.width = rowWidth;
+    }
+
+    return row;
+  };
+  let onClick = (item: any) => {
+    scope.call('click', { value: item, item, edit: true });
+  };
+
+  let RowItem = () => {
+    if (!original.click) {
+      return (
+        <View key={`k-${index}`} style={getRowStyle()}>
+          {props.children}
+        </View>
+      );
+    }
+    return (
+      <TouchableHighlight
+        key={`k-${index}`}
+        style={getRowStyle()}
+        underlayColor={'transparent'}
+        onPress={e => {
+          e.stopPropagation();
+          onClick(item);
+        }}
+      >
+        <>{props.children}</>
+      </TouchableHighlight>
+    );
+  };
 
   return (
     <>
       <UIChildren scope={scope} crud={scope.crud}>
-        {props.children}
+        <RowItem />
       </UIChildren>
     </>
   );