Merge pull request #57 from SimformSolutionsPvtLtd/feature/UNT-T23537_Strict_TS_Support

feature: UNT-T23537: Strict TS Support

Author: mukesh-simform

README.md

@@ -163,7 +163,7 @@ Props for Spinner Button
 | spinnerType  |  BallIndicator   |  string  | Type of the spinner (BallIndicator, BarIndicator, DotIndicator, MaterialIndicator, PacmanIndicator, PulseIndicator, SkypeIndicator, UIActivityIndicator, WaveIndicator) |
 | isLoading |  false   |  boolean  | The flag to render a Button or a Spinner. false will render button and true will render spinner  |
 | indicatorCount     |    8    |   number   | The count property of react-native-indicators |
-| size |    40    |   number   |  The size of the Spinner  |
+| size |    16    |   number   |  The size of the Dot in DotIndicator  |
 | spinnerOptions |    -    | object  | An object of waveMode for WaveIndicator for WaveIndicator. For more details about these properties, refer [react-native-indicators](https://github.com/n4kz/react-native-indicators) |
 | gradientType |    -    |   string   | Gradients allow you to show more than one color with a smooth transition between the colors (think Instagram logo). Currently, we are supporting two types of gradient (linear, radial) |
 | gradientColors  |    -    |   array   | 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/App/DefaultOrBallSpinnerButton.tsx

@@ -19,7 +19,7 @@ const DefaultOrBallSpinnerButton: React.FC = () => {
       isLoading={isLoading}
       onPress={handleButtonPress}
       indicatorCount={10}
-      gradientType={'linear'}
+      gradientType={'Linear'}
       gradientColors={['#0186DA', '#B631A7']}
       gradientColoroffset={['0%', '90%']}
       gradientColorAngle={360}

example/App/PacmanSpinnerButton.tsx

@@ -19,7 +19,7 @@ const PacmanSpinnerButton: React.FC = () => {
       isLoading={isLoading}
       spinnerType="PacmanIndicator"
       onPress={handleButtonPress}
-      gradientType={'linear'}
+      gradientType={'Linear'}
       gradientColors={['#363553', '#903775', '#E8458B',]}
       gradientColoroffset={['0%', '20%', '66%']}
       gradientColorAngle={25}

example/App/SkypeSpinnerButton.tsx

@@ -18,9 +18,6 @@ const SkypeSpinnerButton: React.FC = () => {
       buttonStyle={[styles.buttonStyle, style.btnStyle]}
       isLoading={isLoading}
       spinnerType="SkypeIndicator"
-      spinnerOptions={{
-        maxScale: 2,
-      }}
       onPress={handleButtonPress}
       gradientType={'Radial'}
       gradientColors={['#AAB6FB', '#30238B']}

src/components/AnimatableView/AnimatableTypes.ts

@@ -9,7 +9,8 @@ export type SpinnerType =
   | 'PulseIndicator'
   | 'SkypeIndicator'
   | 'UIActivityIndicator'
-  | 'WaveIndicator';
+  | 'WaveIndicator'
+  | 'BallIndicator';
 
 export type CommonViewProps = {
   children: JSX.Element;
@@ -18,8 +19,8 @@ export type CommonViewProps = {
   size: number;
   spinnerColor: ColorValue;
   spinnerType: SpinnerType;
-  indicatorCount: number;
-  spinnerOptions: SpinnerOptionsProp;
+  indicatorCount?: number;
+  spinnerOptions?: SpinnerOptionsProp;
 };
 
 export type AnimatableViewProps = CommonViewProps & {

src/components/Button/ButtonTypes.ts

@@ -4,7 +4,7 @@ export type AnimationType = 'ripple-effect';
 
 export type ButtonProps = {
   style?: StyleProp<ViewStyle>;
-  onPress?: () => void;
+  onPress: () => void;
   children: JSX.Element;
   animatedDuration?: number;
   rippleColor?: string;

src/components/ChildrenView/ChildrenViewTypes.ts

@@ -1,4 +1,5 @@
 import type { Animated, ColorValue } from 'react-native';
+import type { GradientType } from '../SpinnerButton';
 
 export type AnimatedStyleProp = {
   width: Animated.AnimatedInterpolation<number>;
@@ -10,7 +11,7 @@ export type AnimatedStyleProp = {
 
 export type ChildrenViewProps = {
   animatedStyles: AnimatedStyleProp;
-  gradientType?: string;
+  gradientType?: GradientType;
   gradientColors?: ColorValue[];
   gradientColoroffset?: string[];
   gradientColorAngle?: number;

src/components/RippleButton/RippleButtonTypes.ts

@@ -2,13 +2,13 @@ import type { StyleProp, ViewStyle } from 'react-native';
 
 export type RippleProps = {
   style?: StyleProp<ViewStyle>;
-  onPress?: () => void;
+  onPress: () => void;
   children: JSX.Element;
   animatedDuration?: number;
   rippleColor?: string;
 };
 
 export type RippleButtonProp = {
-  onPress?: () => void;
+  onPress: () => void;
   animatedDuration?: number;
 };

src/components/SpinnerButton/SpinnerButton.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { Animated, TouchableOpacity, View } from 'react-native';
 import type { StyleProp, ViewStyle, ColorValue } from 'react-native';
 import { AnimatableView, AnimatedView, ChildrenView } from '../../components';
-import { getSpinnerStyle, useAnimatedValues } from '../../utils';
+import {
+  DEFAULT_COLOR_WHITE,
+  getSpinnerStyle,
+  useAnimatedValues,
+} from '../../utils';
 import type { SpinnerButtonProps } from './SpinnerButtonTypes';
 import { SpinnerButtonStyle } from '../../styles';
 
@@ -15,12 +19,12 @@ const SpinnerButton: React.FC<SpinnerButtonProps> = ({
   buttonContainer,
   buttonStyle,
   borderStyle,
-  spinnerColor,
-  spinnerType,
+  spinnerColor = DEFAULT_COLOR_WHITE,
+  spinnerType = 'BallIndicator',
   onPress,
   children,
   indicatorCount,
-  size,
+  size = 16,
   spinnerOptions,
   gradientName,
   gradientType,
@@ -38,7 +42,7 @@ const SpinnerButton: React.FC<SpinnerButtonProps> = ({
   animateWidth,
   animateHeight,
   animateRadius,
-  isLoading,
+  isLoading = false,
   isConnected = true,
   disabled = false,
   disableStyle,
@@ -47,7 +51,7 @@ const SpinnerButton: React.FC<SpinnerButtonProps> = ({
   const isDisable: boolean = disabled || !isConnected;
   const isAnimationType: boolean =
     animationType !== null && animationType !== undefined;
-  const gradientColor: ColorValue[] = isDisable
+  const gradientColor: ColorValue[] | undefined = isDisable
     ? disableGradientColors || gradientColors
     : gradientColors;
   const style: StyleProp<ViewStyle> = [
@@ -100,7 +104,7 @@ const SpinnerButton: React.FC<SpinnerButtonProps> = ({
           gradientName={gradientName}
           children={
             <>
-              {isAnimationType && (
+              {isAnimationType && typeof animationType === 'string' && (
                 <AnimatableView
                   animationType={animationType}
                   children={children}

src/components/SpinnerButton/SpinnerButtonTypes.ts

@@ -7,6 +7,8 @@ export type SpinnerOptionsProp = {
   waveMode?: waveModeType;
 };
 
+export type GradientType = 'Linear' | 'Radial';
+
 export type GradientNames =
   | 'Warm Flame'
   | 'Night Fade'
@@ -177,37 +179,71 @@ export type GradientNames =
   | 'Fabled Sunset'
   | 'Perfect Blue';
 
-export type SpinnerButtonProps = {
-  animationType: string;
-  buttonContainer: StyleProp<ViewStyle>;
-  buttonStyle: StyleProp<ViewStyle>;
-  borderStyle: StyleProp<ViewStyle>;
-  spinnerColor: ColorValue;
-  spinnerType: SpinnerType;
+export interface CommonOptionalProps {
+  animationType?: string;
+  buttonContainer?: StyleProp<ViewStyle>;
+  buttonStyle?: StyleProp<ViewStyle>;
+  borderStyle?: StyleProp<ViewStyle>;
+  spinnerColor?: ColorValue;
+  spinnerType?: SpinnerType;
+  indicatorCount?: number;
+  size?: number;
+  spinnerOptions?: SpinnerOptionsProp;
+  gradientColors?: ColorValue[];
+  gradientColoroffset?: string[];
+  gradientColorAngle?: number;
+  animatedDuration?: number;
+  customSpinnerComponent?: JSX.Element;
+  animateWidth?: number;
+  animateHeight?: number;
+  animateRadius?: number;
+  disabled?: boolean;
+  isLoading?: boolean;
+  isConnected?: boolean;
+  disableStyle?: StyleProp<ViewStyle>;
+  disableGradientColors?: ColorValue[];
+  gradientName?: GradientNames;
+  radialRadiusx?: string | number;
+  radialRadiusy?: string | number;
+  radialRadiusRX?: string | number;
+  radialRadiusRY?: string | number;
+  gradientRadialRadius?: number;
+  gradientButtonHeight?: number;
+}
+
+export interface SpinnerButtonBaseProps extends CommonOptionalProps {
   onPress: () => void;
   children: JSX.Element;
-  indicatorCount: number;
-  size: number;
-  spinnerOptions: SpinnerOptionsProp;
-  gradientType: string;
-  gradientColors: ColorValue[];
-  gradientColoroffset: string[];
-  gradientColorAngle: number;
+}
+
+export interface LinearGradientBaseProps extends CommonOptionalProps {
+  gradientType: 'Linear';
   gradientRadialRadius: number;
   gradientButtonHeight: number;
+}
+
+export interface RadialGradientBaseProps extends CommonOptionalProps {
+  gradientType: 'Radial';
   radialRadiusx: string | number;
   radialRadiusy: string | number;
   radialRadiusRX: string | number;
   radialRadiusRY: string | number;
-  animatedDuration: number;
-  customSpinnerComponent?: JSX.Element;
-  animateWidth: number;
-  animateHeight: number;
-  animateRadius: number;
-  disabled: boolean;
-  isLoading: boolean;
-  isConnected: boolean;
-  disableStyle: StyleProp<ViewStyle>;
-  disableGradientColors: ColorValue[];
-  gradientName: GradientNames;
-};
+  gradientRadialRadius: number;
+  gradientButtonHeight: number;
+}
+
+export interface BasicSpinnerButtonBaseProps extends CommonOptionalProps {
+  gradientType?: never;
+}
+
+type BasicSpinnerButtonProps = SpinnerButtonBaseProps &
+  BasicSpinnerButtonBaseProps;
+
+type LinearGradientProps = SpinnerButtonBaseProps & LinearGradientBaseProps;
+
+type RadialGradientProps = SpinnerButtonBaseProps & RadialGradientBaseProps;
+
+export type SpinnerButtonProps =
+  | BasicSpinnerButtonProps
+  | LinearGradientProps
+  | RadialGradientProps;