unicorn-demo-app 6.5.4 → 6.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "6.5.4",
+  "version": "6.6.0",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",

package/src/screens/componentScreens/{DateTimePickerScreen.js → DateTimePickerScreen.tsx}

@@ -3,15 +3,14 @@ import {ScrollView} from 'react-native';
 import {DateTimePicker, Text, TouchableOpacity, Colors} from 'react-native-ui-lib'; // eslint-disable-line
 
 export default class DateTimePickerScreen extends Component {
-
-  getCustomInputValue = value => {
+  getCustomInputValue = (value: string) => {
     if (!value) {
       return 'Default';
     }
-    return value.includes(new Date().getFullYear() + 1) ? 'Next Year' : value;
+    return value.includes((new Date().getFullYear() + 1).toString()) ? 'Next Year' : value;
   };
 
-  renderCustomInput = (props, toggle) => {
+  renderCustomInput = (props: {value: string}, toggle: (shouldToggle: boolean) => void) => {
     const {value} = props;
     return (
       <TouchableOpacity
@@ -23,7 +22,9 @@ export default class DateTimePickerScreen extends Component {
         }}
       >
         <Text>Valid from</Text>
-        <Text absR color={Colors.primary} text80BO>{this.getCustomInputValue(value)}</Text>
+        <Text absR color={Colors.primary} text80BO>
+          {this.getCustomInputValue(value)}
+        </Text>
       </TouchableOpacity>
     );
   };
@@ -33,6 +34,7 @@ export default class DateTimePickerScreen extends Component {
       <ScrollView style={{padding: 14}}>
         <Text text40>Date Time Picker</Text>
         <DateTimePicker
+          // @ts-expect-error
           containerStyle={{marginVertical: 20}}
           title={'Date'}
           placeholder={'Select a date'}

package/src/screens/componentScreens/ImageScreen.tsx

@@ -9,6 +9,8 @@ const BROKEN_URL = 'file:///Desktop/website/img/cupcake.jpg';
 const DEFAULT_SIZE = 100;
 
 const file = Assets.svgs.demo.logo;
+const uri = {uri: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'};
+const uriWithCss = {uri: 'http://thenewcode.com/assets/svg/accessibility.svg'};
 const xml = `
   <svg width="32" height="32" viewBox="0 0 32 32">
     <path
@@ -38,6 +40,13 @@ enum SizeType {
   Percentage = '50%'
 }
 
+enum SvgType {
+  File = 'file',
+  Uri = 'uri',
+  UriWithCss = 'use_with_css',
+  Xml = 'xml'
+}
+
 interface State {
   cover: boolean;
   showOverlayContent: boolean;
@@ -46,7 +55,7 @@ interface State {
   margin: number;
   showErrorImage: boolean;
   showSvg: boolean;
-  isFile: boolean;
+  svgType: SvgType;
   sizeType: SizeType;
 }
 
@@ -59,10 +68,25 @@ class ImageScreen extends Component<{}, State> {
     margin: 0,
     showErrorImage: false,
     showSvg: false,
-    isFile: false,
+    svgType: SvgType.File,
     sizeType: SizeType.None
   };
 
+  getSvgSource() {
+    const {svgType} = this.state;
+    switch (svgType) {
+      case SvgType.File:
+        return file;
+      case SvgType.Uri:
+        return uri;
+      case SvgType.UriWithCss:
+        return uriWithCss;
+      case SvgType.Xml:
+      default:
+        return xml;
+    }
+  }
+
   renderOverlayContent() {
     const {cover, overlayType, showOverlayContent} = this.state;
     if (showOverlayContent) {
@@ -105,14 +129,15 @@ class ImageScreen extends Component<{}, State> {
   }
 
   renderSvgImage() {
-    const {isFile, sizeType} = this.state;
+    const {sizeType} = this.state;
     const size: any = Number(sizeType) || sizeType;
+    const source = this.getSvgSource();
     return (
       <>
         {size ? (
-          <Image source={isFile ? file : xml} width={size} height={size}/>
+          <Image source={source} width={size} height={size}/>
         ) : (
-          <Image source={isFile ? file : xml}/>
+          <Image source={source}/>
         )}
       </>
     );
@@ -134,10 +159,9 @@ class ImageScreen extends Component<{}, State> {
   }
 
   renderSvgOptions() {
-    const {isFile} = this.state;
     return (
       <>
-        {renderBooleanOption.call(this, isFile ? 'Load from file' : 'Use xml const', 'isFile')}
+        {renderRadioGroup.call(this, 'SVG Type', 'svgType', SvgType, {isRow: true})}
         {renderRadioGroup.call(this, 'Size Type', 'sizeType', SizeType, {isRow: true})}
       </>
     );

package/src/screens/incubatorScreens/IncubatorDialogScreen.tsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, ModalProps} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
-import {View, Text, Card, Button, Incubator, Colors, BorderRadiuses} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, Card, Button, Incubator, Colors, BorderRadiuses, Constants} from 'react-native-ui-lib'; //eslint-disable-line
 
 interface Item {
   value: string;
@@ -33,10 +33,11 @@ const colors: Item[] = [
 
 export default class IncubatorDialogScreen extends Component {
   state = {visible: false};
+  modalProps: ModalProps = {supportedOrientations: ['portrait', 'landscape']};
 
   renderVerticalItem = ({item}: {item: Item}) => {
     return (
-      <Text text50 margin-20 color={item.value}>
+      <Text text50 margin-20 color={item.value} onPress={this.closeDialog}>
         {item.label}
       </Text>
     );
@@ -54,6 +55,10 @@ export default class IncubatorDialogScreen extends Component {
     this.setState({visible: false});
   };
 
+  onDismiss = () => {
+    this.setState({visible: false});
+  };
+
   render() {
     const {visible} = this.state;
 
@@ -65,7 +70,14 @@ export default class IncubatorDialogScreen extends Component {
         <View flex center>
           <Button marginV-20 label="Open Dialog" onPress={this.openDialog}/>
         </View>
-        <Incubator.Dialog visible={visible} onDismiss={this.closeDialog} bottom containerStyle={styles.dialogContainer}>
+        <Incubator.Dialog
+          useSafeArea
+          visible={visible}
+          onDismiss={this.onDismiss}
+          bottom
+          centerH
+          modalProps={this.modalProps}
+        >
           <View style={styles.dialog}>
             <Text text60 margin-s2>
               Title (swipe here)
@@ -86,14 +98,11 @@ export default class IncubatorDialogScreen extends Component {
 }
 
 const styles = StyleSheet.create({
-  dialogContainer: {
-    bottom: 20,
-    alignSelf: 'center'
-  },
   dialog: {
+    marginBottom: 20,
     backgroundColor: Colors.white,
-    width: 200,
-    height: 300,
+    maxHeight: Constants.screenHeight * 0.8,
+    width: 300,
     borderRadius: BorderRadiuses.br20
   },
   verticalScroll: {