@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.
112 lines (111 loc) • 3.8 kB
JavaScript
import { jsx as t, jsxs as K } from "react/jsx-runtime";
import { Search as x, Segment as O, Input as U } from "semantic-ui-react";
import h from "react";
import N from "clsx";
import { useKeyOnly as g, useValueAndKey as V, getUnhandledProps as q, partitionHTMLProps as G, htmlInputAttrs as J } from "../utils/semanticUtils.js";
import { injectIntl as Q, useIntl as W } from "react-intl";
import { utils as y } from "@devgateway/wp-react-lib";
const p = (s, n) => {
if (!n) return s;
const c = new RegExp(`(${n})`, "gi");
return s.replace(c, "<strong>$1</strong>");
}, X = Q(({
title: s,
slug: n,
parent_link: c,
extract: f,
link: m,
searchTerm: i,
metadata: r,
bread_crumbs: a = [],
intl: { locale: u }
}) => {
let l = c ? y.replaceLink(c, u) + `#${n}` : y.replaceLink(m, u);
l = r != null && r.redirect_url ? (r == null ? void 0 : r.redirect_url) + `#${n}` : l;
const S = p(String(s), i), d = p(f, i);
return /* @__PURE__ */ t("div", { className: "search-results-wrapper searching-results", style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ K("div", { className: "has-standard-12-font-size", onClick: () => document.location.href = l, children: [
/* @__PURE__ */ t(
"h5",
{
className: "breadcrumbs-search",
dangerouslySetInnerHTML: { __html: Array.isArray(a) && a.length > 0 ? p(a.join(" / "), i) : "" }
}
),
/* @__PURE__ */ t("div", { className: "has-standard-14-font-size", children: /* @__PURE__ */ t("h4", { className: "search-title", dangerouslySetInnerHTML: { __html: S } }) }),
/* @__PURE__ */ t(
"div",
{
className: "has-standard-12-font-size search-content",
dangerouslySetInnerHTML: { __html: y.replaceHTMLinks(d, u) }
}
)
] }) });
}), ce = (s) => {
const { results: n, onSearchChange: c, value: f, showNoResults: m, onResultSelect: i, loading: r, placeholder: a, perPage: u, total: l, searchTerm: S } = s, d = W(), [I, Y] = h.useState(""), [H, M] = h.useState(!1), [w, L] = h.useState(!1), P = n && n.length > 0 ? [{
isHeader: !0,
headerText: d.formatMessage({
id: "search.results.summary",
defaultMessage: "{count} of {} Results"
}, {
count: l < u ? l : u,
total: l
})
}, ...n] : [], R = () => {
const { perPage: e, total: o } = s, E = N(
"results header",
o === 1 && "single"
);
return /* @__PURE__ */ t(O, { basic: !0, textAlign: "left", className: E, children: d.formatMessage({
id: "search.results.summary",
defaultMessage: "{count} of {} Results"
}, {
count: o < e ? o : e,
total: o
}) });
}, v = (e) => e.isHeader ? R() : (console.log("res", e), /* @__PURE__ */ t(h.Fragment, { children: /* @__PURE__ */ t(X, { ...e, searchTerm: S }) })), F = (e) => /* @__PURE__ */ t(U, { icon: "search", placeholder: a, ...e }), T = (e, o) => {
M(!1), s.onBlur && s.onBlur(e, o);
}, z = (e, o) => {
M(!0), s.onFocus && s.onFocus(e, o);
}, A = (e) => {
L(!0), s.onMouseDown && s.onMouseDown(e);
}, { aligned: C, category: D, className: _, fluid: j, size: B } = s, $ = N(
"ui",
w && "active",
B,
I,
g(D, "category"),
g(H, "focus"),
g(j, "fluid"),
g(r, "loading"),
V(C, "aligned"),
"search",
_
), k = q(x, s), [Z, b] = G(k, {
htmlProps: J
});
return /* @__PURE__ */ t(
x,
{
...b,
className: $,
onBlur: T,
size: "mini",
aligned: "right",
placeholder: a,
onFocus: z,
onMouseDown: A,
resultRenderer: (e) => v(e),
onSearchChange: c,
results: P,
input: F(),
value: f,
showNoResults: m,
onResultSelect: i,
loading: r,
header: R()
}
);
};
export {
ce as default
};