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