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

Added animation to Inbox note deletion (https://github.com/woocommerce/woocommerce-admin/pull/5263) 

This commit adds an animation to Inbox note deletion

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
This commit is contained in:
Fernando 2020-10-06 11:07:06 -03:00 committed by GitHub
parent 1da4eedbf0
commit 20a14ca689
2 changed files with 50 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
plugins/woocommerce-admin/client/inbox-panel/index.js
View File

@ -11,6 +11,7 @@ import {
QUERY_DEFAULTS, QUERY_DEFAULTS,
} from '@woocommerce/data'; } from '@woocommerce/data';
import { withSelect } from '@wordpress/data'; import { withSelect } from '@wordpress/data';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
/** /**
* Internal dependencies * Internal dependencies
@ -46,23 +47,29 @@ const renderNotes = ( { hasNotes, isBatchUpdating, lastRead, notes } ) => {
const notesArray = Object.keys( notes ).map( ( key ) => notes[ key ] ); const notesArray = Object.keys( notes ).map( ( key ) => notes[ key ] );
return notesArray.map( ( note ) => {
if ( note.isUpdating ) {
return ( return (
<InboxNotePlaceholder <TransitionGroup role="menu">
className="banner message-is-unread" { notesArray.map( ( note ) => {
key={ note.id } const { id: noteId, is_deleted: isDeleted } = note;
/> if ( isDeleted ) {
); return null;
} }
return ( return (
<CSSTransition
key={ noteId }
timeout={ 500 }
classNames="woocommerce-inbox-message"
>
<InboxNoteCard <InboxNoteCard
key={ note.id } key={ noteId }
note={ note } note={ note }
lastRead={ lastRead } lastRead={ lastRead }
/> />
</CSSTransition>
);
} ) }
</TransitionGroup>
); );
} );
}; };
const InboxPanel = ( props ) => { const InboxPanel = ( props ) => {

26
plugins/woocommerce-admin/client/inbox-panel/style.scss
View File

@ -217,3 +217,29 @@
} }
} }
} }
.woocommerce-inbox-message-enter {
opacity: 0;
max-height: 0;
transform: translateX(50%);
}
.woocommerce-inbox-message-enter-active {
opacity: 1;
max-height: 100vh;
transform: translateX(0%);
transition: opacity 500ms, transform 500ms, max-height 500ms;
}
.woocommerce-inbox-message-exit {
opacity: 1;
max-height: 100vh;
transform: translateX(0%);
}
.woocommerce-inbox-message-exit-active {
opacity: 0;
max-height: 0;
transform: translateX(50%);
transition: opacity 500ms, transform 500ms, max-height 500ms;
}