Merge pull request #43 from SimformSolutionsPvtLtd/feature/dev_master

Krunal-Kevadiya · web-flow · commit 9b7568e4096a · 2023-01-27T11:00:08.000+05:30
Feature/dev master
diff --git a/Example/package.json b/Example/package.json
@@ -19,7 +19,7 @@
     "react-native-animatable": "^1.3.3",
     "react-native-gradients": "^1.1.1",
     "react-native-indicators": "^0.17.0",
-    "react-native-spinner-button": "^1.0.5",
+    "react-native-spinner-button": "^1.0.7",
     "react-native-svg": "^12.1.0"
   },
   "devDependencies": {
diff --git a/README.md b/README.md
@@ -51,10 +51,7 @@ Don't forget to set the state variable you have given to _isLoading_ prop false
     * Default button style
       ```javascript
         defaultButtonStyle: {
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: 50,
-          backgroundColor: '#25CAC6',
+          height: 50
         }
       ```
 3. **borderStyle**
@@ -152,7 +149,7 @@ Don't forget to set the state variable you have given to _isLoading_ prop false
     * The flag to identify network connection and based on flag set user iteration. _false_ will render button with disable mode and _true_ will render button with normal mode.
     * Default type: boolean
     * Default value: _true_
-27. **isDisable**
+27. **disabled**
     * The flag to identify button enable/disable. _true_ will render button with disable mode and _false_ will render button with normal mode.
     * Default type: boolean
     * Default value: _false_
@@ -166,6 +163,10 @@ Don't forget to set the state variable you have given to _isLoading_ prop false
     * Its default value is null | undefined.
     * This properties used whenever you want to need gradient but not pass __gradientColors__, __gradientColoroffset__ and __gradientColorAngle__ properties.
     * if you want to see color combination of [Sample gradient](https://fx-gradient-previewer.netlify.app/)
+30. **disableGradientColors**
+    * This is how we pass the colors we want to be displayed when button disable, colors can be passed in a different format, name, rgba, hex etc. 
+    * The colors should be ordered the way we want them to be displayed. 
+    * Eg. colors={[ “purple”, “white” ]} the gradient will move from purple to white.
 
 ## Example
   A full working example project is here [Example](https://github.com/simformsolutions/react-native-spinner-button/tree/master/Example)
diff --git a/components/SpinnerButton.js b/components/SpinnerButton.js
@@ -1,18 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ChildrenView from './ChildrenView';
-import styles from './styles/SpinnerButtonStyle';
-import AnimatedView from './AnimatedView';
-import AnimatableView from './AnimatableView';
-import { useAnimatedValues, getSpinnerStyle } from './utils'
-import { Animated, View, TouchableOpacity } from 'react-native';
+import PropTypes from "prop-types";
+import React from "react";
+import { Animated, TouchableOpacity, View } from "react-native";
+import AnimatableView from "./AnimatableView";
+import AnimatedView from "./AnimatedView";
+import ChildrenView from "./ChildrenView";
+import styles from "./styles/SpinnerButtonStyle";
+import { getSpinnerStyle, useAnimatedValues } from "./utils";
 
-const AnimatedTouchablesOpacity = Animated.createAnimatedComponent(
-  TouchableOpacity,
-);
+const AnimatedTouchablesOpacity =
+  Animated.createAnimatedComponent(TouchableOpacity);
 
 const SpinnerButton = ({
   animationType,
+  buttonContainer,
   buttonStyle,
   borderStyle,
   spinnerColor,
@@ -41,34 +41,51 @@ const SpinnerButton = ({
   isLoading,
   isConnected = true,
   disabled = false,
-  disableStyle
+  disableStyle,
+  disableGradientColors,
 }) => {
   const isDisable = disabled || !isConnected;
   const isAnimationType = animationType !== null && animationType !== undefined;
-  const style = [styles.defaultButton, styles.centerAlign, buttonStyle, borderStyle, isDisable && disableStyle];
+  const gradientColor = isDisable
+    ? disableGradientColors || gradientColors
+    : gradientColors;
+  const style = [
+    styles.defaultButton,
+    styles.centerAlign,
+    buttonStyle,
+    borderStyle,
+    isDisable && disableStyle,
+  ];
   const { height } = getSpinnerStyle(style, styles.defaultButton);
-  const { handleLayout, animatedStyles, animatedChildHideStyle, animatedChildShowStyle } = useAnimatedValues({ 
-    isLoading, 
-    style, 
-    animatedDuration, 
+  const {
+    handleLayout,
+    animatedStyles,
+    animatedChildHideStyle,
+    animatedChildShowStyle,
+  } = useAnimatedValues({
+    isLoading,
+    style,
+    animatedDuration,
     animateWidth,
     animateHeight,
-    animateRadius
+    animateRadius,
   });
-  
+
   return (
-    <View style={[styles.buttonContainer, styles.centerAlign]}>
+    <View
+      style={[styles.buttonContainer, styles.centerAlign, buttonContainer]}
+      onLayout={handleLayout}
+    >
       <AnimatedTouchablesOpacity
         activeOpacity={1}
         style={[style, animatedStyles]}
         onPress={onPress}
         disabled={isDisable || isLoading}
-        onLayout={handleLayout}
       >
         <ChildrenView
           animatedStyles={animatedStyles}
           gradientType={gradientType}
-          gradientColors={gradientColors}
+          gradientColors={gradientColor}
           gradientColoroffset={gradientColoroffset}
           gradientColorAngle={gradientColorAngle}
           gradientRadialRadius={gradientRadialRadius}
@@ -80,7 +97,7 @@ const SpinnerButton = ({
           gradientName={gradientName}
           children={
             <>
-              {isAnimationType && 
+              {isAnimationType && (
                 <AnimatableView
                   animationType={animationType}
                   children={children}
@@ -94,8 +111,8 @@ const SpinnerButton = ({
                   indicatorCount={indicatorCount}
                   spinnerOptions={spinnerOptions}
                 />
-              }
-              {!isAnimationType && 
+              )}
+              {!isAnimationType && (
                 <AnimatedView
                   animatedChildHideStyle={animatedChildHideStyle}
                   animatedChildShowStyle={animatedChildShowStyle}
@@ -108,9 +125,9 @@ const SpinnerButton = ({
                   indicatorCount={indicatorCount}
                   spinnerOptions={spinnerOptions}
                 />
-              }
+              )}
             </>
-          } 
+          }
         />
       </AnimatedTouchablesOpacity>
     </View>
@@ -119,6 +136,7 @@ const SpinnerButton = ({
 
 SpinnerButton.propTypes = {
   animationType: PropTypes.string,
+  buttonContainer: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   buttonStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   borderStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   spinnerColor: PropTypes.string,
@@ -129,7 +147,7 @@ SpinnerButton.propTypes = {
   size: PropTypes.number,
   spinnerOptions: PropTypes.shape({
     waveFactor: PropTypes.number,
-    waveMode: PropTypes.string
+    waveMode: PropTypes.string,
   }),
   gradientType: PropTypes.string,
   gradientColors: PropTypes.array,
@@ -150,7 +168,177 @@ SpinnerButton.propTypes = {
   isLoading: PropTypes.bool,
   isConnected: PropTypes.bool,
   disableStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  gradientName: PropTypes.oneOf(["Warm Flame", "Night Fade", "Spring Warmth", "Juicy Peach", "Young Passion", "Lady Lips", "Sunny Morning", "Rainy Ashville", "Frozen Dreams", "Winter Neva", "Dusty Grass", "Tempting Azure", "Heavy Rain", "Amy Crisp", "Mean Fruit", "Deep Blue", "Ripe Malinka", "Cloudy Knoxville", "Malibu Beach", "New Life", "True Sunset", "Morpheus Den", "Rare Wind", "Near Moon", "Wild Apple", "Saint Petersburg", "Plum Plate", "Everlasting Sky", "Happy Fisher", "Blessing", "Sharpeye Eagle", "Ladoga Bottom", "Lemon Gate", "Itmeo Branding", "Zeus Miracle", "Old Hat", "Star Wine", "Happy Acid", "Awesome Pine", "New York", "Shy Rainbow", "Mixed Hopes", "Fly High", "Strong Bliss", "Fresh Milk", "Snow Again", "February Ink", "Kind Steel", "Soft Grass", "Grown Early", "Sharp Blues", "Shady Water", "Dirty Beauty", "Great Whale", "Teen Notebook", "Polite Rumors", "Sweet Period", "Wide Matrix", "Soft Cherish", "Red Salvation", "Burning Spring", "Night Party", "Sky Glider", "Heaven Peach", "Purple Division", "Aqua Splash", "Spiky Naga", "Love Kiss", "Clean Mirror", "Premium Dark", "Cold Evening", "Cochiti Lake", "Summer Games", "Passionate Bed", "Mountain Rock", "Desert Hump", "Jungle Day", "Phoenix Start", "October Silence", "Faraway River", "Alchemist Lab", "Over Sun", "Premium White", "Mars Party", "Eternal Constance", "Japan Blush", "Smiling Rain", "Cloudy Apple", "Big Mango", "Healthy Water", "Amour Amour", "Risky Concrete", "Strong Stick", "Vicious Stance", "Palo Alto", "Happy Memories", "Midnight Bloom", "Crystalline", "Party Bliss", "Confident Cloud", "Le Cocktail", "River City", "Frozen Berry", "Child Care", "Flying Lemon", "New Retrowave", "Hidden Jaguar", "Above The Sky", "Nega", "Dense Water", "Seashore", "Marble Wall", "Cheerful Caramel", "Night Sky", "Magic Lake", "Young Grass", "Colorful Peach", "Gentle Care", "Plum Bath", "Happy Unicorn", "African Field", "Solid Stone", "Orange Juice", "Glass Water", "North Miracle", "Fruit Blend", "Millennium Pine", "High Flight", "Mole Hall", "Space Shift", "Forest Inei", "Royal Garden", "Rich Metal", "Juicy Cake", "Smart Indigo", "Sand Strike", "Norse Beauty", "Aqua Guidance", "Sun Veggie", "Sea Lord", "Black Sea", "Grass Shampoo", "Landing Aircraft", "Witch Dance", "Sleepless Night", "Angel Care", "Crystal River", "Soft Lipstick", "Salt Mountain", "Perfect White", "Fresh Oasis", "Strict November", "Morning Salad", "Deep Relief", "Sea Strike", "Night Call", "Supreme Sky", "Light Blue", "Mind Crawl", "Lily Meadow", "Sugar Lollipop", "Sweet Dessert", "Magic Ray", "Teen Party", "Frozen Heat", "Gagarin View", "Fabled Sunset", "Perfect Blue"])
-}
+  disableGradientColors: PropTypes.array,
+  gradientName: PropTypes.oneOf([
+    "Warm Flame",
+    "Night Fade",
+    "Spring Warmth",
+    "Juicy Peach",
+    "Young Passion",
+    "Lady Lips",
+    "Sunny Morning",
+    "Rainy Ashville",
+    "Frozen Dreams",
+    "Winter Neva",
+    "Dusty Grass",
+    "Tempting Azure",
+    "Heavy Rain",
+    "Amy Crisp",
+    "Mean Fruit",
+    "Deep Blue",
+    "Ripe Malinka",
+    "Cloudy Knoxville",
+    "Malibu Beach",
+    "New Life",
+    "True Sunset",
+    "Morpheus Den",
+    "Rare Wind",
+    "Near Moon",
+    "Wild Apple",
+    "Saint Petersburg",
+    "Plum Plate",
+    "Everlasting Sky",
+    "Happy Fisher",
+    "Blessing",
+    "Sharpeye Eagle",
+    "Ladoga Bottom",
+    "Lemon Gate",
+    "Itmeo Branding",
+    "Zeus Miracle",
+    "Old Hat",
+    "Star Wine",
+    "Happy Acid",
+    "Awesome Pine",
+    "New York",
+    "Shy Rainbow",
+    "Mixed Hopes",
+    "Fly High",
+    "Strong Bliss",
+    "Fresh Milk",
+    "Snow Again",
+    "February Ink",
+    "Kind Steel",
+    "Soft Grass",
+    "Grown Early",
+    "Sharp Blues",
+    "Shady Water",
+    "Dirty Beauty",
+    "Great Whale",
+    "Teen Notebook",
+    "Polite Rumors",
+    "Sweet Period",
+    "Wide Matrix",
+    "Soft Cherish",
+    "Red Salvation",
+    "Burning Spring",
+    "Night Party",
+    "Sky Glider",
+    "Heaven Peach",
+    "Purple Division",
+    "Aqua Splash",
+    "Spiky Naga",
+    "Love Kiss",
+    "Clean Mirror",
+    "Premium Dark",
+    "Cold Evening",
+    "Cochiti Lake",
+    "Summer Games",
+    "Passionate Bed",
+    "Mountain Rock",
+    "Desert Hump",
+    "Jungle Day",
+    "Phoenix Start",
+    "October Silence",
+    "Faraway River",
+    "Alchemist Lab",
+    "Over Sun",
+    "Premium White",
+    "Mars Party",
+    "Eternal Constance",
+    "Japan Blush",
+    "Smiling Rain",
+    "Cloudy Apple",
+    "Big Mango",
+    "Healthy Water",
+    "Amour Amour",
+    "Risky Concrete",
+    "Strong Stick",
+    "Vicious Stance",
+    "Palo Alto",
+    "Happy Memories",
+    "Midnight Bloom",
+    "Crystalline",
+    "Party Bliss",
+    "Confident Cloud",
+    "Le Cocktail",
+    "River City",
+    "Frozen Berry",
+    "Child Care",
+    "Flying Lemon",
+    "New Retrowave",
+    "Hidden Jaguar",
+    "Above The Sky",
+    "Nega",
+    "Dense Water",
+    "Seashore",
+    "Marble Wall",
+    "Cheerful Caramel",
+    "Night Sky",
+    "Magic Lake",
+    "Young Grass",
+    "Colorful Peach",
+    "Gentle Care",
+    "Plum Bath",
+    "Happy Unicorn",
+    "African Field",
+    "Solid Stone",
+    "Orange Juice",
+    "Glass Water",
+    "North Miracle",
+    "Fruit Blend",
+    "Millennium Pine",
+    "High Flight",
+    "Mole Hall",
+    "Space Shift",
+    "Forest Inei",
+    "Royal Garden",
+    "Rich Metal",
+    "Juicy Cake",
+    "Smart Indigo",
+    "Sand Strike",
+    "Norse Beauty",
+    "Aqua Guidance",
+    "Sun Veggie",
+    "Sea Lord",
+    "Black Sea",
+    "Grass Shampoo",
+    "Landing Aircraft",
+    "Witch Dance",
+    "Sleepless Night",
+    "Angel Care",
+    "Crystal River",
+    "Soft Lipstick",
+    "Salt Mountain",
+    "Perfect White",
+    "Fresh Oasis",
+    "Strict November",
+    "Morning Salad",
+    "Deep Relief",
+    "Sea Strike",
+    "Night Call",
+    "Supreme Sky",
+    "Light Blue",
+    "Mind Crawl",
+    "Lily Meadow",
+    "Sugar Lollipop",
+    "Sweet Dessert",
+    "Magic Ray",
+    "Teen Party",
+    "Frozen Heat",
+    "Gagarin View",
+    "Fabled Sunset",
+    "Perfect Blue",
+  ]),
+};
 
-export default SpinnerButton;
+export default SpinnerButton;
diff --git a/components/styles/SpinnerButtonStyle.js b/components/styles/SpinnerButtonStyle.js
@@ -9,8 +9,7 @@ export default StyleSheet.create({
     alignItems: 'center'
   },
   defaultButton: {
-    height: 50,
-    backgroundColor: '#25CAC6',
+    height: 50
   },
   absoluteView: {
     ...StyleSheet.absoluteFillObject
diff --git a/components/utils/useAnimatedValues.js b/components/utils/useAnimatedValues.js
@@ -13,9 +13,9 @@ const useAnimatedValues = ({
   const [size, setSize] = useState(null);
   const defaultStyle = StyleSheet.flatten(style);
   const margin = defaultStyle.margin || defaultStyle.marginLeft || defaultStyle.marginRight || defaultStyle.marginHorizontal || 0;
-  const defaultWidth = (size?.width || defaulButtonWidth) - (margin * 2);
+  const defaultWidth = (defaultStyle.width || size?.width || defaulButtonWidth) - (margin * 2);
   const defaultRadius = defaultStyle.borderRadius || 0;
-  const defaultHeight = size?.height || defaulButtonHeight;
+  const defaultHeight = defaultStyle.height || size?.height || defaulButtonHeight;
   const animatedHeight = animateHeight || Math.min(defaultWidth, defaultHeight);
   const animatedWidth = animateWidth || Math.min(defaultWidth, defaultHeight);
   const animatedRadius = animateRadius || (Math.min(defaultWidth, defaultHeight)/2);
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-spinner-button",
-  "version": "1.0.5",
+  "version": "1.0.9",
   "description": "This is a react-native button component with a spinner. You can load a spinner or a button from the same component depending on a flag. for eg, you have a button. And on press of that button you are doing something and wants the user to show a spinner, all you have to do is use this component. You can pass along a boolean flag. The component will render a spinner if the flag is true and button if the flag is false.",
   "author": "Rupal Patel <rupalpatel0008@gmail.com>",
   "main": "index.js",

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-native-spinner-button",`
`3`		`- "version": "1.0.5",`
	`3`	`+ "version": "1.0.9",`
`4`	`4`	`"description": "This is a react-native button component with a spinner. You can load a spinner or a button from the same component depending on a flag. for eg, you have a button. And on press of that button you are doing something and wants the user to show a spinner, all you have to do is use this component. You can pass along a boolean flag. The component will render a spinner if the flag is true and button if the flag is false.",`
`5`	`5`	`"author": "Rupal Patel <[email protected]>",`
`6`	`6`	`"main": "index.js",`