Progress bar new design (#1549)

* ProgressBar - new component design and API

* customElement demo

* borderRadius

* demo - texts style

* fix merge

Author: Inbal-Tish

demo/src/screens/componentScreens/ProgressBarScreen.js

@@ -0,0 +1,108 @@
+import React, {Component} from 'react';
+import {StyleSheet, ScrollView} from 'react-native';
+import {View, Text, ProgressBar, Colors, Spacings} from 'react-native-ui-lib';//eslint-disable-line
+
+
+export default class ProgressBarScreen extends Component {
+
+  state = {
+    progresses: [0, 0, 0, 0]
+  };
+
+  componentDidMount() {
+    this.startProgress(0, 45);
+    this.startProgress(1, 25);
+    this.startProgress(2, 70);
+    this.startProgress(3, 15);
+  }
+
+  elements = new Array(4);
+
+  startProgress(index: number, stepSize: number) {
+    const {progresses} = this.state;
+    progresses[index] = Math.min(progresses[index] + stepSize, 100);
+    this.setState({progresses});
+
+    if (progresses[index] < 100) {
+      setTimeout(() => {
+        this.startProgress(index, stepSize);
+      }, 800);
+    }
+  }
+
+  get customElement() {
+    return (
+      <View style={{backgroundColor: Colors.green30, borderWidth: 0.5, borderRadius: 4}}/>
+    );
+  }
+
+  render() {
+    const {progresses} = this.state;
+
+    return (
+      <ScrollView>
+        <View flex bg-grey80 spread paddingV-18>
+          <View paddingL-18 marginB-18>
+            <Text text40 grey10>
+              ProgressBar
+            </Text>
+          </View>
+
+          <Text text70 style={styles.text}>
+            Default
+          </Text>
+          <ProgressBar
+            progress={progresses[0]}
+            style={styles.progressBar}
+          />
+
+          <Text text70 style={styles.text}>
+            FullWidth
+          </Text>
+          <ProgressBar
+            progress={progresses[1]}
+            style={styles.fullWidthProgressBar}
+            fullWidth
+          />
+
+          <Text text70 style={styles.text}>
+            Styled
+          </Text>
+          <ProgressBar
+            progress={progresses[2]}
+            style={[styles.progressBar, styles.styledProgressBar]}
+            progressColor={Colors.purple70}
+          />
+
+          <Text text70 style={styles.text}>
+            Custom Element
+          </Text>
+          <ProgressBar
+            progress={progresses[0]}
+            style={styles.progressBar}
+            customElement={this.customElement}
+          />
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  text: {
+    paddingTop: 20,
+    paddingBottom: 15,
+    paddingLeft: 20
+  },
+  progressBar: {
+    marginBottom: 10,
+    marginHorizontal: Spacings.s4
+  },
+  styledProgressBar: {
+    backgroundColor: Colors.purple40,
+    height: 30
+  },
+  fullWidthProgressBar: {
+    marginBottom: 10
+  }
+});

demo/src/screens/componentScreens/ProgressBarScreen.tsx

@@ -42,6 +42,7 @@ export {default as ColorPicker, ColorPickerProps} from './src/components/colorPi
 export {default as ColorPalette, ColorPaletteProps} from './src/components/colorPicker/ColorPalette';
 export {default as ColorSwatch, ColorSwatchProps} from './src/components/colorPicker/ColorSwatch';
 export {default as Drawer, DrawerProps, DrawerItemProps} from './src/components/drawer';
+export {default as ProgressBar, ProgressBarProps} from './src/components/progressBar';
 export {default as FeatureHighlight, FeatureHighlightProps} from './src/components/featureHighlight';
 export {default as FloatingButton, FloatingButtonProps} from './src/components/floatingButton';
 export {default as GridListItem, GridListItemProps} from './src/components/gridListItem';
@@ -91,7 +92,6 @@ export {
   BaseInput,
   TextArea,
   MaskedInput,
-  ProgressBar,
   ColorSliderGroup,
   ChipsInput,
   SharedTransition,

generatedTypes/index.d.ts

@@ -0,0 +1,66 @@
+import React, { PureComponent } from 'react';
+import { Animated, StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
+/**
+ * @description: Progress bar
+ * @example:https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressBarScreen.js
+ */
+interface Props {
+    /**
+     * The progress of the bar from 0 to 100
+     */
+    progress?: number;
+    /**
+     *  FullWidth Ui preset
+     */
+    fullWidth?: boolean;
+    /**
+     * Override container style
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Progress color
+     */
+    progressColor?: string;
+    /**
+     * Custom element to render on top of the animated progress
+     */
+    customElement?: JSX.Element;
+}
+export declare type ProgressBarProps = Props;
+interface State {
+    containerWidth?: number;
+}
+declare class ProgressBar extends PureComponent<Props, State> {
+    static displayName: string;
+    static defaultProps: Partial<Props>;
+    progressAnimation: Animated.Value;
+    constructor(props: Props);
+    componentDidUpdate(prevProps: Props): void;
+    getContainerWidth: (event: LayoutChangeEvent) => void;
+    animateProgress(toValue?: number): void;
+    getAccessibilityProps(): {
+        accessible: boolean;
+        accessibilityLabel: string;
+    } | undefined;
+    getContainerStyle(): {
+        height: number;
+        borderRadius?: number | undefined;
+    };
+    getProgressStyle(): {
+        right: number | undefined;
+        backgroundColor: string;
+        borderRadius: number;
+    } | {
+        right: number | undefined;
+        backgroundColor: string;
+        borderBottomRightRadius: number;
+        borderTopRightRadius: number;
+    };
+    renderCustomElement(): React.FunctionComponentElement<any> | undefined;
+    render(): JSX.Element;
+}
+export { ProgressBar };
+declare const _default: React.ComponentClass<Props & {
+    useCustomTheme?: boolean | undefined;
+}, any> & typeof ProgressBar;
+export default _default;