instantsearch-ui-components - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/cjs/components/Hits.js

@@ -11,7 +11,38 @@ "use strict";
 var _lib = require("../lib");
-var _excluded = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent"];
+var _excluded = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent", "banner", "bannerComponent"];
 // Should be imported from a shared package in the future
 
-function createHitsComponent(_ref) {
+function createDefaultBannerComponent(_ref) {
   var createElement = _ref.createElement;
+  return function DefaultBanner(_ref2) {
+    var _banner$link;
+    var classNames = _ref2.classNames,
+      banner = _ref2.banner;
+    if (!banner.image.urls[0].url) {
+      return null;
+    }
+    return createElement("aside", {
+      className: (0, _lib.cx)('ais-Hits-banner', classNames.bannerRoot)
+    }, (_banner$link = banner.link) !== null && _banner$link !== void 0 && _banner$link.url ? createElement("a", {
+      className: (0, _lib.cx)('ais-Hits-banner-link', classNames.bannerLink),
+      href: banner.link.url,
+      target: banner.link.target
+    }, createElement("img", {
+      className: (0, _lib.cx)('ais-Hits-banner-image', classNames.bannerImage),
+      src: banner.image.urls[0].url,
+      alt: banner.image.title
+    })) : createElement("img", {
+      className: (0, _lib.cx)('ais-Hits-banner-image', classNames.bannerImage),
+      src: banner.image.urls[0].url,
+      alt: banner.image.title
+    }));
+  };
+}
+function createHitsComponent(_ref3) {
+  var createElement = _ref3.createElement,
+    Fragment = _ref3.Fragment;
+  var DefaultBannerComponent = createDefaultBannerComponent({
+    createElement: createElement,
+    Fragment: Fragment
+  });
   return function Hits(userProps) {
@@ -24,11 +55,14 @@ var _userProps$classNames = userProps.classNames,
       EmptyComponent = userProps.emptyComponent,
+      banner = userProps.banner,
+      BannerComponent = userProps.bannerComponent,
       props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
-    if (hits.length === 0 && EmptyComponent) {
-      return createElement(EmptyComponent, {
-        className: (0, _lib.cx)('ais-Hits', classNames.root, (0, _lib.cx)('ais-Hits--empty', classNames.emptyRoot), props.className)
-      });
-    }
     return createElement("div", (0, _extends2.default)({}, props, {
       className: (0, _lib.cx)('ais-Hits', classNames.root, hits.length === 0 && (0, _lib.cx)('ais-Hits--empty', classNames.emptyRoot), props.className)
-    }), createElement("ol", {
+    }), banner && (BannerComponent ? createElement(BannerComponent, {
+      className: (0, _lib.cx)('ais-Hits-banner', classNames.bannerRoot),
+      banner: banner
+    }) : createElement(DefaultBannerComponent, {
+      classNames: classNames,
+      banner: banner
+    })), hits.length === 0 && EmptyComponent ? createElement(EmptyComponent, null) : createElement("ol", {
       className: (0, _lib.cx)('ais-Hits-list', classNames.list)
@@ -35,0 +69,0 @@ }, hits.map(function (hit, index) {

dist/cjs/version.js

@@ -7,3 +7,3 @@ "use strict";
 exports.default = void 0;
-var _default = '0.4.0';
+var _default = '0.5.0';
 exports.default = _default;

dist/es/components/Hits.d.ts

@@ -6,2 +6,14 @@ import type { ComponentProps, Renderer } from '../types';
 type SendEventForHits = (...props: unknown[]) => void;
+type Banner = {
+    image: {
+        urls: Array<{
+            url: string;
+        }>;
+        title?: string;
+    };
+    link?: {
+        url?: string;
+        target?: '_blank' | '_self';
+    };
+};
 export type HitsProps<THit> = ComponentProps<'div'> & {
@@ -19,3 +31,8 @@ hits: THit[];
     emptyComponent?: (props: {
+        className?: string;
+    }) => JSX.Element;
+    banner?: Banner;
+    bannerComponent?: (props: {
         className: string;
+        banner: Banner;
     }) => JSX.Element;
@@ -40,4 +57,16 @@ };
     item: string | string[];
+    /**
+     * Class names to apply to the banner element
+     */
+    bannerRoot: string | string[];
+    /**
+     * Class names to apply to the banner image element
+     */
+    bannerImage: string | string[];
+    /**
+     * Class names to apply to the banner link element
+     */
+    bannerLink: string | string[];
 };
-export declare function createHitsComponent({ createElement }: Renderer): <THit extends Hit>(userProps: HitsProps<THit>) => JSX.Element;
+export declare function createHitsComponent({ createElement, Fragment }: Renderer): <THit extends Hit>(userProps: HitsProps<THit>) => JSX.Element;
 export {};

dist/es/components/Hits.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent"];
+var _excluded = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent", "banner", "bannerComponent"];
 import { cx } from "../lib/index.js";
@@ -8,4 +8,35 @@
 
-export function createHitsComponent(_ref) {
+function createDefaultBannerComponent(_ref) {
   var createElement = _ref.createElement;
+  return function DefaultBanner(_ref2) {
+    var _banner$link;
+    var classNames = _ref2.classNames,
+      banner = _ref2.banner;
+    if (!banner.image.urls[0].url) {
+      return null;
+    }
+    return createElement("aside", {
+      className: cx('ais-Hits-banner', classNames.bannerRoot)
+    }, (_banner$link = banner.link) !== null && _banner$link !== void 0 && _banner$link.url ? createElement("a", {
+      className: cx('ais-Hits-banner-link', classNames.bannerLink),
+      href: banner.link.url,
+      target: banner.link.target
+    }, createElement("img", {
+      className: cx('ais-Hits-banner-image', classNames.bannerImage),
+      src: banner.image.urls[0].url,
+      alt: banner.image.title
+    })) : createElement("img", {
+      className: cx('ais-Hits-banner-image', classNames.bannerImage),
+      src: banner.image.urls[0].url,
+      alt: banner.image.title
+    }));
+  };
+}
+export function createHitsComponent(_ref3) {
+  var createElement = _ref3.createElement,
+    Fragment = _ref3.Fragment;
+  var DefaultBannerComponent = createDefaultBannerComponent({
+    createElement: createElement,
+    Fragment: Fragment
+  });
   return function Hits(userProps) {
@@ -18,11 +49,14 @@ var _userProps$classNames = userProps.classNames,
       EmptyComponent = userProps.emptyComponent,
+      banner = userProps.banner,
+      BannerComponent = userProps.bannerComponent,
       props = _objectWithoutProperties(userProps, _excluded);
-    if (hits.length === 0 && EmptyComponent) {
-      return createElement(EmptyComponent, {
-        className: cx('ais-Hits', classNames.root, cx('ais-Hits--empty', classNames.emptyRoot), props.className)
-      });
-    }
     return createElement("div", _extends({}, props, {
       className: cx('ais-Hits', classNames.root, hits.length === 0 && cx('ais-Hits--empty', classNames.emptyRoot), props.className)
-    }), createElement("ol", {
+    }), banner && (BannerComponent ? createElement(BannerComponent, {
+      className: cx('ais-Hits-banner', classNames.bannerRoot),
+      banner: banner
+    }) : createElement(DefaultBannerComponent, {
+      classNames: classNames,
+      banner: banner
+    })), hits.length === 0 && EmptyComponent ? createElement(EmptyComponent, null) : createElement("ol", {
       className: cx('ais-Hits-list', classNames.list)
@@ -29,0 +63,0 @@ }, hits.map(function (hit, index) {

dist/es/version.d.ts

@@ -1,2 +0,2 @@
-declare const _default: "0.4.0";
+declare const _default: "0.5.0";
 export default _default;

dist/es/version.js

@@ -1,1 +0,1 @@
-export default '0.4.0';
+export default '0.5.0';

package.json

 {
   "name": "instantsearch-ui-components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Common UI components for InstantSearch.",
@@ -52,3 +52,3 @@ "types": "dist/es/index.d.ts",
   },
-  "gitHead": "358f849cba15cbbb415da05feb582b47358aa239"
+  "gitHead": "68fe2ee8544096eff8c2fbafe01a50a8acbca2b9"
 }

No alert changes

Improved metrics

Total package byte prevSize

26248

increased by14.88%

Lines of code

549

increased by21.46%

No dependency changes