@holper/react-native-holper-storybook 0.6.35 → 0.6.37

package/lib/components/ImagePicker/index.js

@@ -1,33 +1,27 @@
 import PropTypes from 'prop-types';
-import {Camera} from 'expo-camera';
 import * as ExpoImagePicker from 'expo-image-picker';
 
 const ImagePicker = async (avatar) => {
-  const {status} = await Camera.requestCameraPermissionsAsync();
-
-  if (status !== 'granted') {
-    return;
-  }
-
   const image = await ExpoImagePicker.launchImageLibraryAsync({
-    mediaTypes: ExpoImagePicker.MediaTypeOptions.Image,
+    mediaTypes: ExpoImagePicker.MediaTypeOptions.Images,
     allowsEditing: avatar,
-    aspect: [4, 3]
+    aspect: [4, 3],
+    quality: 1,
   });
 
-  if (image.cancelled) {
+  if (image.canceled) {
     return;
   }
 
-  return image;
+  return image.assets[0].uri;
 };
 
 ImagePicker.defaultProps = {
-  avatar: false
+  avatar: false,
 };
 
 ImagePicker.propTypes = {
-  avatar: PropTypes.bool
+  avatar: PropTypes.bool,
 };
 
 export default ImagePicker;

package/lib/components/Select/index.js

@@ -3,12 +3,12 @@ import { View } from "react-native";
 import PropTypes from "prop-types";
 import DropDownPicker from "react-native-dropdown-picker";
 import style, {
-  fontStyle,
   includesSelect,
   placeholderStyle,
   listItemLabelStyle,
   listItemContainerStyle,
   selectedItemLabelStyle,
+  textStyle,
 } from "./style";
 import { useEffect } from "react";
 
@@ -51,7 +51,7 @@ const Select = ({
         listItemContainerStyle={listItemContainerStyle}
         selectedItemLabelStyle={selectedItemLabelStyle}
         listMode="MODAL"
-        textStyle={fontStyle}
+        textStyle={textStyle}
         dropDownContainerStyle={{
           ...includesSelect[variant],
           height: "auto",

package/lib/components/Select/style.js

@@ -21,7 +21,7 @@ export default {
   },
 };
 
-export const fontStyle = {
+const fontStyle = {
   color: Colors.darkblue,
   fontFamily: "poppins_regular",
 };
@@ -74,3 +74,8 @@ export const listItemContainerStyle = {
 export const selectedItemLabelStyle = {
   fontFamily: "poppins_semiBold",
 };
+
+export const textStyle = {
+  ...fontStyle,
+  fontSize: 16,
+};

package/lib/components/TakePicture/index.js

@@ -1,14 +1,20 @@
-import React, {useState, useRef, useEffect} from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import {Modal, TouchableOpacity, Platform, View, ActivityIndicator} from 'react-native';
+import {
+  Modal,
+  TouchableOpacity,
+  Platform,
+  View,
+  ActivityIndicator,
+} from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import {Camera} from 'expo-camera';
+import { Camera, FlashMode } from 'expo-camera';
 import * as ImageManipulator from 'expo-image-manipulator';
-import {Svg, Defs, Rect, Mask, Circle} from 'react-native-svg';
+import { Svg, Defs, Rect, Mask, Circle } from 'react-native-svg';
 import Text from '../Text';
 import Container from '../Container';
 import ImageResponsive from '../ImageResponsive';
-import {Colors} from '../../configs/constants';
+import { Colors } from '../../configs/constants';
 import style from './style';
 
 const DESIRED_RATIO = '16:9';
@@ -20,77 +26,85 @@ const SvgCircle = () => {
     <Svg height='100%' width='100%'>
       <Defs>
         <Mask id='mask' x='0' y='0' height='100%' width='100%'>
-          <Rect height='100%' width='100%' fill={Colors.white}/>
-          <Circle r='29%' cx='50%' cy='50%' fill={Colors.darkgray}/>
+          <Rect height='100%' width='100%' fill={Colors.white} />
+          <Circle r='29%' cx='50%' cy='50%' fill={Colors.darkgray} />
         </Mask>
       </Defs>
-      <Rect height='100%' width='100%' fill='rgba(0, 0, 0, 0.8)' mask='url(#mask)' fill-opacity='0'/>
+      <Rect
+        height='100%'
+        width='100%'
+        fill='rgba(0, 0, 0, 0.8)'
+        mask='url(#mask)'
+        fill-opacity='0'
+      />
     </Svg>
   );
 };
 
 const TakePicture = ({
-                       visible,
-                       onClose,
-                       avatar,
-                       cameraErrorMessage,
-                       processingPictureMessage,
-                       repeatPictureText,
-                       usePictureText
-                     }) => {
+  visible,
+  onClose,
+  avatar,
+  cameraErrorMessage,
+  processingPictureMessage,
+  repeatPictureText,
+  usePictureText,
+}) => {
   const [hasCameraPermission, setHasCameraPermission] = useState(null);
   const [type, setType] = useState(Camera.Constants.Type.back);
-  const [flash, setFlash] = useState(false);
   const [image, setImage] = useState(null);
   const [takingPicture, setTakingPicture] = useState(false);
-  const [ratio, setRatio] = useState(false);
+  const [ratio, setRatio] = useState(DESIRED_RATIO);
   const camera = useRef();
 
   useEffect(() => {
-    let mounted = true;
     (async () => {
-      const {status} = await Camera.getCameraPermissionsAsync();
-      if (mounted) {
-        setHasCameraPermission(status === 'granted');
-      }
+      const { status } = await Camera.requestCameraPermissionsAsync();
+      setHasCameraPermission(status === 'granted');
     })();
-
-    return () => mounted = false;
   }, [visible]);
 
   const prepareRatio = async () => {
     if (isAndroid && camera) {
-      const ratios = await camera.current.getSupportedRatiosAsync();
+      const ratios = await Camera.getSupportedRatiosAsync();
 
       // See if the current device has your desired ratio, otherwise get the maximum supported one
       // Usually the last element of 'ratios' is the maximum supported ratio
-      const supportedRatio = ratios.find((ratio) => ratio === DESIRED_RATIO) || ratios[ratios.length - 1];
+      const supportedRatio =
+        ratios.find((ratio) => ratio === DESIRED_RATIO) ||
+        ratios[ratios.length - 1];
 
       setRatio(supportedRatio);
     }
   };
 
   const flipCamera = () => {
-    setType(type === Camera.Constants.Type.back ? Camera.Constants.Type.front : Camera.Constants.Type.back);
+    setType(
+      type === Camera.Constants.Type.back
+        ? Camera.Constants.Type.front
+        : Camera.Constants.Type.back
+    );
   };
 
   const takePicture = async () => {
     if (camera) {
       setTakingPicture(true);
-      const tempImage = await camera.current.takePictureAsync({quality: 1.0});
+      const tempImage = await camera.current.takePictureAsync({ quality: 1.0 });
 
       if (avatar) {
         const image = await ImageManipulator.manipulateAsync(
           tempImage.localUri || tempImage.uri,
-          [{
-            crop: {
-              originX: 0,
-              originY: (tempImage.height - tempImage.width) / 2,
-              width: tempImage.width,
-              height: tempImage.width
-            }
-          }],
-          {compress: 1.0, format: ImageManipulator.SaveFormat.PNG}
+          [
+            {
+              crop: {
+                originX: 0,
+                originY: (tempImage.height - tempImage.width) / 2,
+                width: tempImage.width,
+                height: tempImage.width,
+              },
+            },
+          ],
+          { compress: 1.0, format: ImageManipulator.SaveFormat.PNG }
         );
 
         setImage(image);
@@ -117,7 +131,7 @@ const TakePicture = ({
   };
 
   if (hasCameraPermission === null) {
-    return <View/>;
+    return <View />;
   }
 
   if (hasCameraPermission === false) {
@@ -129,41 +143,54 @@ const TakePicture = ({
       animationType='slide'
       transparent={false}
       visible={visible}
-      onRequestClose={() => {
-      }}
+      onRequestClose={() => {}}
     >
       <Container style={style.cameraContainer}>
         <Camera
           ref={camera}
           style={style.cameraContainer}
           type={type}
-          flashMode={flash}
+          flashMode={FlashMode.off}
           onCameraReady={prepareRatio} // You can only get the supported ratios when the camera is mounted
           ratio={ratio}
         >
-          {avatar && isiOS && <SvgCircle/>}
+          {avatar && isiOS && <SvgCircle />}
 
           <View style={style.cameraFlipContainer}>
             <TouchableOpacity onPress={closeModal} style={style.closeIcon}>
-              <Ionicons name='close-outline' color={Colors.darkblue} size={24}/>
+              <Ionicons
+                name='close-outline'
+                color={Colors.darkblue}
+                size={24}
+              />
             </TouchableOpacity>
             <TouchableOpacity style={style.cameraFlipBtn} onPress={flipCamera}>
-              <Ionicons name='camera-reverse-outline' style={style.cameraFlipIcon} color={Colors.white} size={40}/>
+              <Ionicons
+                name='camera-reverse-outline'
+                style={style.cameraFlipIcon}
+                color={Colors.white}
+                size={40}
+              />
             </TouchableOpacity>
-            <TouchableOpacity style={style.cameraRecordBtn} onPress={takePicture}>
-              <Ionicons name='radio-button-on-outline' color={Colors.red} size={60}/>
+            <TouchableOpacity
+              style={style.cameraRecordBtn}
+              onPress={takePicture}
+            >
+              <Ionicons
+                name='radio-button-on-outline'
+                color={Colors.red}
+                size={60}
+              />
             </TouchableOpacity>
           </View>
 
-          {avatar && isAndroid && <SvgCircle/>}
+          {avatar && isAndroid && <SvgCircle />}
         </Camera>
 
         {takingPicture && (
           <View style={style.cameraTakingPictureOverlay}>
-            <ActivityIndicator color={Colors.darkblue}/>
-            <Text color='white'>
-              {processingPictureMessage} ...
-            </Text>
+            <ActivityIndicator color={Colors.darkblue} />
+            <Text color='white'>{processingPictureMessage} ...</Text>
           </View>
         )}
 
@@ -171,12 +198,14 @@ const TakePicture = ({
           animationType='slide'
           transparent={false}
           visible={image !== null}
-          onRequestClose={() => {
-          }}
+          onRequestClose={() => {}}
         >
           <View style={style.cameraTakenImageContainer}>
             <ImageResponsive
-              source={{uri: image ? image.uri : null, cache: 'only-if-cached'}}
+              source={{
+                uri: image ? image.uri : null,
+                cache: 'only-if-cached',
+              }}
               style={avatar ? style.cameraTakenImage : style.cameraContainer}
             />
 
@@ -201,13 +230,12 @@ const TakePicture = ({
 
 TakePicture.defaultProps = {
   visible: false,
-  onClose: () => {
-  },
+  onClose: () => {},
   avatar: false,
   cameraErrorMessage: ' ',
   processingPictureMessage: ' ',
   repeatPictureText: ' ',
-  usePictureText: ' '
+  usePictureText: ' ',
 };
 
 TakePicture.propTypes = {
@@ -217,7 +245,7 @@ TakePicture.propTypes = {
   cameraErrorMessage: PropTypes.string.isRequired,
   processingPictureMessage: PropTypes.string.isRequired,
   repeatPictureText: PropTypes.string.isRequired,
-  usePictureText: PropTypes.string.isRequired
+  usePictureText: PropTypes.string.isRequired,
 };
 
 export default TakePicture;

package/lib/components/TimeOutButton/index.js

@@ -1,4 +1,9 @@
-import React, { forwardRef, useEffect, useState, useImperativeHandle } from 'react';
+import React, {
+  forwardRef,
+  useEffect,
+  useState,
+  useImperativeHandle,
+} from 'react';
 import PropTypes from 'prop-types';
 import { TouchableOpacity, View, Dimensions } from 'react-native';
 import style from './style';
@@ -6,76 +11,81 @@ import style from './style';
 const { width } = Dimensions.get('window');
 const BUTTON_WIDTH = width * 0.6;
 
+const TimeOutButton = forwardRef(
+  ({ onPress, time, warning, children }, ref) => {
+    const [elapsedTime, setElapsedTime] = useState(0);
+    const [interval, setLocalInterval] = useState();
 
-const TimeOutButton = forwardRef(({ onPress, time, warning, children }, ref) => {
-  const [elapsedTime, setElapsedTime] = useState(0);
-  const [interval, setLocalInterval] = useState();
-
-  useEffect(() => {
-    let isCancelled = false;
-    try {
-      setLocalInterval(setInterval(() => {
+    useEffect(() => {
+      let isCancelled = false;
+      try {
+        setLocalInterval(
+          setInterval(() => {
+            if (!isCancelled) {
+              setElapsedTime((elapsedTime) => elapsedTime + 1);
+            }
+          }, 1)
+        );
+      } catch (e) {
         if (!isCancelled) {
-          setElapsedTime(elapsedTime => elapsedTime + 1);
+          throw e;
         }
-      }, 1));
-    } catch (e) {
-      if (!isCancelled) {
-        throw e;
       }
-    }
 
-    return () => {
-      clearInterval(interval);
-      isCancelled = true;
+      return () => {
+        clearInterval(interval);
+        isCancelled = true;
+      };
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      onStop() {
+        clearInterval(interval);
+      },
+    }));
+
+    const watchInterval = () => {
+      if (elapsedTime >= time) {
+        clearInterval(interval);
+        onPress();
+      }
+
+      return elapsedTime <= time
+        ? (BUTTON_WIDTH * (time - elapsedTime)) / time
+        : BUTTON_WIDTH;
     };
-  }, []);
 
-  useImperativeHandle(ref, () => ({
-    onStop() {
-      clearInterval(interval);
-    }
-  }));
+    const checkWarningPercent = () => {
+      return elapsedTime <= time ? time * 0.3 > time - elapsedTime : false;
+    };
 
-  const watchInterval = () => {
-    if(elapsedTime >= time) {
+    const onLocalPress = () => {
+      setElapsedTime(time);
       clearInterval(interval);
       onPress();
-    }
-
-    return elapsedTime <= time ? BUTTON_WIDTH * (time - elapsedTime) / time : BUTTON_WIDTH
-  }
-
-  const checkWarningPercent = () => {
-    return elapsedTime <= time ? (time * 0.3) > (time - elapsedTime) : false;
-  }
+    };
 
-  const onLocalPress = () => {
-    setElapsedTime(time);
-    clearInterval(interval);
-    onPress();
+    return (
+      <TouchableOpacity
+        style={[style.button, style.buttonBg]}
+        onPress={onLocalPress}
+      >
+        <View
+          style={[
+            style.button,
+            warning
+              ? checkWarningPercent()
+                ? style.buttonOverlayWarning
+                : style.buttonOverlay
+              : style.buttonOverlay,
+            { width: watchInterval() },
+          ]}
+        />
+        {children}
+      </TouchableOpacity>
+    );
   }
-
-  return (
-    <TouchableOpacity
-      style={[
-        style.button,
-        style.buttonBg
-      ]}
-      onPress={onLocalPress}
-    >
-      <View style={[
-        style.button,
-        warning ?
-          (checkWarningPercent() ? style.buttonOverlayWarning : style.buttonOverlay)
-          : style.buttonOverlay,
-        {width: watchInterval()}
-      ]}
-    />
-      {children}
-    </TouchableOpacity>
-  );
-});
+);
 
 TimeOutButton.defaultProps = {
   children: null,

package/lib/components/UploadDocument/index.js

@@ -1,7 +1,12 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import {View, TouchableOpacity, ActivityIndicator, Platform} from 'react-native';
-import {Camera} from 'expo-camera';
+import {
+  View,
+  TouchableOpacity,
+  ActivityIndicator,
+  Platform,
+} from 'react-native';
+import { Camera } from 'expo-camera';
 import * as MediaLibrary from 'expo-media-library';
 import * as ExpoImagePicker from 'expo-image-picker';
 import Text from '../Text';
@@ -10,26 +15,26 @@ import ConfirmationModal from '../ConfirmationModal';
 import ImagePicker from '../ImagePicker';
 import ImageViewer from '../ImageViewer';
 import TakePicture from '../TakePicture';
-import {Colors} from '../../configs/constants';
+import { Colors } from '../../configs/constants';
 import style from './style';
 
 const iOS = Platform.OS === 'ios';
 
 const UploadDocument = ({
-                          title,
-                          description,
-                          icon,
-                          completed,
-                          isAvatarPicker,
-                          uploadButtonText,
-                          reUploadButtonText,
-                          mediaModal,
-                          takePicture,
-                          inverted,
-                          onSelectImage,
-                          file,
-                          onPermissionDenied
-                        }) => {
+  title,
+  description,
+  icon,
+  completed,
+  isAvatarPicker,
+  uploadButtonText,
+  reUploadButtonText,
+  mediaModal,
+  takePicture,
+  inverted,
+  onSelectImage,
+  file,
+  onPermissionDenied,
+}) => {
   const [showMediaModal, setShowMediaModal] = useState(false);
   const [showCamera, setShowCamera] = useState(false);
   const [image, setImage] = useState(null);
@@ -38,10 +43,9 @@ const UploadDocument = ({
   useEffect(() => {
     (async () => {
       await Camera.requestCameraPermissionsAsync();
-      iOS ?
-        await MediaLibrary.requestPermissionsAsync() :
-        await ExpoImagePicker.getMediaLibraryPermissionsAsync();
-
+      iOS
+        ? await MediaLibrary.requestPermissionsAsync()
+        : await ExpoImagePicker.getMediaLibraryPermissionsAsync();
     })();
   });
 
@@ -56,7 +60,8 @@ const UploadDocument = ({
 
     switch (method) {
       case 'camera':
-        const {status: cameraStatus} = await Camera.getCameraPermissionsAsync();
+        const { status: cameraStatus } =
+          await Camera.getCameraPermissionsAsync();
 
         if (cameraStatus !== 'granted') {
           onPermissionDenied();
@@ -67,11 +72,11 @@ const UploadDocument = ({
         break;
       case 'gallery':
         setTimeout(async () => {
-          const {status: galleryStatus} = iOS ?
-            await MediaLibrary.requestPermissionsAsync() :
-            await ExpoImagePicker.getMediaLibraryPermissionsAsync();
+          const { status: galleryStatus } = iOS
+            ? await MediaLibrary.requestPermissionsAsync()
+            : await ExpoImagePicker.getMediaLibraryPermissionsAsync();
 
-          if (galleryStatus !== 'granted') {
+          if (galleryStatus !== 'granted' && iOS) {
             onPermissionDenied();
             return;
           }
@@ -96,7 +101,9 @@ const UploadDocument = ({
         <View style={style.uploadedContainer}>
           <View>
             <ImageViewer
-              source={{uri: typeof image === 'object' ? image.uri : image}}
+              source={{
+                uri: typeof image === 'object' ? image.uri : image,
+              }}
               style={style.image}
               resizeMode='cover'
               avatar
@@ -111,17 +118,34 @@ const UploadDocument = ({
             )}
           </View>
           <View style={style.reUploadButtons}>
-            <Text style={style.titleUploaded} numberOfLines={1} ellipsizeMode='tail'>{title}</Text>
+            <Text
+              style={style.titleUploaded}
+              numberOfLines={1}
+              ellipsizeMode='tail'
+            >
+              {title}
+            </Text>
             <TouchableOpacity onPress={() => setShowMediaModal(true)}>
-              <Text size='tiny' style={style.reUpload}>{reUploadButtonText}</Text>
+              <Text size='tiny' style={style.reUpload}>
+                {reUploadButtonText}
+              </Text>
             </TouchableOpacity>
           </View>
         </View>
       ) : (
         <View style={style.noUploaded}>
           {icon}
-          <Text size='large' style={style.title} numberOfLines={1} ellipsizeMode='tail'>{title}</Text>
-          <Text size='small' style={style.description}>{description}</Text>
+          <Text
+            size='large'
+            style={style.title}
+            numberOfLines={1}
+            ellipsizeMode='tail'
+          >
+            {title}
+          </Text>
+          <Text size='small' style={style.description}>
+            {description}
+          </Text>
           <Button variant='dim' onPress={() => setShowMediaModal(true)}>
             <Text>{uploadButtonText}</Text>
           </Button>
@@ -147,7 +171,7 @@ const UploadDocument = ({
         repeatPictureText={takePicture.repeatPictureText}
         usePictureText={takePicture.usePictureText}
         avatar={isAvatarPicker}
-        onClose={image => {
+        onClose={(image) => {
           setShowCamera(false);
           if (image) {
             selectImage(image);
@@ -167,23 +191,21 @@ UploadDocument.defaultProps = {
   inverted: false,
   isAvatarPicker: false,
   icon: null,
-  onSelectImage: () => {
-  },
+  onSelectImage: () => {},
   file: null,
-  onPermissionDenied: () => {
-  },
+  onPermissionDenied: () => {},
   mediaModal: {
     title: ' ',
     confirmText: ' ',
     cancelText: ' ',
-    description: ' '
+    description: ' ',
   },
   takePicture: {
     cameraErrorMessage: ' ',
     processingPictureMessage: ' ',
     repeatPictureText: ' ',
-    usePictureText: ' '
-  }
+    usePictureText: ' ',
+  },
 };
 
 UploadDocument.propTypes = {
@@ -202,14 +224,14 @@ UploadDocument.propTypes = {
     title: PropTypes.string,
     confirmText: PropTypes.string,
     cancelText: PropTypes.string,
-    description: PropTypes.string
+    description: PropTypes.string,
   }),
   takePicture: PropTypes.shape({
     cameraErrorMessage: PropTypes.string,
     processingPictureMessage: PropTypes.string,
     repeatPictureText: PropTypes.string,
-    usePictureText: PropTypes.string
-  })
+    usePictureText: PropTypes.string,
+  }),
 };
 
 export default UploadDocument;

package/package.json

@@ -2,7 +2,7 @@
   "main": "lib/index.js",
   "name": "@holper/react-native-holper-storybook",
   "description": "A component library for Holper projects",
-  "version": "0.6.35",
+  "version": "0.6.37",
   "license": "MIT",
   "files": [
     "lib",
@@ -41,7 +41,7 @@
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.7",
+    "react-native": "0.71.8",
     "react-native-countdown-circle-timer": "^3.0.9",
     "react-native-deck-swiper": "^2.0.5",
     "react-native-dropdown-picker": "^5.4.6",