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

package/src/Components/MoreOptionsScreen.js

@@ -0,0 +1,251 @@
+import React, { useContext, useState, useEffect } from 'react';
+import { View, Text, TouchableOpacity, FlatList, TextInput, Platform, BackHandler } from 'react-native';
+import HOCIcons from '../HOC/HOCIcons';
+import { normalize } from '../CommonStyle/componentStyle';
+
+
+import { Global } from '../../../../../src/Common/Global';
+import CContainerView from '../CustomComponents/CContainerView';
+import CDetailView from '../CustomComponents/CDetailView';
+import HeaderBlock from '../Screens/HeaderBlock';
+import {useNavigation } from '../Navigation/useNavigation';
+
+const MoreOptionsScreen = () => {
+    const navigation = useNavigation();
+
+    useEffect(() => {
+        const onBackPress = () => {
+            if (navigation && navigation.canGoBack && navigation.canGoBack()) {
+                navigation.goBack();
+                return true;
+            }
+            // Prevent closing the app from this screen on back press
+            return true;
+        };
+
+        const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+        return () => backHandler.remove();
+    }, [navigation]);
+
+    // const navigation = useNavigation();
+    const optionList = Global.userOptionList || []; // Get the OptionList from Global
+    // { console.log('xxxxxxxxxxxxxxxxxxxxx', JSON.stringify(optionList)) }
+    const [searchQuery, setSearchQuery] = useState(''); // State for search query
+    // const [filteredOptions, setFilteredOptions] = useState(optionList); // State for filtered options
+    const productSection = optionList.find(section => section.suoption === 31900);
+
+    let filteredOptionList = optionList;
+
+    // If found, filter its optiondetail
+    if (productSection) {
+        // Remove the item with suoptiondetail === 800091
+        const newOptionDetail = productSection.optiondetail.filter(
+            option => option.suoptiondetail !== 800091
+        );
+
+        // Map through optionList and update the product section
+        filteredOptionList = optionList.map(section =>
+            section.suoption === 31900
+                ? { ...section, optiondetail: newOptionDetail }
+                : section
+        );
+    }
+
+    // Now use filteredOptionList instead of optionList for your state
+    const [filteredOptions, setFilteredOptions] = useState(filteredOptionList);
+
+    // Function to handle search
+    const handleSearch = (query) => {
+        setSearchQuery(query);
+
+        if (query.trim() === '') {
+            setFilteredOptions(optionList); // Reset to original list if query is empty
+        } else {
+            const filtered = optionList.map((section) => ({
+                ...section,
+                optiondetail: section.optiondetail.filter((option) =>
+                    option.display.toLowerCase().includes(query.toLowerCase())
+                ),
+            })).filter((section) => section.optiondetail.length > 0); // Remove empty sections
+
+            setFilteredOptions(filtered);
+        }
+    };
+
+    // Function to handle navigation when an option is clicked
+    const handleOptionPress = (option) => {
+        if (option.component) {
+            navigation.navigate('WrappedComponent', { component: option.component, data: option });
+            console.log('Navigating to component:', option.component, 'with data:', JSON.stringify(option));
+        }
+    };
+
+    function CShadowDynamic(offsetX, offsetY, blurRadius, spreadDistance, color) {
+        const isAndroidBelow9 = Platform.OS === 'android' && Platform.Version < 28;
+        return isAndroidBelow9
+            ? {
+                elevation: 10,
+                shadowColor: color || Global.AppTheme.primary_color,
+                shadowOffset: { width: offsetX, height: offsetY },
+                shadowOpacity: 0.3,
+                shadowRadius: blurRadius,
+            }
+            : {
+                boxShadow: `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadDistance}px ${color}`,
+            };
+    }
+
+    // Render each section
+    const renderSection = ({ item }) => (
+        <View
+            style={{
+                // margin:normalize(10),
+                // marginBottom: normalize(15),
+                // // borderWidth:normalize(3),
+                // // borderColor: '#ccc',
+                // borderRadius: normalize(10),
+                // padding: normalize(5),
+                // backgroundColor: '#f9f9f9', // Light background for the section
+                // ...CShadowDynamic(-3, 3, 5, 0, '#ccc'), // Apply shadow dynamically
+
+                marginHorizontal: normalize(10),
+                marginTop: normalize(10),
+                marginBottom: normalize(20),
+                borderRadius: normalize(14),
+                paddingVertical: normalize(12),
+                paddingHorizontal: normalize(10),
+                backgroundColor: '#fcfcfe', // Slightly lighter for contrast
+                borderWidth: 1,
+                borderColor: '#e3e6ee', // Subtle border
+                ...CShadowDynamic(0, 2, 8, 0, '#e3e6ee'), // Softer shadow
+
+            }}
+        >
+            {/* Section Title */}
+            <Text
+                style={{
+                    fontSize: normalize(16),
+                    fontWeight: 'bold',
+                    color: '#094485',
+                    marginBottom: normalize(10),
+                }}
+            >
+                {item.display}
+            </Text>
+
+            {/* Render Options */}
+            <FlatList
+                data={item.optiondetail}
+                keyExtractor={(option) => option.suoptiondetail.toString()}
+                numColumns={3} // Display items in a grid-like structure
+                columnWrapperStyle={{
+                    justifyContent: 'flex-start', // Align items to the start
+                    gap: normalize(10), // Add a simple gap between items
+                }}
+                renderItem={({ item: option }) => (
+                    <TouchableOpacity
+                        disabled={false} // You can make this dynamic if needed
+                        onPress={() => handleOptionPress(option)}
+                        style={{
+                            width: '25%', // Reduce the width to fit multiple items in a row
+                            flexDirection: 'column', // Stack icon and text vertically
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            padding: normalize(10),
+                            margin: normalize(5), // Add margin for spacing between items
+                            backgroundColor: 'white', // Dynamic background color
+                            borderRadius: normalize(10), // Rounded corners
+                            ...CShadowDynamic(-3, 3, 5, 0, option.color || Global.AppTheme.primary_color), // Apply shadow dynamically
+                        }}
+                    >
+                        {/* Icon */}
+                        <HOCIcons.Icons
+                            icongroup={option.icongroup || 3}
+                            name={option.icon || 'file'}
+                            color={option.color || '#303030'}
+                            size={normalize(30)} // Increase icon size
+                            style={{
+                                marginBottom: normalize(5), // Add spacing between icon and text
+                            }}
+                        />
+                        {/* Text */}
+                        <Text
+                            style={{
+                                fontSize: normalize(9), // Make text smaller
+                                color: 'black' || option.color || '#303030',
+                                fontWeight: 'bold', // Bold text
+                                textAlign: 'center',
+                                maxWidth: normalize(60), // Limit text width
+                            }}
+                            numberOfLines={2} // Ensure text is displayed in a single line
+                            ellipsizeMode="tail" // Add ellipsis if text overflows
+                        >
+                            {option.display}
+                        </Text>
+                    </TouchableOpacity>
+                )}
+            />
+        </View>
+    );
+
+    return (
+        <CContainerView>
+            <HeaderBlock />
+            <CDetailView>
+                <View
+                    style={{
+                        flex: 1,
+                        backgroundColor: '#fff',
+                        // padding: normalize(10),
+                    }}
+                >
+                    {/* Search Bar */}
+                    <View
+                        style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            height: normalize(40),
+                            borderColor: '#ccc',
+                            borderWidth: 1,
+                            borderRadius: normalize(10),
+                            paddingHorizontal: normalize(10),
+                            marginBottom: normalize(15),
+                            backgroundColor: '#f9f9f9', // Light background for the search bar
+                        }}
+                    >
+                        <HOCIcons.Icons
+                            icongroup={3}
+                            name="magnify" // Search icon
+                            color="#888" // Icon color
+                            size={normalize(20)}
+                            style={{
+                                marginRight: normalize(10),
+                            }}
+                        />
+                        <TextInput
+                            value={searchQuery}
+                            onChangeText={handleSearch}
+                            placeholder="Search options..."
+                            placeholderTextColor="#888" // Placeholder color
+                            style={{
+                                flex: 1,
+                                fontSize: normalize(14),
+                                color: '#333',
+                            }}
+                        />
+                    </View>
+                    {console.log('WWWWWWWWWWWWWWWWWWWWWW', JSON.stringify(filteredOptions))
+                    }
+                    {/* Render Sections */}
+                    <FlatList
+                        data={filteredOptions}
+                        keyExtractor={(item) => item.suoption.toString()}
+                        renderItem={renderSection}
+                    />
+                </View>
+            </CDetailView>
+        </CContainerView>
+    );
+};
+
+export default MoreOptionsScreen;

package/src/Components/NonSwipableProductCard.js

@@ -0,0 +1,226 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+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 NonSwipableProductCard = ({ data }) => {
+  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 && renderLeftActions(data)}
+        </View>
+        <View style={{ flex: 1, alignItems: 'flex-end' }}>
+          {renderRightActions && renderRightActions(data)}
+        </View>
+      </View>
+      <View
+        style={{
+          padding: normalize(5),
+          marginVertical: 5,
+          marginHorizontal: normalize(10),
+          backgroundColor: '#ebf1fa',
+          borderRadius: normalize(5),
+          shadowColor: Global.AppTheme.primary_color,
+          shadowOffset: { width: 4, height: 4 },
+          shadowOpacity: 0.6,
+          shadowRadius: 10,
+          elevation: 8,
+          ...CButtonShadow(),
+          borderLeftWidth: normalize(10),
+          borderLeftColor: isNUQ(data?.color) ? data?.color : '#FF8C33',
+        }}>
+        <View>
+          {/* Product Name */}
+          {isNUQ(data?.productname) && (
+            <Text
+              numberOfLines={1}
+              style={{
+                fontSize: normalize(13),
+                fontWeight: 'bold',
+                color: Global.AppTheme.primary_color,
+                marginBottom: normalize(5),
+              }}>
+              {data.productname}
+            </Text>
+          )}
+          {/* Marketing Division */}
+          {isNUQ(data?.marketingdivisionname) && (
+            <Text
+              numberOfLines={1}
+              style={{
+                fontSize: normalize(11),
+                color: '#555',
+                marginBottom: normalize(3),
+              }}>
+              Marketing Division: {data.marketingdivisionname}
+            </Text>
+          )}
+          {/* Manufacturer Division */}
+          {isNUQ(data?.manufacturerdivisionname) && (
+            <Text
+              numberOfLines={1}
+              style={{
+                fontSize: normalize(11),
+                color: '#555',
+              }}>
+              Manufacturer Division: {data.manufacturerdivisionname}
+            </Text>
+          )}
+        </View>
+      </View>
+    </SwipeRow>
+  );
+};
+
+export default NonSwipableProductCard;