diff --git a/src/components/QueryRuleCustomData/QueryRuleCustomData.tsx b/src/components/QueryRuleCustomData/QueryRuleCustomData.tsx
index 1cc8935144..b1a3347e66 100644
--- a/src/components/QueryRuleCustomData/QueryRuleCustomData.tsx
+++ b/src/components/QueryRuleCustomData/QueryRuleCustomData.tsx
@@ -20,7 +20,7 @@ const QueryRuleCustomData = ({
templateKey="default"
templates={templates}
rootProps={{ className: cssClasses.root }}
- data={items}
+ data={{ items }}
/>
);
diff --git a/src/components/QueryRuleCustomData/__tests__/QueryRuleCustomData-test.tsx b/src/components/QueryRuleCustomData/__tests__/QueryRuleCustomData-test.tsx
index 0def1c10d6..cdb7ebafea 100644
--- a/src/components/QueryRuleCustomData/__tests__/QueryRuleCustomData-test.tsx
+++ b/src/components/QueryRuleCustomData/__tests__/QueryRuleCustomData-test.tsx
@@ -17,7 +17,7 @@ describe('QueryRuleCustomData', () => {
const wrapper = shallow();
- expect(wrapper.props().data).toEqual(items);
+ expect(wrapper.props().data).toEqual({ items });
expect(wrapper).toMatchSnapshot();
});
@@ -35,7 +35,7 @@ describe('QueryRuleCustomData', () => {
const wrapper = shallow();
- expect(wrapper.props().data).toEqual(items);
+ expect(wrapper.props().data).toEqual({ items });
expect(wrapper).toMatchSnapshot();
});
});
diff --git a/src/components/QueryRuleCustomData/__tests__/__snapshots__/QueryRuleCustomData-test.tsx.snap b/src/components/QueryRuleCustomData/__tests__/__snapshots__/QueryRuleCustomData-test.tsx.snap
index 1637831ab5..77ba437235 100644
--- a/src/components/QueryRuleCustomData/__tests__/__snapshots__/QueryRuleCustomData-test.tsx.snap
+++ b/src/components/QueryRuleCustomData/__tests__/__snapshots__/QueryRuleCustomData-test.tsx.snap
@@ -2,7 +2,11 @@
exports[`QueryRuleCustomData renders with empty items 1`] = `
items[0],
+ transformItems(items: CustomDataItem[]) {
+ return items.filter(item => typeof item.banner !== 'undefined');
+ },
templates: {
- default({ title, banner, link }: CustomDataItem) {
- if (!banner) {
- return '';
- }
+ default: ({ items }: { items: CustomDataItem[] }) =>
+ items
+ .map(item => {
+ const { title, banner, link } = item;
- return `
- ${title}
+ return `
+
+ ${title}
-
-
-
- `;
- },
+
+
+
+
+ `;
+ })
+ .join(''),
},
})
);
@@ -94,21 +99,24 @@ storiesOf('QueryRuleContext', module)
search.addWidget(
instantsearch.widgets.queryRuleCustomData({
container: widgetContainer,
- transformItems: (items: CustomDataItem[]) => items[0],
+ transformItems(items: CustomDataItem[]) {
+ return items.filter(item => typeof item.banner !== 'undefined');
+ },
templates: {
- default({ title, banner, link }: CustomDataItem) {
- if (!banner) {
- return '';
- }
+ default: ({ items }: { items: CustomDataItem[] }) =>
+ items.map(item => {
+ const { title, banner, link } = item;
- return `
- ${title}
+ return `
+
+ ${title}
-
-
-
- `;
- },
+
+
+
+
+ `;
+ }),
},
})
);
diff --git a/stories/query-rule-custom-data.stories.ts b/stories/query-rule-custom-data.stories.ts
index 45baaa24c8..6e963f7ecc 100644
--- a/stories/query-rule-custom-data.stories.ts
+++ b/stories/query-rule-custom-data.stories.ts
@@ -29,28 +29,65 @@ storiesOf('QueryRuleCustomData', module)
search.addWidget(
instantsearch.widgets.queryRuleCustomData({
container: widgetContainer,
- transformItems: (items: CustomDataItem[]) => items[0],
templates: {
- default({ title, banner, link }: CustomDataItem) {
- if (!banner) {
- return '';
- }
+ default: ({ items }: { items: CustomDataItem[] }) =>
+ items
+ .map(item => {
+ const { title, banner, link } = item;
- return `
- ${title}
+ if (!banner) {
+ return;
+ }
-
-
-
- `;
- },
+ return `
+
+ ${title}
+
+
+
+
+
+ `;
+ })
+ .join(''),
},
})
);
}, searchOptions)
)
.add(
- 'with default banner',
+ 'with Hogan',
+ withHits(({ search, container, instantsearch }) => {
+ const widgetContainer = document.createElement('div');
+ const description = document.createElement('p');
+ description.innerHTML = 'Type music
and a banner will appear.';
+
+ container.appendChild(description);
+ container.appendChild(widgetContainer);
+
+ search.addWidget(
+ instantsearch.widgets.queryRuleCustomData({
+ container: widgetContainer,
+ templates: {
+ default: `
+ {{#items}}
+ {{#banner}}
+
+ {{title}}
+
+
+
+
+
+ {{/banner}}
+ {{/items}}`,
+ },
+ })
+ );
+ }, searchOptions)
+ )
+ .add(
+ 'with default and single banner',
withHits(({ search, container, instantsearch }) => {
const widgetContainer = document.createElement('div');
const description = document.createElement('p');
@@ -65,21 +102,26 @@ storiesOf('QueryRuleCustomData', module)
container: widgetContainer,
transformItems: (items: CustomDataItem[]) => {
if (items.length > 0) {
- return items[0];
+ return items.filter(item => typeof item.banner !== 'undefined');
}
- return {
- title: 'Kill Bill',
- banner: 'http://static.bobatv.net/IMovie/mv_2352/poster_2352.jpg',
- link: 'https://www.netflix.com/title/60031236',
- };
+ return [
+ {
+ title: 'Kill Bill',
+ banner:
+ 'http://static.bobatv.net/IMovie/mv_2352/poster_2352.jpg',
+ link: 'https://www.netflix.com/title/60031236',
+ },
+ ];
},
templates: {
- default({ title, banner, link }: CustomDataItem) {
- if (!banner) {
- return '';
+ default(items: CustomDataItem[]) {
+ if (items.length === 0) {
+ return;
}
+ const { title, banner, link } = items[0];
+
return `
${title}