unicorn-demo-app 6.6.2 → 6.7.0

package/package.json

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

package/src/screens/MenuStructure.js

@@ -157,6 +157,7 @@ export const navigationData = {
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: '(New) Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
       {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
+      {title: '(New) Toast', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'},
       {title: 'ExpandableOverlay', tags: 'text field expandable input picker', screen: 'unicorn.components.IncubatorExpandableOverlayScreen'},
       {title: 'WheelPicker (Incubator)', tags: 'wheel picker spinner experimental', screen: 'unicorn.incubator.WheelPickerScreen'},
       {title: 'Pan View', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'},

package/src/screens/componentScreens/RadioButtonScreen.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {TouchableOpacity, ScrollView, Platform, StyleSheet} from 'react-native';
+import {TouchableOpacity, ScrollView} from 'react-native';
 import {Assets, RadioButton, Colors, Shadows, RadioGroup, View, Text} from 'react-native-ui-lib'; //eslint-disable-line
 const starIcon = require('../../assets/icons/star.png');
 
@@ -39,7 +39,14 @@ export default class RadioButtonScreen extends Component {
   renderRadioButtonWithImage(value, icon, style) {
     return (
       <View row centerV marginR-15>
-        <RadioButton value={value} size={15} color={Colors.green30} borderRadius={0} iconSource={icon} iconStyle={style}/>
+        <RadioButton
+          value={value}
+          size={15}
+          color={Colors.green30}
+          borderRadius={0}
+          iconSource={icon}
+          iconStyle={style}
+        />
       </View>
     );
   }
@@ -55,8 +62,12 @@ export default class RadioButtonScreen extends Component {
   render() {
     return (
       <View flex useSafeArea bg-grey80>
-        <View flex>
-          <ScrollView style={{padding: 20}}>
+        <ScrollView>
+          <View padding-page>
+            <Text h1 marginB-s5>
+              Radio Buttons
+            </Text>
+
             <RadioGroup initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
               <Text marginB-20 text60 grey10>
                 Select a color{'\n'}
@@ -69,7 +80,11 @@ export default class RadioButtonScreen extends Component {
               <Text marginT-10>You chose: {this.state.color ? this.state.color : 'Default'}</Text>
             </RadioGroup>
 
-            <RadioGroup marginT-30 initialValue={this.state.textSide} onValueChange={value => this.setState({textSide: value})}>
+            <RadioGroup
+              marginT-30
+              initialValue={this.state.textSide}
+              onValueChange={value => this.setState({textSide: value})}
+            >
               <Text marginB-20 text60 grey10>
                 Alignments
               </Text>
@@ -129,28 +144,9 @@ export default class RadioButtonScreen extends Component {
             </View>
 
             <View style={{height: 30}}/>
-          </ScrollView>
-
-          <View paddingH-20 paddingV-10 style={[styles.shadow, {backgroundColor: Colors.grey80}]}>
-            <Text text40 grey10>
-              Radio Buttons
-            </Text>
           </View>
-        </View>
+        </ScrollView>
       </View>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  shadow: {
-    ...Platform.select({
-      ios: {
-        ...Shadows.grey20.bottom
-      },
-      android: {
-        elevation: 3
-      }
-    })
-  }
-});

package/src/screens/incubatorScreens/IncubatorDialogScreen.tsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {StyleSheet, ModalProps} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
-import {View, Text, Card, Button, Incubator, Colors, BorderRadiuses, Constants} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, Card, Button, Incubator, Colors, Spacings} from 'react-native-ui-lib';
 
 interface Item {
   value: string;
@@ -34,10 +34,11 @@ const colors: Item[] = [
 export default class IncubatorDialogScreen extends Component {
   state = {visible: false};
   modalProps: ModalProps = {supportedOrientations: ['portrait', 'landscape']};
+  headerProps: Incubator.DialogHeaderProps = {text: {title: 'Title (swipe here)'}};
 
   renderVerticalItem = ({item}: {item: Item}) => {
     return (
-      <Text text50 margin-20 color={item.value} onPress={this.closeDialog}>
+      <Text text50 marginH-s5 marginV-s2 color={item.value} onPress={this.closeDialog}>
         {item.label}
       </Text>
     );
@@ -63,12 +64,12 @@ export default class IncubatorDialogScreen extends Component {
     const {visible} = this.state;
 
     return (
-      <View bg-dark80 flex padding-20>
+      <View bg-grey80 flex padding-20>
         <Card height={100} center padding-20>
           <Text text50>IncubatorDialogScreen</Text>
         </Card>
         <View flex center>
-          <Button marginV-20 label="Open Dialog" onPress={this.openDialog}/>
+          <Button marginV-s5 label="Open Dialog" onPress={this.openDialog}/>
         </View>
         <Incubator.Dialog
           useSafeArea
@@ -77,20 +78,15 @@ export default class IncubatorDialogScreen extends Component {
           bottom
           centerH
           modalProps={this.modalProps}
+          headerProps={this.headerProps}
         >
-          <View style={styles.dialog}>
-            <Text text60 margin-s2>
-              Title (swipe here)
-            </Text>
-            <View height={1} bg-grey40/>
-            <FlatList
-              showsVerticalScrollIndicator={false}
-              style={styles.verticalScroll}
-              data={colors}
-              renderItem={this.renderVerticalItem}
-              keyExtractor={this.keyExtractor}
-            />
-          </View>
+          <FlatList
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.verticalScroll}
+            data={colors}
+            renderItem={this.renderVerticalItem}
+            keyExtractor={this.keyExtractor}
+          />
         </Incubator.Dialog>
       </View>
     );
@@ -98,14 +94,7 @@ export default class IncubatorDialogScreen extends Component {
 }
 
 const styles = StyleSheet.create({
-  dialog: {
-    marginBottom: 20,
-    backgroundColor: Colors.white,
-    maxHeight: Constants.screenHeight * 0.8,
-    width: 300,
-    borderRadius: BorderRadiuses.br20
-  },
   verticalScroll: {
-    marginTop: 20
+    paddingVertical: Spacings.s2
   }
 });

package/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -228,6 +228,11 @@ export default class TextFieldScreen extends Component {
             placeholder="Enter text..."
             multiline
             showCharCounter
+            bottomAccessory={
+              <Text text100>
+                {Assets.emojis.grapes} {Assets.emojis.melon} {Assets.emojis.banana}
+              </Text>
+            }
             charCounterStyle={{color: Colors.blue30}}
             maxLength={20}
             fieldStyle={styles.withFrame}

package/src/screens/incubatorScreens/IncubatorToastScreen.tsx

@@ -0,0 +1,190 @@
+import React, {Component} from 'react';
+import {ScrollView, StyleSheet} from 'react-native';
+import {Assets, Colors, View, Button, Text, Incubator} from 'react-native-ui-lib';
+import {renderMultipleSegmentOptions, renderBooleanOption, renderRadioGroup} from '../ExampleScreenPresenter';
+
+const {Toast} = Incubator;
+
+const TOAST_ACTIONS = {
+  label: {label: 'Undo', onPress: () => console.warn('undo')},
+  icon: {iconSource: Assets.icons.demo.plus, onPress: () => console.warn('add')}
+};
+
+const TOAST_MESSAGES = {
+  general: 'La formule Pass VIP illimité 5 mois est masquée',
+  success: 'The action completed successfully.',
+  failure: 'The action could not be completed.',
+  offline: 'Check Your Internet Connection'
+};
+
+export default class ToastsScreen extends Component {
+  showToast = false; // keep this state in class instance for immediate response
+  state = {
+    visible: false,
+    toastPosition: 'bottom' as Incubator.ToastProps['position'],
+    isCustomContent: false,
+    showLoader: false,
+    selectedAction: '',
+    hasAttachment: false,
+    selectedPreset: '' as Incubator.ToastProps['preset'],
+    isSwipeable: true
+  };
+
+  toggleVisibility = () => {
+    // Im using this for storing toast visible since setState is async and takes time to response
+    this.showToast = !this.showToast; 
+    this.setState({
+      visible: this.showToast
+    });
+  };
+
+  renderCustomContent = () => {
+    return (
+      <View flex padding-10 bg-white>
+        <Text text60>This is a custom content</Text>
+        <Text>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry
+          standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
+          make a type specimen book.
+        </Text>
+      </View>
+    );
+  };
+
+  renderAboveToast = () => {
+    return (
+      <View flex bottom right paddingB-50 paddingR-20 pointerEvents={'box-none'}>
+        <Button iconSource={Assets.icons.demo.dashboard} color={Colors.white} style={{height: 50, width: 50}}/>
+      </View>
+    );
+  };
+
+  renderBelowToast = () => {
+    return <Text>Attachment below toast</Text>;
+  };
+
+  renderAttachment = () => {
+    const {toastPosition, hasAttachment} = this.state;
+    if (hasAttachment) {
+      if (toastPosition === 'bottom') {
+        return this.renderAboveToast();
+      } else {
+        return this.renderBelowToast();
+      }
+    }
+  };
+
+  getAction = () => {
+    const {selectedAction} = this.state;
+    return TOAST_ACTIONS[selectedAction];
+  };
+
+  getMessage = () => {
+    const {selectedPreset} = this.state;
+
+    return TOAST_MESSAGES[selectedPreset] || TOAST_MESSAGES.general;
+  };
+
+  renderToast = () => {
+    const {visible, toastPosition, showLoader, isCustomContent, hasAttachment, selectedPreset, isSwipeable} =
+      this.state;
+    const action = this.getAction();
+
+    return (
+      <Toast
+        key={`${toastPosition}-${isCustomContent}-${hasAttachment}`}
+        visible={visible}
+        position={toastPosition}
+        message={this.getMessage()}
+        showLoader={showLoader}
+        renderAttachment={this.renderAttachment}
+        action={action}
+        preset={selectedPreset}
+        swipeable={isSwipeable}
+        onDismiss={this.toggleVisibility}
+        autoDismiss={3500}
+        // backgroundColor={Colors.green70}
+        // icon={Assets.icons.demo.add}
+        // iconColor={Colors.green20}
+        // style={{borderWidth: 1, borderColor: Colors.grey30}}
+        // messageStyle={Typography.text80BO}
+      >
+        {isCustomContent ? this.renderCustomContent() : undefined}
+      </Toast>
+    );
+  };
+
+  renderToggleButton = () => {
+    return (
+      <View centerH marginT-s5>
+        <Button
+          testID={`uilib.showToast`}
+          marginT-10
+          marginB-10
+          label={'Toggle toast'}
+          onPress={this.toggleVisibility}
+        />
+      </View>
+    );
+  };
+
+  render() {
+    return (
+      <View flex padding-page>
+        <Text h1 marginB-s4>
+          Toast
+        </Text>
+
+        <View flex style={styles.scrollViewContainer}>
+          <ScrollView contentContainerStyle={styles.scrollView}>
+            {renderMultipleSegmentOptions.call(this, 'Toast Position', 'toastPosition', [
+              {label: 'Bottom', value: 'bottom'},
+              {label: 'Top', value: 'top'}
+            ])}
+
+            {renderBooleanOption.call(this, 'Show Loader', 'showLoader')}
+            {renderBooleanOption.call(this, 'Use custom content', 'isCustomContent')}
+            {renderBooleanOption.call(this, 'With an attachment', 'hasAttachment')}
+            {renderBooleanOption.call(this, 'Swipeable', 'isSwipeable')}
+
+            {renderRadioGroup.call(this,
+              'Action',
+              'selectedAction',
+              {None: '', Label: 'label', Icon: 'icon'},
+              {isRow: true})}
+
+            <Text h3 marginV-s2>
+              Presets
+            </Text>
+
+            {renderMultipleSegmentOptions.call(this, '', 'selectedPreset', [
+              {label: 'None', value: ''},
+              {label: 'General', value: 'general'},
+              {label: 'Success', value: 'success'},
+              {label: 'Failure', value: 'failure'},
+              {label: 'Offline', value: 'offline'}
+            ])}
+
+            {this.renderToggleButton()}
+          </ScrollView>
+        </View>
+        {this.renderToast()}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  scrollView: {
+    paddingBottom: 80
+  },
+  color: {
+    width: 30,
+    height: 30,
+    borderRadius: 15
+  },
+  selected: {
+    borderWidth: 2,
+    borderColor: Colors.grey10
+  }
+});

package/src/screens/incubatorScreens/index.js

@@ -7,6 +7,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.incubator.IncubatorDialogScreen', () => require('./IncubatorDialogScreen').default);
   registrar('unicorn.components.IncubatorExpandableOverlayScreen', () => require('./IncubatorExpandableOverlayScreen').default);
   registrar('unicorn.components.IncubatorTextFieldScreen', () => require('./IncubatorTextFieldScreen').default);
+  registrar('unicorn.components.IncubatorToastScreen', () => require('./IncubatorToastScreen').default);
   registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);
   registrar('unicorn.incubator.TransitionViewScreen', () => require('./TransitionViewScreen').default);
   registrar('unicorn.incubator.WheelPickerScreen', () => gestureHandlerRootHOC(require('./WheelPickerScreen').default));