From 31453dce75159fb82067c053d9495b83c5f2e455 Mon Sep 17 00:00:00 2001 From: meriadec Date: Mon, 19 Mar 2018 10:48:39 +0100 Subject: [PATCH] Smoother modals --- src/components/base/Modal/ModalBody.js | 82 ++++++++++++++++++++++++++ src/components/base/Modal/index.js | 46 +-------------- src/components/modals/Receive/index.js | 2 +- src/components/modals/Send/index.js | 2 +- 4 files changed, 86 insertions(+), 46 deletions(-) create mode 100644 src/components/base/Modal/ModalBody.js diff --git a/src/components/base/Modal/ModalBody.js b/src/components/base/Modal/ModalBody.js new file mode 100644 index 00000000..94d37c9e --- /dev/null +++ b/src/components/base/Modal/ModalBody.js @@ -0,0 +1,82 @@ +// @flow + +import React, { PureComponent } from 'react' +import styled, { keyframes } from 'styled-components' + +import Box from 'components/base/Box' +import IconCross from 'icons/Cross' + +export const Container = styled(Box).attrs({ + px: 5, + pb: 5, +})`` + +type Props = { + deferHeight?: number, + onClose?: Function, + children: any, +} + +type State = { + isHidden: boolean, +} + +class ModalBody extends PureComponent { + state = { + isHidden: true, + } + + componentDidMount() { + setTimeout(() => { + window.requestAnimationFrame(() => { + this.setState({ isHidden: false }) + }) + }, 150) + } + + render() { + const { children, onClose, deferHeight, ...props } = this.props + const { isHidden } = this.state + return ( + + {onClose && ( + + + + )} + {(!isHidden || !deferHeight) && {children}} + + ) + } +} + +const CloseContainer = styled(Box).attrs({ + p: 4, + color: 'fog', +})` + cursor: pointer; + position: absolute; + top: 0; + right: 0; + + &:hover { + color: ${p => p.theme.colors.grey}; + } +` + +const Body = styled(Box).attrs({ + bg: p => p.theme.colors.white, + relative: true, + borderRadius: 1, +})`` + +const appear = keyframes` + from { opacity: 0; } + to { opacity: 1; } +` + +const Inner = styled(Box)` + animation: ${appear} 80ms linear; +` + +export default ModalBody diff --git a/src/components/base/Modal/index.js b/src/components/base/Modal/index.js index 5f738f49..a6445b7d 100644 --- a/src/components/base/Modal/index.js +++ b/src/components/base/Modal/index.js @@ -20,10 +20,10 @@ import Box, { Tabbable } from 'components/base/Box' import GrowScroll from 'components/base/GrowScroll' import Defer from 'components/base/Defer' -import IconCross from 'icons/Cross' +export { default as ModalBody } from './ModalBody' const springConfig = { - stiffness: 380, + stiffness: 320, } const mapStateToProps: Function = ( @@ -81,26 +81,6 @@ const Wrapper = styled(Tabbable).attrs({ z-index: 2; ` -const Body = styled(Box).attrs({ - bg: p => p.theme.colors.white, - relative: true, - borderRadius: 1, -})`` - -const CloseContainer = styled(Box).attrs({ - p: 4, - color: 'fog', -})` - cursor: pointer; - position: absolute; - top: 0; - right: 0; - - &:hover { - color: ${p => p.theme.colors.grey}; - } -` - class Pure extends Component { shouldComponentUpdate(nextProps) { if (nextProps.isAnimated) { @@ -206,28 +186,6 @@ export class Modal extends Component { } } -export const ModalBody = ({ - children, - onClose, - ...props -}: { - children: any, - onClose?: Function, -}) => ( - - {onClose && ( - - - - )} - {children} - -) - -ModalBody.defaultProps = { - onClose: undefined, -} - export const ModalTitle = styled(Box).attrs({ ff: 'Museo Sans|Regular', fontSize: 6, diff --git a/src/components/modals/Receive/index.js b/src/components/modals/Receive/index.js index e8db5d57..12a728d9 100644 --- a/src/components/modals/Receive/index.js +++ b/src/components/modals/Receive/index.js @@ -74,7 +74,7 @@ class ReceiveModal extends PureComponent { const account = this.getAccount(data) return ( - + {t('receive:title')} diff --git a/src/components/modals/Send/index.js b/src/components/modals/Send/index.js index 675f4968..f8d4e2df 100644 --- a/src/components/modals/Send/index.js +++ b/src/components/modals/Send/index.js @@ -112,7 +112,7 @@ class SendModal extends PureComponent { const acc = account || get(data, 'account', null) const canNext = this.canNext(acc) return ( - + {t('send:title')}