feat: UNT-T22344: TypeScript Support

Author: nilesh-simform

components/AnimatableView.js

@@ -0,0 +1,52 @@
+import React from "react";
+import * as Animatable from "react-native-animatable";
+import SpinnerComponent from "../SpinnerComponent/SpinnerComponent";
+import type { AnimatableViewProps } from "./types";
+import styles from "../styles/SpinnerButtonStyle";
+
+const AnimatableView: React.FC<AnimatableViewProps> = ({
+  animationType,
+  children,
+  customSpinnerComponent,
+  height,
+  size,
+  spinnerColor,
+  spinnerType,
+  indicatorCount,
+  spinnerOptions,
+  isLoading,
+  animatedDuration,
+}: AnimatableViewProps) => {
+  const isCustomeSpinner: boolean =
+    customSpinnerComponent !== null && customSpinnerComponent !== undefined;
+  return (
+    <>
+      {!isLoading && (
+        <Animatable.View animation={animationType} duration={animatedDuration}>
+          {children}
+        </Animatable.View>
+      )}
+      {isLoading && (
+        <Animatable.View
+          animation={animationType}
+          duration={animatedDuration}
+          style={styles.absoluteView}
+        >
+          {isCustomeSpinner && customSpinnerComponent}
+          {!isCustomeSpinner && (
+            <SpinnerComponent
+              height={height}
+              size={size}
+              spinnerColor={spinnerColor}
+              spinnerType={spinnerType}
+              indicatorCount={indicatorCount}
+              spinnerOptions={spinnerOptions}
+            />
+          )}
+        </Animatable.View>
+      )}
+    </>
+  );
+};
+
+export default AnimatableView;

components/AnimatableView/AnimatableView.tsx

@@ -0,0 +1,29 @@
+import type { ColorValue } from "react-native";
+import type { SpinnerOptionsProp } from "../SpinnerButton/types";
+
+export type SpinnerType =
+  | "barindicator"
+  | "dotindicator"
+  | "materialindicator"
+  | "pacmanindicator"
+  | "pulseindicator"
+  | "skypeindicator"
+  | "uiactivityindicator"
+  | "waveindicator";
+
+export type CommonViewProps = {
+  children: JSX.Element;
+  customSpinnerComponent?: JSX.Element;
+  height: number;
+  size: number;
+  spinnerColor: ColorValue;
+  spinnerType: SpinnerType;
+  indicatorCount: number;
+  spinnerOptions: SpinnerOptionsProp;
+};
+
+export type AnimatableViewProps = CommonViewProps & {
+  animationType: string;
+  isLoading?: boolean;
+  animatedDuration?: number;
+};

components/AnimatableView/types.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { Animated } from "react-native";
+import SpinnerComponent from "../SpinnerComponent/SpinnerComponent";
+import type { AnimatedViewProps } from "./types";
+import styles from "../styles/SpinnerButtonStyle";
+
+const AnimatedView: React.FC<AnimatedViewProps> = ({
+  animatedChildHideStyle,
+  animatedChildShowStyle,
+  children,
+  customSpinnerComponent,
+  height,
+  size,
+  spinnerColor,
+  spinnerType,
+  indicatorCount,
+  spinnerOptions,
+}: AnimatedViewProps) => {
+  const isCustomeSpinner: boolean =
+    customSpinnerComponent !== null && customSpinnerComponent !== undefined;
+  return (
+    <>
+      <Animated.View style={animatedChildHideStyle}>{children}</Animated.View>
+      <Animated.View style={[styles.absoluteView, animatedChildShowStyle]}>
+        {isCustomeSpinner && customSpinnerComponent}
+        {!isCustomeSpinner && (
+          <SpinnerComponent
+            height={height}
+            size={size}
+            spinnerColor={spinnerColor}
+            spinnerType={spinnerType}
+            indicatorCount={indicatorCount}
+            spinnerOptions={spinnerOptions}
+          />
+        )}
+      </Animated.View>
+    </>
+  );
+};
+
+export default AnimatedView;

components/AnimatedView.js

@@ -0,0 +1,10 @@
+import { Animated } from "react-native";
+import type { ViewStyle } from "react-native";
+import type { CommonViewProps } from "../AnimatableView/types";
+
+type AnimatedStyle = Animated.WithAnimatedValue<ViewStyle>;
+
+export type AnimatedViewProps = CommonViewProps & {
+  animatedChildHideStyle?: AnimatedStyle;
+  animatedChildShowStyle?: AnimatedStyle;
+};

components/AnimatedView/AnimatedView.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import LinearGradient from "../LinearGradient/LinearGradient";
+import RadialGradient from "../RadialGradient/RadialGradient";
+import type { ChildrenViewProps } from "./types";
+
+const ChildrenView: React.FC<ChildrenViewProps> = ({
+  animatedStyles,
+  gradientType,
+  gradientColors,
+  gradientColoroffset,
+  gradientColorAngle,
+  gradientRadialRadius,
+  gradientButtonHeight,
+  radialRadiusx,
+  radialRadiusy,
+  radialRadiusRX,
+  radialRadiusRY,
+  children,
+  gradientName,
+}: ChildrenViewProps) => {
+  const isLinearGradient: boolean = gradientType?.trim()?.toLowerCase() === "linear";
+  const isRadialGradient: boolean = gradientType?.trim()?.toLowerCase() === "radial";
+
+  if (isLinearGradient) {
+    return (
+      <LinearGradient
+        angle={gradientColorAngle || 90}
+        children={children}
+        animatedStyles={animatedStyles}
+        gradientColoroffset={gradientColoroffset}
+        gradientColors={gradientColors}
+        gradientName={gradientName}
+        gradientRadialRadius={gradientRadialRadius}
+        gradientButtonHeight={gradientButtonHeight}
+      />
+    );
+  } else if (isRadialGradient) {
+    return (
+      <RadialGradient
+        radialRadiusx={radialRadiusx}
+        radialRadiusy={radialRadiusy}
+        radialRadiusRX={radialRadiusRX}
+        radialRadiusRY={radialRadiusRY}
+        children={children}
+        gradientName={gradientName}
+        animatedStyles={animatedStyles}
+        gradientColoroffset={gradientColoroffset}
+        gradientColors={gradientColors}
+        gradientRadialRadius={gradientRadialRadius}
+        gradientButtonHeight={gradientButtonHeight}
+      />
+    );
+  } else {
+    return children;
+  }
+};
+
+export default ChildrenView;