@sheetxl/studio-vanilla
Version:
SheetXL Studio - Vanilla entry point for integrating SheetXL UI.
51 lines (50 loc) • 3.73 kB
JavaScript
import { a as o } from "./DrQ2E12IEJK6WHfw.js";
import { r as s } from "./BTLmGxC1eZDXb9cY.js";
import { Y as p, K, a0 as n, Z as L, B as j, a1 as O, a2 as R, a3 as W, x as c, A as u, v as A, J as S, a4 as G } from "./elB9a338Kjeh3S89.js";
/**
* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.7.27
*
* (C) 2025-present SheetXL Inc. & Michael T. Ford
* License: The license can be found at https://www.sheetxl.com/license.
*/
const H = ["Ok", "Cancel"], q = s.memo((F) => {
const { initialValue: w, context: f, onOption: h, onValidateOption: d, onInput: C, onDone: m, options: b = H, defaultOption: r = b?.[0], cancelOption: g = "Cancel", sx: D, ...P } = F, [t, v] = s.useState(w), [$, I] = s.useState(!1), x = s.useCallback(async (a, e) => !0, []), y = p(async (a) => {
const e = a === g;
e || C?.(t, a), h?.(a, e, a === r), m?.();
}, [t, C, m, h, g, r]), M = p(async (a) => {
a.keyCode === K.Enter && await x?.(t, null) !== !1 && y(r);
}, [t, y]), N = p((a) => {
v(a.target.value), x?.(a.target.value, null);
}, [d]), V = p(async (a) => {
let e = await Promise.resolve(d?.(a));
try {
e !== !1 && (e = await Promise.resolve(x?.(t, a)) ?? !0);
} catch {
}
return e ?? !0;
}, [d]), [k, T] = s.useState(n.Styles.lookupStyle(t).formatType ?? n.Type.Custom);
s.useEffect(() => {
T(n.Styles.lookupStyle(t).formatType ?? n.Type.Custom);
}, [t]);
const B = s.useMemo(() => {
const a = n.Styles.lookupPrimary(), e = (i) => o.jsx(G, { value: i, children: i }, i), l = Object.keys(a).map((i) => e(a[i].formatType));
return l.push(e(n.Type.Custom)), l;
}, []), z = s.useCallback((a) => {
const e = a.target.value;
T(e);
const l = n.Styles.lookupDefault(e);
l && v(l);
}, []), E = s.useMemo(() => {
const a = f?.();
return a ? a.createTemporaryCell({ value: a.getValue() ?? 12345, style: { numberFormat: t } }) : null;
}, [k, t, f]);
return o.jsx(L, { title: "Number Format", options: b, onDone: m, onOption: (a) => y(a), onValidateOption: V, defaultOption: r, cancelOption: g, autoFocusSel: ".autoFocus", sx: { width: "580px", ...D }, ...P, children: o.jsxs(j, { sx: { paddingTop: (a) => a.spacing(1), paddingBottom: (a) => a.spacing(0), rowGap: (a) => a.spacing(1), display: "flex", flexDirection: "column" }, children: [o.jsxs(O, { sx: { minWidth: 135 }, size: "small", children: [o.jsx(R, { children: "Category" }), o.jsx(W, { value: k, label: "Category", onChange: z, sx: { backgroundImage: `linear-gradient(${c("#fff", u(5))}, ${c("#fff", u(5))})` }, children: B })] }), o.jsx(O, { sx: { paddingTop: (a) => a.spacing(1.5), minWidth: 135, width: "100%" }, size: "small", children: o.jsx(A, { label: "Code", onFocus: (a) => {
$ || a.target?.select(), I(!0);
}, sx: { "& .MuiFormHelperText-root": { marginTop: (a) => a.spacing(0.5) } }, slotProps: { inputLabel: { shrink: !0 }, htmlInput: { className: "autoFocus", spellCheck: !1, autoComplete: "off", sx: { paddingTop: (a) => a.spacing(1.25), paddingBottom: (a) => a.spacing(0.75), backgroundImage: `linear-gradient(${c("#fff", u(5))}, ${c("#fff", u(5))})` } } }, value: t, onChange: N, onKeyDown: M, onContextMenu: (a) => {
a.stopPropagation();
} }) }), o.jsxs(j, { children: [o.jsx(S, { variant: "caption", component: "div", sx: { paddingLeft: (a) => a.spacing(2) }, children: "Preview" }), o.jsx(S, { variant: "body2", component: "div", sx: { borderRadius: (a) => `${a.shape.borderRadius}px`, padding: (a) => a.spacing(1), border: (a) => `1px solid ${a.palette.grey[400]}` }, children: E?.getNumberFormat().displayText || "(empty)" })] })] }) });
});
export {
q as NumberFormatDialog,
q as default
};