resultRenderer prop is now children (#14)

* resultRenderer prop is now children * update tests and snapshots
vutran · Dec 14, 2017 · 0031f7d · 0031f7d
1 parent b9d4d62
commit 0031f7d
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -118,7 +118,7 @@ The example below changes our result item schema to be in the shape of:
 ```
 
 ```
-function resultRenderer({ item }) => {
+function ResultRenderer({ item }) => {
     return (
         <div>
             <img src={item.owner.avatar_url} width={30} height={30} />
@@ -133,7 +133,9 @@ class MyComponent extends React.Component {
             <Omnibar
                 placeholder="Search GitHub"
                 extensions={[GitHubExtension]}
-                resultRenderer={resultRenderer} />
+            >
+                {({ item }) => <ResultRenderer item={item} />}
+            </Omnibar>
         );
     }
 }
@@ -189,6 +191,7 @@ const VoiceBar = withVoice(Omnibar);
 
 | Prop | Type | Required? | Description |
 | :-- | :-- | :-- | :-- |
+| `children` | `Function` | | Optional rendering function for each result item. Arguments: `{ item }` |
 | `extensions` | `Array<Extension>` | * | An array of extensions to be loaded. |
 | `placeholder` | `string` | | Input placeholder |
 | `maxResults` | `number` | | The maximum amount of results to display overall. |
@@ -199,7 +202,6 @@ const VoiceBar = withVoice(Omnibar);
 | `rowHeight` | `number` | | The height for each result row item |
 | `rowStyle` | `object` | | Style object override for each result row item |
 | `resultStyle` | `object` | | Style object override for the result container |
-| `resultRenderer` | `Function` | | Rendering function for each result item. Arguments: `{ item }` |
 | `onAction` | `Function` | | Override the defaut action callback when an item is executed. Arguments: `item` |
 | `inputDelay` | `number` | | Override the default input delay used for querying extensions (Default: 100ms) |
 | `defaultValue` | `string` | | Optional value to send to the Omnibar. |

diff --git a/__tests__/Results.tsx b/__tests__/Results.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Results from '../src/Results';
+import ResultsItem from '../src/ResultsItem';
 import renderer from 'react-test-renderer';
 
 describe('Results', () => {
@@ -65,9 +66,9 @@ describe('Results', () => {
     const tree = renderer
       .create(
         React.createElement(Results, {
+          children: rowRenderer,
           items,
           selectedIndex: -1,
-          resultRenderer: rowRenderer,
         })
       )
       .toJSON();

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Omnibar.tsx b/src/Omnibar.tsx
@@ -12,6 +12,7 @@ export default class Omnibar<T> extends React.PureComponent<
 > {
   // TODO - fix generic container
   static defaultProps: Omnibar.Props<any> = {
+    children: null,
     extensions: [],
     maxViewableResults: null,
     rowHeight: 50,
@@ -157,6 +158,7 @@ export default class Omnibar<T> extends React.PureComponent<
         })}
         {this.state.displayResults &&
           Results({
+            children: this.props.children,
             selectedIndex: this.state.selectedIndex,
             items: this.state.results,
             rowHeight: this.props.rowHeight,
@@ -166,7 +168,6 @@ export default class Omnibar<T> extends React.PureComponent<
             onMouseEnterItem: this.handleMouseEnterItem,
             onMouseLeave: this.handleMouseLeave,
             onClickItem: this.handleClickItem,
-            resultRenderer: this.props.resultRenderer,
           })}
       </div>
     );

diff --git a/src/Results.tsx b/src/Results.tsx
@@ -3,6 +3,8 @@ import ResultsItem from './ResultsItem';
 import { COLORS } from './constants';
 
 interface Props<T> {
+  // results renderer function
+  children?: Omnibar.ResultRenderer<T>;
   // the currently selected index
   selectedIndex: number;
   // list of result items
@@ -25,8 +27,6 @@ interface Props<T> {
   style?: React.CSSProperties;
   // optional row override style
   rowStyle?: React.CSSProperties;
-  // optional result renderering function
-  resultRenderer?: Omnibar.ResultRenderer;
 }
 
 const LIST_STYLE: React.CSSProperties = {
@@ -63,14 +63,14 @@ export default function Results<T>(props: Props<T>) {
       {props.items.map((item, key) =>
         React.createElement(ResultsItem, {
           key,
+          children: props.children,
           highlighted: props.selectedIndex === key,
           item,
           style: props.rowStyle,
           onMouseEnter:
             props.onMouseEnterItem &&
             createHandler(props.onMouseEnterItem, key),
           onClickItem: props.onClickItem,
-          resultRenderer: props.resultRenderer,
         })
       )}
     </ul>

diff --git a/src/ResultsItem.tsx b/src/ResultsItem.tsx
@@ -3,6 +3,8 @@ import { COLORS } from './constants';
 import AnchorRenderer from './modifiers/anchor/AnchorRenderer';
 
 interface Props<T> {
+  // results renderer function
+  children: Omnibar.ResultRenderer<T>;
   // the item
   item: T;
   // onMouseEnter item callback
@@ -15,8 +17,6 @@ interface Props<T> {
   highlighted?: boolean;
   // optional style override
   style?: React.CSSProperties;
-  // optional result renderering function
-  resultRenderer?: Omnibar.ResultRenderer;
 }
 
 interface State {
@@ -71,9 +71,9 @@ export default class ResultRenderer<T> extends React.PureComponent<
       style = { ...style, ...ITEM_HOVER_STYLE };
     }
 
-    const renderer = this.props.resultRenderer
-      ? this.props.resultRenderer
-      : AnchorRenderer as Omnibar.ResultRenderer;
+    const renderer = this.props.children
+      ? this.props.children
+      : AnchorRenderer as Omnibar.ResultRenderer<T>;
 
     return (
       <li

diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -9,9 +9,11 @@ declare namespace Omnibar {
   type Extension<T> = FunctionalExtension<T>;
 
   // Renderers
-  type ResultRenderer<T> = ({ item }: { item: T }) => JSX.Element;
+  type ResultRenderer<T> = ({ item }: { item: T }) => React.ReactNode;
 
   interface Props<T> {
+    // results renderer function
+    children?: ResultRenderer<T> | React.ReactNode;
     // list of extensions
     extensions: Array<Omnibar.Extension<T>>;
     // max items
@@ -34,8 +36,6 @@ declare namespace Omnibar {
     resultStyle?: React.CSSProperties;
     // options style on the root element
     rootStyle?: React.CSSProperties;
-    // optional result renderering function
-    resultRenderer?: ResultRenderer<T>;
     // optional action override
     onAction?: <T>(item: T) => void;
     // optional input delay override