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