#531: ScrollView: refactor default layout (closes #531)

src/ScrollView/ScrollView.js

@@ -3,16 +3,13 @@ import ReactDOM from 'react-dom';
 import cx from 'classnames';
 import { skinnable, props, t } from '../utils';
 import GeminiScrollbar from 'gemini-scrollbar';
-import ResizeSensor from '../ResizeSensor/ResizeSensor';
+import FlexView from 'react-flexview';
 
 export const Props = {
   children: t.ReactChildren,
   autoshow: t.maybe(t.Boolean),
   forceGemini: t.maybe(t.Boolean),
-  component: t.maybe(t.union([t.Function, t.String])),
   componentProps: t.maybe(t.Object),
-  innerComponent: t.maybe(t.union([t.Function, t.String])),
-  innerComponentProps: t.maybe(t.Object),
   className: t.maybe(t.String),
   style: t.maybe(t.Object)
 };
@@ -21,10 +18,7 @@ export const Props = {
  * @param children - what to render inside the scroll view
  * @param autoshow - whether to automatically show scrollbars
  * @param forceGemini - force ScrollView to use `gemini-scrollbar`s
- * @param component - component to use as the wrapper
  * @param componentProps - props to pass to the wrapper component
- * @param innerComponent - component to use as the inner wrapper
- * @param innerComponentProps - props to pass to the inner wrapper component
  * @param className - className to pass to the wrapper component
  * @param style - style to pass to the wrapper component
  */
@@ -33,9 +27,7 @@ export const Props = {
 export default class ScrollView extends React.PureComponent {
 
   static defaultProps = {
-    component: 'div',
-    forceGemini: true,
-    innerComponent: 'div'
+    forceGemini: true
   }
 
   /**
@@ -77,41 +69,21 @@ export default class ScrollView extends React.PureComponent {
     children
   );
 
-  getLocals() {
-    const { componentProps, innerComponentProps, className, style, children } = this.props;
-
-    return {
-      children,
-      Wrapper: this.wrapperRenderer,
-      InnerWrapper: this.innerWrapperRenderer,
-      innerWrapperProps: innerComponentProps,
-      wrapperProps: {
-        ...componentProps,
-        style,
-        className: cx('scrollview', className)
-      }
-    };
-  }
-
-  template({ children, Wrapper, wrapperProps, InnerWrapper, innerWrapperProps }) {
+  template({ children, className, style, componentProps }) {
     return (
-      <ResizeSensor onResize={() => this.forceUpdate()}>
-        <Wrapper {...wrapperProps}>
-          <div className='gm-scrollbar -vertical'>
-            <div className='thumb' />
-          </div>
-          <div className='gm-scrollbar -horizontal'>
-            <div className='thumb' />
-          </div>
-          <div className='gm-scroll-view'>
-            <ResizeSensor onResize={() => this.forceUpdate()}>
-              <InnerWrapper {...innerWrapperProps}>
-                {children}
-              </InnerWrapper>
-            </ResizeSensor>
-          </div>
-        </Wrapper>
-      </ResizeSensor>
+      <FlexView style={style} className={cx('scrollview', className)} {...componentProps}>
+        <FlexView className='gm-scrollbar -vertical'>
+          <FlexView className='thumb' />
+        </FlexView>
+        <FlexView className='gm-scrollbar -horizontal'>
+          <FlexView className='thumb' />
+        </FlexView>
+        <FlexView column className='gm-scroll-view'>
+          <FlexView column shrink={false}>
+            {children}
+          </FlexView>
+        </FlexView>
+      </FlexView>
     );
   }
 }

src/ScrollView/examples/default.js

@@ -1,21 +1,44 @@
 // import ScrollView from 'buildo-react-components/lib/ScrollView';
 
 const Card = () => (
-  <FlexView column style={{ paddingRight: 30 }}>
-    <div style={{ fontSize: 28, fontWeight: 'bold', color: '#313d4f', marginBottom: 10 }}>The last days of disco</div>
-    <div style={{ fontSize: 14, color: '#313d4f', marginBottom: 10 }}>by <span style={{ color: '#1a91eb' }}>Luella Todd</span> | 7th of March</div>
-    <img alt='scrollscroll' style={{ width: '100%', marginBottom: 10 }} src='../src/ScrollView/examples/scroll.gif' />
-    <div style={{ fontSize: 18, lineHeight: 1.4, color: '#727a86' }}>Vinyl pug cray meh, pabst lyft retro fashion axe pickled. Tbh seitan unicorn, raw denim wayfarers edison bulb letterpress shoreditch put a bird on it lomo. Helvetica scenester cronut, trust fund lumbersexual normcore cray pour-over pinterest single-origin coffee pug glossier. Godard slow-carb kitsch, heirloom pug intelligentsia art party cornhole chicharrones lumbersexual man bun. Subway tile shabby chic narwhal, hella pour-over paleo coloring book intelligentsia bushwick selvage migas gentrify single-origin coffee. Schlitz chicharrones fanny pack trust fund green juice, gochujang hexagon drinking vinegar slow-carb truffaut pabst pitchfork. Retro gentrify synth, pop-up snackwave lo-fi blue bottle bicycle rights fanny pack iceland.</div>
+  <FlexView shrink={false} column style={{ paddingRight: 30 }}>
+
   </FlexView>
 );
 
+class Text extends React.Component {
+  state = {
+    height: undefined,
+    text: ''
+  }
+
+  componentDidMount() {
+    setTimeout(() => this.setState({
+      text: 'Vinyl pug cray meh, pabst lyft retro fashion axe pickled. Tbh seitan unicorn, raw denim wayfarers edison bulb letterpress shoreditch put a bird on it lomo. Helvetica scenester cronut, trust fund lumbersexual normcore cray pour-over pinterest single-origin coffee pug glossier. Godard slow-carb kitsch, heirloom pug intelligentsia art party cornhole chicharrones lumbersexual man bun. Subway tile shabby chic narwhal, hella pour-over paleo coloring book intelligentsia bushwick selvage migas gentrify single-origin coffee. Schlitz chicharrones fanny pack trust fund green juice, gochujang hexagon drinking vinegar slow-carb truffaut pabst pitchfork. Retro gentrify synth, pop-up snackwave lo-fi blue bottle bicycle rights fanny pack iceland.'
+    }), 3500);
+  }
+
+  render() {
+    return <FlexView width='100%' style={{ fontSize: 18, lineHeight: 1.4, color: '#727a86' }}>{this.state.text}</FlexView>;
+  }
+}
+
 class Example extends React.Component {
+  state = {
+    height: 500
+  }
+
+  componentDidMount() {
+    // setTimeout(() => this.setState({ height: 500 }), 2000);
+  }
 
   render() {
     return (
-      <FlexView style={{ height: 500 }}>
+      <FlexView height={this.state.height} width={100}>
         <ScrollView>
-          <Card />
+          <div style={{ width: 200, fontSize: 28, fontWeight: 'bold', color: '#313d4f', marginBottom: 10 }}>The last days of disco</div>
+          <div style={{ fontSize: 14, color: '#313d4f', marginBottom: 10 }}>by <span style={{ color: '#1a91eb' }}>Luella Todd</span> | 7th of March</div>
+          <Text />
         </ScrollView>
       </FlexView>
     );

src/ScrollView/scrollView.scss

@@ -101,6 +101,8 @@ body > div::-webkit-scrollbar {
   }
 
   > .gm-scroll-view {
+    height: 100% !important;
+    width: 100% !important;
     -ms-overflow-style: none;
 
     > * {