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

package/src/Media/CImageGallery.js

@@ -1,289 +0,0 @@
-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 '../../../../../src/Common/apiConstants';
-import FastImage from 'react-native-fast-image';
-import { Global } from '../../../../../src/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;

package/src/Media/CImageZoom.js

@@ -1,82 +0,0 @@
-import React, { useState } from 'react';
-// import { useDimensions } from '@react-native-community/hooks'
-import { View, Image, TouchableOpacity, StyleSheet, Dimensions} from 'react-native';
-// import ImageZoom from 'react-native-image-pan-zoom';
-import ComponentStyles from '../CommonStyle/componentStyle';
-import AntDesign from 'react-native-vector-icons/AntDesign';
-import CModalOverlay from '../CustomComponents/CModalOverlay';
-
-export default function CustomImageZoom(props) {
-    const [isloading, setIsLoading] = useState(true);
-    const { width, height } = Dimensions.get('window');
-
-    return (
-        <CModalOverlay
-            visible={isloading}
-            onClose={() => props.visibility(false)}
-            transparent={true}
-            containerStyle={getOverlayContainerStyle()}
-            animationDuration={500}
-            closeOnTouchOutside={true}
-        >
-            <View style={getCloseButtonContainer()}>
-                <TouchableOpacity onPress={() => props.visibility(false)}
-                style={{ width: '100%', alignItems: 'flex-end' }}>
-                    <AntDesign name="close" size={30} />
-                </TouchableOpacity>
-            </View>
-            <View style={layoutstyles.zoom_image_container}>
-                {/* <ImageZoom
-                    cropWidth={width * 0.90}
-                    cropHeight={height * 0.85}
-                    imageWidth={width}
-                    imageHeight={height}
-                > */}
-                    <Image
-                        style={getZoomImageStyle()}
-                        source={{ uri: props.image }}
-                    />
-                {/* </ImageZoom> */}
-            </View>
-        </CModalOverlay>
-    );
-
-
-    function getZoomImageStyle() {
-        return (
-            {
-                width: width, height: height * 0.90, resizeMode: 'contain',
-            }
-        );
-    }
-    function getOverlayContainerStyle() {
-        return (
-            {
-                ...ComponentStyles.View_col_center,
-                backgroundColor: '#fff',
-                height: height, width: width,
-            }
-        );
-    }
-    function getCloseButtonContainer() {
-        return (
-            {
-                width: width * 0.90,
-                ...ComponentStyles.View_col_flexend,
-            }
-        );
-    }
-}
-const layoutstyles = StyleSheet.create({
-    close_button_style: {
-        height: '10%', width: 30, alignItems: 'flex-end', backgroundColor: 'black',
-    },
-    zoom_image_container: {
-        justifyContent: 'center',
-        alignItems: 'center', height: '95%',
-    },
-});
-
-{/**
-url is passed from parent component
-*/}