@progress/kendo-react-spreadsheet
Version:
KendoReact Spreadsheet package
146 lines (145 loc) • 4.43 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as c from "react";
import { DropDownButton as v } from "@progress/kendo-react-buttons";
import { IconWrap as x } from "@progress/kendo-react-common";
import { alignLeftIcon as f, caretAltDownIcon as I, alignCenterIcon as h, alignRightIcon as L, alignJustifyIcon as z, alignTopIcon as b, alignMiddleIcon as k, alignBottomIcon as A } from "@progress/kendo-svg-icons";
import { useLocalization as K } from "@progress/kendo-react-intl";
import { messages as u, keys as n } from "../messages.mjs";
const i = [
{
icon: "align-left",
svgIcon: f,
textKey: n.alignLeft,
commandName: "textAlign",
value: "left",
selected: !1
},
{
icon: "align-center",
svgIcon: h,
textKey: n.alignCenter,
commandName: "textAlign",
value: "center",
selected: !1
},
{
icon: "align-right",
svgIcon: L,
textKey: n.alignRight,
commandName: "textAlign",
value: "right",
selected: !1
},
{
icon: "align-justify",
svgIcon: z,
textKey: n.alignJustify,
commandName: "textAlign",
value: "justify",
selected: !1
},
{
icon: "align-top",
svgIcon: b,
textKey: n.alignTop,
commandName: "verticalAlign",
value: "top",
selected: !1
},
{
icon: "align-middle",
svgIcon: k,
textKey: n.alignMiddle,
commandName: "verticalAlign",
value: "center",
selected: !1
},
{
icon: "align-bottom",
svgIcon: A,
textKey: n.alignBottom,
commandName: "verticalAlign",
value: "bottom",
selected: !1
}
], H = [
i[0],
{ ...i[1], textKey: n.center },
i[2],
{ ...i[3], textKey: n.justify }
], R = i.filter((a) => a.commandName === "verticalAlign"), V = (a) => {
const { value: g, spreadsheetRef: r } = a, { textAlign: d, verticalAlign: m } = g || {}, s = K(), y = c.useCallback((e) => {
if (r.current) {
const o = e.item, l = {
command: "PropertyChangeCommand",
options: { property: o.commandName, value: o.value || null }
};
r.current.executeCommand(l);
}
}, []);
let t = i.slice();
return t = t.map((e) => ({ ...e, text: s.toLanguageString(e.textKey, u[e.textKey]) })), d && (t = t.map((e) => e.commandName === "textAlign" ? { ...e, selected: e.value === d } : e)), m && (t = t.map(
(e) => e.commandName === "verticalAlign" ? { ...e, selected: e.value === m } : e
)), /* @__PURE__ */ c.createElement(
v,
{
icon: "align-left",
svgIcon: f,
items: t,
fillMode: "flat",
onItemClick: y,
title: s.toLanguageString(n.align, u[n.align]),
text: /* @__PURE__ */ c.createElement(x, { name: "caret-alt-down", icon: I })
}
);
};
V.displayName = "Alignment";
const w = {
items: H,
icon: { icon: "align-left", svgIcon: f },
displayName: "AlignHorizontally",
titleKey: n.alignHorizontally
}, E = {
items: R,
icon: { icon: "align-bottom", svgIcon: A },
displayName: "AlignVertically",
titleKey: n.alignVertically
}, N = (a) => {
const g = (r) => {
const { value: d, spreadsheetRef: m } = r, s = K(), y = c.useCallback((l) => {
if (m.current) {
const p = l.item, C = {
command: "PropertyChangeCommand",
options: { property: p.commandName, value: p.value || null }
};
m.current.executeCommand(C);
}
}, []);
let t = a.items.slice();
t = t.map((l) => ({ ...l, text: s.toLanguageString(l.textKey, u[l.textKey]) })), t = t.map((l) => ({ ...l, selected: l.value === d }));
const e = { ...a.icon }, o = t.find((l) => l.selected);
return o && (e.icon = o.icon, e.svgIcon = o.svgIcon), /* @__PURE__ */ c.createElement(
v,
{
...e,
items: t,
fillMode: "flat",
onItemClick: y,
title: s.toLanguageString(a.titleKey, u[a.titleKey]),
text: /* @__PURE__ */ c.createElement(x, { name: "caret-alt-down", icon: I })
}
);
};
return g.displayName = a.displayName, g;
}, D = N(w), J = N(E);
export {
D as AlignHorizontally,
J as AlignVertically,
V as Alignment
};