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