instantsearch-ui-components
Version:
Common UI components for InstantSearch.
173 lines (171 loc) • 9.23 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: Object.getOwnPropertyDescriptor(all, name).get
});
}
_export(exports, {
get AiModeIcon () {
return AiModeIcon;
},
get ApplyIcon () {
return ApplyIcon;
},
get BackIcon () {
return BackIcon;
},
get ClearIcon () {
return ClearIcon;
},
get ClockIcon () {
return ClockIcon;
},
get LoadingIcon () {
return LoadingIcon;
},
get SearchIcon () {
return SearchIcon;
},
get SubmitIcon () {
return SubmitIcon;
},
get TrashIcon () {
return TrashIcon;
}
});
var _cx = require("../../lib/cx");
// WebKit can keep this SVG spinner animating while the loading slot is hidden (`hidden` / not stalled),
// which wastes work. We pause SMIL when idle and unpause when `isSearchStalled`.
// Same approach as autocomplete-js.
// https://github.com/algolia/autocomplete/issues/1322
function syncLoadingSvgAnimation(element, isSearchStalled) {
if (!element || typeof element.pauseAnimations !== 'function' || typeof element.unpauseAnimations !== 'function') {
return;
}
if (isSearchStalled) {
element.unpauseAnimations();
} else {
element.pauseAnimations();
}
}
function SubmitIcon(param) {
var createElement = param.createElement, className = param.className;
return /*#__PURE__*/ createElement("svg", {
className: (0, _cx.cx)('ais-AutocompleteSubmitIcon', className),
viewBox: "0 0 24 24",
fill: "currentColor"
}, /*#__PURE__*/ createElement("path", {
d: "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
}));
}
function LoadingIcon(param) {
var createElement = param.createElement, isSearchStalled = param.isSearchStalled, className = param.className;
return /*#__PURE__*/ createElement("svg", {
className: (0, _cx.cx)('ais-AutocompleteLoadingIcon', className),
viewBox: "0 0 100 100",
ref: function ref(element) {
return syncLoadingSvgAnimation(element, isSearchStalled);
}
}, /*#__PURE__*/ createElement("circle", {
cx: "50",
cy: "50",
fill: "none",
r: "35",
stroke: "currentColor",
strokeDasharray: "164.93361431346415 56.97787143782138",
strokeWidth: "6"
}, /*#__PURE__*/ createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
repeatCount: "indefinite",
dur: "1s",
values: "0 50 50;90 50 50;180 50 50;360 50 50",
keyTimes: "0;0.40;0.65;1"
})));
}
function ClearIcon(param) {
var createElement = param.createElement, className = param.className;
return /*#__PURE__*/ createElement("svg", {
className: (0, _cx.cx)('ais-AutocompleteClearIcon', className),
viewBox: "0 0 24 24",
fill: "currentColor"
}, /*#__PURE__*/ createElement("path", {
d: "M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
}));
}
function ClockIcon(param) {
var createElement = param.createElement, className = param.className;
return /*#__PURE__*/ createElement("svg", {
className: (0, _cx.cx)(className) || undefined,
viewBox: "0 0 24 24",
fill: "currentColor"
}, /*#__PURE__*/ createElement("path", {
d: "M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
}));
}
function TrashIcon(param) {
var createElement = param.createElement, className = param.className;
return /*#__PURE__*/ createElement("svg", {
className: (0, _cx.cx)(className) || undefined,
viewBox: "0 0 24 24",
fill: "currentColor"
}, /*#__PURE__*/ createElement("path", {
d: "M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1zM9 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1z"
}));
}
function ApplyIcon(param) {
var createElement = param.createElement, className = param.className;
return /*#__PURE__*/ createElement("svg", {
className: (0, _cx.cx)(className) || undefined,
viewBox: "0 0 24 24",
fill: "currentColor"
}, /*#__PURE__*/ createElement("path", {
d: "M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
}));
}
function AiModeIcon(param) {
var createElement = param.createElement, className = param.className;
return /*#__PURE__*/ createElement("svg", {
className: (0, _cx.cx)('ais-AiModeButton-icon', className),
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 20 20",
width: "16",
height: "16",
"aria-hidden": "true"
}, /*#__PURE__*/ createElement("path", {
fill: "currentColor",
fillRule: "evenodd",
d: "M10 1.875c.27 0 .51.173.594.43l1.593 4.844a1.043 1.043 0 0 0 .664.664l4.844 1.593a.625.625 0 0 1 0 1.188l-4.844 1.593a1.043 1.043 0 0 0-.664.664l-1.593 4.844a.625.625 0 0 1-1.188 0l-1.593-4.844a1.042 1.042 0 0 0-.664-.664l-4.844-1.593a.625.625 0 0 1 0-1.188l4.844-1.593a1.042 1.042 0 0 0 .664-.664l1.593-4.844a.625.625 0 0 1 .594-.43ZM9 7.539A2.292 2.292 0 0 1 7.54 9L4.5 10l3.04 1A2.292 2.292 0 0 1 9 12.46l1 3.04 1-3.04A2.293 2.293 0 0 1 12.46 11l3.04-1-3.04-1A2.292 2.292 0 0 1 11 7.54L10 4.5 9 7.54ZM4.167 1.875c.345 0 .625.28.625.625v3.333a.625.625 0 0 1-1.25 0V2.5c0-.345.28-.625.625-.625ZM15.833 13.542c.345 0 .625.28.625.625V17.5a.625.625 0 1 1-1.25 0v-3.333c0-.345.28-.625.625-.625Z",
clipRule: "evenodd"
}), /*#__PURE__*/ createElement("path", {
fill: "currentColor",
fillRule: "evenodd",
d: "M1.875 4.167c0-.346.28-.625.625-.625h3.333a.625.625 0 1 1 0 1.25H2.5a.625.625 0 0 1-.625-.625ZM13.542 15.833c0-.345.28-.625.625-.625H17.5a.625.625 0 0 1 0 1.25h-3.333a.625.625 0 0 1-.625-.625Z",
clipRule: "evenodd"
}));
}
function SearchIcon(param) {
var createElement = param.createElement, className = param.className;
return /*#__PURE__*/ createElement("svg", {
className: (0, _cx.cx)('ais-AutocompleteDetachedSearchIcon', className),
viewBox: "0 0 24 24",
fill: "currentColor"
}, /*#__PURE__*/ createElement("path", {
d: "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
}));
}
function BackIcon(param) {
var createElement = param.createElement, className = param.className;
return /*#__PURE__*/ createElement("svg", {
className: (0, _cx.cx)('ais-AutocompleteBackIcon', className),
viewBox: "0 0 24 24",
fill: "currentColor"
}, /*#__PURE__*/ createElement("path", {
d: "M9.828 11H21a1 1 0 110 2H9.828l3.586 3.586a1 1 0 01-1.414 1.414l-5.3-5.3a1 1 0 010-1.414l5.3-5.3a1 1 0 111.414 1.414L9.828 11z"
}));
}