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

41
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 ) => { return (
if ( note.isUpdating ) { <TransitionGroup role="menu">
return ( { notesArray.map( ( note ) => {
<InboxNotePlaceholder const { id: noteId, is_deleted: isDeleted } = note;
className="banner message-is-unread" if ( isDeleted ) {
key={ note.id } return null;
/> }
); return (
} <CSSTransition
return ( key={ noteId }
<InboxNoteCard timeout={ 500 }
key={ note.id } classNames="woocommerce-inbox-message"
note={ note } >
lastRead={ lastRead } <InboxNoteCard
/> key={ noteId }
); note={ note }
} ); 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;
}