xtreme-ui
Version:
Collection of reusable components that can be used in web projects
68 lines (67 loc) • 2.2 kB
JavaScript
"use client";
import { jsxs as E, jsx as c } from "react/jsx-runtime";
import { forwardRef as N, useMemo as a } from "react";
import O from "clsx";
import { Button as d } from "../../base/Button/Button.js";
import { Select as g } from "../../base/Select/Select.js";
import { useXTheme as v } from "../../context/useContext.js";
import { useScreenType as w } from "../../hooks/useScreen.js";
import { isValidThemeColor as j, getColorLabel as I } from "../../../utils/helper/colorHelper.js";
import { ThemeColorsPreset as u, THEME_SCHEME as m } from "../../../utils/constants/theme.js";
/* empty css */
const L = Object.entries(u).map(([r, n]) => ({
label: r.charAt(0).toUpperCase() + r.slice(1),
value: n
})), h = Object.values(u), H = N((r, n) => {
const { className: C, type: b = "secondary", size: i = "default", iconType: l = "solid" } = r, { themeScheme: e, setThemeScheme: x, themeColor: t, setThemeColor: f } = v(), s = w(), p = a(() => m[(m.findIndex((o) => o.name === e) + 1) % m.length], [e]), S = a(() => {
var o;
return ((o = m.find((M) => M.name === e)) == null ? void 0 : o.icon) ?? "";
}, [e]), T = a(() => h[(h.findIndex((o) => o === t) + 1) % h.length], [t]), y = O(
"xtrThemeSwitch",
C,
!s.isMobile && "withLabel"
);
return !e || !j(t) ? null : /* @__PURE__ */ E("div", { ref: n, className: y, children: [
/* @__PURE__ */ c(
d,
{
className: "xtrThemeScheme",
type: b,
size: i,
icon: S,
iconType: l,
label: s.isMobile ? void 0 : e,
onClick: () => p.name && x(p.name)
}
),
s.isLargest ? /* @__PURE__ */ c(
g,
{
clearable: !1,
searchable: !1,
size: i,
icon: "f53f",
iconType: l,
placeholder: "Theme",
options: L,
value: t,
onChange: f
}
) : /* @__PURE__ */ c(
d,
{
className: "xtrThemeColor",
type: "primary",
size: i,
icon: "f53f",
iconType: l,
label: s.isMobile ? void 0 : I(t),
onClick: () => T && f(T)
}
)
] });
});
H.displayName = "ThemeSwitch";
export {
H as ThemeSwitch
};