Feat/new toast (#1696)

* add assets for new toast component

* New toast implementation

* New toast example screen

* New toast genertate types

* Add toast api file

* Remove duplicate condition check

* PR Review fix for onDismiss

* Remove redundant View and throttleTime prop

* Pass only relevant props to useToastAnimation

* Use our Icon component instead of Image

* rename setDismissTimer to setTimer

* Add proper prop for triggering haptic feedback

* minore code review refactor

* Remove loader colors const

* Update toast generated types

* Refactor useToastPreset hook and how we use it

* Use PanView only for the actual toast and not its attachment

* Fix Constants import

* Remove redundant const

* rename ToastPresets to be plural and export them for users

* Fix toast animation with an attatchment

* Fix toast toggle delay due to async state change

Author: ethanshar

demo/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'},

demo/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
+  }
+});

demo/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));

generatedTypes/src/incubator/index.d.ts

@@ -1,6 +1,7 @@
 export { default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps } from './ChipsInput';
 export { default as ExpandableOverlay } from './expandableOverlay';
 export { default as TextField, TextFieldProps, FieldContextType } from './TextField';
+export { default as Toast, ToastProps, ToastPresets } from './toast';
 export { default as TouchableOpacity, TouchableOpacityProps } from './TouchableOpacity';
 export { default as WheelPicker, WheelPickerProps, WheelPickerAlign, WheelPickerItemProps } from './WheelPicker';
 export { default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold } from './panView';

generatedTypes/src/incubator/toast/helpers/useToastAnimation.d.ts

@@ -0,0 +1,22 @@
+import { Animated } from 'react-native';
+import { ToastProps } from '../types';
+declare type UseToastAnimationProps = Pick<ToastProps, 'visible' | 'position' | 'onAnimationEnd' | 'enableHapticFeedback'> & {
+    toastHeight?: number;
+    playAccessibilityFeatures: () => void;
+    setTimer: () => void;
+};
+declare const _default: ({ visible, position, toastHeight, onAnimationEnd, enableHapticFeedback, setTimer, playAccessibilityFeatures }: UseToastAnimationProps) => {
+    isAnimating: boolean | undefined;
+    toggleToast: (show?: boolean, { delay }?: {
+        delay?: number | undefined;
+    }) => void;
+    opacityStyle: {
+        opacity: Animated.AnimatedInterpolation;
+    };
+    translateStyle: {
+        transform: {
+            translateY: Animated.AnimatedInterpolation;
+        }[];
+    };
+};
+export default _default;

generatedTypes/src/incubator/toast/helpers/useToastPresets.d.ts

@@ -0,0 +1,8 @@
+import 'react';
+import { ToastProps } from '../types';
+declare const _default: ({ preset, icon, iconColor, message }: Pick<ToastProps, 'preset' | 'icon' | 'message' | 'iconColor'>) => {
+    icon: any;
+    iconColor: any;
+    accessibilityMessage: string;
+};
+export default _default;

generatedTypes/src/incubator/toast/helpers/useToastTimer.d.ts

@@ -0,0 +1,6 @@
+import { ToastProps } from '../types';
+declare const _default: ({ autoDismiss, onDismiss }: Pick<ToastProps, 'autoDismiss' | 'onDismiss'>) => {
+    clearTimer: () => void;
+    setTimer: () => void;
+};
+export default _default;

generatedTypes/src/incubator/toast/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ToastProps, ToastPresets } from './types';
+export { ToastProps, ToastPresets };
+declare const _default: React.ComponentClass<ToastProps & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/src/incubator/toast/types.d.ts

@@ -0,0 +1,101 @@
+/// <reference types="react" />
+import { ImageSourcePropType, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { ButtonProps } from '../../components/button';
+export declare enum ToastPresets {
+    GENERAL = "general",
+    SUCCESS = "success",
+    FAILURE = "failure",
+    OFFLINE = "offline"
+}
+export interface ToastProps {
+    /**
+     * Whether to show or hide the toast
+     */
+    visible?: boolean;
+    /**
+     * The position of the toast. 'top' or 'bottom'.
+     */
+    position?: 'top' | 'bottom';
+    /**
+     * Toast message
+     */
+    message?: string;
+    /**
+     * Toast message style
+     */
+    messageStyle?: StyleProp<TextStyle>;
+    /**
+     * should message be centered in the toast
+     */
+    centerMessage?: boolean;
+    /**
+     * custom zIndex for toast
+     */
+    zIndex?: number;
+    /**
+     * Custom elevation for Android
+     */
+    elevation?: number;
+    /**
+     * a single action for the user (loader will override this)
+     */
+    action?: ButtonProps;
+    /**
+     * should show a loader
+     */
+    showLoader?: boolean;
+    /**
+     * callback for dismiss action
+     */
+    onDismiss?: () => void;
+    /**
+     * whether to make the toast swipeable
+     * require to pass onDismiss method to control visibility
+     */
+    swipeable?: boolean;
+    /**
+     * number of milliseconds to automatically invoke the onDismiss callback
+     */
+    autoDismiss?: number;
+    /**
+     * callback for end of component animation
+     */
+    onAnimationEnd?: (visible?: boolean) => void;
+    /**
+     * render a custom view that will appear permanently above or below a Toast,
+     * depends on the Toast's position, and animate with it when the Toast is made visible or dismissed
+     */
+    renderAttachment?: () => JSX.Element | undefined;
+    /**
+     * The preset look for GENERAL, SUCCESS and FAILURE (Toast.presets.xxx)
+     */
+    preset?: ToastPresets;
+    /**
+     * Whether to trigger an haptic feedback once the toast is shown (requires react-native-haptic-feedback dependency)
+     */
+    enableHapticFeedback?: boolean;
+    /**
+     * Test Id for component
+     */
+    testID?: string;
+    /**
+     * Toast style
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Toast container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * a left icon
+     */
+    icon?: ImageSourcePropType;
+    /**
+     * icon tint color
+     */
+    iconColor?: string;
+    /**
+     * The background color of the toast
+     */
+    backgroundColor?: string;
+}

src/incubator/index.ts

@@ -2,6 +2,7 @@ export {default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInp
 export {default as ExpandableOverlay} from './expandableOverlay';
 // @ts-ignore
 export {default as TextField, TextFieldProps, FieldContextType} from './TextField';
+export {default as Toast, ToastProps, ToastPresets} from './toast';
 export {default as TouchableOpacity, TouchableOpacityProps} from './TouchableOpacity';
 export {default as WheelPicker, WheelPickerProps, WheelPickerAlign, WheelPickerItemProps} from './WheelPicker';
 export {default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold} from './panView';