@sheetxl/studio-vanilla
Version:
SheetXL Studio - Vanilla entry point for integrating SheetXL UI.
45 lines (44 loc) • 3.58 kB
JavaScript
import { r as a, E as B, z as l, K as R, j as s, A as V, B as j, M as P, k as A, l as u, p as c, P as E, S as H, q as K, Q as L } from "./Bf37sZn7h1jSr98w.mjs";
/**
* @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 N = ["Autofit", "Ok", "Cancel"], q = a.memo((b) => {
const { initialValue: v, context: i, onOption: y, onValidateOption: p, onInput: z, onDone: d, options: C = N, defaultOption: r = C?.[1], cancelOption: x = "Cancel", sx: w, ...k } = b, M = a.useMemo(() => i?.().getOrientation() === B.Orientation.Column, [i]), [t, O] = a.useState(v), [T, D] = a.useState(!1), g = a.useCallback(async (n, e) => !0, []), m = a.useMemo(() => {
if (!i().toUnits) return null;
let n = t?.size ?? 0, e = "Px";
return t.unit === "Px" ? (n = i().toUnits?.(n), e = i().getUnitText()) : (n = i().toPixels?.(n), e = "Px"), { size: n, unit: e };
}, [t?.unit, t?.size]), f = l(async (n) => {
const e = n === x;
e || z?.(t, n), y?.(n, e, n === r), d?.();
}, [t, z, d, y, x, r]), U = l(async (n) => {
n.keyCode === R.Enter && await g?.(t, null) !== !1 && f(r);
}, [t, f]), F = l(async (n) => {
let e = await Promise.resolve(p?.(n));
try {
e !== !1 && (e = await Promise.resolve(g?.(t, n)) ?? !0);
} catch {
}
return e ?? !0;
}, [p]), I = l((n) => {
const e = { ...t, size: Number(n.target.value) };
O(e), g?.(e, null);
}, [t, p]), S = l((n) => {
const e = n.target.value, o = { ...t, unit: e };
O(o);
}, [t]), $ = a.useMemo(() => {
const n = i().getUnitText(), e = (h) => s.jsx(L, { value: h, children: h }, h), o = [];
return o.push(e("Px")), o.push(e(n)), o;
}, []);
return s.jsx(V, { title: "Resize " + (M ? "Columns" : "Rows"), options: C, onDone: d, onOption: (n) => f(n), onValidateOption: F, defaultOption: r, cancelOption: x, autoFocusSel: ".autoFocus", sx: { width: "380px", ...w }, ...k, children: s.jsxs(j, { sx: { paddingTop: (n) => n.spacing(0), paddingBottom: (n) => n.spacing(1), display: "flex", flexDirection: "column" }, children: [s.jsxs(j, { sx: { rowGap: (n) => n.spacing(1), display: "flex", flexDirection: "row", gap: (n) => n.spacing(0.5), alignItems: "end", justifyContent: "center" }, children: [s.jsx(P, { sx: { paddingTop: (n) => n.spacing(1.5), minWidth: 135, width: "100%" }, size: "small", children: s.jsx(A, { label: "Size", onFocus: (n) => {
T || n.target?.select(), D(!0);
}, sx: { "& .MuiFormHelperText-root": { marginTop: (n) => n.spacing(0.5) } }, slotProps: { inputLabel: { shrink: !0 }, htmlInput: { className: "autoFocus", spellCheck: !1, autoComplete: "off", type: "number", inputMode: "numeric", pattern: "[0-9]*", sx: { paddingTop: (n) => n.spacing(1.25), paddingBottom: (n) => n.spacing(0.75), backgroundImage: `linear-gradient(${u("#fff", c(5))}, ${u("#fff", c(5))})` } } }, value: t.size, onChange: I, onKeyDown: U, onContextMenu: (n) => {
n.stopPropagation();
} }) }), s.jsxs(P, { sx: { minWidth: 85 }, size: "small", children: [s.jsx(E, { children: "Unit" }), s.jsx(H, { value: t.unit, label: "Unit", onChange: S, sx: { backgroundImage: `linear-gradient(${u("#fff", c(5))}, ${u("#fff", c(5))})` }, children: $ })] })] }), m && s.jsx(j, { children: s.jsxs(K, { variant: "body2", component: "div", sx: { paddingLeft: (n) => n.spacing(2) }, children: [m.size, " ", m.unit] }) })] }) });
});
export {
q as ResizeHeaderDialog,
q as default
};