@holper/react-native-holper-storybook 0.6.9 → 0.6.12

package/lib/components/DeckSwiper/index.js

@@ -1,24 +1,24 @@
-import React, { useRef, useState } from 'react';
+import React, {useRef, useState} from 'react';
 import PropTypes from 'prop-types';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
 import Swiper from 'react-native-deck-swiper';
 import Entypo from 'react-native-vector-icons/Entypo';
 import Text from '../Text';
 import Button from '../Button';
-import { Colors } from '../../configs/constants';
+import {Colors} from '../../configs/constants';
 import style from './style';
 
-const DeckSwiper = ({ data, inverted, nextText, onChange, onFinish }) => {
+const DeckSwiper = ({data, inverted, nextText, onChange, onFinish}) => {
   const swiper = useRef(null);
   const [finished, setFinished] = useState(false);
   const [index, setIndex] = useState(0);
 
   const renderDots = () => (
-    data.map((d,i) => <Entypo
+    data.map((d, i) => <Entypo
       name='dot-single'
       size={36}
       key={`dot-${i}`}
-      style={style[index === i ? 'dotSelected': 'dot']}
+      style={style[index === i ? 'dotSelected' : 'dot']}
     />)
   );
 
@@ -28,7 +28,7 @@ const DeckSwiper = ({ data, inverted, nextText, onChange, onFinish }) => {
         ref={swiper}
         cards={data}
         renderCard={(card) => {
-          if(!card) {
+          if (!card) {
             return null;
           }
           return (
@@ -42,23 +42,23 @@ const DeckSwiper = ({ data, inverted, nextText, onChange, onFinish }) => {
                 />
               </View>
               <View style={style.textContainer}>
-                <Text size='large' style={style.title}>{card.title}</Text>
-                <Text align='center'>{card.description}</Text>
+                <Text size='extra-large' style={style.title}>{card.title}</Text>
+                <Text size='large' align='center'>{card.description}</Text>
               </View>
             </View>
-          )
+          );
         }}
         onSwipedAll={() => {
           setFinished(true);
           onFinish();
         }}
         onSwipedRight={index => {
-          setIndex(index-1);
-          onChange(index-1);
+          setIndex(index - 1);
+          onChange(index - 1);
         }}
         onSwipedLeft={index => {
-          setIndex(index+1);
-          onChange(index+1);
+          setIndex(index + 1);
+          onChange(index + 1);
         }}
         cardIndex={index}
         backgroundColor={Colors.white}
@@ -69,18 +69,18 @@ const DeckSwiper = ({ data, inverted, nextText, onChange, onFinish }) => {
         goBackToPreviousCardOnSwipeRight={true}
         childrenOnTop
       >
-      {!finished && (
-        <>
-          <View style={style.dotsContainer}>
-            {renderDots()}
-          </View>
-          <View style={style.container}>
-            <Button variant={inverted ? 'inverted' : 'primary'} onPress={() => swiper.current.swipeLeft()}>
-              <Text color='white'>{nextText}</Text>
-            </Button>
-          </View>
-        </>
-      )}
+        {!finished && (
+          <>
+            <View style={style.dotsContainer}>
+              {renderDots()}
+            </View>
+            <View style={style.container}>
+              <Button variant={inverted ? 'inverted' : 'primary'} onPress={() => swiper.current.swipeLeft()}>
+                <Text color='white'>{nextText}</Text>
+              </Button>
+            </View>
+          </>
+        )}
       </Swiper>
     </>
   );
@@ -90,8 +90,10 @@ DeckSwiper.defaultProps = {
   data: [],
   inverted: false,
   nextText: ' ',
-  onChange: () => {},
-  onfinish: () => {}
+  onChange: () => {
+  },
+  onfinish: () => {
+  }
 };
 
 DeckSwiper.propTypes = {
@@ -104,6 +106,6 @@ DeckSwiper.propTypes = {
   nextText: PropTypes.string,
   onChange: PropTypes.func,
   onFinish: PropTypes.func
-}
+};
 
 export default DeckSwiper;

package/lib/components/DeckSwiper/style.js

@@ -1,7 +1,7 @@
-import { Dimensions } from 'react-native';
-import { Colors } from '../../configs/constants';
+import {Dimensions} from 'react-native';
+import {Colors} from '../../configs/constants';
 
-const { height, width } = Dimensions.get('window');
+const {height, width} = Dimensions.get('window');
 
 export default {
   container: {
@@ -22,8 +22,8 @@ export default {
     alignItems: 'center',
   },
   imageContainer: {
-    width: width - 100,
-    height: height / 2.5,
+    width: width - 90,
+    height: height / 2.3,
   },
   imageResponsive: {
     height: undefined,

package/lib/components/SwipeablePanel/index.js

@@ -45,6 +45,7 @@ const SwipeablePanel = ({
   const LARGE_PANEL_HEIGHT = (screenHeight - offset) - calcMarginTop(); // This is the margin top
   const MEDIUM_PANEL_HEIGHT = 400; // Fixed height
 
+  const [closeButtonClicked, setCloseButtonClicked] = useState(false);
   const [status, setStatus] = useState(STATUS.LARGE);
   const [animatedValueY, setAnimatedValueY] = useState(LARGE_PANEL_HEIGHT);
   const pan = useRef(new Animated.ValueXY({x: 0, y: LARGE_PANEL_HEIGHT})).current;
@@ -152,7 +153,10 @@ const SwipeablePanel = ({
         </View>
 
         {closeButton && (
-          <TouchableOpacity onPress={onClose} style={style.closeButton}>
+          <TouchableOpacity onPress={() => {
+            setCloseButtonClicked(true);
+            onClose();
+          }} style={style.closeButton}>
             <Ionicons name='close-outline' size={20} color={Colors.darkblue}/>
           </TouchableOpacity>
         )}
@@ -163,7 +167,11 @@ const SwipeablePanel = ({
               isPlaying={true}
               duration={closeAfterSeconds}
               colors={Colors.green}
-              onComplete={onClose}
+              onComplete={() => {
+                if (!closeButtonClicked) {
+                  onClose();
+                }
+              }}
               size={40}
               strokeWidth={4}
             >

package/lib/components/SwipeablePanel/style.js

@@ -74,7 +74,7 @@ export default {
   },
   autoClose: {
     position: 'absolute',
-    right: 10,
+    left: 10,
     top: 10
   },
 };

package/lib/components/Text/index.js

@@ -33,7 +33,7 @@ Text.defaultProps = {
 Text.propTypes = {
   color: PropTypes.oneOf(['dark', 'light', 'lighter', 'white', 'green', 'red', 'yellow', 'violet']),
   variant: PropTypes.oneOf(['default', 'lowercase', 'uppercase']),
-  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'extra-large']),
+  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'extra-large', 'huge']),
   weight: PropTypes.oneOf(['regular', 'bold', 'semiBold']),
   align: PropTypes.oneOf(['left', 'right', 'center', 'justify']),
   style: RNText.propTypes.style,

package/lib/components/Text/style.js

@@ -49,6 +49,9 @@ export default {
   'extra-large': {
     fontSize: 24
   },
+  huge: {
+    fontSize: 40
+  },
   // Weights
   regular: {
     fontFamily: 'poppins_regular'

package/lib/configs/loadFonts.js

@@ -1,11 +1,11 @@
 import * as Font from 'expo-font';
 
-export const loadFonts = [
-  asyncLoadFont
-];
-
 export const asyncLoadFont = Font.loadAsync({
   poppins_bold: require('../assets/fonts/Poppins-Bold.ttf'),
   poppins_regular: require('../assets/fonts/Poppins-Regular.ttf'),
   poppins_semiBold: require('../assets/fonts/Poppins-SemiBold.ttf')
 });
+
+export const loadFonts = [
+  asyncLoadFont
+];

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