feat: add linear and circular progress bars (#1567)

Co-authored-by: Artsiom Grintsevich <greenfrvr@gmail.com>

docs/src/structure.ts

@@ -711,6 +711,28 @@ export const structure = [
         description: 'Spinner displays a loading state of a page or a section.',
         keywords: 'ui kitten, ui kitten menu, kitten extra, ui kitten spinner ',
       },
+      {
+        type: 'tabs',
+        name: 'ProgressBar',
+        icon: 'progress-bar.svg',
+        source: [
+          'ProgressBar',
+        ],
+        title: 'ProgressBar',
+        description: 'Displays the length of a process.',
+        keywords: 'ui kitten, ui kitten menu, kitten extra, ui kitten progress bar ',
+      },
+      {
+        type: 'tabs',
+        name: 'CircularProgressBar',
+        icon: 'circular-progress-bar.svg',
+        source: [
+          'CircularProgressBar',
+        ],
+        title: 'CircularProgressBar',
+        description: 'Displays the length of a process.',
+        keywords: 'ui kitten, ui kitten menu, kitten extra, ui kitten circular progress bar ',
+      },
       {
         type: 'tabs',
         name: 'Calendar',

src/components/ui/card/card.component.tsx

@@ -152,7 +152,7 @@ export class Card extends React.Component<CardProps> {
           component={header}
         />
         {header && <Divider />}
-        <View style={[ styles.content, evaStyle.body ]}>
+        <View style={[styles.content, evaStyle.body]}>
           {children}
         </View>
         {footer && <Divider />}
@@ -174,5 +174,5 @@ const styles = StyleSheet.create({
   },
   content: {
     flexShrink: 1,
-  }
+  },
 });

src/components/ui/circularProgressBar/animation.ts

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import {
+  Animated,
+  Easing,
+  Platform,
+} from 'react-native';
+import {
+  Animation,
+  AnimationConfig,
+} from '../animation/animation';
+
+const DEFAULT_CONFIG: CircularProgressBarAnimationConfig = {
+  duration: 500,
+  easing: Easing.linear,
+  cycles: 1,
+  useNativeDriver: Platform.OS !== 'web',
+};
+
+interface AnimationStyle {
+  rotateFirstHalf: Animated.AnimatedInterpolation<string>;
+  rotateSecondHalf: Animated.AnimatedInterpolation<string>;
+}
+
+type TimingAnimationConfig = Omit<Animated.TimingAnimationConfig, 'toValue'>;
+
+export type CircularProgressBarAnimationConfig = AnimationConfig & TimingAnimationConfig;
+
+export class CircularProgressBarAnimation extends Animation<CircularProgressBarAnimationConfig, AnimationStyle> {
+
+  private toValue: number;
+  private readonly animationValue: Animated.Value;
+
+  constructor(config?: Partial<CircularProgressBarAnimationConfig>) {
+    super({ ...DEFAULT_CONFIG, ...config });
+    this.animationValue = new Animated.Value(0);
+  }
+
+  protected get animation(): Animated.CompositeAnimation {
+    return Animated.timing(
+      this.animationValue,
+      {
+        ...this.config,
+        toValue: this.toValue,
+      },
+    );
+  }
+
+  public startDeterminate(toValue: number, callback?: Animated.EndCallback): void {
+    this.toValue = toValue;
+    super.start(callback);
+  }
+
+  public stop(): void {
+    super.stop();
+  }
+
+  public toProps(): AnimationStyle {
+    return {
+      rotateFirstHalf: this.createRotateFirstHalfInterpolation(),
+      rotateSecondHalf: this.createRotateSecondHalfInterpolation(),
+    };
+  }
+
+  private createRotateFirstHalfInterpolation = (): Animated.AnimatedInterpolation<string> => {
+    return this.animationValue.interpolate({
+      inputRange: [0, 0.5],
+      outputRange: ['180deg', '360deg'],
+      extrapolate: 'clamp',
+    });
+  };
+
+  private createRotateSecondHalfInterpolation = (): Animated.AnimatedInterpolation<string> => {
+    return this.animationValue.interpolate({
+      inputRange: [0.5, 1],
+      outputRange: ['180deg', '360deg'],
+      extrapolate: 'clamp',
+    });
+  };
+
+}