feat(ui): animation-config property to Icon component add

Author: 32penkin

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<T = {}> = ComponentProps & T;
@@ -31,11 +33,17 @@ export type IconElement<T> = React.ReactElement<T>;
  * @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<T> = React.ReactElement<T>;
  * 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) => (
+ *   <Icon
+ *     ref={iconRef}
+ *     name='star'
+ *     animation='shake'
+ *     animationConfig={{
+         cycles: -1,
+       }}
+ *   />
+ * );
+ *
+ * iconRef.current.startAnimation();
+ * ```
+ *
  * @example Password Input
  *
  * ```
@@ -166,7 +196,7 @@ export class Icon<T> extends React.Component<IconProps<T>> {
 
   constructor(props: IconProps<T>) {
     super(props);
-    this.animation = IconAnimations[props.animation];
+    this.animation = getIconAnimation(props.animation, props.animationConfig);
   }
 
   public componentWillUnmount() {

src/framework/ui/icon/iconAnimation.ts

@@ -4,6 +4,7 @@ import {
   PulseAnimation,
   ShakeAnimation,
   ZoomAnimation,
+  AnimationConfig,
 } from '../animation';
 
 export type IconAnimation = Animation<any, ViewStyle>;
@@ -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);
+  }
+}

src/framework/ui/index.ts

@@ -1,3 +1,4 @@
+export { AnimationConfig } from './animation';
 export {
   Avatar,
   AvatarProps,

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,
   ],
 };