react-crud-mobile 1.3.359 → 1.3.361

package/src/elements/core/UIOrder.tsx

@@ -1,194 +1,194 @@
-import React, { useState } from 'react';
-import { ChildType, ComponentUtils, ScopeUtils, Utils } from 'react-crud-utils';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import UI from '../UI';
-import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
-import DraggableFlatList, {
-  ScaleDecorator,
-} from 'react-native-draggable-flatlist';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import UIHeader from './UIHeader';
-import UIChildren from '../UIChildren';
-
-export default function UIOrder(props: ChildType) {
-  const scope = props.scope;
-  const crud = scope.crud;
-  const original = scope.original;
-  const cols = Utils.nvl(scope.getPart('cols', undefined, 1));
-
-  const getStyle = (key: string, extra?: any) => {
-    return scope.getStyle(key, { ...extra, ...styles[key] });
-  };
-
-  const getContainerStyle = (extra?: any) => {
-    let row = getStyle('container', {});
-
-    if (cols > 1) {
-      row = { ...row, flexDirection: 'row', flexWrap: 'wrap' };
-    }
-
-    return row;
-  };
-
-  const items = Utils.call(() => {
-    let list = Utils.nvl(scope.getItems(), []);
-
-    if (original.search && !original.list?.url) {
-      let query = crud
-        .get('query', '')
-        .toLowerCase()
-        .trim() as string;
-
-      if (query.length > 1) {
-        let filters: any[] = [];
-        let filterBy = Utils.nvl(original.filterBy, 'label');
-
-        Utils.each(list, o => {
-          let label = o[filterBy];
-
-          if (label) {
-            if (label.includes(query)) {
-              filters.push(o);
-            }
-          }
-        });
-
-        return filters;
-      }
-    }
-    return list;
-  });
-
-  //v2
-
-  const renderItem = ({ item, drag, isActive, getIndex }) => {
-    const index = getIndex();
-    const name = `${scope.key('row', index, '')}`;
-    const [row] = useState(
-      ScopeUtils.create({
-        ...original,
-        parent: scope,
-        name,
-        crud: scope.crud,
-        index,
-        type: 'row',
-        data: item,
-      })
-    );
-
-    let css = { ...scope.getStyle('row') };
-
-    if (isActive) {
-      css = { ...css, ...scope.getStyle('active') };
-    }
-
-    if (isActive) {
-      css = { ...css, ...row.getStyle('rowSelected', {}) };
-    } else {
-      css = { ...css, ...row.getStyle('rowUnSelected', {}) };
-    }
-    const Child = () => {
-      if (Utils.isEmpty(props.children)) {
-        return (
-          <>
-            <MaterialCommunityIcons name="drag" size={24} color="black" />
-            <Text style={styles.text}>{scope.getItemLabel(item)}</Text>
-          </>
-        );
-      }
-
-      return (
-        <>
-          <UIChildren transient scope={row} crud={row.crud}>
-            {props.children}
-          </UIChildren>
-        </>
-      );
-    };
-    return (
-      <ScaleDecorator>
-        <TouchableOpacity
-          style={[
-            styles.row,
-            { backgroundColor: isActive ? 'lightblue' : 'white' },
-            { ...css },
-          ]}
-          delayLongPress={100}
-          onLongPress={drag} // Initiate drag on long press
-        >
-          <Child />
-        </TouchableOpacity>
-      </ScaleDecorator>
-    );
-  };
-
-  const OrderView = ({ children }) => {
-    if (original.gesture !== false) {
-      return (
-        <GestureHandlerRootView
-          style={{
-            flex: 1,
-            width: '100%',
-            ...scope.getStyle('order', { justifyContent: 'flex-start' }),
-          }}
-        >
-          {children}
-        </GestureHandlerRootView>
-      );
-    }
-    return <>{children}</>;
-  };
-
-  const Header = ({ pos }) => {
-    const hPos = Utils.nvl(original.headerPos, 'outer');
-
-    if (hPos !== pos) return <></>;
-
-    return <UIHeader scope={scope} />;
-  };
-
-  let OrderData = () => {
-    const [data, setData] = useState(items);
-
-    return (
-      <DraggableFlatList
-        data={data}
-        ListHeaderComponent={<Header pos="inner" />}
-        ListFooterComponent={<>{scope.getPart('footer')}</>}
-        renderItem={renderItem}
-        containerStyle={{ ...scope.getStyle('list') }}
-        keyExtractor={item => {
-          let key = scope.getItemValue(item);
-
-          if (original?.debug) {
-            console.log(key);
-          }
-          return key;
-        }}
-        onDragEnd={({ data }) => {
-          setData(data);
-          scope.changeValue(data);
-        }}
-      />
-    );
-  };
-  return (
-    <OrderView>
-      <Header pos="outer" />
-      <OrderData />
-    </OrderView>
-  );
-}
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    gap: 10,
-    padding: 15,
-    borderBottomWidth: 1,
-    borderBottomColor: '#ccc',
-  },
-  text: {
-    fontSize: 18,
-  },
-});
+import React, { useState } from 'react';
+import { ChildType, ComponentUtils, ScopeUtils, Utils } from 'react-crud-utils';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import UI from '../UI';
+import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import DraggableFlatList, {
+  ScaleDecorator,
+} from 'react-native-draggable-flatlist';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import UIHeader from './UIHeader';
+import UIChildren from '../UIChildren';
+
+export default function UIOrder(props: ChildType) {
+  const scope = props.scope;
+  const crud = scope.crud;
+  const original = scope.original;
+  const cols = Utils.nvl(scope.getPart('cols', undefined, 1));
+
+  const getStyle = (key: string, extra?: any) => {
+    return scope.getStyle(key, { ...extra, ...styles[key] });
+  };
+
+  const getContainerStyle = (extra?: any) => {
+    let row = getStyle('container', {});
+
+    if (cols > 1) {
+      row = { ...row, flexDirection: 'row', flexWrap: 'wrap' };
+    }
+
+    return row;
+  };
+
+  const items = Utils.call(() => {
+    let list = Utils.nvl(scope.getItems(), []);
+
+    if (original.search && !original.list?.url) {
+      let query = crud
+        .get('query', '')
+        .toLowerCase()
+        .trim() as string;
+
+      if (query.length > 1) {
+        let filters: any[] = [];
+        let filterBy = Utils.nvl(original.filterBy, 'label');
+
+        Utils.each(list, o => {
+          let label = o[filterBy];
+
+          if (label) {
+            if (label.includes(query)) {
+              filters.push(o);
+            }
+          }
+        });
+
+        return filters;
+      }
+    }
+    return list;
+  });
+
+  //v2
+
+  const renderItem = ({ item, drag, isActive, getIndex }) => {
+    const index = getIndex();
+    const name = `${scope.key('row', index, '')}`;
+    const [row] = useState(
+      ScopeUtils.create({
+        ...original,
+        parent: scope,
+        name,
+        crud: scope.crud,
+        index,
+        type: 'row',
+        data: item,
+      })
+    );
+
+    let css = { ...scope.getStyle('row') };
+
+    if (isActive) {
+      css = { ...css, ...scope.getStyle('active') };
+    }
+
+    if (isActive) {
+      css = { ...css, ...row.getStyle('rowSelected', {}) };
+    } else {
+      css = { ...css, ...row.getStyle('rowUnSelected', {}) };
+    }
+    const Child = () => {
+      if (Utils.isEmpty(props.children)) {
+        return (
+          <>
+            <MaterialCommunityIcons name="drag" size={24} color="black" />
+            <Text style={styles.text}>{scope.getItemLabel(item)}</Text>
+          </>
+        );
+      }
+
+      return (
+        <>
+          <UIChildren transient scope={row} crud={row.crud}>
+            {props.children}
+          </UIChildren>
+        </>
+      );
+    };
+    return (
+      <ScaleDecorator>
+        <TouchableOpacity
+          style={[
+            styles.row,
+            { backgroundColor: isActive ? 'lightblue' : 'white' },
+            { ...css },
+          ]}
+          delayLongPress={100}
+          onLongPress={drag} // Initiate drag on long press
+        >
+          <Child />
+        </TouchableOpacity>
+      </ScaleDecorator>
+    );
+  };
+
+  const OrderView = ({ children }) => {
+    if (original.gesture !== false) {
+      return (
+        <GestureHandlerRootView
+          style={{
+            flex: 1,
+            width: '100%',
+            ...scope.getStyle('order', { justifyContent: 'flex-start' }),
+          }}
+        >
+          {children}
+        </GestureHandlerRootView>
+      );
+    }
+    return <>{children}</>;
+  };
+
+  const Header = ({ pos }) => {
+    const hPos = Utils.nvl(original.headerPos, 'outer');
+
+    if (hPos !== pos) return <></>;
+
+    return <UIHeader scope={scope} />;
+  };
+
+  let OrderData = () => {
+    const [data, setData] = useState(items);
+
+    return (
+      <DraggableFlatList
+        data={data}
+        ListHeaderComponent={<Header pos="inner" />}
+        ListFooterComponent={<>{scope.getPart('footer')}</>}
+        renderItem={renderItem}
+        containerStyle={{ ...scope.getStyle('list') }}
+        keyExtractor={item => {
+          let key = scope.getItemValue(item);
+
+          if (original?.debug) {
+            console.log(key);
+          }
+          return key;
+        }}
+        onDragEnd={({ data }) => {
+          setData(data);
+          scope.changeValue(data);
+        }}
+      />
+    );
+  };
+  return (
+    <OrderView>
+      <Header pos="outer" />
+      <OrderData />
+    </OrderView>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    gap: 10,
+    padding: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+  },
+  text: {
+    fontSize: 18,
+  },
+});

package/src/elements/core/UIQuantity.tsx

@@ -1,98 +1,98 @@
-import { Ionicons } from '@expo/vector-icons';
-import { useState } from 'react';
-import { ChildType, Utils } from 'react-crud-utils';
-import { Text, TouchableHighlight, View } from 'react-native';
-
-export default function UIQuantity(props: ChildType) {
-  const scope = props.scope;
-  const element = scope.original;
-
-  let [index, setIndex] = useState(0);
-
-  const value = scope.getValue(0);
-
-  let color = element.color;
-
-  if (!color) color = 'primary';
-
-  const btn = {
-    padding: 0,
-    alignItems: 'center',
-    height: 30,
-    width: 30,
-    textAlign: 'center',
-    verticalAling: 'middle',
-    borderRadius: 24,
-    backgroundColor: color,
-    color: '#ffffff',
-    justifyContent: 'center',
-  };
-
-  const styles: any = {
-    buttonLabel: {
-      color: '#ffffff',
-      fontWeight: '500',
-      fontSize: 16,
-    },
-    value: {
-      flex: 1,
-      flexDirection: 'row',
-      textAlign: 'center',
-      fontWeight: '500',
-    },
-    buttonInner: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    buttonIcon: {
-      color: '#fff',
-      fontSize: 18,
-    },
-    button: btn,
-    addButton: {
-      ...btn,
-    },
-    delButton: {
-      ...btn,
-    },
-  };
-
-  const change = (val: number) => {
-    scope.changeValue(value + val);
-    setIndex(++index);
-  };
-
-  const onClickAdd = () => {
-    change(1);
-  };
-
-  const onClickDel = () => {
-    change(-1);
-  };
-
-  const style = (part: string, extra?: any) => {
-    let s = { ...styles[part], ...extra };
-    return scope.getStyle(part, s);
-  };
-
-  return (
-    <>
-      <TouchableHighlight
-        underlayColor={'transparent'}
-        onPress={onClickDel}
-        style={style('delButton')}
-      >
-        <Ionicons size={30} style={style('buttonIcon')} name="remove" />
-      </TouchableHighlight>
-      <Text style={style('value')}>{Utils.nvl(value, 0)}</Text>
-      <TouchableHighlight
-        underlayColor={'transparent'}
-        onPress={onClickAdd}
-        style={style('addButton')}
-      >
-        <Ionicons size={30} style={style('buttonIcon')} name="add" />
-      </TouchableHighlight>
-    </>
-  );
-}
+import { Ionicons } from '@expo/vector-icons';
+import { useState } from 'react';
+import { ChildType, Utils } from 'react-crud-utils';
+import { Text, TouchableHighlight, View } from 'react-native';
+
+export default function UIQuantity(props: ChildType) {
+  const scope = props.scope;
+  const element = scope.original;
+
+  let [index, setIndex] = useState(0);
+
+  const value = scope.getValue(0);
+
+  let color = element.color;
+
+  if (!color) color = 'primary';
+
+  const btn = {
+    padding: 0,
+    alignItems: 'center',
+    height: 30,
+    width: 30,
+    textAlign: 'center',
+    verticalAling: 'middle',
+    borderRadius: 24,
+    backgroundColor: color,
+    color: '#ffffff',
+    justifyContent: 'center',
+  };
+
+  const styles: any = {
+    buttonLabel: {
+      color: '#ffffff',
+      fontWeight: '500',
+      fontSize: 16,
+    },
+    value: {
+      flex: 1,
+      flexDirection: 'row',
+      textAlign: 'center',
+      fontWeight: '500',
+    },
+    buttonInner: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    buttonIcon: {
+      color: '#fff',
+      fontSize: 18,
+    },
+    button: btn,
+    addButton: {
+      ...btn,
+    },
+    delButton: {
+      ...btn,
+    },
+  };
+
+  const change = (val: number) => {
+    scope.changeValue(value + val);
+    setIndex(++index);
+  };
+
+  const onClickAdd = () => {
+    change(1);
+  };
+
+  const onClickDel = () => {
+    change(-1);
+  };
+
+  const style = (part: string, extra?: any) => {
+    let s = { ...styles[part], ...extra };
+    return scope.getStyle(part, s);
+  };
+
+  return (
+    <>
+      <TouchableHighlight
+        underlayColor={'transparent'}
+        onPress={onClickDel}
+        style={style('delButton')}
+      >
+        <Ionicons size={30} style={style('buttonIcon')} name="remove" />
+      </TouchableHighlight>
+      <Text style={style('value')}>{Utils.nvl(value, 0)}</Text>
+      <TouchableHighlight
+        underlayColor={'transparent'}
+        onPress={onClickAdd}
+        style={style('addButton')}
+      >
+        <Ionicons size={30} style={style('buttonIcon')} name="add" />
+      </TouchableHighlight>
+    </>
+  );
+}