@jescon-technologies/react-native-ui-kit 0.0.4 → 0.0.5

package/src/Components/NonSwipableSupplierCard.js

@@ -0,0 +1,348 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import { Global } from '../../../../../src/Common/Global';
+import { CButtonShadow, isNUQ } from '../CommonStyle/ComponentFunctions';
+import { useNavigation } from '../Navigation/useNavigation';
+
+import { SwipeRow } from 'react-native-swipe-list-view';
+
+const NonSwipableSupplierCard = ({ supplierDetails,type }) => {
+  const navigation = useNavigation();
+
+  const renderLeftActions = () => (
+    <View style={{
+      // flex: 1,
+      // width: normalize(100),
+      // backgroundColor: '#4caf50',
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+      borderTopLeftRadius: 10,
+      borderBottomLeftRadius: 10,
+      flexDirection: 'row',
+      paddingHorizontal: normalize(10),
+    }}>
+      {/* Marketing division */}
+      <TouchableOpacity
+        style={{
+          // // flex: 1,
+          // width: normalize(100),
+          // // backgroundColor: '#4caf50',
+          // justifyContent: 'flex-start',
+          // alignItems: 'center',
+          // borderTopLeftRadius: 10,
+          // borderBottomLeftRadius: 10,
+          marginLeft: normalize(5),
+        }}
+        onPress={() => console.log('left')}
+      >
+        {/* {!leftAction && <View style={{
+                backgroundColor: '#f4f5ae',
+                justifyContent: 'center',
+                alignItems: 'center',
+                ...CButtonShadow(),
+                borderRadius: normalize(5),
+                paddingHorizontal: normalize(3),
+                paddingVertical: normalize(5),
+                height: normalize(38),
+                width: normalize(38)
+              }}>
+                <HOCIcons.MaterialCommunityIcons
+                  name={'office-building'}
+                  size={normalize(20)}
+                  color={Global.AppTheme.primary_color}
+                />
+                <Text numberOfLines={1} style={{ fontSize: normalize(8), fontWeight: 'bold', color: Global.AppTheme.primary_color }}>Division</Text>
+              </View>
+              } */}
+        {/* {leftAction &&
+                <View style={{
+                  backgroundColor: '#f4f5ae',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  ...CButtonShadow(),
+                  borderRadius: normalize(5),
+                  paddingHorizontal: normalize(3),
+                  paddingVertical: normalize(5),
+                  height: normalize(38),
+                  width: normalize(38)
+                }}>
+                  <Text style={{ fontSize: normalize(9), fontWeight: 'bold', color: Global.AppTheme.primary_color }}>{data?.marketingdivisionname}</Text>
+                </View>
+              } */}
+      </TouchableOpacity>
+      {/* Tax name */}
+      <TouchableOpacity
+        style={{
+          // // flex: 1,
+          // width: normalize(100),
+          // // backgroundColor: '#4caf50',
+          // justifyContent: 'flex-start',
+          // alignItems: 'center',
+          // borderTopLeftRadius: 10,
+          // borderBottomLeftRadius: 10,
+          marginLeft: normalize(5),
+        }}
+        onPress={() => console.log('left')}
+      >
+        {/* {!secondAction && <View style={{
+                backgroundColor: '#f5bfae',
+                justifyContent: 'center',
+                alignItems: 'center',
+                ...CButtonShadow(),
+                borderRadius: normalize(5),
+                paddingHorizontal: normalize(3),
+                paddingVertical: normalize(5),
+                height: normalize(38),
+                width: normalize(38)
+              }}>
+                <HOCIcons.MaterialCommunityIcons
+                  name={'brightness-percent'}
+                  size={normalize(20)}
+                  color={Global.AppTheme.primary_color}
+                />
+                <Text numberOfLines={1} style={{ fontSize: normalize(8), fontWeight: 'bold', color: Global.AppTheme.primary_color }}>Tax Name</Text>
+              </View>
+              } */}
+        {/* {secondAction &&
+                <View style={{
+                  backgroundColor: '#f5bfae',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  ...CButtonShadow(),
+                  borderRadius: normalize(5),
+                  paddingHorizontal: normalize(3),
+                  paddingVertical: normalize(5),
+                  height: normalize(38),
+                  width: normalize(38)
+                }}>
+                  <Text style={{ fontSize: normalize(9), fontWeight: 'bold', color: Global.AppTheme.primary_color }}>{data?.taxname}</Text>
+                </View>
+              } */}
+      </TouchableOpacity>
+    </View>
+  );
+
+  const renderRightActions = () => (
+    <TouchableOpacity
+      style={{
+        // flex: 1,
+        width: normalize(100),
+        // backgroundColor: '#f44336',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderTopRightRadius: 10,
+        borderBottomRightRadius: 10,
+      }}
+      onPress={() => console.log('Right action')}
+    >
+      {/* <Text style={{ color: '#000', fontWeight: 'bold' }}>{data?.taxname}</Text> */}
+    </TouchableOpacity>
+  );
+
+  return (
+    <SwipeRow
+      disableLeftSwipe={false}
+      disableRightSwipe={false}
+      leftOpenValue={190}
+      rightOpenValue={-190}
+      swipeToClosePercent={10}
+      swipeToOpenPercent={10}
+    >
+      {/* Hidden Row (Swipe Actions) */}
+      <View style={{
+        borderWidth: 0,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        minHeight: normalize(70),
+      }}>
+        <View style={{ flex: 1, alignItems: 'flex-start' }}>
+          {renderLeftActions()}
+        </View>
+        <View style={{ flex: 1, alignItems: 'flex-end' }}>
+          {renderRightActions()}
+        </View>
+      </View>
+
+      {/* Main Content */}
+      <View>
+        <View
+          style={{
+            padding: normalize(5),
+            marginVertical: 5,
+            marginHorizontal: type == 'S' ? normalize(10) : 0,
+            borderLeftWidth: normalize(10),
+            borderLeftColor: isNUQ(supplierDetails?.color) ? supplierDetails?.color : '#083787',
+            backgroundColor: '#ebf1fa',
+            // marginHorizontal: normalize(10),
+            marginBottom: normalize(10),
+            borderRadius: normalize(5),
+            shadowColor: Global.AppTheme.primary_color,
+            shadowOffset: { width: 4, height: 4 },
+            shadowOpacity: 0.6,
+            shadowRadius: 10,
+            elevation: 8,
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            width: type == 'S' ? '95%' : '99%',
+            ...CButtonShadow(),
+          }}>
+          <View style={{ width: '75%' }}>
+            {/* Supplier name */}
+            {isNUQ(supplierDetails?.suppliername) ? (
+              <Text
+                numberOfLines={1}
+                style={{
+                  fontSize: normalize(10),
+                  paddingLeft: normalize(5),
+                  fontWeight: 'bold',
+                  color: Global.AppTheme.primary_color,
+                }}>
+                {`${supplierDetails?.suppliername} ${supplierDetails?.classificationname && `(${supplierDetails?.classificationname})`}`}
+              </Text>
+            ) : null}
+            {isNUQ(supplierDetails?.invoiceno) ? (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  paddingLeft: normalize(5),
+                }}>
+                <Icons.FontAwesome5
+                  name={'file-invoice'}
+                  size={normalize(13)}
+                  color={'#094485'}
+                />
+                <Text
+                  numberOfLines={1}
+                  style={{
+                    fontSize: normalize(12),
+                    fontWeight: 'bold',
+                    color: '#555',
+                    marginLeft: normalize(5),
+                  }}>
+                  {supplierDetails?.invoiceno}
+                </Text>
+              </View>
+            ) : null}
+            {isNUQ(supplierDetails?.email) ? (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  paddingLeft: normalize(5),
+                }}>
+                <Icons.FontAwesome5
+                  name={'envelope'}
+                  size={normalize(11)}
+                  color={'#094485'}
+                />
+                <Text
+                  numberOfLines={1}
+                  style={{
+                    fontSize: 10,
+                    color: '#555',
+                    marginLeft: normalize(5),
+                  }}>
+                  {supplierDetails?.email}
+                </Text>
+              </View>
+            ) : null}
+            {isNUQ(supplierDetails?.gstno) ? (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  paddingLeft: normalize(5),
+                }}>
+                <Icons.FontAwesome5
+                  name={'file-alt'}
+                  size={normalize(11)}
+                  color={'#094485'}
+                />
+                <Text
+                  numberOfLines={1}
+                  style={{
+                    fontSize: 10,
+                    color: '#555',
+                    marginLeft: normalize(5),
+                  }}>
+                  {supplierDetails?.gstno}
+                </Text>
+              </View>
+            ) : null}
+            {isNUQ(supplierDetails?.companyaddress) ? (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  paddingLeft: normalize(5),
+                }}>
+                <Icons.FontAwesome5
+                  name={'map-marker-alt'}
+                  size={normalize(11)}
+                  color={'#094485'}
+                />
+                <Text
+                  numberOfLines={1}
+                  style={{
+                    fontSize: 10,
+                    color: '#555',
+                    marginLeft: normalize(5),
+                  }}>
+                  {supplierDetails?.companyaddress}
+                </Text>
+              </View>
+            ) : null}
+          </View>
+          <View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              {/* Supplier info */}
+              <View style={{ marginBottom: normalize(5), marginRight: normalize(10) }}>
+                {supplierDetails?.type != 'S' ? <TouchableOpacity onPress={() => {
+                  navigation.navigate('CPurchaseDetails', {
+                    supplierCode: supplierDetails?.code,
+                    // productCode: invoiceData?.data[sectionIndex]?.productdetail[productIndex]?.insuproduct
+                  });
+                }}>
+                  <Icons.Entypo
+                    name={'info-with-circle'}
+                    size={normalize(19)}
+                    color={'#094485'}
+                  />
+                </TouchableOpacity> : null}
+              </View>
+              {/* Grade */}
+              <View style={{ marginBottom: normalize(5), marginLeft: normalize(145),
+               }}>
+                {supplierDetails?.grade && (
+                  <View
+                    style={{
+                      height: 40,
+                      width: 40,
+                      backgroundColor: isNUQ(supplierDetails?.color) ? supplierDetails?.color : '#083787',
+                      borderRadius: 20,
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                    }}>
+                    <Text
+                      style={{
+                        fontSize: 20,
+                        fontWeight: 'bold',
+                        color: '#fff',
+                      }}>
+                      {supplierDetails?.grade}
+                    </Text>
+                  </View>
+                )}
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </SwipeRow>
+  );
+};
+
+export default NonSwipableSupplierCard;