Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove CSS transition from CES modal when comments appear (https://github.com/woocommerce/woocommerce-admin/pull/5796)

This commit is contained in:
Matt Sherman 2020-12-03 11:03:10 -05:00 committed by GitHub
parent 71f718f875
commit 4801574730
2 changed files with 18 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
plugins/woocommerce-admin/packages/customer-effort-score/src/customer-feedback-modal/index.js
View File

@ -11,8 +11,6 @@ import {
TextareaControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import classnames from 'classnames';
/**
* Provides a modal requesting customer feedback.
@ -57,9 +55,6 @@ function CustomerFeedbackModal( { recordScoreCallback, label } ) {
const [ comments, setComments ] = useState();
const [ showNoScoreMessage, setShowNoScoreMessage ] = useState( false );
const [ isOpen, setOpen ] = useState( true );
const [ isCommentsTransitioning, setCommentsTransitioning ] = useState(
false
);
const closeModal = () => setOpen( false );
@ -78,23 +73,13 @@ function CustomerFeedbackModal( { recordScoreCallback, label } ) {
recordScoreCallback( score, comments );
};
const onCommentsTransitionStart = () => {
setCommentsTransitioning( true );
};
const onCommentsTransitionEnd = () => {
setCommentsTransitioning( false );
};
if ( ! isOpen ) {
return null;
}
return (
<Modal
className={ classnames( 'woocommerce-customer-effort-score', {
'woocommerce-customer-effort-score-comments-transitioning': isCommentsTransitioning,
} ) }
className="woocommerce-customer-effort-score"
title={ __( 'Please share your feedback', 'woocommerce-admin' ) }
onRequestClose={ closeModal }
shouldCloseOnClickOutside={ false }
@ -111,35 +96,23 @@ function CustomerFeedbackModal( { recordScoreCallback, label } ) {
/>
</div>
<TransitionGroup>
{ ( score === 1 || score === 2 ) && (
<CSSTransition
key={ 'woocommerce-customer-effort-score__comments' }
timeout={ 250 }
classNames="woocommerce-customer-effort-score__comments"
onEnter={ onCommentsTransitionStart }
onEntered={ onCommentsTransitionEnd }
onExit={ onCommentsTransitionStart }
onExited={ onCommentsTransitionEnd }
>
<div className="woocommerce-customer-effort-score__comments">
<TextareaControl
label={ __(
'Comments (Optional)',
'woocommerce-admin'
) }
help={ __(
'Your feedback will go to the WooCommerce development team',
'woocommerce-admin'
) }
value={ comments }
onChange={ ( value ) => setComments( value ) }
rows="5"
/>
</div>
</CSSTransition>
) }
</TransitionGroup>
{ ( score === 1 || score === 2 ) && (
<div className="woocommerce-customer-effort-score__comments">
<TextareaControl
label={ __(
'Comments (Optional)',
'woocommerce-admin'
) }
help={ __(
'Your feedback will go to the WooCommerce development team',
'woocommerce-admin'
) }
value={ comments }
onChange={ ( value ) => setComments( value ) }
rows="5"
/>
</div>
) }
{ showNoScoreMessage && (
<div

32
plugins/woocommerce-admin/packages/customer-effort-score/src/style.scss
View File

@ -1,7 +1,3 @@
.components-modal__frame.woocommerce-customer-effort-score-comments-transitioning {
overflow: hidden;
}
.woocommerce-customer-effort-score__selection {
margin: 1em 0;
@ -95,34 +91,6 @@
}
}
.woocommerce-customer-effort-score__comments-enter {
opacity: 0;
max-height: 0;
transform: translateY(50%);
}
.woocommerce-customer-effort-score__comments-enter-active {
opacity: 1;
max-height: 100vh;
transform: translateY(0%);
transition: opacity 250ms ease-out, transform 250ms ease-out,
max-height 250ms ease-out;
}
.woocommerce-customer-effort-score__comments-exit {
opacity: 1;
max-height: 100vh;
transform: translateY(0%);
}
.woocommerce-customer-effort-score__comments-exit-active {
opacity: 0;
max-height: 0;
transform: translateY(50%);
transition: opacity 250ms ease-out, transform 250ms ease-out,
max-height 250ms ease-out;
}
.woocommerce-customer-effort-score__buttons {
text-align: right;