refactor(spinner): ♻️ move Animated Component with hook implementation

example/src/modules/primitives/BadgeScreen.tsx

@@ -1,14 +1,43 @@
 import React from "react";
+// import {
+// useAnimatedStyle,
+// useSharedValue,
+// withSpring,
+// } from "react-native-reanimated";
 import {
+ // AdaptAnimatedBox,
+ // AnimatedBox,
  BadgeNew,
  BadgeText,
  BadgeWrapper,
  Box,
+ Button,
+ SpinnerNew,
 } from "@adaptui/react-native-tailwind";
 
 export const BadgeScreen = () => {
+ // const x = useSharedValue(1);
+ // const animatedStyles = useAnimatedStyle(() => {
+ // return {
+ // transform: [
+ // { scale: withSpring(x.value) },
+ // { translateX: withSpring(x.value * 37) },
+ // { translateY: withSpring(x.value * 23) },
+ // ],
+ // };
+ // });
  return (
  <Box className="flex-1 justify-center items-center bg-white-900">
+ {/* <AnimatedBox
+ className="h-10 w-10 bg-grayDark-200 rounded-md border-red-200"
+ style={animatedStyles}
+ />
+ <AdaptAnimatedBox
+ className="h-10 w-10 bg-grayDark-200 rounded-md border-[1.5px] border-red-200"
+ style={animatedStyles}
+ /> */}
+ <Button onPress={() => (x.value = Math.random())}>Animate</Button>
+ <SpinnerNew track="visible" />
  <BadgeNew size="lg" className="my-1" themeColor="secondary">
  Scheduled
  </BadgeNew>

src/components/index.ts

@@ -14,6 +14,7 @@ export * from "./radio";
 export * from "./select";
 export * from "./slider";
 export * from "./spinner";
+export * from "./spinner-new";
 export * from "./switch";
 export * from "./tag";
 export * from "./tooltip";

src/components/spinner-new/Spinner.tsx

@@ -0,0 +1,129 @@
+import { useEffect } from "react";
+import {
+ Easing,
+ useAnimatedStyle,
+ useSharedValue,
+ withRepeat,
+ withTiming,
+} from "react-native-reanimated";
+
+import {
+ AnimatedBox,
+ AnimatedBoxOptions,
+ useAnimatedBox,
+} from "../../primitives/animated-box";
+import { useTheme } from "../../theme";
+import { cx, styleAdapter } from "../../utils";
+import { GetThemeValue } from "../../utils/global-types";
+import {
+ As,
+ createComponentType,
+ createElement,
+ createHook,
+ Props,
+} from "../../utils/system";
+
+export const useSpinner = createHook<SpinnerOptions>(
+ ({
+ size = "md",
+ themeColor = "base",
+ track = "transparent",
+ label = "Loading...",
+ ...props
+ }) => {
+ const tailwind = useTheme();
+ const spinnerTheme = useTheme("spinner");
+
+ const spinnerLoopAnimation = useSharedValue(0);
+ useEffect(() => {
+ spinnerLoopAnimation.value = withRepeat(
+ withTiming(360, {
+ duration: 1000,
+ easing: Easing.linear,
+ }),
+ -1,
+ false,
+ );
+ }, [spinnerLoopAnimation]);
+ const spinnerLoadingStyle = useAnimatedStyle(() => {
+ return {
+ transform: [
+ {
+ rotate: `${spinnerLoopAnimation.value}deg`,
+ },
+ ],
+ };
+ });
+
+ const style = [
+ tailwind.style(
+ cx(
+ spinnerTheme.base,
+ spinnerTheme.themeColor[themeColor],
+ track === "visible"
+ ? spinnerTheme.track[track]?.[themeColor]
+ : spinnerTheme.track.transparent,
+ spinnerTheme.size[size],
+ ),
+ ),
+ { borderWidth: spinnerTheme.borderWidth },
+ styleAdapter(props.style),
+ spinnerLoadingStyle,
+ ];
+
+ props = {
+ ...props,
+ accessibilityLabel: label,
+ style,
+ // Web Prop
+ "data-testid": "testid-spinner",
+ };
+ props = useAnimatedBox(props);
+
+ return props;
+ },
+);
+
+export const SpinnerNew = createComponentType<SpinnerOptions>(props => {
+ const htmlProps = useSpinner(props);
+
+ return createElement(AnimatedBox, htmlProps);
+}, "Spinner");
+
+export type SpinnerOptions<T extends As = typeof AnimatedBox> = Omit<
+ AnimatedBoxOptions<T>,
+ "size"
+> & {
+ /**
+ * How large should the spinner be?
+ *
+ * @default md
+ */
+ size?: keyof GetThemeValue<"spinner", "size">;
+
+ /**
+ * How the spinner should be themed?
+ *
+ * @default base
+ */
+ themeColor?: keyof GetThemeValue<"spinner", "themeColor">;
+
+ /**
+ * How the spinner should be displayed?
+ *
+ * @default transparent
+ */
+ track?: keyof GetThemeValue<"spinner", "track">;
+
+ /**
+ * For accessibility, it is important to add a fallback loading text.
+ * This text will be visible to screen readers.
+ *
+ * @default Loading...
+ */
+ label?: string;
+};
+
+export type SpinnerNewProps<T extends As = typeof AnimatedBox> = Props<
+ SpinnerOptions<T>
+>;

src/components/spinner-new/index.ts

@@ -0,0 +1 @@
+export * from "./Spinner";

src/primitives/animated-box/AdaptAnimatedBox.tsx

@@ -0,0 +1,41 @@
+import { useTheme } from "../../theme";
+import { styleAdapter } from "../../utils";
+import {
+ As,
+ createComponent,
+ createElement,
+ createHook,
+ Props,
+} from "../../utils/system";
+import { useBox } from "../box";
+
+import { AnimatedBox, AnimatedBoxOptions, useAnimatedBox } from "./AnimatedBox";
+
+export const useAdaptAnimatedBox = createHook<AdaptAnimatedBoxOptions>(
+ ({ __TYPE__, className, ...props }) => {
+ const tailwind = useTheme();
+ const style = [tailwind.style(className), styleAdapter(props.style)];
+
+ props = useAnimatedBox(props);
+ props = useBox(props);
+
+ return { ...props, style };
+ },
+);
+
+export const AdaptAnimatedBox = createComponent<AdaptAnimatedBoxOptions>(
+ props => {
+ const htmlProps = useAdaptAnimatedBox(props);
+
+ return createElement(AnimatedBox, htmlProps);
+ },
+);
+
+export type AdaptAnimatedBoxOptions<T extends As = typeof AnimatedBox> =
+ AnimatedBoxOptions<T> & {
+ className?: string;
+ };
+
+export type AdaptAnimatedBoxProps<T extends As = typeof AnimatedBox> = Props<
+ AdaptAnimatedBoxOptions<T>
+>;

src/primitives/animated-box/AnimatedBox.tsx

@@ -1,9 +1,32 @@
 import Animated from "react-native-reanimated";
 
-import { createComponent } from "../../utils";
+import {
+ As,
+ ComponentOptions,
+ createComponent,
+ createElement,
+ createHook,
+ Props,
+} from "../../utils/system";
 import { Box } from "../box";
 
 // @ts-ignore
 const RNAnimatedBox = Animated.createAnimatedComponent(Box);
 
-export const AnimatedBox = createComponent(RNAnimatedBox, { shouldMemo: true });
+export const useAnimatedBox = createHook<AnimatedBoxOptions>(
+ ({ __TYPE__, ...props }) => {
+ return props;
+ },
+);
+
+export const AnimatedBox = createComponent<AnimatedBoxOptions>(props => {
+ const htmlProps = useAnimatedBox(props);
+ return createElement(RNAnimatedBox, htmlProps);
+});
+
+export type AnimatedBoxOptions<T extends As = typeof RNAnimatedBox> =
+ ComponentOptions<T>;
+
+export type AnimatedBoxProps<T extends As = typeof RNAnimatedBox> = Props<
+ AnimatedBoxOptions<T>
+>;

src/primitives/animated-box/index.ts

@@ -1 +1,2 @@
+export * from "./AdaptAnimatedBox";
 export * from "./AnimatedBox";

src/utils/styleAdapter.ts

@@ -6,13 +6,15 @@ import {
  StyleSheet,
  ViewStyle,
 } from "react-native";
+import Animated from "react-native-reanimated";
 
 import { runIfFn } from "./react";
 
 export const styleAdapter = (
  style:
  | StyleProp<ViewStyle>
- | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>),
+ | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)
+ | StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>,
  touchState?: PressableStateCallbackType,
 ): ViewStyle | Falsy | RegisteredStyle<ViewStyle> => {
  const _style = touchState ? runIfFn(style, touchState) : style;