add innerComponent and innerComponentProps

buildo · Aug 7, 2017 · 7c58885 · 7c58885
1 parent e899f7a
commit 7c58885
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/src/ScrollView/README.md b/src/ScrollView/README.md
@@ -10,5 +10,7 @@ A scrollable view
 | **forceGemini** | <code>Boolean</code> | <code>true</code> | *optional*. Force ScrollView to use `gemini-scrollbar`s |
 | **component** | <code>union(Function &#124; String)</code> | <code>"div"</code> | *optional*. Component to use as the wrapper |
 | **componentProps** | <code>Object</code> |  | *optional*. Props to pass to the wrapper component |
+| **innerComponent** | <code>union(Function &#124; String)</code> | <code>"div"</code> | *optional*. Component to use as the inner wrapper |
+| **innerComponentProps** | <code>Object</code> |  | *optional*. Props to pass to the inner wrapper component |
 | **className** | <code>String</code> |  | *optional*. ClassName to pass to the wrapper component |
 | **style** | <code>Object</code> |  | *optional*. Style to pass to the wrapper component |
diff --git a/src/ScrollView/ScrollView.d.ts b/src/ScrollView/ScrollView.d.ts
@@ -1,12 +1,14 @@
 import { CSSProperties, PureComponent, ComponentType } from 'react';
 import { Type } from 'tcomb';
 
-export type ScrollViewProps<CP> = { // TODO(typo) not really working
+export type ScrollViewProps<CP, ICP> = { // TODO(typo) not really working
   children: any,
   autoshow?: boolean,
   forceGemini?: boolean,
   component?: string | ComponentType<CP>,
   componentProps?: CP,
+  innerComponent?: string | ComponentType<ICP>,
+  innerComponentProps?: ICP,
   className?: string,
   style?: CSSProperties
 }
@@ -15,4 +17,4 @@ export const Props: {
   [key: string]: Type<any>
 };
 
-export default class ScrollView extends PureComponent<ScrollViewProps<any>> {}
+export default class ScrollView extends PureComponent<ScrollViewProps<any, any>> {}
diff --git a/src/ScrollView/ScrollView.js b/src/ScrollView/ScrollView.js
@@ -11,6 +11,8 @@ export const Props = {
   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,6 +23,8 @@ export const Props = {
  * @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
  */
@@ -30,7 +34,8 @@ export default class ScrollView extends React.PureComponent {
 
   static defaultProps = {
     component: 'div',
-    forceGemini: true
+    forceGemini: true,
+    innerComponent: 'div'
   }
 
   /**
@@ -66,12 +71,20 @@ export default class ScrollView extends React.PureComponent {
     children
   );
 
+  innerWrapperRenderer = ({ children, ...innerWrapperProps }) => React.createElement(
+    this.props.innerComponent,
+    innerWrapperProps,
+    children
+  );
+
   getLocals() {
-    const { componentProps, className, style, children } = this.props;
+    const { componentProps, innerComponentProps, className, style, children } = this.props;
 
     return {
       children,
       Wrapper: this.wrapperRenderer,
+      InnerWrapper: this.innerWrapperRenderer,
+      innerWrapperProps: innerComponentProps,
       wrapperProps: {
         ...componentProps,
         style,
@@ -80,7 +93,7 @@ export default class ScrollView extends React.PureComponent {
     };
   }
 
-  template({ children, Wrapper, wrapperProps }) {
+  template({ children, Wrapper, wrapperProps, InnerWrapper, innerWrapperProps }) {
     return (
       <ResizeSensor onResize={() => this.forceUpdate()}>
         <Wrapper {...wrapperProps}>
@@ -92,9 +105,9 @@ export default class ScrollView extends React.PureComponent {
           </div>
           <div className='gm-scroll-view'>
             <ResizeSensor onResize={() => this.forceUpdate()}>
-              <div>
+              <InnerWrapper {...innerWrapperProps}>
                 {children}
-              </div>
+              </InnerWrapper>
             </ResizeSensor>
           </div>
         </Wrapper>