Skip to content

Commit

Permalink
[RNMobile] - Tooltip for template selection buttons (#21974)
Browse files Browse the repository at this point in the history
* RNMobile - Starter Page Templates Picker - Tooltip
  • Loading branch information
Gerardo Pacheco authored May 26, 2020
1 parent a917162 commit a9ac328
Show file tree
Hide file tree
Showing 3 changed files with 170 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,20 @@
import { useState, useEffect, useRef } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import Tooltip from './tooltip';

/**
* External dependencies
*/
import { logUserEvent, userEvents } from 'react-native-gutenberg-bridge';
import {
logUserEvent,
userEvents,
requestStarterPageTemplatesTooltipShown,
setStarterPageTemplatesTooltipShown,
} from 'react-native-gutenberg-bridge';
import { Animated, Dimensions, Keyboard } from 'react-native';

/**
Expand Down Expand Up @@ -36,13 +46,16 @@ const __experimentalPageTemplatePicker = ( {

const [ templatePreview, setTemplatePreview ] = useState();
const [ pickerVisible, setPickerVisible ] = useState( visible );
const [ tooltipVisible, setTooltipVisible ] = useState( false );
const contentOpacity = useRef( new Animated.Value( 0 ) ).current;

useEffect( () => {
if ( shouldShowPicker() && visible && ! pickerVisible ) {
setPickerVisible( true );
}

startPickerAnimation( visible );
shouldShowTooltip();

Keyboard.addListener( 'keyboardDidShow', onKeyboardDidShow );
Keyboard.addListener( 'keyboardDidHide', onKeyboardDidHide );
Expand All @@ -53,6 +66,12 @@ const __experimentalPageTemplatePicker = ( {
};
}, [ visible ] );

useEffect( () => {
if ( tooltipVisible && templatePreview ) {
setTooltipVisible( false );
}
}, [ templatePreview ] );

const onKeyboardDidShow = () => {
if ( visible ) {
startPickerAnimation( shouldShowPicker() );
Expand All @@ -73,6 +92,15 @@ const __experimentalPageTemplatePicker = ( {
return PICKER_HEIGHT_OFFSET < windowHeight / 3;
};

const shouldShowTooltip = () => {
requestStarterPageTemplatesTooltipShown( ( tooltipShown ) => {
if ( ! tooltipShown ) {
setTooltipVisible( true );
setStarterPageTemplatesTooltipShown( true );
}
} );
};

const onApply = () => {
editPost( {
title: title || templatePreview.name,
Expand All @@ -84,6 +112,10 @@ const __experimentalPageTemplatePicker = ( {
setTemplatePreview( undefined );
};

const onTooltipHidden = () => {
setTooltipVisible( false );
};

const startPickerAnimation = ( isVisible ) => {
Animated.timing( contentOpacity, {
toValue: isVisible ? 1 : 0,
Expand All @@ -102,6 +134,9 @@ const __experimentalPageTemplatePicker = ( {

return (
<Animated.View style={ [ { opacity: contentOpacity } ] }>
{ tooltipVisible && (
<Tooltip onTooltipHidden={ onTooltipHidden } />
) }
<Container>
{ templates.map( ( template ) => (
<Button
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
/**
* External dependencies
*/
import {
Animated,
Easing,
Text,
TouchableWithoutFeedback,
View,
Dimensions,
} from 'react-native';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useEffect, useRef, useState } from '@wordpress/element';

/**
* Internal dependencies
*/
import styles from './style.scss';

const Tooltip = ( { onTooltipHidden } ) => {
const [ visible, setVisible ] = useState( true );
const animationValue = useRef( new Animated.Value( 0 ) ).current;

useEffect( () => {
startAnimation();
}, [ visible ] );

const onHide = () => {
setVisible( false );
};

const startAnimation = () => {
Animated.timing( animationValue, {
toValue: visible ? 1 : 0,
duration: visible ? 300 : 150,
useNativeDriver: true,
delay: visible ? 500 : 0,
easing: Easing.out( Easing.quad ),
} ).start( () => {
if ( ! visible && onTooltipHidden ) {
onTooltipHidden();
}
} );
};

const stylesOverlay = [
styles.overlay,
{ height: Dimensions.get( 'window' ).height },
];

return (
<>
<TouchableWithoutFeedback onPress={ onHide }>
<View style={ stylesOverlay } />
</TouchableWithoutFeedback>
<Animated.View
style={ {
opacity: animationValue,
transform: [
{
translateY: animationValue.interpolate( {
inputRange: [ 0, 1 ],
outputRange: [ visible ? 4 : -8, -8 ],
} ),
},
],
} }
>
<TouchableWithoutFeedback onPress={ onHide }>
<View
style={ [
styles.tooltip,
{
shadowColor: styles.tooltipShadow.color,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 2,
elevation: 2,
},
] }
>
<Text style={ styles.text }>
{ __( 'Try a starter layout' ) }
</Text>
<View style={ styles.arrow } />
</View>
</TouchableWithoutFeedback>
</Animated.View>
</>
);
};

export default Tooltip;
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
$tooltipColor: #121212;

.overlay {
width: 100%;
}

.tooltip {
background-color: $tooltipColor;
border-radius: 4px;
left: 12px;
padding: 12px 16px;
position: absolute;
top: -36px;
}

.tooltipShadow {
color: $black;
}

.text {
color: $white;
}

.arrow {
z-index: 1;
position: absolute;
bottom: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
left: 16px;
border-color: $tooltipColor transparent transparent transparent;
}

0 comments on commit a9ac328

Please sign in to comment.