@holper/react-native-holper-storybook 0.6.88 → 0.6.90

package/lib/components/Button/index.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } 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 style from './style';
 
@@ -14,6 +15,7 @@ const Button = ({
   size,
   noShadow,
   style: customStyle,
+  debounceDelay = 0,
   children,
 }) => {
   const [isDisabled, setIsDisabled] = useState(disabled);
@@ -31,6 +33,14 @@ const Button = ({
     }
   };
 
+  const handleTap = () => {
+    onPress();
+    setIsDisabled(true);
+    setTimeout(() => {
+      setIsDisabled(false);
+    }, debounceDelay);
+  };
+
   return (
     <TouchableOpacity
       style={[
@@ -43,7 +53,7 @@ const Button = ({
         customStyle,
       ]}
       disabled={isLoading || isDisabled}
-      onPress={onPress}
+      onPress={handleTap}
     >
       {isLoading ? (
         <ActivityIndicator color={getSpinnerColor()} size={28} />
@@ -64,6 +74,7 @@ Button.defaultProps = {
   size: 'medium',
   style: {},
   onPress: () => {},
+  debounceDelay: 0,
 };
 
 Button.propTypes = {
@@ -85,6 +96,7 @@ Button.propTypes = {
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'fit', 'icon']),
   style: ViewPropTypes.style,
   onPress: PropTypes.func,
+  debounceDelay: PropTypes.number,
 };
 
-export default Button;
+export default withPreventDoubleClick(Button);

package/lib/components/FlashMessage/index.js

@@ -1,22 +1,45 @@
 import React from 'react';
+import { Platform } from 'react-native';
 import PropTypes from 'prop-types';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import RNFlashMessage, { showMessage, renderFlashMessageIcon } from 'react-native-flash-message';
+import RNFlashMessage, {
+  showMessage,
+  renderFlashMessageIcon,
+} from 'react-native-flash-message';
 import { Colors } from '../../configs/constants';
 
-export const customRenderFlashMessageIcon = (icon = 'success', style = {}, customProps = {}) => {
-  switch(icon) {
+export const customRenderFlashMessageIcon = (
+  icon = 'success',
+  style = {},
+  customProps = {}
+) => {
+  switch (icon) {
     case 'success':
-      return <Ionicons name='checkmark-circle-outline' color={Colors.darkblue} size={30}/>;
+      return (
+        <Ionicons
+          name='checkmark-circle-outline'
+          color={Colors.darkblue}
+          size={30}
+        />
+      );
     case 'error':
-      return <Ionicons name='alert-circle-outline' color={Colors.darkblue} size={30}/>;
+      return (
+        <Ionicons
+          name='alert-circle-outline'
+          color={Colors.darkblue}
+          size={30}
+        />
+      );
   }
 
   // it's good to inherit the original method...
   return renderFlashMessageIcon(icon, style, customProps);
 };
 
-export const sendMessage = ({variant, message, description}) => {
+const statusBarHeight =
+  Platform.OS === 'android' ? { statusBarHeight: 10 } : {};
+
+export const sendMessage = ({ variant, message, description }) => {
   return showMessage({
     position: 'top',
     message,
@@ -25,8 +48,8 @@ export const sendMessage = ({variant, message, description}) => {
     type: variant,
     backgroundColor: variant === 'success' ? Colors.green : Colors.lightred,
     color: Colors.darkblue,
-    floating: true,
-    hideOnPress: true
+    hideOnPress: true,
+    ...statusBarHeight,
   });
 };
 
@@ -34,17 +57,17 @@ sendMessage.defaultProps = {
   options: {
     variant: 'success',
     message: ' ',
-    description: ' '
-  }
+    description: ' ',
+  },
 };
 
 sendMessage.propTypes = {
   options: PropTypes.shape({
     variant: PropTypes.oneOf(['success', 'error']),
     message: PropTypes.string,
-    description: PropTypes.string
-  })
-}
+    description: PropTypes.string,
+  }),
+};
 
 const FlashMessage = () => {
   return (
@@ -54,6 +77,6 @@ const FlashMessage = () => {
       textStyle={{ fontFamily: 'poppins_regular' }}
     />
   );
-}
+};
 
 export default FlashMessage;

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