@progress/kendo-react-spreadsheet
Version:
KendoReact Spreadsheet package
262 lines (261 loc) • 8.38 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 t from "react";
import { Button as L } from "@progress/kendo-react-buttons";
import { classNames as w, useId as U, IconWrap as B } from "@progress/kendo-react-common";
import { Sortable as A } from "@progress/kendo-react-sortable";
import { plusIcon as F, xIcon as M } from "@progress/kendo-svg-icons";
import { useLocalization as H } from "@progress/kendo-react-intl";
import { keys as I, messages as K } from "./messages.mjs";
const W = {
onSelect: () => {
},
onDelete: () => {
},
onEnterEdit: () => {
},
onCancelEdit: () => {
},
onExitEdit: () => {
},
onEdit: () => {
}
}, N = t.createContext(W), z = (u) => {
const e = u.dataItem, { onSelect: l, onDelete: d, onEnterEdit: a, onExitEdit: h, onCancelEdit: o, onEdit: p } = t.useContext(N), b = t.useCallback(
(n) => {
n.target instanceof HTMLElement && n.target.nodeName === "INPUT" || l.call(void 0, e, n);
},
[e, l]
), v = t.useCallback(
(n) => {
d.call(void 0, e, n);
},
[e, d]
), x = t.useCallback(
(n) => {
n.target instanceof HTMLElement && n.target.nodeName === "INPUT" || a.call(void 0, e, n);
},
[e, a]
), S = t.useCallback(
(n) => {
h.call(void 0, e, n);
},
[e, h]
), C = t.useCallback(
(n) => {
n.key === "Enter" ? h.call(void 0, e, n) : n.key === "Escape" && o.call(void 0, e, n);
},
[e, h, o]
), r = t.useCallback(
(n) => {
p.call(void 0, { ...e, text: n.target.value }, n);
},
[e, p]
);
return /* @__PURE__ */ t.createElement(
"li",
{
style: u.style,
...u.attributes,
ref: u.forwardRef,
role: "tab",
className: w("k-item k-tabstrip-item", {
"k-disabled": u.isDisabled,
"k-active k-state-tab-on-top k-spreadsheet-sheets-bar-active": e.active,
"k-spreadsheet-sheets-bar-inactive": !e.active,
"k-first": e.first,
"k-last": e.last
}),
onClick: b,
onDoubleClick: x
},
e.inEdit ? /* @__PURE__ */ t.createElement(
"input",
{
type: "text",
className: "k-textbox k-spreadsheet-sheets-editor",
value: e.text,
onChange: r,
maxLength: 50,
autoFocus: !0,
onBlur: S,
onKeyDown: C
}
) : /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("span", { className: "k-link" }, e.text), e.first && e.last ? null : /* @__PURE__ */ t.createElement("span", { className: "k-link k-spreadsheet-sheets-remove", onClick: v }, /* @__PURE__ */ t.createElement(B, { name: "x", icon: M })))
);
}, R = t.forwardRef((u, e) => {
const { children: l, className: d, ...a } = u;
return /* @__PURE__ */ t.createElement("ul", { className: w("k-tabstrip-items k-reset", d), role: "tablist", ...a, ref: e }, l);
});
R.displayName = "TabsList";
const O = (u) => {
const { sheets: e, setSheets: l, onSheetSelect: d, onSheetDelete: a, onSheetEdit: h, onSheetReorderEnd: o } = u, [p, b] = t.useState(null), v = t.useRef(!1), x = t.useRef(-1), S = t.useCallback((s) => {
l(
s.map((c, f, i) => ({
...c,
first: f === 0,
last: f === i.length - 1
}))
);
}, []), C = t.useCallback(
(s) => {
S(s.newState);
},
[S, o]
), r = t.useCallback(
(s) => {
o.call(void 0, s);
},
[o]
), n = t.useCallback((s) => {
v.current = !0, x.current = s.prevIndex;
}, []), m = t.useCallback((s) => {
setTimeout(() => {
v.current = !1;
}, 50), o.call(void 0, { ...s, prevIndex: x.current });
}, []), E = t.useCallback(
(s, c) => {
v.current || d.call(void 0, s, c);
},
[d]
), k = t.useCallback(
(s, c) => {
c.stopPropagation(), a.call(void 0, s);
},
[e, a]
), g = t.useCallback(
(s, c) => {
c.stopPropagation(), c.preventDefault();
const f = e.map((i) => ({
...i,
active: i.id === s.id,
inEdit: i.id === s.id
}));
l(f), b({ ...s });
},
[e]
), y = t.useCallback(
(s, c) => {
c.stopPropagation(), c.preventDefault();
const f = e.map((i) => ({
...i,
inEdit: !1,
text: i.inEdit && p ? p.text : i.text
}));
l(f), b(null);
},
[e, p]
), P = t.useCallback(
(s, c) => {
c.stopPropagation(), c.preventDefault();
const f = e.map((D) => ({ ...D, inEdit: !1 })), i = e.findIndex((D) => D.id === s.id);
l(f), b(null), h.call(void 0, s, i);
},
[e, h]
), T = t.useCallback(
(s, c) => {
c.stopPropagation(), c.preventDefault();
const f = e.map((i) => ({
...i,
text: s.id === i.id ? s.text : i.text
}));
l(f);
},
[e]
);
return /* @__PURE__ */ t.createElement("div", { className: "k-spreadsheet-sheets-items k-tabstrip k-floatwrap k-tabstrip-bottom" }, /* @__PURE__ */ t.createElement("div", { className: "k-tabstrip-items-wrapper k-hstack" }, /* @__PURE__ */ t.createElement(N.Provider, { value: { onSelect: E, onDelete: k, onEnterEdit: g, onCancelEdit: y, onExitEdit: P, onEdit: T } }, /* @__PURE__ */ t.createElement(
A,
{
idField: "id",
data: e,
itemUI: z,
itemsWrapUI: R,
onDragOver: C,
onNavigate: r,
onDragStart: n,
onDragEnd: m,
navigatable: !0
}
))));
}, V = (u, e, l) => u.map((d, a, h) => ({
text: d.name(),
id: l + "-sheet-" + a,
first: a === 0,
last: a === h.length - 1,
active: d.name() === e
})), X = (u) => {
const { spreadsheetRef: e } = u, [l, d] = t.useState([]), a = t.useRef((l.find((r) => r.active) || {}).text), h = U(), o = t.useCallback(() => {
e.current && (e.current.view.sheetsbar.onSheetSelect(a.current), d(V(e.current.sheets(), a.current, h)));
}, []), p = t.useCallback(() => {
if (e.current) {
const r = e.current.sheets();
r.find((n) => n.name() === a.current) || (a.current = r[r.length - 1].name()), o();
}
}, []);
t.useEffect(() => (e.current && (e.current.sheets().length && (a.current = e.current.sheets()[0].name(), o()), e.current.view.bind("update", p)), () => {
e.current && e.current.view.unbind("update", p);
}), [e.current]);
const b = t.useCallback((r) => {
a.current !== r.text && (a.current = r.text, o());
}, []), v = t.useCallback(() => {
if (e.current) {
e.current.view.sheetsbar.onAddSelect();
const r = e.current.sheets();
a.current = r[r.length - 1].name(), o();
}
}, []), x = t.useCallback((r) => {
if (e.current) {
if (a.current === r.text) {
const n = e.current.sheets(), m = n.findIndex((k) => k.name() === r.text), E = n[m + 1] || n[m - 1];
a.current = E ? E.name() : "";
}
e.current.view.sheetsbar.onSheetRemove(r.text), o();
}
}, []), S = t.useCallback((r, n) => {
if (e.current) {
let m = r.text;
const E = e.current.sheets(), k = E[n];
if (!m) {
a.current = k.name(), o();
return;
}
if (k && k.name() === m)
return;
E.find((g) => g.name() === m) && (m = k.name()), e.current.view.sheetsbar.onSheetRename(m, n), a.current = m, o();
}
}, []), C = t.useCallback((r) => {
if (e.current) {
const { prevIndex: n, nextIndex: m } = r;
a.current = e.current.sheets()[n].name(), e.current.view.sheetsbar.onSheetReorderEnd({ oldIndex: n, newIndex: m }), o();
}
}, []);
return /* @__PURE__ */ t.createElement("div", { className: "k-spreadsheet-sheets-bar k-header" }, /* @__PURE__ */ t.createElement(
L,
{
fillMode: "flat",
icon: "plus",
className: "k-spreadsheet-sheets-bar-add",
title: H().toLanguageString(I.addNewSheet, K[I.addNewSheet]),
svgIcon: F,
onClick: v
}
), /* @__PURE__ */ t.createElement(
O,
{
sheets: l,
setSheets: d,
onSheetSelect: b,
onSheetDelete: x,
onSheetEdit: S,
onSheetReorderEnd: C
}
));
};
export {
X as SheetsBar
};