Add scroll view class name

Author: compulim

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [1.1.0] - 2018-06-22
+### Added
+- Container class name
+
 ## [1.0.0] - 2018-06-17
 ### Added
 - Initial release

README.md

@@ -35,7 +35,10 @@ export default props =>
 
 | Name | Default | Description |
 | - | - | - |
-| `mode` | `"bottom"` | Set it to `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top. |
+| `className` | | Set the class name for the root element |
+| `followButtonClassName` | | Set the class name for the follow button |
+| `mode` | `"bottom"` | Set it to `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top |
+| `scrollViewClassName` | | Set the class name for the container element that house all `props.children` |
 
 ## Context
 

packages/component/src/BasicScrollToBottom.js

@@ -12,8 +12,8 @@ const ROOT_CSS = css({
 
 export default props =>
   <Composer mode={ props.mode === 'top' ? 'top' : 'bottom'}>
-    <div className={ classNames(ROOT_CSS + '', props.className) }>
-      <Panel>
+    <div className={ classNames(ROOT_CSS + '', (props.className || '') + '') }>
+      <Panel className={ props.scrollViewClassName }>
         { props.children }
       </Panel>
       <AutoHideFollowButton className={ props.followButtonClassName } />

packages/component/src/ScrollToBottom/AutoHideFollowButton.js

@@ -1,4 +1,5 @@
 import { css } from 'glamor';
+import classNames from 'classnames';
 import React from 'react';
 
 import Context from './Context';
@@ -24,11 +25,11 @@ const ROOT_CSS = css({
   }
 });
 
-export default props =>
+export default ({ className }) =>
   <Context.Consumer>
     { context => !context.atEnd &&
         <button
-          className={ ROOT_CSS + '' }
+          className={ classNames(ROOT_CSS + '', (className || '') + '') }
           onClick={ context.scrollToEnd }
         />
     }

packages/component/src/ScrollToBottom/Panel.js

@@ -25,7 +25,7 @@ export default class Panel extends React.PureComponent {
 
           return (
             <div
-              className={ classNames(ROOT_CSS + '', props.className) }
+              className={ classNames(ROOT_CSS + '', (props.className || '') + '') }
               ref={ context._setTarget }
             >
               { props.children }

packages/playground/src/App.js

@@ -34,14 +34,18 @@ const ROOT_CSS = css({
   }
 });
 
-const SCROLL_VIEW_CSS = css({
+const CONTAINER_CSS = css({
   borderColor: 'Black',
   borderStyle: 'solid',
   borderWidth: 1,
   height: 400,
   marginTop: 10
 });
 
+const SCROLL_VIEW_CSS = css({
+  backgroundColor: '#EEE'
+});
+
 const SCROLL_VIEW_PADDING_CSS = css({
   paddingLeft: 10,
   paddingRight: 10,
@@ -117,13 +121,13 @@ class App extends React.Component {
           </li>
         </ul>
         <div className="panes">
-          <ScrollToEnd className={ SCROLL_VIEW_CSS + '' }>
-            <div className={ SCROLL_VIEW_PADDING_CSS + '' }>
+          <ScrollToEnd className={ CONTAINER_CSS } scrollViewClassName={ SCROLL_VIEW_CSS }>
+            <div className={ SCROLL_VIEW_PADDING_CSS }>
               { this.state.paragraphs.map(paragraph => <p key={ paragraph }>{ paragraph }</p>) }
             </div>
           </ScrollToEnd>
-          <ScrollToEnd className={ SCROLL_VIEW_CSS + '' } mode="top">
-            <div className={ SCROLL_VIEW_PADDING_CSS + '' }>
+          <ScrollToEnd className={ CONTAINER_CSS } mode="top">
+            <div className={ SCROLL_VIEW_PADDING_CSS }>
               { [...this.state.paragraphs].reverse().map(paragraph => <p key={ paragraph }>{ paragraph }</p>) }
             </div>
           </ScrollToEnd>