diff --git a/src/framework/ui/icon/icon.component.tsx b/src/framework/ui/icon/icon.component.tsx index ab5c24566..715d41194 100644 --- a/src/framework/ui/icon/icon.component.tsx +++ b/src/framework/ui/icon/icon.component.tsx @@ -5,19 +5,21 @@ import { ViewStyle, } from 'react-native'; import { + getIconAnimation, IconAnimation, IconAnimationRegistry, - IconAnimations, } from './iconAnimation'; import { IconRegistryService, RegisteredIcon, } from './service/iconRegistry.service'; +import { AnimationConfig } from '../animation'; interface ComponentProps { name: string; pack?: string; animation?: keyof IconAnimationRegistry; + animationConfig?: AnimationConfig; } export type IconProps = ComponentProps & T; @@ -31,11 +33,17 @@ export type IconElement = React.ReactElement; * @extends React.Component * * @method {(callback?: Animated.EndCallback) => void} startAnimation - Toggle animation to start. + * * @method {() => void} stopAnimation - Toggle animation to stop. + * * @property {string} name - Name of registered icon. + * * @property {string} pack - Name of icon pack that is able to provide an icon for specified name. + * * @property {string} animation - Animation name. Available `zoom`, `pulse` and `shake`. Default is `zoom`. * + * @property {AnimationConfig} animationConfig - Determines animation config. Extends `Animated.AnimationConfig`. + * * @overview-example Register Icons * * ``` @@ -86,6 +94,28 @@ export type IconElement = React.ReactElement; * iconRef.current.startAnimation(); * ``` * + * @example Infinite Animation + * + * ``` + * import React from 'react'; + * import { Icon } from 'react-native-ui-kitten'; + * + * const iconRef = React.createRef(); + * + * export const StarIcon = (props) => ( + * + * ); + * + * iconRef.current.startAnimation(); + * ``` + * * @example Password Input * * ``` @@ -166,7 +196,7 @@ export class Icon extends React.Component> { constructor(props: IconProps) { super(props); - this.animation = IconAnimations[props.animation]; + this.animation = getIconAnimation(props.animation, props.animationConfig); } public componentWillUnmount() { diff --git a/src/framework/ui/icon/iconAnimation.ts b/src/framework/ui/icon/iconAnimation.ts index af22db243..51377a591 100644 --- a/src/framework/ui/icon/iconAnimation.ts +++ b/src/framework/ui/icon/iconAnimation.ts @@ -4,6 +4,7 @@ import { PulseAnimation, ShakeAnimation, ZoomAnimation, + AnimationConfig, } from '../animation'; export type IconAnimation = Animation; @@ -14,8 +15,15 @@ export interface IconAnimationRegistry { shake: IconAnimation; } -export const IconAnimations: IconAnimationRegistry = { - zoom: new ZoomAnimation(), - pulse: new PulseAnimation(), - shake: new ShakeAnimation(), -}; +export function getIconAnimation(animation?: keyof IconAnimationRegistry, + config?: AnimationConfig): IconAnimation { + + switch (animation) { + case 'zoom': + return new ZoomAnimation(config); + case 'pulse': + return new PulseAnimation(config); + case 'shake': + return new ShakeAnimation(config); + } +} diff --git a/src/framework/ui/index.ts b/src/framework/ui/index.ts index b9a70fe5e..d809b879a 100644 --- a/src/framework/ui/index.ts +++ b/src/framework/ui/index.ts @@ -1,3 +1,4 @@ +export { AnimationConfig } from './animation'; export { Avatar, AvatarProps, diff --git a/src/playground/src/ui/screen/icon/type.ts b/src/playground/src/ui/screen/icon/type.ts index a7a68cccf..33ddf9e23 100644 --- a/src/playground/src/ui/screen/icon/type.ts +++ b/src/playground/src/ui/screen/icon/type.ts @@ -31,6 +31,16 @@ const shakeIcon: ComponentShowcaseItem = { }, }; +const infiniteExample: ComponentShowcaseItem = { + title: 'Infinite', + props: { + animation: 'shake', + animationConfig: { + cycles: -1, + }, + }, +}; + const defaultSection: ComponentShowcaseSection = { title: 'Default', items: [ @@ -47,10 +57,18 @@ const animationSection: ComponentShowcaseSection = { ], }; +const infiniteSection: ComponentShowcaseSection = { + title: 'Infinite Animation', + items: [ + infiniteExample, + ], +}; + export const iconShowcase: ComponentShowcase = { sections: [ defaultSection, animationSection, + infiniteSection, ], };