@holper/react-native-holper-storybook 0.6.38 → 0.6.39

package/lib/components/Button/index.js

@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { TouchableOpacity, ActivityIndicator } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import withPreventDoubleClick from './../PreventDoubleClick';
 import { Colors } from '../../configs/constants';
-import { useDebounce } from '../../hooks';
 import style from './style';
 
 const Button = ({
@@ -16,10 +15,10 @@ const Button = ({
   size,
   noShadow,
   style: customStyle,
-  debounceDelay,
+  debounceDelay = 0,
   children,
 }) => {
-  const handleClick = useDebounce(onPress, debounceDelay);
+  const [isDisabled, setIsDisabled] = useState(disabled);
   const getSpinnerColor = () => {
     switch (variant) {
       case 'primary':
@@ -31,6 +30,14 @@ const Button = ({
     }
   };
 
+  const handleTap = () => {
+    onPress();
+    setIsDisabled(true);
+    setTimeout(() => {
+      setIsDisabled(false);
+    }, debounceDelay);
+  };
+
   return (
     <TouchableOpacity
       style={[
@@ -38,12 +45,12 @@ const Button = ({
         style[variant],
         style[size],
         bordered ? style.bordered : {},
-        disabled ? style.disabled : {},
+        isDisabled ? style.disabled : {},
         noShadow ? style.noShadow : {},
         customStyle,
       ]}
-      disabled={isLoading || disabled}
-      onPress={handleClick}
+      disabled={isLoading || isDisabled}
+      onPress={handleTap}
     >
       {isLoading ? (
         <ActivityIndicator color={getSpinnerColor()} size={28} />

package/lib/components/ConfirmationModal/index.js

@@ -6,7 +6,7 @@ import {
   Keyboard,
   TouchableWithoutFeedback,
   Platform,
-  KeyboardAvoidingView
+  KeyboardAvoidingView,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -16,49 +16,57 @@ import { Colors } from '../../configs/constants';
 import style from './style';
 
 const ConfirmationModal = ({
-                             visible,
-                             title,
-                             confirmText,
-                             cancelText,
-                             onConfirm,
-                             onCancel,
-                             closeButton,
-                             onClose,
-                             alertMode,
-                             infoMode,
-                             inverted,
-                             children
-                           }) => (
+  visible,
+  title,
+  confirmText,
+  cancelText,
+  onConfirm,
+  onCancel,
+  closeButton,
+  onClose,
+  alertMode,
+  infoMode,
+  inverted,
+  children,
+}) => (
   <Modal
-    animationType="slide"
+    animationType='slide'
     transparent={true}
     visible={visible}
     onRequestClose={() => {}}
   >
-    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
       <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
         <View style={style.container}>
           <View style={style.content}>
-
-            <View style={(alertMode && !closeButton) ? {} : style.title}>
+            <View style={alertMode && !closeButton ? {} : style.title}>
               <Text
-                style={(alertMode && !closeButton) ? {} : style.titleText}
+                style={alertMode && !closeButton ? {} : style.titleText}
                 size='large'
-                align={(alertMode && !closeButton) ? 'center' : 'left'}
+                align={alertMode && !closeButton ? 'center' : 'left'}
                 weight='semiBold'
                 numberOfLines={1}
               >
                 {title}
               </Text>
               {(!alertMode || closeButton) && (
-                <TouchableOpacity onPress={() => {
-                  if(onClose) {
-                    onClose();
-                  } else {
-                    onCancel();
-                  }
-                }} style={style.button}>
-                  <Ionicons name='close-outline' size={24} color={Colors.darkblue} />
+                <TouchableOpacity
+                  onPress={() => {
+                    if (onClose) {
+                      onClose();
+                    } else {
+                      onCancel();
+                    }
+                  }}
+                  style={style.button}
+                >
+                  <Ionicons
+                    name='close-outline'
+                    size={24}
+                    color={Colors.darkblue}
+                  />
                 </TouchableOpacity>
               )}
             </View>
@@ -70,22 +78,38 @@ const ConfirmationModal = ({
             {!infoMode && (
               <>
                 {alertMode ? (
-                  <Button size='fit' variant={inverted ? 'inverted' : 'primary'} onPress={onConfirm}>
-                    <Text size='large' color='white'>{confirmText}</Text>
+                  <Button
+                    size='fit'
+                    variant={inverted ? 'inverted' : 'primary'}
+                    onPress={onConfirm}
+                  >
+                    <Text size='large' color='white'>
+                      {confirmText}
+                    </Text>
                   </Button>
                 ) : (
                   <View style={style.buttons}>
-                    <Button size='small' bordered variant='inverted' onPress={onCancel}>
+                    <Button
+                      size='small'
+                      bordered
+                      variant='inverted'
+                      onPress={onCancel}
+                    >
                       <Text size='large'>{cancelText}</Text>
                     </Button>
-                    <Button variant={inverted ? 'inverted' : 'primary'} size='small' onPress={onConfirm}>
-                      <Text size='large' color='white'>{confirmText}</Text>
+                    <Button
+                      variant={inverted ? 'inverted' : 'primary'}
+                      size='small'
+                      onPress={onConfirm}
+                    >
+                      <Text size='large' color='white'>
+                        {confirmText}
+                      </Text>
                     </Button>
                   </View>
                 )}
               </>
             )}
-
           </View>
         </View>
       </TouchableWithoutFeedback>
@@ -105,7 +129,7 @@ ConfirmationModal.defaultProps = {
   closeButton: false,
   infoMode: false,
   inverted: false,
-  children: null
+  children: null,
 };
 
 ConfirmationModal.propTypes = {
@@ -120,7 +144,7 @@ ConfirmationModal.propTypes = {
   closeButton: PropTypes.bool,
   infoMode: PropTypes.bool,
   inverted: PropTypes.bool,
-  children: PropTypes.node
+  children: PropTypes.node,
 };
 
 export default ConfirmationModal;

package/lib/components/TakePicture/confirmPictureModal.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, TouchableOpacity, View } from 'react-native';
+import Text from '../Text';
+import ImageResponsive from '../ImageResponsive';
+import style from './style';
+
+export const ConfirmPictureModal = ({
+  avatar,
+  visible,
+  onRepeatPhoto,
+  onUsePhoto,
+  image,
+  repeatPictureText,
+  usePictureText,
+}) => {
+  return (
+    <Modal
+      animationType='slide'
+      transparent={false}
+      visible={visible}
+      onRequestClose={() => {}}
+    >
+      <View style={style.cameraTakenImageContainer}>
+        <ImageResponsive
+          source={{
+            uri: image ? image.uri : null,
+            cache: 'only-if-cached',
+          }}
+          style={avatar ? style.cameraTakenImage : style.cameraContainer}
+        />
+
+        <View style={style.cameraRetakePhoto}>
+          <TouchableOpacity onPress={onRepeatPhoto}>
+            <Text style={style.cameraRetakePhotoText}>{repeatPictureText}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={onUsePhoto}>
+            <Text style={style.cameraRetakePhotoText}>{usePictureText}</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+ConfirmPictureModal.defaultProps = {
+  visible: false,
+  avatar: false,
+  repeatPictureText: ' ',
+  usePictureText: ' ',
+  image: null,
+  onRepeatPhoto: () => {},
+  onUsePhoto: () => {},
+};
+
+ConfirmPictureModal.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  avatar: PropTypes.bool,
+  repeatPictureText: PropTypes.string.isRequired,
+  usePictureText: PropTypes.string.isRequired,
+  image: PropTypes.object,
+  onRepeatPhoto: PropTypes.func.isRequired,
+  onUsePhoto: PropTypes.func.isRequired,
+};

package/lib/components/TakePicture/index.js

@@ -15,6 +15,7 @@ import Text from '../Text';
 import Container from '../Container';
 import ImageResponsive from '../ImageResponsive';
 import { Colors } from '../../configs/constants';
+import { ConfirmPictureModal } from './confirmPictureModal';
 import style from './style';
 
 const DESIRED_RATIO = '16:9';
@@ -92,7 +93,7 @@ const TakePicture = ({
       const tempImage = await camera.current.takePictureAsync({ quality: 1.0 });
 
       if (avatar) {
-        const image = await ImageManipulator.manipulateAsync(
+        const avatarImage = await ImageManipulator.manipulateAsync(
           tempImage.localUri || tempImage.uri,
           [
             {
@@ -107,7 +108,7 @@ const TakePicture = ({
           { compress: 1.0, format: ImageManipulator.SaveFormat.PNG }
         );
 
-        setImage(image);
+        setImage(avatarImage);
         setTakingPicture(false);
       } else {
         setImage(tempImage);
@@ -193,36 +194,14 @@ const TakePicture = ({
             <Text color='white'>{processingPictureMessage} ...</Text>
           </View>
         )}
-
-        <Modal
-          animationType='slide'
-          transparent={false}
+        <ConfirmPictureModal
           visible={image !== null}
-          onRequestClose={() => {}}
-        >
-          <View style={style.cameraTakenImageContainer}>
-            <ImageResponsive
-              source={{
-                uri: image ? image.uri : null,
-                cache: 'only-if-cached',
-              }}
-              style={avatar ? style.cameraTakenImage : style.cameraContainer}
-            />
-
-            <View style={style.cameraRetakePhoto}>
-              <TouchableOpacity onPress={repeatPhoto}>
-                <Text style={style.cameraRetakePhotoText}>
-                  {repeatPictureText}
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity onPress={usePhoto}>
-                <Text style={style.cameraRetakePhotoText}>
-                  {usePictureText}
-                </Text>
-              </TouchableOpacity>
-            </View>
-          </View>
-        </Modal>
+          image={image}
+          repeatPictureText={repeatPictureText}
+          usePictureText={usePictureText}
+          onRepeatPhoto={repeatPhoto}
+          onUsePhoto={usePhoto}
+        />
       </Container>
     </Modal>
   );

package/lib/components/UploadDocument/index.js

@@ -47,7 +47,7 @@ const UploadDocument = ({
         ? await MediaLibrary.requestPermissionsAsync()
         : await ExpoImagePicker.getMediaLibraryPermissionsAsync();
     })();
-  });
+  }, []);
 
   useEffect(() => {
     if (!image) {
@@ -171,11 +171,13 @@ const UploadDocument = ({
         repeatPictureText={takePicture.repeatPictureText}
         usePictureText={takePicture.usePictureText}
         avatar={isAvatarPicker}
-        onClose={(image) => {
-          setShowCamera(false);
-          if (image) {
-            selectImage(image);
+        onClose={(selectedImage) => {
+          if (selectedImage) {
+            selectImage(selectedImage);
           }
+          setTimeout(() => {
+            setShowCamera(false);
+          }, 0);
         }}
       />
     </View>

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.38",
+  "version": "0.6.39",
   "license": "MIT",
   "files": [
     "lib",