From ea2f8993b0d2df9dc7a10c1e5dd9b02b7ec2f404 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Sat, 26 Jan 2019 00:08:01 +0100 Subject: [PATCH] code cleanup --- .../{MobileSidebar => Sidebar}/index.js | 21 +- .../components/StickyContainer/index.js | 189 ------------------ .../Wallet/components/LeftNavigation/index.js | 11 +- 3 files changed, 8 insertions(+), 213 deletions(-) rename src/views/Wallet/components/LeftNavigation/components/{MobileSidebar => Sidebar}/index.js (63%) delete mode 100644 src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js diff --git a/src/views/Wallet/components/LeftNavigation/components/MobileSidebar/index.js b/src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js similarity index 63% rename from src/views/Wallet/components/LeftNavigation/components/MobileSidebar/index.js rename to src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js index 9144fca2..354de4c9 100644 --- a/src/views/Wallet/components/LeftNavigation/components/MobileSidebar/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js @@ -41,30 +41,19 @@ const AbsoluteWrapper = styled.aside` `; -const MobileSidebarWrapper = styled.div` +const SidebarWrapper = styled.div` height: 100%; display: flex; flex-direction: column; `; -export default class MobileSidebar extends React.PureComponent { - constructor(props: Props) { - super(props); - this.state = { - footerFixed: false, - }; - } - +export default class Sidebar extends React.PureComponent { render() { return ( - - {React.Children.map(this.props.children, (child) => { // eslint-disable-line arrow-body-style - return child.key === 'sticky-footer' ? React.cloneElement(child, { - position: this.state.footerFixed ? 'fixed' : 'relative', - }) : child; - })} - + + {this.props.children} + ); } diff --git a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js deleted file mode 100644 index 2362ac81..00000000 --- a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js +++ /dev/null @@ -1,189 +0,0 @@ -/* @flow */ - -import * as React from 'react'; -import raf from 'raf'; -import { getViewportHeight, getScrollX, getScrollY } from 'utils/windowUtils'; -import styled from 'styled-components'; -import colors from 'config/colors'; - -type Props = { - children?: React.Node, -} - -type State = { - prevScrollY: number; - asideMinHeight: number, - wrapperTopOffset: number, - wrapperLeftOffset: number, - wrapperBottomPadding: number, - footerFixed: boolean, -} - -const AsideWrapper = styled.aside.attrs(props => ({ - style: { minHeight: props.minHeight }, -}))` - - position: relative; - top: 0px; - width: 320px; - min-width: 320px; - overflow: hidden; - background: ${colors.MAIN}; - border-right: 1px solid ${colors.DIVIDER}; - border-top-left-radius: 4px; - - @media screen and (max-width: 1170px) { - border-top-left-radius: 0px; - } -`; - -const StickyContainerWrapper = styled.div.attrs(props => ({ - style: { - top: props.top, - left: props.left, - paddingBottom: props.paddingBottom, - }, -}))` - position: fixed; - border-right: 1px solid ${colors.DIVIDER}; - width: 320px; - overflow: hidden; -`; - -export default class StickyContainer extends React.PureComponent { - constructor() { - super(); - this.state = { - prevScrollY: 0, - asideMinHeight: 0, - wrapperTopOffset: 0, - wrapperLeftOffset: 0, - wrapperBottomPadding: 0, - footerFixed: false, - }; - } - - componentDidMount() { - window.addEventListener('scroll', this.handleScroll); - window.addEventListener('resize', this.handleScroll); - this.update(); - } - - componentDidUpdate(prevProps: Props, newState: State) { - // recalculate view only if props was changed - // ignore when state is changed - if (this.state === newState) raf(this.update); - } - - componentWillUnmount() { - window.removeEventListener('scroll', this.handleScroll); - window.removeEventListener('resize', this.handleScroll); - } - - update = () => { - this.recalculatePosition(); - } - - handleScroll = () => raf(this.update); - - asideRefCallback = (element: ?HTMLElement) => { - this.aside = element; - } - - wrapperRefCallback = (element: ?HTMLElement) => { - this.wrapper = element; - } - - footerRefCallback = (element: ?HTMLElement) => { - this.footer = element; - } - - aside: ?HTMLElement; - - wrapper: ?HTMLElement; - - footer: ?HTMLElement; - - recalculatePosition() { - const { aside, wrapper, footer } = this; - if (!aside || !wrapper || !footer) return; - - const viewportHeight = getViewportHeight(); - const asideBounds = aside.getBoundingClientRect(); - const wrapperBounds = wrapper.getBoundingClientRect(); - const footerBounds = footer.getBoundingClientRect(); - const isHeaderFixed = asideBounds.top < 0; - const isWrapperBiggerThanViewport = wrapperBounds.height > viewportHeight; - const state = { ...this.state }; - - const scrollX = getScrollX(); - const scrollY = getScrollY(); - - if (isHeaderFixed) { - if (isWrapperBiggerThanViewport) { - const scrollDirection = scrollY >= state.prevScrollY ? 'down' : 'up'; - const topOutOfBounds: boolean = (wrapperBounds.top > 0 && scrollDirection === 'up'); - const bottomOutOfBounds: boolean = (footerBounds.bottom <= viewportHeight && scrollDirection === 'down'); - if (!topOutOfBounds && !bottomOutOfBounds) { - // neither "top" or "bottom" was reached - // scroll whole wrapper - const distanceScrolled = Math.abs(scrollY - state.prevScrollY); - state.wrapperTopOffset += scrollDirection === 'down' ? -distanceScrolled : distanceScrolled; - } - } - // make sure that wrapper will not be over scrolled - if (state.wrapperTopOffset > 0) state.wrapperTopOffset = 0; - const maxScrollTop = viewportHeight - wrapperBounds.height; - if (maxScrollTop < 0 && state.wrapperTopOffset < maxScrollTop) state.wrapperTopOffset = maxScrollTop; - } else { - // update wrapper "top" to be same as "aside" element - state.wrapperTopOffset = asideBounds.top; - } - - if (isWrapperBiggerThanViewport) { - state.footerFixed = false; - } else if (state.footerFixed) { - if (footerBounds.top < wrapperBounds.bottom - footerBounds.height) { - state.footerFixed = false; - } - } else if (footerBounds.bottom < viewportHeight) { - state.footerFixed = asideBounds.height > wrapperBounds.height; - } - - state.prevScrollY = scrollY; - state.asideMinHeight = wrapperBounds.height; - state.wrapperBottomPadding = state.footerFixed ? footerBounds.height : 0; - // update wrapper "left" position - state.wrapperLeftOffset = scrollX > 0 ? -scrollX : asideBounds.left; - - this.setState(state); - } - - render() { - return ( - - - {React.Children.map(this.props.children, (child) => { // eslint-disable-line arrow-body-style - return child.key === 'sticky-footer' ? React.cloneElement(child, { - ref: this.footerRefCallback, - position: this.state.footerFixed ? 'fixed' : 'relative', - }) : child; - })} - - - ); - } -} \ No newline at end of file diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index e2139098..8e926f67 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -15,7 +15,7 @@ import * as deviceUtils from 'utils/device'; import AccountMenu from './components/AccountMenu'; import CoinMenu from './components/CoinMenu'; import DeviceMenu from './components/DeviceMenu'; -import MobileSidebar from './components/MobileSidebar'; +import Sidebar from './components/Sidebar'; import type { Props } from './components/common'; @@ -203,13 +203,8 @@ class LeftNavigation extends React.PureComponent { const { selectedDevice, dropdownOpened } = props.wallet; const isDeviceAccessible = deviceUtils.isDeviceAccessible(selectedDevice); - const SidebarComponent = MobileSidebar; return ( - +
{ - + ); } }