Merge branch 'master' into release

Author: ethanshar

demo/src/assets/images/placeholderMissingImage.png

@@ -2,13 +2,18 @@ import {Assets, Typography, Spacings} from 'react-native-ui-lib'; // eslint-disa
 
 Assets.loadAssetsGroup('icons.demo', {
   add: require('./assets/icons/add.png'),
+  camera: require('./assets/icons/cameraSelected.png'),
   close: require('./assets/icons/close.png'),
   dashboard: require('./assets/icons/dashboard.png'),
   image: require('./assets/icons/image.png'),
   refresh: require('./assets/icons/refresh.png'),
   search: require('./assets/icons/search.png')
 });
 
+Assets.loadAssetsGroup('images.demo', {
+  brokenImage: require('./assets/images/placeholderMissingImage.png')
+});
+
 Typography.loadTypographies({
   h1: {...Typography.text40},
   h2: {...Typography.text50},

demo/src/configurations.js

@@ -34,9 +34,15 @@ 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;
       },
+      get ChipScreen() {
+        return require('./screens/componentScreens/ChipScreen').default;
+      },
       get ConnectionStatusBarScreen() {
         return require('./screens/componentScreens/ConnectionStatusBarScreen').default;
       },
@@ -203,6 +209,10 @@ module.exports = {
       get ProgressBarScreen() {
         return require('./screens/componentScreens/ProgressBarScreen').default;
       },
+      // Incubator 
+      get IncubatorTextFieldScreen() {
+        return require('./screens/incubatorScreens/IncubatorTextFieldScreen').default;
+      },
       // realExamples
       get AppleMusic() {
         return require('./screens/realExamples/AppleMusic').default;

demo/src/index.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/MenuStructure.js

@@ -8,15 +8,11 @@ const star = require('../../assets/icons/star.png');
 const bell = require('../../assets/icons/bell.png');
 
 export default class BadgesScreen extends Component {
-  constructor(props) {
-    super(props);
+  state = {
+    value: 42
+  };
 
-    this.state = {
-      value: 42
-    };
-  }
-
-  changeLabelValue(value) {
+  changeLabelValue(value: number) {
     const currValue = this.state.value;
     const newValue = currValue + value;
     if (newValue >= 1) {
@@ -103,7 +99,6 @@ export default class BadgesScreen extends Component {
         <View row>
           <View
             center
-            column
             style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}
           >
             <Text text80 row>
@@ -115,7 +110,7 @@ export default class BadgesScreen extends Component {
             </Text>
           </View>
 
-          <View center column style={{justifyContent: 'space-around', width: 40, height: 140}}>
+          <View center style={{justifyContent: 'space-around', width: 40, height: 140}}>
             <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={'pimpleSmall'}/>
             <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={'pimpleBig'}/>
             <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={'pimpleHuge'}/>

demo/src/screens/componentScreens/BadgesScreen.tsx

@@ -0,0 +1,136 @@
+import {Carousel, Constants, Text, View, Colors} from 'react-native-ui-lib';
+import React, {Component} from 'react';
+import {StyleSheet, Animated, TextStyle} from 'react-native';
+import _ from 'lodash';
+import {renderBooleanOption, renderSliderOption} from '../ExampleScreenPresenter';
+
+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<{}, State> {
+  carousel = React.createRef<typeof Carousel>();
+  animatedScrollOffset = new Animated.ValueXY();
+
+  constructor(props: {}) {
+    super(props);
+
+    this.state = {
+      numberOfPagesShown: 5,
+      autoplay: false
+    };
+  }
+
+  renderAnimatedCounter = () => {
+    const {numberOfPagesShown} = this.state;
+    const animatedStyles = _.times(numberOfPagesShown, page => {
+      return {
+        opacity: this.animatedScrollOffset.y.interpolate({
+          inputRange: [pageHeight * page - 50, pageHeight * page, pageHeight * page + 50],
+          outputRange: [0, 1, 0]
+        }),
+        transform: [
+          {
+            translateX: this.animatedScrollOffset.y.interpolate({
+              inputRange: [pageHeight * page - 50, pageHeight * page, pageHeight * page + 50],
+              outputRange: [-50, 0, 50]
+            })
+          }
+        ]
+      };
+    });
+    return (
+      <View absT>
+        {_.times(numberOfPagesShown, page => (
+          <Text key={page} h1 animated style={[styles.animatedPageCounter, animatedStyles[page]] as TextStyle}>
+            {page}
+          </Text>
+        ))}
+      </View>
+    );
+  };
+
+  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>
+        <View>
+          <Carousel
+            key={'carousel'}
+            ref={this.carousel}
+            animatedScrollOffset={this.animatedScrollOffset}
+            scrollEventThrottle={16}
+            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>
+          {this.renderAnimatedCounter()}
+        </View>
+      </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'
+  },
+  animatedPageCounter: {
+    position: 'absolute',
+    top: 20,
+    left: 20
+  }
+});
+
+export default CarouselVerticalScreen;