Smoother modals

7 years ago · 31453dce75
4 changed files with 86 additions and 46 deletions
--- a/src/components/base/Modal/ModalBody.js
+++ 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<Props, State> {
+  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 (
+      <Body style={{ height: isHidden && deferHeight ? deferHeight : undefined }}>
+        {onClose && (
+          <CloseContainer onClick={onClose}>
+            <IconCross height={16} width={16} />
+          </CloseContainer>
+        )}
+        {(!isHidden || !deferHeight) && <Inner {...props}>{children}</Inner>}
+      </Body>
+    )
+  }
+}
+
+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
--- 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<any> {
  shouldComponentUpdate(nextProps) {
    if (nextProps.isAnimated) {
@ -206,28 +186,6 @@ export class Modal extends Component<Props> {
  }
 }

-export const ModalBody = ({
-  children,
-  onClose,
-  ...props
-}: {
-  children: any,
-  onClose?: Function,
-}) => (
-  <Body>
-    {onClose && (
-      <CloseContainer onClick={onClose}>
-        <IconCross height={16} width={16} />
-      </CloseContainer>
-    )}
-    <Box {...props}>{children}</Box>
-  </Body>
-)
-
-ModalBody.defaultProps = {
-  onClose: undefined,
-}
-
 export const ModalTitle = styled(Box).attrs({
  ff: 'Museo Sans|Regular',
  fontSize: 6,
--- a/src/components/modals/Receive/index.js
+++ b/src/components/modals/Receive/index.js
@ -74,7 +74,7 @@ class ReceiveModal extends PureComponent<Props, State> {
          const account = this.getAccount(data)

          return (
-            <ModalBody onClose={onClose} flow={3}>
+            <ModalBody onClose={onClose} flow={3} deferHeight={282}>
              <ModalTitle>{t('receive:title')}</ModalTitle>
              <ModalContent>
                <Box flow={1}>
--- a/src/components/modals/Send/index.js
+++ b/src/components/modals/Send/index.js
@ -112,7 +112,7 @@ class SendModal extends PureComponent<Props, State> {
          const acc = account || get(data, 'account', null)
          const canNext = this.canNext(acc)
          return (
-            <ModalBody onClose={onClose}>
+            <ModalBody onClose={onClose} deferHeight={acc ? 595 : 355}>
              <ModalTitle>{t('send:title')}</ModalTitle>
              <ModalContent>
                <Breadcrumb mb={6} mt={2} currentStep={stepIndex} items={this._steps} />