@metamask/design-system-react-native
Version:
1 lines • 3.82 kB
Source Map (JSON)
{"version":3,"file":"Spinner.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qFAAmE;AACnE,+CAAyC;AACzC,wDAAoC;AACpC,mFAMiC;AAGjC,+CAAiE;AAEjE,+CAA0D;AAInD,MAAM,OAAO,GAAG,CAAC,EACtB,KAAK,GAAG,gBAAS,CAAC,WAAW,EAC7B,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACK,EAAE,EAAE;IACjB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,qCAAqC;IACrC,MAAM,QAAQ,GAAG,IAAA,wCAAc,EAAC,CAAC,CAAC,CAAC;IAEnC,gDAAgD;IAChD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,KAAK,GAAG,IAAA,oCAAU,EACzB,IAAA,oCAAU,EAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,gCAAM,CAAC,MAAM,EAAE,CAAC,EAAE,mCAAmC;QAC/F,CAAC,CAAC,EAAE,uBAAuB;QAC3B,KAAK,CACN,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,4BAA4B;IAC5B,MAAM,aAAa,GAAG,IAAA,0CAAgB,EAAC,GAAG,EAAE,CAAC,CAAC;QAC5C,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,KAAK,GAAG,GAAG,KAAK,EAAE,CAAC;KACtD,CAAC,CAAC,CAAC;IAEJ,MAAM,qBAAqB,GAAc;QACvC,IAAI,EAAE,eAAQ,CAAC,EAAE;QACjB,IAAI,EAAE,eAAQ,CAAC,OAAO;QACtB,MAAM,EAAE,cAAc;QACtB,KAAK;QACL,GAAG,gBAAgB;KACpB,CAAC;IAEF,MAAM,qBAAqB,GAAuB;QAChD,OAAO,EAAE,kBAAW,CAAC,MAAM;QAC3B,KAAK,EAAE,gBAAS,CAAC,WAAW;QAC5B,MAAM,EAAE,cAAc;QACtB,GAAG,gBAAgB;KACpB,CAAC;IAEF,OAAO,CACL,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,iCAAiC,WAAW,EAAE,EAAE,KAAK,CAAC,CAAC,CACjE,MAAM,CAAC,SAAS,CAChB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,iCAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB,CACnE;QAAA,CAAC,WAAI,CAAC,IAAI,qBAAqB,CAAC,EAClC;MAAA,EAAE,iCAAQ,CAAC,IAAI,CACf;MAAA,CAAC,WAAW,IAAI,CAAC,WAAI,CAAC,IAAI,qBAAqB,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,WAAI,CAAC,CACvE;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAvDW,QAAA,OAAO,WAuDlB","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useEffect } from 'react';\nimport { View } from 'react-native';\nimport Animated, {\n useSharedValue,\n useAnimatedStyle,\n withRepeat,\n withTiming,\n Easing,\n} from 'react-native-reanimated';\n\nimport type { IconProps } from '../../Icon';\nimport { Icon, IconColor, IconName, IconSize } from '../../Icon';\nimport type { TextProps } from '../../Text';\nimport { Text, TextVariant, TextColor } from '../../Text';\n\nimport type { SpinnerProps } from './Spinner.types';\n\nexport const Spinner = ({\n color = IconColor.IconDefault,\n spinnerIconProps,\n loadingText,\n loadingTextProps,\n twClassName = '',\n style,\n ...props\n}: SpinnerProps) => {\n const tw = useTailwind();\n\n // Create a shared value for rotation\n const rotation = useSharedValue(0);\n\n // Start the animation when the component mounts\n useEffect(() => {\n rotation.value = withRepeat(\n withTiming(360, { duration: 1000, easing: Easing.linear }), // Complete a full spin in 1 second\n -1, // Infinite repetitions\n false, // Do not reverse the animation\n );\n }, []);\n\n // Define the animated style\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ rotate: `${rotation.value % 360}deg` }],\n }));\n\n const finalSpinnerIconProps: IconProps = {\n size: IconSize.Md,\n name: IconName.Loading,\n testID: 'spinner-icon',\n color,\n ...spinnerIconProps,\n };\n\n const finalLoadingTextProps: Partial<TextProps> = {\n variant: TextVariant.BodyMd,\n color: TextColor.TextDefault,\n testID: 'spinner-text',\n ...loadingTextProps,\n };\n\n return (\n <View\n style={[tw`flex-row items-center gap-x-2 ${twClassName}`, style]}\n testID=\"spinner\"\n {...props}\n >\n <Animated.View style={[animatedStyle]} testID=\"spinner-animated-view\">\n <Icon {...finalSpinnerIconProps} />\n </Animated.View>\n {loadingText && <Text {...finalLoadingTextProps}>{loadingText}</Text>}\n </View>\n );\n};\n"]}