instantsearch-ui-components 0.6.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Carousel.js +140 -0
- package/dist/cjs/components/index.js +22 -11
- package/dist/cjs/components/recommend-shared/DefaultEmpty.js +1 -2
- package/dist/cjs/version.js +1 -1
- package/dist/es/components/Carousel.d.ts +61 -0
- package/dist/es/components/Carousel.js +132 -0
- package/dist/es/components/FrequentlyBoughtTogether.d.ts +1 -1
- package/dist/es/components/Hits.d.ts +1 -12
- package/dist/es/components/LookingSimilar.d.ts +1 -1
- package/dist/es/components/RelatedProducts.d.ts +1 -1
- package/dist/es/components/TrendingItems.d.ts +1 -1
- package/dist/es/components/index.d.ts +2 -1
- package/dist/es/components/index.js +3 -2
- package/dist/es/components/recommend-shared/DefaultEmpty.js +1 -2
- package/dist/es/types/Renderer.d.ts +3 -0
- package/dist/es/version.d.ts +1 -1
- package/dist/es/version.js +1 -1
- package/package.json +4 -4
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.createCarouselComponent = createCarouselComponent;
|
|
8
|
+
exports.generateCarouselId = generateCarouselId;
|
|
9
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
12
|
+
var _lib = require("../lib");
|
|
13
|
+
var _excluded = ["listRef", "nextButtonRef", "previousButtonRef", "carouselIdRef", "classNames", "itemComponent", "items", "translations"];
|
|
14
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
15
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
16
|
+
var lastCarouselId = 0;
|
|
17
|
+
function generateCarouselId() {
|
|
18
|
+
return "ais-Carousel-".concat(lastCarouselId++);
|
|
19
|
+
}
|
|
20
|
+
function createCarouselComponent(_ref) {
|
|
21
|
+
var createElement = _ref.createElement;
|
|
22
|
+
return function Carousel(userProps) {
|
|
23
|
+
var listRef = userProps.listRef,
|
|
24
|
+
nextButtonRef = userProps.nextButtonRef,
|
|
25
|
+
previousButtonRef = userProps.previousButtonRef,
|
|
26
|
+
carouselIdRef = userProps.carouselIdRef,
|
|
27
|
+
_userProps$classNames = userProps.classNames,
|
|
28
|
+
classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
|
|
29
|
+
ItemComponent = userProps.itemComponent,
|
|
30
|
+
items = userProps.items,
|
|
31
|
+
userTranslations = userProps.translations,
|
|
32
|
+
props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
|
|
33
|
+
var translations = _objectSpread({
|
|
34
|
+
listLabel: 'Items',
|
|
35
|
+
nextButtonLabel: 'Next',
|
|
36
|
+
nextButtonTitle: 'Next',
|
|
37
|
+
previousButtonLabel: 'Previous',
|
|
38
|
+
previousButtonTitle: 'Previous'
|
|
39
|
+
}, userTranslations);
|
|
40
|
+
var cssClasses = {
|
|
41
|
+
root: (0, _lib.cx)('ais-Carousel', classNames.root),
|
|
42
|
+
list: (0, _lib.cx)('ais-Carousel-list', classNames.list),
|
|
43
|
+
item: (0, _lib.cx)('ais-Carousel-item', classNames.item),
|
|
44
|
+
navigation: (0, _lib.cx)('ais-Carousel-navigation', classNames.navigation),
|
|
45
|
+
navigationNext: (0, _lib.cx)('ais-Carousel-navigation--next', classNames.navigationNext),
|
|
46
|
+
navigationPrevious: (0, _lib.cx)('ais-Carousel-navigation--previous', classNames.navigationPrevious)
|
|
47
|
+
};
|
|
48
|
+
function scrollLeft() {
|
|
49
|
+
if (listRef.current) {
|
|
50
|
+
listRef.current.scrollLeft -= listRef.current.offsetWidth * 0.75;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
function scrollRight() {
|
|
54
|
+
if (listRef.current) {
|
|
55
|
+
listRef.current.scrollLeft += listRef.current.offsetWidth * 0.75;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
function updateNavigationButtonsProps() {
|
|
59
|
+
if (!listRef.current || !previousButtonRef.current || !nextButtonRef.current) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
previousButtonRef.current.hidden = listRef.current.scrollLeft <= 0;
|
|
63
|
+
nextButtonRef.current.hidden = listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth;
|
|
64
|
+
}
|
|
65
|
+
if (items.length === 0) {
|
|
66
|
+
return null;
|
|
67
|
+
}
|
|
68
|
+
return createElement("div", (0, _extends2.default)({}, props, {
|
|
69
|
+
className: (0, _lib.cx)(cssClasses.root)
|
|
70
|
+
}), createElement("button", {
|
|
71
|
+
ref: previousButtonRef,
|
|
72
|
+
title: translations.previousButtonTitle,
|
|
73
|
+
"aria-label": translations.previousButtonLabel,
|
|
74
|
+
hidden: true,
|
|
75
|
+
"aria-controls": carouselIdRef.current,
|
|
76
|
+
className: (0, _lib.cx)(cssClasses.navigation, cssClasses.navigationPrevious),
|
|
77
|
+
onClick: function onClick(event) {
|
|
78
|
+
event.preventDefault();
|
|
79
|
+
scrollLeft();
|
|
80
|
+
}
|
|
81
|
+
}, createElement("svg", {
|
|
82
|
+
width: "8",
|
|
83
|
+
height: "16",
|
|
84
|
+
viewBox: "0 0 8 16",
|
|
85
|
+
fill: "none"
|
|
86
|
+
}, createElement("path", {
|
|
87
|
+
fillRule: "evenodd",
|
|
88
|
+
clipRule: "evenodd",
|
|
89
|
+
fill: "currentColor",
|
|
90
|
+
d: "M7.13809 0.744078C7.39844 1.06951 7.39844 1.59715 7.13809 1.92259L2.27616 8L7.13809 14.0774C7.39844 14.4028 7.39844 14.9305 7.13809 15.2559C6.87774 15.5814 6.45563 15.5814 6.19528 15.2559L0.861949 8.58926C0.6016 8.26382 0.6016 7.73618 0.861949 7.41074L6.19528 0.744078C6.45563 0.418641 6.87774 0.418641 7.13809 0.744078Z"
|
|
91
|
+
}))), createElement("ol", {
|
|
92
|
+
className: (0, _lib.cx)(cssClasses.list),
|
|
93
|
+
ref: listRef,
|
|
94
|
+
tabIndex: 0,
|
|
95
|
+
id: carouselIdRef.current,
|
|
96
|
+
"aria-roledescription": "carousel",
|
|
97
|
+
"aria-label": translations.listLabel,
|
|
98
|
+
"aria-live": "polite",
|
|
99
|
+
onScroll: updateNavigationButtonsProps,
|
|
100
|
+
onKeyDown: function onKeyDown(event) {
|
|
101
|
+
if (event.key === 'ArrowLeft') {
|
|
102
|
+
event.preventDefault();
|
|
103
|
+
scrollLeft();
|
|
104
|
+
} else if (event.key === 'ArrowRight') {
|
|
105
|
+
event.preventDefault();
|
|
106
|
+
scrollRight();
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}, items.map(function (item, index) {
|
|
110
|
+
return createElement("li", {
|
|
111
|
+
key: item.objectID,
|
|
112
|
+
className: (0, _lib.cx)(cssClasses.item),
|
|
113
|
+
"aria-roledescription": "slide",
|
|
114
|
+
"aria-label": "".concat(index + 1, " of ").concat(items.length)
|
|
115
|
+
}, createElement(ItemComponent, {
|
|
116
|
+
item: item
|
|
117
|
+
}));
|
|
118
|
+
})), createElement("button", {
|
|
119
|
+
ref: nextButtonRef,
|
|
120
|
+
title: translations.nextButtonTitle,
|
|
121
|
+
"aria-label": translations.nextButtonLabel,
|
|
122
|
+
"aria-controls": carouselIdRef.current,
|
|
123
|
+
className: (0, _lib.cx)(cssClasses.navigation, cssClasses.navigationNext),
|
|
124
|
+
onClick: function onClick(event) {
|
|
125
|
+
event.preventDefault();
|
|
126
|
+
scrollRight();
|
|
127
|
+
}
|
|
128
|
+
}, createElement("svg", {
|
|
129
|
+
width: "8",
|
|
130
|
+
height: "16",
|
|
131
|
+
viewBox: "0 0 8 16",
|
|
132
|
+
fill: "none"
|
|
133
|
+
}, createElement("path", {
|
|
134
|
+
fillRule: "evenodd",
|
|
135
|
+
clipRule: "evenodd",
|
|
136
|
+
fill: "currentColor",
|
|
137
|
+
d: "M0.861908 15.2559C0.601559 14.9305 0.601559 14.4028 0.861908 14.0774L5.72384 8L0.861908 1.92259C0.601559 1.59715 0.601559 1.06952 0.861908 0.744079C1.12226 0.418642 1.54437 0.418642 1.80472 0.744079L7.13805 7.41074C7.3984 7.73618 7.3984 8.26382 7.13805 8.58926L1.80472 15.2559C1.54437 15.5814 1.12226 15.5814 0.861908 15.2559Z"
|
|
138
|
+
}))));
|
|
139
|
+
};
|
|
140
|
+
}
|
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
var _Carousel = require("./Carousel");
|
|
7
|
+
Object.keys(_Carousel).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _Carousel[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function get() {
|
|
13
|
+
return _Carousel[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
|
6
17
|
var _FrequentlyBoughtTogether = require("./FrequentlyBoughtTogether");
|
|
7
18
|
Object.keys(_FrequentlyBoughtTogether).forEach(function (key) {
|
|
8
19
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -36,6 +47,17 @@ Object.keys(_Hits).forEach(function (key) {
|
|
|
36
47
|
}
|
|
37
48
|
});
|
|
38
49
|
});
|
|
50
|
+
var _LookingSimilar = require("./LookingSimilar");
|
|
51
|
+
Object.keys(_LookingSimilar).forEach(function (key) {
|
|
52
|
+
if (key === "default" || key === "__esModule") return;
|
|
53
|
+
if (key in exports && exports[key] === _LookingSimilar[key]) return;
|
|
54
|
+
Object.defineProperty(exports, key, {
|
|
55
|
+
enumerable: true,
|
|
56
|
+
get: function get() {
|
|
57
|
+
return _LookingSimilar[key];
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
});
|
|
39
61
|
var _RelatedProducts = require("./RelatedProducts");
|
|
40
62
|
Object.keys(_RelatedProducts).forEach(function (key) {
|
|
41
63
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -57,15 +79,4 @@ Object.keys(_TrendingItems).forEach(function (key) {
|
|
|
57
79
|
return _TrendingItems[key];
|
|
58
80
|
}
|
|
59
81
|
});
|
|
60
|
-
});
|
|
61
|
-
var _LookingSimilar = require("./LookingSimilar");
|
|
62
|
-
Object.keys(_LookingSimilar).forEach(function (key) {
|
|
63
|
-
if (key === "default" || key === "__esModule") return;
|
|
64
|
-
if (key in exports && exports[key] === _LookingSimilar[key]) return;
|
|
65
|
-
Object.defineProperty(exports, key, {
|
|
66
|
-
enumerable: true,
|
|
67
|
-
get: function get() {
|
|
68
|
-
return _LookingSimilar[key];
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
82
|
});
|
|
@@ -7,8 +7,7 @@ exports.createDefaultEmptyComponent = createDefaultEmptyComponent;
|
|
|
7
7
|
function createDefaultEmptyComponent(_ref) {
|
|
8
8
|
var createElement = _ref.createElement,
|
|
9
9
|
Fragment = _ref.Fragment;
|
|
10
|
-
var _ref2 = createElement(Fragment, null, "No results");
|
|
11
10
|
return function DefaultEmpty() {
|
|
12
|
-
return
|
|
11
|
+
return createElement(Fragment, null, "No results");
|
|
13
12
|
};
|
|
14
13
|
}
|
package/dist/cjs/version.js
CHANGED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import type { ComponentProps, MutableRef, RecommendItemComponentProps, RecordWithObjectID, Renderer } from '../types';
|
|
2
|
+
export type CarouselProps<TObject, TComponentProps extends Record<string, unknown> = Record<string, unknown>> = ComponentProps<'div'> & {
|
|
3
|
+
listRef: MutableRef<HTMLOListElement | null>;
|
|
4
|
+
nextButtonRef: MutableRef<HTMLButtonElement | null>;
|
|
5
|
+
previousButtonRef: MutableRef<HTMLButtonElement | null>;
|
|
6
|
+
carouselIdRef: MutableRef<string>;
|
|
7
|
+
items: Array<RecordWithObjectID<TObject>>;
|
|
8
|
+
itemComponent: (props: RecommendItemComponentProps<RecordWithObjectID<TObject>> & TComponentProps) => JSX.Element;
|
|
9
|
+
classNames?: Partial<CarouselClassNames>;
|
|
10
|
+
translations?: Partial<CarouselTranslations>;
|
|
11
|
+
};
|
|
12
|
+
export type CarouselClassNames = {
|
|
13
|
+
/**
|
|
14
|
+
* Class names to apply to the root element
|
|
15
|
+
*/
|
|
16
|
+
root: string | string[];
|
|
17
|
+
/**
|
|
18
|
+
* Class names to apply to the list element
|
|
19
|
+
*/
|
|
20
|
+
list: string | string[];
|
|
21
|
+
/**
|
|
22
|
+
* Class names to apply to each item element
|
|
23
|
+
*/
|
|
24
|
+
item: string | string[];
|
|
25
|
+
/**
|
|
26
|
+
* Class names to apply to both navigation elements
|
|
27
|
+
*/
|
|
28
|
+
navigation: string | string[];
|
|
29
|
+
/**
|
|
30
|
+
* Class names to apply to the next navigation element
|
|
31
|
+
*/
|
|
32
|
+
navigationNext: string | string[];
|
|
33
|
+
/**
|
|
34
|
+
* Class names to apply to the previous navigation element
|
|
35
|
+
*/
|
|
36
|
+
navigationPrevious: string | string[];
|
|
37
|
+
};
|
|
38
|
+
export type CarouselTranslations = {
|
|
39
|
+
/**
|
|
40
|
+
* The label of the next navigation element
|
|
41
|
+
*/
|
|
42
|
+
nextButtonLabel: string;
|
|
43
|
+
/**
|
|
44
|
+
* The title of the next navigation element
|
|
45
|
+
*/
|
|
46
|
+
nextButtonTitle: string;
|
|
47
|
+
/**
|
|
48
|
+
* The label of the previous navigation element
|
|
49
|
+
*/
|
|
50
|
+
previousButtonLabel: string;
|
|
51
|
+
/**
|
|
52
|
+
* The title of the previous navigation element
|
|
53
|
+
*/
|
|
54
|
+
previousButtonTitle: string;
|
|
55
|
+
/**
|
|
56
|
+
* The label of the carousel
|
|
57
|
+
*/
|
|
58
|
+
listLabel: string;
|
|
59
|
+
};
|
|
60
|
+
export declare function generateCarouselId(): string;
|
|
61
|
+
export declare function createCarouselComponent({ createElement }: Renderer): <TObject extends RecordWithObjectID>(userProps: CarouselProps<TObject>) => JSX.Element | null;
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
+
var _excluded = ["listRef", "nextButtonRef", "previousButtonRef", "carouselIdRef", "classNames", "itemComponent", "items", "translations"];
|
|
5
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
7
|
+
import { cx } from "../lib/index.js";
|
|
8
|
+
var lastCarouselId = 0;
|
|
9
|
+
export function generateCarouselId() {
|
|
10
|
+
return "ais-Carousel-".concat(lastCarouselId++);
|
|
11
|
+
}
|
|
12
|
+
export function createCarouselComponent(_ref) {
|
|
13
|
+
var createElement = _ref.createElement;
|
|
14
|
+
return function Carousel(userProps) {
|
|
15
|
+
var listRef = userProps.listRef,
|
|
16
|
+
nextButtonRef = userProps.nextButtonRef,
|
|
17
|
+
previousButtonRef = userProps.previousButtonRef,
|
|
18
|
+
carouselIdRef = userProps.carouselIdRef,
|
|
19
|
+
_userProps$classNames = userProps.classNames,
|
|
20
|
+
classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
|
|
21
|
+
ItemComponent = userProps.itemComponent,
|
|
22
|
+
items = userProps.items,
|
|
23
|
+
userTranslations = userProps.translations,
|
|
24
|
+
props = _objectWithoutProperties(userProps, _excluded);
|
|
25
|
+
var translations = _objectSpread({
|
|
26
|
+
listLabel: 'Items',
|
|
27
|
+
nextButtonLabel: 'Next',
|
|
28
|
+
nextButtonTitle: 'Next',
|
|
29
|
+
previousButtonLabel: 'Previous',
|
|
30
|
+
previousButtonTitle: 'Previous'
|
|
31
|
+
}, userTranslations);
|
|
32
|
+
var cssClasses = {
|
|
33
|
+
root: cx('ais-Carousel', classNames.root),
|
|
34
|
+
list: cx('ais-Carousel-list', classNames.list),
|
|
35
|
+
item: cx('ais-Carousel-item', classNames.item),
|
|
36
|
+
navigation: cx('ais-Carousel-navigation', classNames.navigation),
|
|
37
|
+
navigationNext: cx('ais-Carousel-navigation--next', classNames.navigationNext),
|
|
38
|
+
navigationPrevious: cx('ais-Carousel-navigation--previous', classNames.navigationPrevious)
|
|
39
|
+
};
|
|
40
|
+
function scrollLeft() {
|
|
41
|
+
if (listRef.current) {
|
|
42
|
+
listRef.current.scrollLeft -= listRef.current.offsetWidth * 0.75;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
function scrollRight() {
|
|
46
|
+
if (listRef.current) {
|
|
47
|
+
listRef.current.scrollLeft += listRef.current.offsetWidth * 0.75;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
function updateNavigationButtonsProps() {
|
|
51
|
+
if (!listRef.current || !previousButtonRef.current || !nextButtonRef.current) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
previousButtonRef.current.hidden = listRef.current.scrollLeft <= 0;
|
|
55
|
+
nextButtonRef.current.hidden = listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth;
|
|
56
|
+
}
|
|
57
|
+
if (items.length === 0) {
|
|
58
|
+
return null;
|
|
59
|
+
}
|
|
60
|
+
return createElement("div", _extends({}, props, {
|
|
61
|
+
className: cx(cssClasses.root)
|
|
62
|
+
}), createElement("button", {
|
|
63
|
+
ref: previousButtonRef,
|
|
64
|
+
title: translations.previousButtonTitle,
|
|
65
|
+
"aria-label": translations.previousButtonLabel,
|
|
66
|
+
hidden: true,
|
|
67
|
+
"aria-controls": carouselIdRef.current,
|
|
68
|
+
className: cx(cssClasses.navigation, cssClasses.navigationPrevious),
|
|
69
|
+
onClick: function onClick(event) {
|
|
70
|
+
event.preventDefault();
|
|
71
|
+
scrollLeft();
|
|
72
|
+
}
|
|
73
|
+
}, createElement("svg", {
|
|
74
|
+
width: "8",
|
|
75
|
+
height: "16",
|
|
76
|
+
viewBox: "0 0 8 16",
|
|
77
|
+
fill: "none"
|
|
78
|
+
}, createElement("path", {
|
|
79
|
+
fillRule: "evenodd",
|
|
80
|
+
clipRule: "evenodd",
|
|
81
|
+
fill: "currentColor",
|
|
82
|
+
d: "M7.13809 0.744078C7.39844 1.06951 7.39844 1.59715 7.13809 1.92259L2.27616 8L7.13809 14.0774C7.39844 14.4028 7.39844 14.9305 7.13809 15.2559C6.87774 15.5814 6.45563 15.5814 6.19528 15.2559L0.861949 8.58926C0.6016 8.26382 0.6016 7.73618 0.861949 7.41074L6.19528 0.744078C6.45563 0.418641 6.87774 0.418641 7.13809 0.744078Z"
|
|
83
|
+
}))), createElement("ol", {
|
|
84
|
+
className: cx(cssClasses.list),
|
|
85
|
+
ref: listRef,
|
|
86
|
+
tabIndex: 0,
|
|
87
|
+
id: carouselIdRef.current,
|
|
88
|
+
"aria-roledescription": "carousel",
|
|
89
|
+
"aria-label": translations.listLabel,
|
|
90
|
+
"aria-live": "polite",
|
|
91
|
+
onScroll: updateNavigationButtonsProps,
|
|
92
|
+
onKeyDown: function onKeyDown(event) {
|
|
93
|
+
if (event.key === 'ArrowLeft') {
|
|
94
|
+
event.preventDefault();
|
|
95
|
+
scrollLeft();
|
|
96
|
+
} else if (event.key === 'ArrowRight') {
|
|
97
|
+
event.preventDefault();
|
|
98
|
+
scrollRight();
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}, items.map(function (item, index) {
|
|
102
|
+
return createElement("li", {
|
|
103
|
+
key: item.objectID,
|
|
104
|
+
className: cx(cssClasses.item),
|
|
105
|
+
"aria-roledescription": "slide",
|
|
106
|
+
"aria-label": "".concat(index + 1, " of ").concat(items.length)
|
|
107
|
+
}, createElement(ItemComponent, {
|
|
108
|
+
item: item
|
|
109
|
+
}));
|
|
110
|
+
})), createElement("button", {
|
|
111
|
+
ref: nextButtonRef,
|
|
112
|
+
title: translations.nextButtonTitle,
|
|
113
|
+
"aria-label": translations.nextButtonLabel,
|
|
114
|
+
"aria-controls": carouselIdRef.current,
|
|
115
|
+
className: cx(cssClasses.navigation, cssClasses.navigationNext),
|
|
116
|
+
onClick: function onClick(event) {
|
|
117
|
+
event.preventDefault();
|
|
118
|
+
scrollRight();
|
|
119
|
+
}
|
|
120
|
+
}, createElement("svg", {
|
|
121
|
+
width: "8",
|
|
122
|
+
height: "16",
|
|
123
|
+
viewBox: "0 0 8 16",
|
|
124
|
+
fill: "none"
|
|
125
|
+
}, createElement("path", {
|
|
126
|
+
fillRule: "evenodd",
|
|
127
|
+
clipRule: "evenodd",
|
|
128
|
+
fill: "currentColor",
|
|
129
|
+
d: "M0.861908 15.2559C0.601559 14.9305 0.601559 14.4028 0.861908 14.0774L5.72384 8L0.861908 1.92259C0.601559 1.59715 0.601559 1.06952 0.861908 0.744079C1.12226 0.418642 1.54437 0.418642 1.80472 0.744079L7.13805 7.41074C7.3984 7.73618 7.3984 8.26382 7.13805 8.58926L1.80472 15.2559C1.54437 15.5814 1.12226 15.5814 0.861908 15.2559Z"
|
|
130
|
+
}))));
|
|
131
|
+
};
|
|
132
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/** @jsx createElement */
|
|
2
2
|
import type { Renderer, ComponentProps, RecommendComponentProps } from '../types';
|
|
3
3
|
export type FrequentlyBoughtTogetherProps<TObject, TComponentProps extends Record<string, unknown> = Record<string, unknown>> = ComponentProps<'div'> & RecommendComponentProps<TObject, TComponentProps>;
|
|
4
|
-
export declare function createFrequentlyBoughtTogetherComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: FrequentlyBoughtTogetherProps<TObject
|
|
4
|
+
export declare function createFrequentlyBoughtTogetherComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: FrequentlyBoughtTogetherProps<TObject>) => JSX.Element;
|
|
@@ -1,19 +1,8 @@
|
|
|
1
1
|
import type { ComponentProps, Renderer, SendEventForHits } from '../types';
|
|
2
|
+
import type { Banner } from 'algoliasearch-helper';
|
|
2
3
|
type Hit = Record<string, unknown> & {
|
|
3
4
|
objectID: string;
|
|
4
5
|
};
|
|
5
|
-
type Banner = {
|
|
6
|
-
image: {
|
|
7
|
-
urls: Array<{
|
|
8
|
-
url: string;
|
|
9
|
-
}>;
|
|
10
|
-
title?: string;
|
|
11
|
-
};
|
|
12
|
-
link?: {
|
|
13
|
-
url: string;
|
|
14
|
-
target?: '_blank' | '_self';
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
6
|
export type HitsProps<THit> = ComponentProps<'div'> & {
|
|
18
7
|
hits: THit[];
|
|
19
8
|
itemComponent: (props: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/** @jsx createElement */
|
|
2
2
|
import type { ComponentProps, RecommendComponentProps, Renderer } from '../types';
|
|
3
3
|
export type LookingSimilarProps<TObject, TComponentProps extends Record<string, unknown> = Record<string, unknown>> = ComponentProps<'div'> & RecommendComponentProps<TObject, TComponentProps>;
|
|
4
|
-
export declare function createLookingSimilarComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: LookingSimilarProps<TObject
|
|
4
|
+
export declare function createLookingSimilarComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: LookingSimilarProps<TObject>) => JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/** @jsx createElement */
|
|
2
2
|
import type { ComponentProps, RecommendComponentProps, Renderer } from '../types';
|
|
3
3
|
export type RelatedProductsProps<TObject, TComponentProps extends Record<string, unknown> = Record<string, unknown>> = ComponentProps<'div'> & RecommendComponentProps<TObject, TComponentProps>;
|
|
4
|
-
export declare function createRelatedProductsComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: RelatedProductsProps<TObject
|
|
4
|
+
export declare function createRelatedProductsComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: RelatedProductsProps<TObject>) => JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/** @jsx createElement */
|
|
2
2
|
import type { ComponentProps, RecommendComponentProps, Renderer } from '../types';
|
|
3
3
|
export type TrendingItemsProps<TObject, TComponentProps extends Record<string, unknown> = Record<string, unknown>> = ComponentProps<'div'> & RecommendComponentProps<TObject, TComponentProps>;
|
|
4
|
-
export declare function createTrendingItemsComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: TrendingItemsProps<TObject
|
|
4
|
+
export declare function createTrendingItemsComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: TrendingItemsProps<TObject>) => JSX.Element;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
export * from './Carousel';
|
|
1
2
|
export * from './FrequentlyBoughtTogether';
|
|
2
3
|
export * from './Highlight';
|
|
3
4
|
export * from './Hits';
|
|
5
|
+
export * from './LookingSimilar';
|
|
4
6
|
export * from './RelatedProducts';
|
|
5
7
|
export * from './TrendingItems';
|
|
6
|
-
export * from './LookingSimilar';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
export * from "./Carousel.js";
|
|
1
2
|
export * from "./FrequentlyBoughtTogether.js";
|
|
2
3
|
export * from "./Highlight.js";
|
|
3
4
|
export * from "./Hits.js";
|
|
5
|
+
export * from "./LookingSimilar.js";
|
|
4
6
|
export * from "./RelatedProducts.js";
|
|
5
|
-
export * from "./TrendingItems.js";
|
|
6
|
-
export * from "./LookingSimilar.js";
|
|
7
|
+
export * from "./TrendingItems.js";
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
export function createDefaultEmptyComponent(_ref) {
|
|
2
2
|
var createElement = _ref.createElement,
|
|
3
3
|
Fragment = _ref.Fragment;
|
|
4
|
-
var _ref2 = createElement(Fragment, null, "No results");
|
|
5
4
|
return function DefaultEmpty() {
|
|
6
|
-
return
|
|
5
|
+
return createElement(Fragment, null, "No results");
|
|
7
6
|
};
|
|
8
7
|
}
|
|
@@ -19,6 +19,9 @@ export type ElementType<TProps = any> = {
|
|
|
19
19
|
[TKey in keyof IntrinsicElements]: TProps extends IntrinsicElements[TKey] ? TKey : never;
|
|
20
20
|
}[keyof IntrinsicElements] | FunctionComponent<TProps>;
|
|
21
21
|
export type ComponentProps<TComponent extends keyof IntrinsicElements> = IntrinsicElements[TComponent];
|
|
22
|
+
export type MutableRef<T> = {
|
|
23
|
+
current: T;
|
|
24
|
+
};
|
|
22
25
|
export type VNode<TProps = any> = {
|
|
23
26
|
type: any;
|
|
24
27
|
props: TProps & {
|
package/dist/es/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: "0.
|
|
1
|
+
declare const _default: "0.8.0";
|
|
2
2
|
export default _default;
|
package/dist/es/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default '0.
|
|
1
|
+
export default '0.8.0';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "instantsearch-ui-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "Common UI components for InstantSearch.",
|
|
5
5
|
"types": "dist/es/index.d.ts",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"scripts": {
|
|
40
40
|
"clean": "rm -rf dist",
|
|
41
41
|
"build": "yarn build:cjs && yarn build:es && yarn build:types",
|
|
42
|
-
"build:es:base": "BABEL_ENV=es babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/es --ignore '**/__tests__/**/*','**/__mocks__/**/*'",
|
|
42
|
+
"build:es:base": "BABEL_ENV=es,disableHoisting babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/es --ignore '**/__tests__/**/*','**/__mocks__/**/*'",
|
|
43
43
|
"build:es": "yarn build:es:base --quiet",
|
|
44
|
-
"build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/cjs --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet && ../../scripts/prepare-cjs.sh",
|
|
44
|
+
"build:cjs": "BABEL_ENV=cjs,disableHoisting babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/cjs --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet && ../../scripts/prepare-cjs.sh",
|
|
45
45
|
"build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/es",
|
|
46
46
|
"version": "./scripts/version.cjs",
|
|
47
47
|
"watch:es": "yarn --silent build:es:base --watch"
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@babel/runtime": "^7.1.2"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "86b33c675f38136d4ef3479891edc21338614b40"
|
|
53
53
|
}
|