Animate transaction notifications & fix styles (#305)

* Add disclaimer modal to footer

* Remove duplicate code & unnecessary styles

* Fix formatting noise

* remove un-used css style

* Fix tslint error & add media query for modals

* Nest Media Query

* Add react-transition-group

* Animate notifications with react-transition-group

* Identify issue with notifications getting overridden

* Update RTG (react-transition-group) to v2 & identify keys as animation issue

* Add unique id on successful transactions for unique keys

* update classNames, remove unused import

* Revert removing lodash

* Remove unnecessary test util

* Remove formatting noise

* Remove all formatting noise

* Update CSS & Change notification unique id

* Add unique id for each notification
This commit is contained in:
James Prado 2017-11-07 01:20:19 -05:00 committed by Daniel Ternyak
parent 4ee38eccc0
commit 2075a416ae
8 changed files with 2152 additions and 818 deletions

View File

@ -13,7 +13,8 @@ export function showNotification(
payload: {
level,
msg,
duration
duration,
id: Math.random()
}
};
}

View File

@ -7,6 +7,7 @@ export type INFINITY = 'infinity';
export interface Notification {
level: NOTIFICATION_LEVEL;
msg: ReactElement<any> | string;
id: number;
duration?: number | INFINITY;
}

View File

@ -142,3 +142,25 @@
}
}
}
.NotificationAnimation{
&-enter {
opacity: 0.01;
&-active {
opacity: 1;
transition: opacity 500ms;
}
}
}
.NotificationAnimation{
&-exit {
opacity: 1;
transform: none;
&-active {
opacity: 0.01;
transform: translateY(100%);
transition: opacity 500ms, transform 500ms;
}
}
}

View File

@ -5,6 +5,7 @@ import {
} from 'actions/notifications';
import React from 'react';
import { connect } from 'react-redux';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import NotificationRow from './NotificationRow';
import './Notifications.scss';
@ -12,21 +13,30 @@ interface Props {
notifications: Notification[];
closeNotification: TCloseNotification;
}
const Transition = props => (
<CSSTransition
{...props}
classNames="NotificationAnimation"
timeout={{ enter: 500, exit: 500 }}
/>
);
export class Notifications extends React.Component<Props, {}> {
public render() {
if (!this.props.notifications.length) {
return null;
}
return (
<div className="Notifications">
{this.props.notifications.map((n, i) => (
<NotificationRow
key={`${n.level}-${i}`}
notification={n}
onClose={this.props.closeNotification}
/>
))}
</div>
<TransitionGroup className="Notifications">
{this.props.notifications.map(n => {
return (
<Transition key={n.id}>
<NotificationRow
notification={n}
onClose={this.props.closeNotification}
/>
</Transition>
);
})}
</TransitionGroup>
);
}
}

View File

@ -307,14 +307,14 @@ export class SendTransaction extends React.Component<Props, State> {
onChange={readOnly ? void 0 : this.onGasChange}
/>
{(offline || forceOffline) && (
<div>
<NonceField
value={nonce}
onChange={this.onNonceChange}
placeholder={'0'}
/>
</div>
)}
<div>
<NonceField
value={nonce}
onChange={this.onNonceChange}
placeholder={'0'}
/>
</div>
)}
{unit === 'ether' && (
<DataField
value={data}

View File

@ -88,7 +88,6 @@
&:hover,
&:focus,
&.focus {
color: white;
text-decoration: none;
opacity: 1;
}

2892
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -32,6 +32,7 @@
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-transition-group": "^2.2.1",
"redux": "^3.6.0",
"redux-form": "^6.6.3",
"redux-logger": "^3.0.1",