@jescon-technologies/react-native-ui-kit 0.0.1 → 0.0.2

package/src/Media/CCaptureImageWithoutEdit.js

@@ -0,0 +1,330 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { View, StyleSheet, TouchableOpacity, Dimensions, Text } from 'react-native';
+import ComponentStyles, { normalize } from '../CommonStyle/componentStyle';
+import { isBNUL, isNU, isNUQ, notifyMessage } from '../CommonStyle/ComponentFunctions';
+import HeaderBlock from '../Screens/HeaderBlock';
+import { useNavigation } from '../Navigation/useNavigation';
+import { Camera, getCameraDevice, useCameraDevices, useCameraFormat, useCodeScanner } from 'react-native-vision-camera';
+import CFooterView from '../CustomComponents/CFooterView';
+import { Global } from '../Common/Global';
+import HOCIcons from '../HOC/HOCIcons';
+import PhotoEditor from 'react-native-photo-editor';
+
+export default function CCaptureImageWithoutEdit(props) {
+
+    const [cameraType, setCameraType] = useState();
+    const [showCamera, setShowCamera] = useState(false);
+    const navigation = useNavigation();
+    const vcamera = useRef(null);
+    const vdevices = Camera.getAvailableCameraDevices();
+    const [vdevice, setVDevice] = useState();
+    // for video recording
+    const [isRecording, setIsRecording] = useState(false);  // New state for recording
+    const [videoPath, setVideoPath] = useState('');  // To store the video path when recording is stopped
+
+    const codeScanner = useCodeScanner({
+
+        codeTypes: ['qr', 'ean-13','code-128','code-39','code-93'],
+        onCodeScanned: (codes) => {
+            if ((props.route?.params?.cameramoduletype == 2) && isBNUL(codes) && isNUQ(codes[0].value)) {
+                props.route.params.onSelect({
+                    data: codes[0].value,
+                });
+                navigation.pop();
+            }
+        },
+    });
+
+    useEffect(() => {
+        async function getPermission() {
+            const newCameraPermission = await Camera.requestCameraPermission();
+            if (newCameraPermission == 'granted') {
+                let cameraAngle = props.route?.params?.cameratype ? props.route?.params?.cameratype : 'back';
+                setCameraType(cameraAngle);
+                setVDevice(getCameraDevice(vdevices, cameraAngle));
+                setShowCamera(true);
+            }
+        }
+        getPermission();
+    }, [vdevices]);
+
+    function getCameraType(params, vdevices) {
+
+        if (params == 'back') {
+            console.log('getCameraType1111', params);
+            setCameraType('front');
+            setVDevice(getCameraDevice(vdevices, 'front'));
+        }
+        else {
+            console.log('getCameraType 222', params);
+            setCameraType('back');
+            setVDevice(getCameraDevice(vdevices, 'back'));
+        }
+    }
+
+    const capturePhoto = async () => {
+        if (vcamera.current !== null) {
+
+            const photo = await vcamera.current.takePhoto({
+                // qualityPrioritization: 'quality', // prioritize photo quality
+                // maxWidth: 640,  // Decrease the width for lower resolution
+                // maxHeight: 480, // D
+            });
+            const photopath = `file://${photo.path}`;
+            // let imgPath = photopath.replace('file:///', '');
+            let fileName = photopath.substr(photopath.lastIndexOf('/') + 1);
+
+
+            PhotoEditor.Edit({
+                path: photo.path, hiddenControls: ['sticker', 'save'],
+                onDone: () => {
+                    props.route.params.onSelect({
+                        uri: photopath,
+                        filename: fileName,
+                        filetype: 'image/jpeg',
+                    });
+                    navigation.pop();
+                },
+            });
+
+            // props.route.params.onSelect({
+            //     uri: `file://${photo.path}`,
+            //     filename: fileName,
+            //     filetype: "image/jpeg",
+            // });
+            // navigation.pop();
+        }
+    };
+
+    const startRecording = async () => {
+        if (vcamera.current) {
+            try {
+                setIsRecording(true);
+                const video = await vcamera.current.startRecording({
+                    onRecordingFinished: (uri) => {
+                        setVideoPath(uri.path);
+                        console.log('videoPath real ........', uri);
+                        props.route.params.onSelect({
+                            uri: `file://${uri.path}`,
+                            filename: `${new Date().toISOString()}.mp4`,
+                            filetype: 'video/mp4',
+                        });
+                        // console.log('videoPath............', videoPath);
+                        navigation.pop();
+                    },
+                    onRecordingError: (error) => {
+                        console.error(error);
+                        setIsRecording(false);
+                    },
+                });
+            } catch (error) {
+                console.error('Error starting video recording:', error);
+            }
+        }
+    };
+
+    const stopRecording = async () => {
+        if (vcamera.current) {
+            try {
+                setIsRecording(false);
+                await vcamera.current.stopRecording();
+            } catch (error) {
+                console.error('Error stopping video recording:', error);
+            }
+        }
+    };
+
+    const format = useCameraFormat(vdevice, [
+        {
+            photoResolution: { width: 640, height: 480 },
+        },
+    ]);
+
+    //   { videoResolution: { width: 3048, height: 2160 } },
+
+
+    return (
+        <View style={{ flex: 1 }}>
+            <HeaderBlock
+            />
+            <View style={[layoutstyles.container]}>
+                {vdevice != null && showCamera ? (
+                    <View style={{ flex: 1, borderWidth: 1 }}>
+                        <Camera
+                            ref={vcamera}
+                            style={StyleSheet.absoluteFill}
+                            device={vdevice}
+                            // format={format}
+                            isActive={showCamera}
+                            photo={true}
+                            codeScanner={codeScanner}
+                            video={props.route?.params?.cameramoduletype === 1}
+                            // format={''}
+                            // videoBitRate={'extra-low'}
+                            onInitialized={() => {
+                                console.log('camera initialized.');
+                            }}
+                        />
+                    </View>
+                ) : (
+
+                    <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1, borderWidth: 1 }}>
+                        <Text>{'Camera Permission required.'}</Text>
+                    </View>
+                )}
+            </View>
+            {
+                props.route?.params?.hidebuttons ?
+                    null :
+                    <CFooterView>
+                        {isNU(cameraType) && isNU(vdevices) ?
+                            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
+                                <View style={{ flex: 2 }} />
+
+
+                                {/* Start/Stop Video Recording Button */}
+                                {props.route?.params?.cameramoduletype === 1 ?
+                                    <View style={{ borderWidth: 0, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                                        <TouchableOpacity
+                                            onPress={() => {
+                                                if (isRecording) {
+                                                    stopRecording();
+                                                } else {
+                                                    startRecording();
+                                                }
+                                            }}
+                                            style={{
+                                                opacity: 1,
+                                                borderRadius: 100,
+                                                borderLeftWidth: 2,
+                                                borderBottomWidth: 2,
+                                                borderColor: Global.AppTheme.primary_color,
+                                                borderWidth: 0.5,
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                                margin: normalize(5),
+                                                height: normalize(60),
+                                                width: normalize(60),
+                                                backgroundColor: isRecording ? 'red' : 'white',
+                                                elevation: 2,
+                                            }}>
+                                            <HOCIcons.Icons
+                                                icongroup={5}
+                                                name={isRecording ? 'stop' : 'video'}
+                                                color={isRecording ? 'white' : Global.AppTheme.primary_color}
+                                                size={normalize(30)} style={{
+                                                    marginHorizontal: normalize(3),
+                                                }}
+                                            />
+
+                                        </TouchableOpacity>
+                                        <Text adjustsFontSizeToFit style={{
+                                            fontSize: normalize(8),
+                                            color: Global.AppTheme.primary_color,
+                                            textAlign: 'center',
+                                            fontWeight: 'bold',
+                                        }} >
+                                            {isRecording ? 'Stop' : 'Record'}
+                                        </Text>
+                                    </View>
+                                    :
+                                    <View style={{ borderWidth: 0, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                                        <TouchableOpacity
+                                            onPress={() => {
+                                                capturePhoto();
+                                            }}
+                                            style={{
+                                                opacity: 1,
+                                                borderRadius: 100,
+                                                borderLeftWidth: 2,
+                                                borderBottomWidth: 2,
+                                                borderColor: Global.AppTheme.primary_color,
+                                                borderWidth: 0.5,
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                                margin: normalize(5),
+                                                height: normalize(60),
+                                                width: normalize(60),
+                                                backgroundColor: 'white',
+                                                elevation: 2,
+                                            }}>
+                                            <HOCIcons.Icons
+                                                icongroup={5}
+                                                name={'camera'}
+                                                color={Global.AppTheme.primary_color}
+                                                size={normalize(22)} style={{
+                                                    marginHorizontal: normalize(3),
+                                                }}
+                                            />
+
+                                        </TouchableOpacity>
+                                        <Text adjustsFontSizeToFit style={{
+                                            fontSize: normalize(8),
+                                            color: Global.AppTheme.primary_color,
+                                            textAlign: 'center',
+                                            fontWeight: 'bold',
+                                        }} >
+                                            {'Capture'}
+                                        </Text>
+                                    </View>
+
+                                }
+                                <View style={{ justifyContent: 'center', alignItems: 'center', flex: 2 }}>
+                                    {isRecording ?
+                                        null :
+                                        <>
+                                            <TouchableOpacity
+                                                onPress={() => {
+                                                    getCameraType(cameraType, vdevices);
+                                                }}
+                                                style={{
+                                                    opacity: 1,
+                                                    borderRadius: 100,
+                                                    borderLeftWidth: 2,
+                                                    borderBottomWidth: 2,
+                                                    borderColor: Global.AppTheme.primary_color,
+                                                    borderWidth: 0.5,
+                                                    justifyContent: 'center',
+                                                    alignItems: 'center',
+                                                    margin: normalize(5),
+                                                    height: normalize(45),
+                                                    width: normalize(45),
+                                                    backgroundColor: 'white',
+                                                    elevation: 2,
+                                                }}>
+                                                <HOCIcons.Icons
+                                                    icongroup={2}
+                                                    name={'flip-camera-ios'}
+                                                    color={Global.AppTheme.primary_color}
+                                                    size={normalize(22)} style={{
+                                                        marginHorizontal: normalize(3),
+                                                    }}
+                                                />
+
+                                            </TouchableOpacity>
+                                            <Text adjustsFontSizeToFit style={{
+                                                fontSize: normalize(7),
+                                                color: Global.AppTheme.primary_color,
+                                                textAlign: 'center',
+                                                fontWeight: 'bold',
+                                            }} >
+                                                {'Rotate'}
+                                            </Text>
+                                        </>
+                                    }
+                                </View>
+                            </View>
+                            : null}
+                    </CFooterView>
+            }
+
+        </View>
+    );
+}
+
+const layoutstyles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'column',
+    },
+});

package/src/Media/CImageGallery.js

@@ -0,0 +1,289 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  TouchableOpacity,
+  View,
+  Text,
+  Image,
+  FlatList,
+  Dimensions,
+} from 'react-native';
+import Carousel, { Pagination } from 'react-native-snap-carousel';
+import ImageZoom from 'react-native-image-pan-zoom';
+import Overlay from 'react-native-modal-overlay';
+import CDetailView from '../CustomComponents/CDetailView';
+import CContainerView from '../CustomComponents/CContainerView';
+import HeaderBlock from '../Screens/HeaderBlock';
+import { normalize } from '../CommonStyle/componentStyle';
+import { imageURL } from '../Common/apiConstants';
+import FastImage from 'react-native-fast-image';
+import { Global } from '../Common/Global';
+import { ArrayCheck, ValueCheck } from '../CommonStyle/ComponentFunctions';
+const { width } = Dimensions.get('window');
+const { height } = Dimensions.get('window');
+const SPACING = normalize(10);
+const THUMB_SIZE = normalize(80);
+
+
+const CImageGallery = (props) => {
+
+  useEffect(() => {
+    setTimeout(() => {
+      onSelectUseEffect(props.route.params.index);
+      onTouchThumbnailUseEffect(props.route.params.index);
+      //onSelect(props.route.params.index)
+    }, 1000);
+
+
+  }, []);
+
+  // console.log("props of cimagegallery",JSON.stringify(props))
+  //console.log("indexxxxxxxxxxxxx",props.route.params.index)
+  const mappedimages = ValueCheck(props.route.params) && ArrayCheck(props.route.params.savedimages) ? props.route.params.savedimages.map(item => {
+    return {
+      uri: item.filename,
+    };
+  }) : [];
+  // console.log("mappedimages",JSON.stringify(mappedimages));
+  const IMAGES = {
+    image1: 'https://i.ibb.co/7nPcjFN/amalalogo.jpg',
+    image2: 'https://i.ibb.co/7nPcjFN/amalalogo.jpg',
+    image3: 'https://i.ibb.co/7nPcjFN/amalalogo.jpg',
+
+  };
+
+  const carouselRef = useRef();
+  //console.log("carouselref",carouselRef)
+  const flatListRef = useRef();
+  //console.log("flatlistref",flatListRef)
+  const [images, setImages] = useState(props.route.params.savedimages);
+  //console.log("imagessssss",JSON.stringify(images))
+  const [indexSelected, setIndexSelected] = useState(props.route.params.index);
+  const [isloading, setIsLoading] = useState(true);
+  //const firstitem = props.route.params.index - 1;
+  //console.log("firstitem",firstitem)
+
+
+  const onSelectUseEffect = (indexSelected) => {
+    console.log('onselectuseeffect', indexSelected);
+    setIndexSelected(indexSelected);
+
+    /**
+     * if you want to position the thumbnail in * the middle of the screen on selection
+     * do the following
+     * Calculation done by awesome Catalin Miron
+     * Source: https://www.youtube.com/watch?v=gjC2oUJhePE&t=1097s
+     */
+    // if (indexSelected * (THUMB_SIZE + 10) - THUMB_SIZE / 2 > width / 2) {
+    //   flatListRef?.current?.scrollToOffset({
+    //     offset: indexSelected * (THUMB_SIZE + 10) - width / 2 + THUMB_SIZE / 2,
+    //     animated: true,
+    //   });
+    // } else {
+    //   flatListRef?.current?.scrollToOffset({
+    //     offset: 0,
+    //     animated: true,
+    //   });
+    // }
+
+    //  my initial solution
+    flatListRef?.current?.scrollToOffset({
+      // offset: indexSelected * (normalize(50) + 10) - normalize(50) / 2 + normalize(50) / 2,
+      //offset: indexSelected * (normalize(60)+ normalize(10)),
+
+      offset: indexSelected * (normalize(50) + normalize(10)),
+      //offset:indexSelected * (normalize(50)),
+      animated: true,
+    });
+  };
+
+  const onSelect = (indexSelected) => {
+    console.log('onselect', indexSelected);
+    setIndexSelected(indexSelected);
+
+    /**
+     * if you want to position the thumbnail in * the middle of the screen on selection
+     * do the following
+     * Calculation done by awesome Catalin Miron
+     * Source: https://www.youtube.com/watch?v=gjC2oUJhePE&t=1097s
+     */
+    // if (indexSelected * (THUMB_SIZE + 10) - THUMB_SIZE / 2 > width / 2) {
+    //   flatListRef?.current?.scrollToOffset({
+    //     offset: indexSelected * (THUMB_SIZE + 10) - width / 2 + THUMB_SIZE / 2,
+    //     animated: true,
+    //   });
+    // } else {
+    //   flatListRef?.current?.scrollToOffset({
+    //     offset: 0,
+    //     animated: true,
+    //   });
+    // }
+
+    //  my initial solution
+    // flatListRef?.current?.scrollToOffset({
+    //   //offset: indexSelected * (images.length) - width / 2 + images.length / 2,
+    //   offset: normalize(indexSelected) * normalize(57),
+    //   //offset:indexSelected * THUMB_SIZE,
+    //   animated: true,
+    // });
+  };
+
+  const onTouchThumbnail = (touched) => {
+    carouselRef?.current?.snapToItem(touched);
+    //setIndexSelected(touched);
+    //onSelect(touched)
+
+  };
+
+
+
+  const onTouchThumbnailUseEffect = (touched) => {
+    console.log('toucheduseeffect', touched),
+
+      carouselRef?.current?.snapToItem(touched);
+
+    // [1,2,3,4].map(number => {
+
+    //   setTimeout(() => {
+    //     carouselRef?.current?.snapToItem(touched)
+    //     console.log("n",number)
+    //        }, 500)
+    //   })
+
+
+  };
+
+  function getOverlayContainerStyle() {
+    return (
+      {
+        // ...ComponentStyles.View_col_center,
+        backgroundColor: '#fff',
+        height: height, width: width,
+      }
+    );
+  }
+  function logOutZoomState(event, gestureState, zoomableViewEventObject) {
+    //console.log('');
+    // console.log('');
+    //console.log('-------------');
+    //console.log('Event: ', event);
+    //console.log('GestureState: ', gestureState);
+    //console.log('ZoomableEventObject: ', zoomableViewEventObject);
+    //console.log('');
+    // console.log(
+    // `Zoomed from ${zoomableViewEventObject.lastZoomLevel} to  ${zoomableViewEventObject.zoomLevel}`,
+    //);
+  }
+
+  return (
+    //     <Overlay
+    //     visible={isloading}
+    //     //onClose={() => props.visibility(false)}
+    //     //transparent={true}
+    //     //containerStyle={getOverlayContainerStyle()}
+    //     //animationDuration={500}
+    //     //closeOnTouchOutside={true}
+    // >
+    <CContainerView>
+      <HeaderBlock/>
+      <CDetailView>
+        <View style={{ flex: 1, backgroundColor: 'white', alignItems: 'center' }}>
+          <View style={{ flex: 2, marginTop: 1 }}>
+            <View>
+              <Carousel
+                ref={carouselRef}
+                layout={'default'}
+                data={props.route.params.savedimages}
+                sliderWidth={width * 10}
+                itemWidth={width}
+                //initialScrollIndex={props.route.params.index}
+                //firstItem={indexSelected}
+                onSnapToItem={(index) => onSelect(index)}
+                renderItem={({ item, index }) => (
+                  <ImageZoom
+                    cropWidth={width * 1}
+                    cropHeight={height * 0.8}
+                    imageWidth={width * 1}
+                    imageHeight={height * 0.8}
+                    enableSwipeDown={false}
+                    panToMove={true}
+                  >
+                    <FastImage
+                      key={index}
+                      style={{ width: '100%', height: '80%' }}
+                      resizeMode="contain"
+                      source={{
+                        uri: item && item.filename && item.filename != null && item.filename != undefined && item.filename.length > 0 && typeof item.filename === 'string' ? imageURL + item.filename : 'https://icon-library.com/images/no-image-icon/no-image-icon-0.jpg',
+                        headers: {
+                          Authorization: `Bearer ${Global.JWTToken}`,
+                        },
+                      }}
+                    />
+                  </ImageZoom>
+                )}
+              />
+            </View>
+
+            {/* <Pagination
+          inactiveDotColor="grey"
+          dotColor={'darkblue'}
+          activeDotIndex={indexSelected}
+          dotsLength={images.length}
+          animatedDuration={150}
+          inactiveDotScale={0.5}
+        /> */}
+          </View>
+          <View
+            style={{
+              marginTop: 20,
+              paddingHorizontal: 32,
+              alignSelf: 'flex-end',
+            }}
+          >
+            <Text style={{ color: 'black', fontSize: normalize(25), fontWeight: 'bold' }}>
+              {indexSelected + 1}/{images.length}
+            </Text>
+          </View>
+          {/* Thumbnail component using FlatList */}
+          <FlatList
+            ref={flatListRef}
+            initialNumToRender={50}
+            maxToRenderPerBatch={50}
+            horizontal={true}
+            data={props.route.params.savedimages}
+            style={{ position: 'absolute', bottom: normalize(30) }}
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={{
+              //paddingHorizontal: SPACING,
+            }}
+            keyExtractor={(item, index) => 'key' + index}
+            renderItem={({ item, index }) => (
+              <TouchableOpacity
+                onPress={() => onTouchThumbnail(index)}
+                activeOpacity={0.3}
+              >
+                <FastImage
+                  style={{
+                    width: normalize(50),
+                    height: normalize(50),
+                    marginRight: normalize(10),
+                    borderRadius: 16,
+                    borderWidth: index === indexSelected ? 4 : 0.75,
+                    borderColor: index === indexSelected ? 'darkblue' : 'grey',
+                  }}
+                  source={{
+                    uri: item.filename && item.filename != null && item.filename != undefined && item.filename.length > 0 && typeof item.filename === 'string' ? imageURL + item.filename : 'https://icon-library.com/images/no-image-icon/no-image-icon-0.jpg',
+                    headers: {
+                      Authorization: `Bearer ${Global.JWTToken}`,
+                    },
+                  }}
+                />
+              </TouchableOpacity>
+            )}
+          />
+        </View>
+      </CDetailView>
+    </CContainerView>
+  );
+};
+
+export default CImageGallery;