import { ActivityIndicatorProps as RNActivityIndicatorProps } from 'react-native' ; import { createComponent , createElement , createHook , useTheme } from 'bumbag/utils' ; import { Size } from 'bumbag/types' ; import { palette , theme as getTheme } from '../utils/theme' ; import { Box , BoxProps } from '../Box' ; import * as styles from './Spinner.styles' ; export type LocalSpinnerProps = { size ? : Size ; } ; export type SpinnerProps = BoxProps & Omit < RNActivityIndicatorProps , 'size' > & LocalSpinnerProps ; const useProps = createHook < SpinnerProps > ( ( props , { themeKey } ) => { const { color , size , ... restProps } = props ; const { theme } = useTheme ( ) ; const boxProps = Box . useProps ( restProps ) ; return { ... boxProps , color : palette ( color as string ) ( { theme } ) , size : getTheme ( themeKey , `sizes.${ size }` ) ( { theme } ) ? parseInt ( getTheme ( themeKey , `sizes.${ size }` ) ( { theme } ) . replace ( 'px' , '' ) ) : parseInt ( ( size as string ) . replace ( 'px' , '' ) ) , } ; } , { defaultProps : { color : 'primary' , size : 'default' } , themeKey : 'native.Spinner' } ) ; export const Spinner = createComponent < SpinnerProps > ( ( props ) => { const htmlProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . StyledSpinner , htmlProps , } ) ; } , { attach : { useProps , displayName : 'native.Spinner' , } , themeKey : 'native.Spinner' , } ) ;