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