Move logic to Scrollable component
This commit is contained in:
parent
d55a8ad02d
commit
b37ed1f8d0
|
@ -1,12 +1,39 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import { observable } from 'mobx';
|
||||
import { observer } from 'mobx-react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Scrollable = styled.div`
|
||||
type Props = {
|
||||
shadow?: boolean,
|
||||
};
|
||||
|
||||
@observer
|
||||
class Scrollable extends React.Component<Props> {
|
||||
@observable shadow: boolean = false;
|
||||
|
||||
handleScroll = (ev: SyntheticMouseEvent<*>) => {
|
||||
this.shadow = !!(this.props.shadow && ev.currentTarget.scrollTop > 0);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { shadow, ...rest } = this.props;
|
||||
|
||||
return (
|
||||
<Wrapper onScroll={this.handleScroll} shadow={this.shadow} {...rest} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Wrapper = styled.div`
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overscroll-behavior: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
box-shadow: ${props =>
|
||||
props.shadow ? '0 1px inset rgba(0,0,0,.1)' : 'none'};
|
||||
transition: all 250ms ease-in-out;
|
||||
`;
|
||||
|
||||
export default Scrollable;
|
||||
|
|
|
@ -52,7 +52,7 @@ class MainSidebar extends React.Component<Props> {
|
|||
}
|
||||
/>
|
||||
<Flex auto column>
|
||||
<Scrollable>
|
||||
<Scrollable shadow>
|
||||
<Section>
|
||||
<SidebarLink to="/dashboard" icon={<HomeIcon />}>
|
||||
Home
|
||||
|
|
|
@ -36,7 +36,7 @@ class SettingsSidebar extends React.Component<Props> {
|
|||
/>
|
||||
|
||||
<Flex auto column>
|
||||
<Scrollable>
|
||||
<Scrollable shadow>
|
||||
<Section>
|
||||
<Header>Account</Header>
|
||||
<SidebarLink to="/settings" icon={<ProfileIcon />}>
|
||||
|
|
Reference in New Issue