Merge branch 'master' into docs/fix-undocumented-logic-and-various-fixes

* master:
  Remove addItems from screen with fewItems
  Add vertical scroll to Carousel component (#1175)
  Fix Carousel gif
  Update Carousel gifs
  Fix and improve search using fuzzysearch
  Update PageControl docs with a gif
  Fix issue with Carousel props not being included in docs
  Fix issue with duplicate props appearing in docs site
  Fix order of markdown pages in docs site
  Update uilib-docs version to 1.0.11
  Update generate types
  Fix/tab controller center android with rtl (#1178)
  Fix/responsive docs pages (#1174)
  Add customLoader and remove animatable (#1152)
  turn off TextFieldMigrator for now
  Update peer deps version
  Move IncubatorTextField screen to be in Incubator screens hierarchy
  Docs/mobie responsive (#1164)
  Update generatedTypes

# Conflicts:
#	uilib-docs/src/components/navbar/index.js
#	uilib-docs/src/components/navbar/item.js
#	uilib-docs/src/pages/sections/IntroSection.jsx

Author: M-i-k-e-l

demo/src/index.js

@@ -34,6 +34,9 @@ module.exports = {
       get CarouselScreen() {
         return require('./screens/componentScreens/CarouselScreen').default;
       },
+      get CarouselVerticalScreen() {
+        return require('./screens/componentScreens/CarouselVerticalScreen').default;
+      },
       get CheckboxScreen() {
         return require('./screens/componentScreens/CheckboxScreen').default;
       },

demo/src/screens/MenuStructure.js

@@ -86,6 +86,7 @@ export const navigationData = {
     title: 'Layouts & Templates',
     screens: [
       {title: 'Carousel', tags: 'carousel', screen: 'unicorn.components.CarouselScreen'},
+      {title: 'Carousel (Vertical)', tags: 'carousel', screen: 'unicorn.components.CarouselVerticalScreen'},
       {title: 'LoadingScreen', tags: 'loading screen', screen: 'unicorn.screens.LoadingScreen'},
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},

demo/src/screens/componentScreens/CarouselVerticalScreen.tsx

@@ -0,0 +1,109 @@
+import {Carousel, Constants, Text, View, Colors} from 'react-native-ui-lib';
+import React, {Component} from 'react';
+import _ from 'lodash';
+import {StyleSheet} from 'react-native';
+import {
+  renderBooleanOption,
+  renderSliderOption
+} from '../ExampleScreenPresenter';
+
+interface Props {}
+
+interface State {
+  numberOfPagesShown: number;
+  autoplay: boolean;
+}
+
+const BACKGROUND_COLORS = [
+  Colors.red50,
+  Colors.yellow20,
+  Colors.purple50,
+  Colors.green50,
+  Colors.cyan50,
+  Colors.purple20,
+  Colors.blue60,
+  Colors.red10,
+  Colors.green20,
+  Colors.purple60
+];
+
+const pageHeight = Constants.windowHeight / 2;
+
+class CarouselVerticalScreen extends Component<Props, State> {
+  carousel = React.createRef<typeof Carousel>();
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      numberOfPagesShown: 5,
+      autoplay: false
+    };
+  }
+
+  render() {
+    const {numberOfPagesShown, autoplay} = this.state
+    return (
+      <View flex paddingT-20>
+        <View marginH-20 marginB-20>
+          {renderBooleanOption.call(this, 'autoplay', 'autoplay')}
+          {renderSliderOption.call(
+            this,
+            'Number of pages shown',
+            'numberOfPagesShown',
+            {
+              min: 3,
+              max: 10,
+              step: 1,
+              initial: 5
+            }
+          )}
+        </View>
+        <Carousel
+          key={'carousel'}
+          ref={this.carousel}
+          autoplay={autoplay}
+          pageWidth={Constants.windowWidth}
+          pageHeight={pageHeight}
+          initialPage={0}
+          containerStyle={{height: pageHeight}}
+          allowAccessibleLayout
+          horizontal={false}
+        >
+          {_.map([...Array(numberOfPagesShown)], (_, index) => (
+            <Page
+              style={{backgroundColor: BACKGROUND_COLORS[index]}}
+              key={index}
+            >
+              <Text style={styles.pageText}>{index}</Text>
+            </Page>
+          ))}
+        </Carousel>
+      </View>
+    );
+  }
+}
+
+// @ts-ignore
+const Page = ({children, style, ...others}) => {
+  return (
+    <View center {...others} style={[styles.page, style]}>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {},
+  page: {
+    flex: 1,
+    height: pageHeight,
+    width: Constants.windowWidth
+  },
+  pageText: {
+    fontSize: 40,
+    color: 'white'
+  }
+});
+
+export default CarouselVerticalScreen

demo/src/screens/componentScreens/LoadingScreen.js

@@ -1,40 +1,22 @@
 import React, {Component} from 'react';
-import {View as AnimatableView} from 'react-native-animatable';
-import {View, Text, LoaderScreen, Colors} from 'react-native-ui-lib';//eslint-disable-line
-
+import {View, Text, LoaderScreen, Colors} from 'react-native-ui-lib';
 export default class LoadingScreen extends Component {
-
   state = {
-    loading: true,
+    loading: true
   };
 
   componentDidMount() {
     setTimeout(() => {
-      this.setState({
-        animationConfig: {
-          animation: 'fadeOut',
-          onAnimationEnd: () => this.setState({loading: false}),
-        },
-      });
+      this.setState({loading: false});
     }, 2500);
   }
 
   render() {
-    const {loading, animationConfig} = this.state;
+    const {loading} = this.state;
     return (
       <View flex bg-orange70 center>
-        <Text text10>
-          Content Content Content
-        </Text>
-        {loading &&
-        <AnimatableView {...animationConfig}>
-          <LoaderScreen
-            color={Colors.blue30}
-            message="Loading..."
-            overlay
-          />
-        </AnimatableView>
-        }
+        <Text text10>Content Content Content</Text>
+        {loading && <LoaderScreen color={Colors.blue30} message="Loading..." overlay/>}
       </View>
     );
   }

demo/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -43,7 +43,7 @@ class TabControllerScreen extends Component<{}, State> {
 
     const addItem: TabControllerItemProps = {icon: Assets.icons.demo.add, key: 'add', ignore: true, width: 60, onPress: this.onAddItem};
 
-    return [...items, addItem];
+    return fewItems ? items : [...items, addItem];
   };
 
   componentDidMount() {

demo/src/screens/componentScreens/index.js

@@ -10,6 +10,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.CardsScreen', () => require('./CardsScreen').default);
   registrar('unicorn.animations.CardScannerScreen', () => require('../componentScreens/CardScannerScreen').default);
   registrar('unicorn.components.CarouselScreen', () => require('./CarouselScreen').default);
+  registrar('unicorn.components.CarouselVerticalScreen', () => require('./CarouselVerticalScreen').default);
   registrar('unicorn.components.CheckboxScreen', () => require('./CheckboxScreen').default);
   registrar('unicorn.components.ChipScreen', () => require('./ChipScreen').default);
   registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);
@@ -62,7 +63,5 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.WithScrollEnablerScreen', () => require('./WithScrollEnablerScreen').default);
   registrar('unicorn.components.WithScrollReachedScreen', () => require('./WithScrollReachedScreen').default);
   registrar('unicorn.components.FaderScreen', () => require('./FaderScreen').default);
-  // Incubator Screens
-  registrar('unicorn.components.IncubatorTextFieldScreen', () => require('./IncubatorTextFieldScreen').default);
 }
 

demo/src/screens/componentScreens/IncubatorTextFieldScreen.tsx renamed to demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -2,9 +2,7 @@ import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 
 export function registerScreens(registrar) {
   registrar('unicorn.incubator.TouchableOpacityScreen', () =>
-    gestureHandlerRootHOC(require('./TouchableOpacityScreen').default)
-  );
-  registrar('unicorn.incubator.WheelPickerScreen', () =>
-    gestureHandlerRootHOC(require('./WheelPickerScreen').default)
-  );
+    gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
+  registrar('unicorn.components.IncubatorTextFieldScreen', () => require('./IncubatorTextFieldScreen').default);
+  registrar('unicorn.incubator.WheelPickerScreen', () => gestureHandlerRootHOC(require('./WheelPickerScreen').default));
 }

demo/src/screens/incubatorScreens/index.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { ImageSourcePropType, StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle } from 'react-native';
+import { ImageSourcePropType, StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, AccessibilityProps } from 'react-native';
 import { BadgeProps } from '../badge';
 import { ImageProps } from '../image';
 export declare enum StatusModes {
@@ -14,7 +14,7 @@ export declare enum BadgePosition {
     BOTTOM_RIGHT = "BOTTOM_RIGHT",
     BOTTOM_LEFT = "BOTTOM_LEFT"
 }
-export declare type AvatarProps = {
+export declare type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> & {
     /**
      * Adds fade in animation when Avatar image loads
      */
@@ -162,7 +162,100 @@ declare function createStyles(props: AvatarProps): {
     };
 };
 export { Avatar };
-declare const _default: React.ComponentClass<AvatarProps & {
+declare const _default: React.ComponentClass<Pick<AccessibilityProps, "accessibilityLabel"> & {
+    /**
+     * Adds fade in animation when Avatar image loads
+     */
+    animate?: boolean | undefined;
+    /**
+     * Background color for Avatar
+     */
+    backgroundColor?: string | undefined;
+    /**
+     * Badge location on Avatar
+     */
+    badgePosition?: BadgePosition | undefined;
+    /**
+     * Badge props passed down to Badge component
+     */
+    badgeProps?: BadgeProps | undefined;
+    /**
+     * Additional spacing styles for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * The image source (external or assets)
+     */
+    source?: number | import("react-native").ImageURISource | import("react-native").ImageURISource[] | undefined;
+    /**
+     * Image props object
+     */
+    imageProps?: ImageProps | undefined;
+    /**
+     * Image style object used to pass additional style props
+     * by components which render image
+     */
+    imageStyle?: ImageStyle | undefined;
+    /**
+     * Listener-callback for when an image's (uri) loading
+     * starts (equiv. to Image.onLoadStart()).
+     */
+    onImageLoadStart?: (() => void) | undefined;
+    /**
+     * Listener-callback for when an image's (uri) loading
+     * either succeeds or fails (equiv. to Image.onLoadEnd()).
+     */
+    onImageLoadEnd?: (() => void) | undefined;
+    /**
+     * Listener-callback for when an image's (uri) loading
+     * fails (equiv. to Image.onError()).
+     */
+    onImageLoadError?: ((error: import("react-native").NativeSyntheticEvent<import("react-native").ImageErrorEventData>) => void) | undefined;
+    /**
+     * Label that can represent initials
+     */
+    label?: string | undefined;
+    /**
+     * The label color
+     */
+    labelColor?: string | undefined;
+    /**
+     * ribbon label to display on the avatar
+     */
+    ribbonLabel?: string | undefined;
+    /**
+     * ribbon custom style
+     */
+    ribbonStyle?: StyleProp<ViewStyle>;
+    /**
+     * ribbon label custom style
+     */
+    ribbonLabelStyle?: StyleProp<TextStyle>;
+    /**
+     * Custom ribbon
+     */
+    customRibbon?: JSX.Element | undefined;
+    /**
+     * Determine if to show online badge
+     */
+    isOnline?: boolean | undefined;
+    /**
+     * AWAY, ONLINE, OFFLINE or NONE mode (if set to a value other then 'NONE' will override isOnline prop)
+     */
+    status?: StatusModes | undefined;
+    /**
+     * Custom size for the Avatar
+     */
+    size: number;
+    /**
+     * Press handler
+     */
+    onPress?: ((props: any) => void) | undefined;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string | undefined;
+} & {
     useCustomTheme?: boolean | undefined;
 }, any> & typeof Avatar;
 export default _default;

generatedTypes/components/avatar/index.d.ts

@@ -1,5 +1,8 @@
 import { CarouselProps, CarouselState } from './types';
 export declare function getChildrenLength(props: CarouselProps): number;
-export declare function calcOffset(props: CarouselProps, state: Omit<CarouselState, 'initialOffset' | 'prevProps'>): number;
-export declare function calcPageIndex(offset: number, props: CarouselProps, pageWidth: number): number;
+export declare function calcOffset(props: CarouselProps, state: Omit<CarouselState, 'initialOffset' | 'prevProps'>): {
+    x: number;
+    y: number;
+};
+export declare function calcPageIndex(offset: number, props: CarouselProps, pageSize: number): number;
 export declare function isOutOfBounds(offset: number, props: CarouselProps, pageWidth: number): boolean;

generatedTypes/components/carousel/CarouselPresenter.d.ts

@@ -5,11 +5,11 @@ export { CarouselProps };
 declare type DefaultProps = Partial<CarouselProps>;
 /**
  * @description: Carousel for scrolling pages horizontally
- * @gif: https://media.giphy.com/media/l0HU7f8gjpRlMRhKw/giphy.gif, https://media.giphy.com/media/3oFzmcjX9OhpyckhcQ/giphy.gif
+ * @gif: https://user-images.githubusercontent.com/1780255/107120258-40b5bc80-6895-11eb-9596-8065d3a940ff.gif, https://user-images.githubusercontent.com/1780255/107120257-3eebf900-6895-11eb-9800-402e9e0dc692.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CarouselScreen.tsx
  * @extends: ScrollView
  * @extendsLink: https://facebook.github.io/react-native/docs/scrollview
- * @notes: This is screen width Component
+ * @notes: This is a screen width Component
  */
 declare class Carousel extends Component<CarouselProps, CarouselState> {
     static displayName: string;
@@ -24,6 +24,7 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
         pageWidth: number;
         initialOffset: {
             x: number;
+            y: number;
         };
         prevProps: CarouselProps;
     } | {
@@ -47,7 +48,7 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
     getSnapToOffsets: () => number[] | undefined;
     shouldUsePageWidth(): number | false | undefined;
     shouldEnablePagination(): boolean | undefined;
-    onContainerLayout: ({ nativeEvent: { layout: { width: containerWidth } } }: LayoutChangeEvent) => void;
+    onContainerLayout: ({ nativeEvent: { layout: { width: containerWidth, height: containerHeight } } }: LayoutChangeEvent) => void;
     shouldAllowAccessibilityLayout(): boolean | undefined;
     onContentSizeChange: () => void;
     onMomentumScrollEnd: () => void;