Cosmetics

Author: compulim

packages/component/src/BasicScrollToBottom.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 import Composer from './ScrollToBottom/Composer';
 import Context from './ScrollToBottom/Context';
-import FollowButton from './ScrollToBottom/FollowButton';
+import AutoHideFollowButton from './ScrollToBottom/AutoHideFollowButton';
 import Panel from './ScrollToBottom/Panel';
 
 const ROOT_CSS = css({
@@ -19,7 +19,7 @@ export default props =>
           <Panel>
             { props.children }
           </Panel>
-          { !context.bottom && <FollowButton /> }
+          <AutoHideFollowButton className={ props.followButtonClassName } />
         </div>
       }
     </Context>

packages/component/src/ScrollToBottom/AutoHideFollowButton.js

@@ -0,0 +1,35 @@
+import { css } from 'glamor';
+import React from 'react';
+
+import Context from './Context';
+
+const ROOT_CSS = css({
+  backgroundColor: 'rgba(0, 0, 0, .2)',
+  borderRadius: 5,
+  borderWidth: 0,
+  bottom: 5,
+  cursor: 'pointer',
+  height: 10,
+  outline: 0,
+  position: 'absolute',
+  right: 20,
+  width: 60,
+
+  '&:hover': {
+    backgroundColor: 'rgba(0, 0, 0, .4)'
+  },
+
+  '&:active': {
+    backgroundColor: 'rgba(0, 0, 0, .6)'
+  }
+});
+
+export default props =>
+  <Context.Consumer>
+    { context => !context.bottom &&
+        <button
+          className={ ROOT_CSS + '' }
+          onClick={ context.scrollToBottom }
+        />
+    }
+  </Context.Consumer>

packages/component/src/ScrollToBottom/Composer.js

@@ -16,7 +16,6 @@ export default class ScrollToBottomComposer extends React.Component {
       bottom: true,
       handleUpdate: () => this.state.bottom && this.state.scrollToBottom(),
       scrollToBottom: () => this.setState(() => ({
-        bottom: true,
         scrollTop: this.state.target && this.state.target.current && (this.state.target.current.scrollHeight - this.state.target.current.offsetHeight)
       })),
       scrollTop: null,

packages/component/src/ScrollToBottom/FollowButton.js

@@ -10,7 +10,6 @@ const SCROLL_VIEW_CSS = css({
   borderWidth: 1,
   height: 400,
   marginTop: 10,
-  padding: 10,
   width: 600
 });