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

package/lib/components/Button/index.js

@@ -1,12 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {TouchableOpacity, ActivityIndicator} from 'react-native';
-import {ViewPropTypes} from 'deprecated-react-native-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 { Colors } from '../../configs/constants';
+import { useDebounce } from '../../hooks';
 import style from './style';
 
-const Button = ({onPress, disabled, isLoading, bordered, variant, size, noShadow, style: customStyle, children}) => {
+const Button = ({
+  onPress,
+  disabled,
+  isLoading,
+  bordered,
+  variant,
+  size,
+  noShadow,
+  style: customStyle,
+  debounceDelay,
+  children,
+}) => {
+  const handleClick = useDebounce(onPress, debounceDelay);
   const getSpinnerColor = () => {
     switch (variant) {
       case 'primary':
@@ -27,15 +40,16 @@ const Button = ({onPress, disabled, isLoading, bordered, variant, size, noShadow
         bordered ? style.bordered : {},
         disabled ? style.disabled : {},
         noShadow ? style.noShadow : {},
-        customStyle
+        customStyle,
       ]}
       disabled={isLoading || disabled}
-      onPress={onPress}
+      onPress={handleClick}
     >
-      {isLoading ?
-        <ActivityIndicator color={getSpinnerColor()} size={28}/> :
+      {isLoading ? (
+        <ActivityIndicator color={getSpinnerColor()} size={28} />
+      ) : (
         children
-      }
+      )}
     </TouchableOpacity>
   );
 };
@@ -49,8 +63,8 @@ Button.defaultProps = {
   variant: 'primary',
   size: 'medium',
   style: {},
-  onPress: () => {
-  },
+  onPress: () => {},
+  debounceDelay: 0,
 };
 
 Button.propTypes = {
@@ -59,10 +73,19 @@ Button.propTypes = {
   isLoading: PropTypes.bool,
   bordered: PropTypes.bool,
   noShadow: PropTypes.bool,
-  variant: PropTypes.oneOf(['primary', 'secondary', 'dim', 'light', 'inverted', 'error', 'highlight']),
+  variant: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'dim',
+    'light',
+    'inverted',
+    'error',
+    'highlight',
+  ]),
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'fit', 'icon']),
   style: ViewPropTypes.style,
   onPress: PropTypes.func,
+  debounceDelay: PropTypes.number,
 };
 
 export default withPreventDoubleClick(Button);

package/lib/hooks/index.js

@@ -0,0 +1 @@
+export { default as useDebounce } from './useDebounce';

package/lib/hooks/useDebounce.js

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+
+const useDebounce = (callback, delay) => {
+  const latestCallback = useRef();
+  const latestTimeout = useRef();
+
+  useEffect(() => {
+    latestCallback.current = callback;
+  }, [callback]);
+
+  return () => {
+    if (latestTimeout.current) {
+      clearTimeout(latestTimeout.current);
+    }
+
+    latestTimeout.current = setTimeout(() => {
+      latestCallback.current();
+    }, delay);
+  };
+};
+
+export default useDebounce;

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