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

package/src/Components/SwipableSupplierCard.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { Swipeable } from 'react-native-gesture-handler';
+import { Dimensions } from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+
+const SwipableSupplierCard = ({ supplierDetails }) => {
+    const renderLeftActions = () => (
+        <TouchableOpacity
+            style={{
+                // flex: 1,
+                width: normalize(100),
+                // backgroundColor: '#4caf50',
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderTopLeftRadius: 10,
+                borderBottomLeftRadius: 10,
+            }}
+            onPress={() => alert('Left action executed!')}
+        >
+            <Text style={{ color: '#000', fontWeight: 'bold' }}>Left Action</Text>
+        </TouchableOpacity>
+    );
+
+    const renderRightActions = () => (
+        <TouchableOpacity
+            style={{
+                // flex: 1,
+                width: normalize(100),
+                // backgroundColor: '#f44336',
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderTopRightRadius: 10,
+                borderBottomRightRadius: 10,
+            }}
+            onPress={() => alert('Right action executed!')}
+        >
+            <Text style={{ color: '#000', fontWeight: 'bold' }}>Right Action</Text>
+        </TouchableOpacity>
+    );
+
+    return (
+        <Swipeable
+            renderLeftActions={renderLeftActions}
+            renderRightActions={renderRightActions}
+            leftThreshold={80}
+            rightThreshold={80}
+            overshootLeft={false}
+            overshootRight={false}
+        >
+            {/* Main card */}
+            <View
+                style={{
+                    backgroundColor: '#fff',
+                    padding: 10,
+                    borderRadius: 10,
+                    shadowColor: '#000',
+                    shadowOpacity: 0.1,
+                    shadowRadius: 5,
+                    elevation: 3,
+                    marginVertical: 5,
+                    marginHorizontal: 1,
+                    borderLeftWidth: 3,
+                    borderLeftColor: '#094485',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                }}
+            >
+                <View style={{ width: '75%' }}>
+                    {supplierDetails?.invoiceno && (
+                        <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: normalize(5) }}>
+                            <Icons.FontAwesome5
+                                name="file-invoice"
+                                size={normalize(12)}
+                                color="#094485"
+                            />
+                            <Text style={{ fontSize: 16, fontWeight: 'bold', color: '#000', marginLeft: normalize(5) }}>
+                                {supplierDetails.invoiceno}
+                            </Text>
+                        </View>
+                    )}
+
+                    {supplierDetails?.email && (
+                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                            <Icons.FontAwesome5
+                                name="envelope"
+                                size={normalize(12)}
+                                color="#094485"
+                            />
+                            <Text style={{ fontSize: 14, fontWeight: '500', color: '#333', marginLeft: normalize(5) }}>
+                                {supplierDetails.email}
+                            </Text>
+                        </View>
+                    )}
+
+                    {supplierDetails?.companyaddress && (
+                        <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+                            <Icons.FontAwesome5
+                                name="map-marker-alt"
+                                size={normalize(12)}
+                                color="#094485"
+                            />
+                            <Text
+                                style={{ fontSize: 14, fontWeight: '500', color: '#333', marginLeft: normalize(5), maxWidth: '100%' }}
+                            >
+                                {supplierDetails.companyaddress}
+                            </Text>
+                        </View>
+                    )}
+                </View>
+                <View>
+                    {supplierDetails?.grade && (
+                        <View
+                            style={{
+                                height: 60,
+                                width: 60,
+                                backgroundColor: 'lightgrey',
+                                borderRadius: 30,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            }}
+                        >
+                            <Text style={{ fontSize: 20, fontWeight: 'bold', color: '#094485' }}>
+                                {supplierDetails.grade}
+                            </Text>
+                            <Text style={{ fontSize: 12 }}>Grade</Text>
+                        </View>
+                    )}
+                </View>
+            </View>
+        </Swipeable>
+    );
+};
+
+export default SwipableSupplierCard;

package/src/Components/TagTemplate.js

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import CSingleEditor from '../CustomComponents/CSingleEditor';
+import CContainerView from '../CustomComponents/CContainerView';
+import CDetailView from '../CustomComponents/CDetailView';
+import HeaderBlock from '../Screens/HeaderBlock';
+
+export default function TagTemplate() {
+    const [text,setText] = useState('');
+    const [editorData, setEditorData] = useState([
+        {
+            componentname: 'header',
+            value: '<p>Sample Header</p>',
+            toolbarview: false,
+            idlist: [], // Add idlist for tag variables
+        },
+        // {
+        //     componentname: 'content',
+        //     value: '<p>Sample Content</p>',
+        //     toolbarview: false,
+        //     idlist: [], // Add idlist for tag variables
+        // },
+    ]);
+
+    const handleEditorChange = (newValue, index) => {
+        setEditorData(prevData => {
+            const updatedData = [...prevData];
+            updatedData[index] = { ...updatedData[index], value: newValue };
+            return updatedData;
+        });
+    };
+
+    const handleToolbarView = (val, index) => {
+        setEditorData(prevData => {
+            const updatedData = prevData.map((item, i) => ({
+                ...item,
+                toolbarview: i === index ? val : false,
+            }));
+            return updatedData;
+        });
+    };
+
+    const handleIdListChange = (idlist, index) => {
+        setEditorData(prevData => {
+            const updatedData = [...prevData];
+            updatedData[index] = { ...updatedData[index], idlist };
+            return updatedData;
+        });
+    };
+
+    return (
+        <CContainerView>
+            <HeaderBlock />
+            <CDetailView>
+                <View style={{ flex: 1 }}>
+                    {editorData.map((item, index) => (
+                        <CSingleEditor
+                        textinput={true}
+                        inputcallback={setText}
+                        more={true}
+                            key={index}
+                            data={item}
+                            callback={newValue => handleEditorChange(newValue, index)}
+                            toolbarview={val => handleToolbarView(val, index)}
+                            idlistcallback={idlist => handleIdListChange(idlist, index)} // Pass idlist callback
+                            variables={true} // Enable variables
+                            showvariables={true} // Show variables
+                        />
+                    ))}
+                </View>
+            </CDetailView>
+        </CContainerView>
+    );
+}

package/src/Components/WrappedComponent.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import HeaderBlock from '../Screens/HeaderBlock';
+import HView from '../HOC/HView'; // Import HView for dynamic component rendering
+
+const WrappedComponent = ({ route }) => {
+    const { component, data } = route.params;
+
+    return (
+        <View style={styles.container}>
+            {console.log('WrappedComponent received component:', component)}
+            <HeaderBlock />
+            {component ? <HView component={component} optiondata={data} /> : null}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+    },
+});
+
+export default WrappedComponent;