From 0031f7d07a77916667e4cbd7a0542bcace8b4803 Mon Sep 17 00:00:00 2001 From: Vu Tran Date: Thu, 14 Dec 2017 15:27:02 -0800 Subject: [PATCH] resultRenderer prop is now children (#14) * resultRenderer prop is now children * update tests and snapshots --- README.md | 8 +++++--- __tests__/Results.tsx | 3 ++- package-lock.json | 34 +++++++++++++++++----------------- src/Omnibar.tsx | 3 ++- src/Results.tsx | 6 +++--- src/ResultsItem.tsx | 10 +++++----- typings/index.d.ts | 6 +++--- 7 files changed, 37 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index dd7b108..75a2003 100644 --- 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 (
@@ -133,7 +133,9 @@ class MyComponent extends React.Component { + > + {({ item }) => } + ); } } @@ -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` | * | 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 index 6659276..7abfa2a 100644 --- 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 index 2d7bb28..a69e8c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2466,14 +2466,6 @@ } } }, - "string_decoder": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "requires": { - "safe-buffer": "5.0.1" - } - }, "string-width": { "version": "1.0.2", "bundled": true, @@ -2484,6 +2476,14 @@ "strip-ansi": "3.0.1" } }, + "string_decoder": { + "version": "1.0.1", + "bundled": true, + "dev": true, + "requires": { + "safe-buffer": "5.0.1" + } + }, "stringstream": { "version": "0.0.5", "bundled": true, @@ -5417,15 +5417,6 @@ "integrity": "sha1-Rb8dny19wJvtgfHDB8Qw5ouEz/4=", "dev": true }, - "string_decoder": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", - "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", - "dev": true, - "requires": { - "safe-buffer": "5.1.0" - } - }, "string-length": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz", @@ -5464,6 +5455,15 @@ "strip-ansi": "3.0.1" } }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "dev": true, + "requires": { + "safe-buffer": "5.1.0" + } + }, "stringify-object": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.2.1.tgz", diff --git a/src/Omnibar.tsx b/src/Omnibar.tsx index ebef3ba..e08bda4 100644 --- a/src/Omnibar.tsx +++ b/src/Omnibar.tsx @@ -12,6 +12,7 @@ export default class Omnibar extends React.PureComponent< > { // TODO - fix generic container static defaultProps: Omnibar.Props = { + children: null, extensions: [], maxViewableResults: null, rowHeight: 50, @@ -157,6 +158,7 @@ export default class Omnibar 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 extends React.PureComponent< onMouseEnterItem: this.handleMouseEnterItem, onMouseLeave: this.handleMouseLeave, onClickItem: this.handleClickItem, - resultRenderer: this.props.resultRenderer, })}
); diff --git a/src/Results.tsx b/src/Results.tsx index 8880a46..9108ea6 100644 --- a/src/Results.tsx +++ b/src/Results.tsx @@ -3,6 +3,8 @@ import ResultsItem from './ResultsItem'; import { COLORS } from './constants'; interface Props { + // results renderer function + children?: Omnibar.ResultRenderer; // the currently selected index selectedIndex: number; // list of result items @@ -25,8 +27,6 @@ interface Props { style?: React.CSSProperties; // optional row override style rowStyle?: React.CSSProperties; - // optional result renderering function - resultRenderer?: Omnibar.ResultRenderer; } const LIST_STYLE: React.CSSProperties = { @@ -63,6 +63,7 @@ export default function Results(props: Props) { {props.items.map((item, key) => React.createElement(ResultsItem, { key, + children: props.children, highlighted: props.selectedIndex === key, item, style: props.rowStyle, @@ -70,7 +71,6 @@ export default function Results(props: Props) { props.onMouseEnterItem && createHandler(props.onMouseEnterItem, key), onClickItem: props.onClickItem, - resultRenderer: props.resultRenderer, }) )} diff --git a/src/ResultsItem.tsx b/src/ResultsItem.tsx index a5eaaa7..e87d4a9 100644 --- a/src/ResultsItem.tsx +++ b/src/ResultsItem.tsx @@ -3,6 +3,8 @@ import { COLORS } from './constants'; import AnchorRenderer from './modifiers/anchor/AnchorRenderer'; interface Props { + // results renderer function + children: Omnibar.ResultRenderer; // the item item: T; // onMouseEnter item callback @@ -15,8 +17,6 @@ interface Props { 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 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; return (
  • = FunctionalExtension; // Renderers - type ResultRenderer = ({ item }: { item: T }) => JSX.Element; + type ResultRenderer = ({ item }: { item: T }) => React.ReactNode; interface Props { + // results renderer function + children?: ResultRenderer | React.ReactNode; // list of extensions extensions: Array>; // 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; // optional action override onAction?: (item: T) => void; // optional input delay override