@devgateway/dvz-ui-react
Version:
A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.
256 lines (255 loc) • 6.97 kB
JavaScript
import { jsx as n, jsxs as S, Fragment as L } from "react/jsx-runtime";
import { useState as v, useEffect as w, useContext as _, useRef as E } from "react";
import { utils as y, SearchProvider as T, SearchContext as b } from "@devgateway/wp-react-lib";
import z from "./CustomSemanticSearch.js";
import { createPortal as P } from "react-dom";
import { Icon as F } from "semantic-ui-react";
import { injectIntl as I, IntlProvider as j } from "react-intl";
const x = (o, t) => {
if (!o || !t) return o || "";
const a = new RegExp(`(${t})`, "gi");
return o.replace(a, "<strong>$1</strong>");
}, N = I(
({
ID: o,
title: t,
slug: a,
parent_title: l,
parent_slug: e,
parent_link: r,
extract: c,
type: i,
link: u,
terms: p,
subtype: f,
bread_crumbs: s = [],
metadata: h,
intl: { locale: g },
searchTerm: d
// Added searchTerm prop
}) => {
let m = r ? y.replaceLink(r, g) + `#${a}` : y.replaceLink(u, g);
const C = h == null ? void 0 : h.redirect_url;
m = C ? C + `#${a}` : m;
const M = x(String(t), d), R = x(c, d);
return /* @__PURE__ */ n(
"div",
{
className: "search-results-wrapper searching-results",
style: { display: "flex", flexDirection: "column" },
children: /* @__PURE__ */ S(
"div",
{
className: "has-standard-12-font-size",
onClick: (q) => document.location.href = m,
children: [
/* @__PURE__ */ n(
"h5",
{
className: "breadcrumbs-search",
dangerouslySetInnerHTML: {
__html: s && s.length > 0 ? x(s.join(" / "), d) : ""
}
}
),
/* @__PURE__ */ n("div", { className: "has-standard-14-font-size", children: /* @__PURE__ */ n(
"h4",
{
className: "search-title",
dangerouslySetInnerHTML: {
__html: M
}
}
) }),
/* @__PURE__ */ n(
"div",
{
className: "search-content",
dangerouslySetInnerHTML: {
__html: y.replaceHTMLinks(R, g)
}
}
)
]
}
)
}
);
}
), k = ({ results: o, meta: t, perPage: a, intl: l, searchTerm: e }) => {
const r = t ? t["x-wp-total"] : 0;
return t && t["x-wp-totalpages"], /* @__PURE__ */ S("div", { id: "float-results-container", children: [
/* @__PURE__ */ n("span", { className: "float-results-header", children: l.formatMessage(
{
id: "search.results.summary",
defaultMessage: "{count} of {total} Results"
},
{ count: r < a ? r : a, total: r }
) }),
o.map((c) => /* @__PURE__ */ n(N, { ...c, searchTerm: e }, c.ID))
] });
}, D = ({
onSearch: o,
perPage: t,
loading: a,
results: l,
meta: e,
intl: r
}) => (e && e["x-wp-total"], e && e["x-wp-totalpages"], /* @__PURE__ */ n(
"input",
{
placeholder: r.formatMessage({
id: "search.placeholder",
defaultMessage: "Search..."
}),
type: "text",
className: "input search",
name: "search",
onChange: (c) => {
o(c.target.value);
}
}
)), H = ({
onSearch: o,
onSetSelected: t,
perPage: a,
loading: l,
results: e,
meta: r,
locale: c,
intl: i,
searchTerm: u
// Added search from SearchConsumer
}) => {
const [p, f] = v(!1), s = E(null);
w(() => {
const d = document.createElement("div");
d.setAttribute("id", "float-input-container"), d.setAttribute("class", "input container"), d.style.display = "none";
const m = document.getElementById("root");
return m && (m.appendChild(d), s.current = d), () => {
s.current && s.current.parentNode && s.current.parentNode.removeChild(s.current);
};
}, []), w(() => {
s.current && (s.current.style.display = p ? "block" : "none");
}, [p]);
const h = () => {
t(null), f(!0);
}, g = () => {
f(!1);
};
return /* @__PURE__ */ S(L, { children: [
/* @__PURE__ */ n(
"div",
{
id: "ui-float-search",
className: "ui float-search",
onMouseOver: h,
children: /* @__PURE__ */ n(F, { name: "search", size: "small" })
}
),
s.current && P(
p ? /* @__PURE__ */ S("div", { onMouseLeave: g, children: [
/* @__PURE__ */ n("div", { className: "float-search-container", children: /* @__PURE__ */ n(
D,
{
onSearch: o,
perPage: a,
loading: l,
results: e,
meta: r,
intl: i,
searchTerm: u
}
) }),
e && e.length > 0 && /* @__PURE__ */ n(j, { locale: c, children: /* @__PURE__ */ n(
k,
{
results: e,
meta: r,
perPage: a,
intl: i,
searchTerm: u
}
) })
] }) : null,
s.current
)
] });
}, $ = ({ onSearch: o, perPage: t, loading: a, results: l, meta: e, intl: r }) => {
const c = e ? e["x-wp-total"] : 0, i = e ? e["x-wp-totalpages"] : 0, [u, p] = v("");
w(() => {
const s = setTimeout(() => {
o(u);
}, 300);
return () => clearTimeout(s);
}, [u]);
const f = (s) => /* @__PURE__ */ n(N, { ...s, searchTerm: u });
return /* @__PURE__ */ n(
z,
{
value: u,
loading: a,
placeholder: r.formatMessage({
id: "search.placeholder",
defaultMessage: "Search..."
}),
onResultSelect: (s, h) => null,
total: c,
perPage: t,
totalPages: i,
onSearchChange: (s, h) => {
p(h.value);
},
resultRenderer: f,
results: l,
showNoResults: !1,
intl: r,
searchTerm: u
}
);
}, U = I((o) => {
const { intl: t, onSetSelected: a } = o, [l, e] = v(""), [r, c] = v(!1);
return w(() => {
const i = () => {
c(window.innerWidth <= 1365);
};
return i(), window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
}, []), /* @__PURE__ */ n(T, { search: l, perPage: 5, locale: t.locale, children: /* @__PURE__ */ n(
A,
{
...o,
onSetSelected: a,
setQuery: e,
query: l,
isSmallScreen: r,
intl: t
}
) });
}), A = ({ onSetSelected: o, setQuery: t, query: a, isSmallScreen: l, intl: e, ...r }) => {
const c = _(b);
return r.settings.react_search_type === "floating" || l ? /* @__PURE__ */ n(
H,
{
onSetSelected: o,
onSearch: t,
perPage: 5,
intl: e,
...r,
...c,
searchTerm: a
}
) : /* @__PURE__ */ n(
$,
{
onSetSelected: o,
onSearch: t,
perPage: 5,
intl: e,
...r,
...c
}
);
};
export {
U as default
};