@progress/kendo-react-spreadsheet
Version:
KendoReact Spreadsheet package
103 lines (102 loc) • 3.56 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 { ComboBox as B } from "@progress/kendo-react-dropdowns";
import { IconWrap as I } from "@progress/kendo-react-common";
import { xIcon as w } from "@progress/kendo-svg-icons";
import { useLocalization as S } from "@progress/kendo-react-intl";
import { keys as f, messages as F } from "./messages.mjs";
const g = t.forwardRef((l, E) => {
const u = t.useRef(null), s = t.useRef(null), [c, k] = t.useState([]), [v, d] = t.useState(!1), [o, r] = t.useState(""), m = t.useMemo(() => ({}), []);
m.data = c, t.useImperativeHandle(
u,
() => ({
value: (e) => {
if (e === void 0) {
const a = s.current && s.current.value;
return a && (a.name || a);
}
r(e || "");
}
}),
[]
), t.useImperativeHandle(E, () => u.current, []);
const b = t.useCallback((e) => {
const a = l.nameEditor();
a && a.trigger("delete", { name: e });
}, []), C = t.useCallback((e, a) => {
const n = /* @__PURE__ */ t.createElement(t.Fragment, null, e.props.children, /* @__PURE__ */ t.createElement(
"span",
{
role: "button",
className: "k-button-delete",
onClick: () => b(a.dataItem[a.textField]),
onMouseDown: (i) => i.preventDefault(),
onPointerDown: (i) => i.preventDefault(),
"data-role": "delete"
},
/* @__PURE__ */ t.createElement(I, { name: "x", icon: w })
));
return t.cloneElement(e, e.props, n);
}, []), x = t.useCallback((e) => t.cloneElement(e, { ...e.props }, /* @__PURE__ */ t.createElement("div", null)), []), y = t.useCallback((e) => {
if (e.syntheticEvent && e.syntheticEvent.type === "change")
return;
const a = l.nameEditor();
a && (k(a.readData()), d(!0));
}, []), h = t.useCallback(() => {
d(!1);
}, []), D = t.useCallback(
(e) => {
if (e.syntheticEvent.target.closest("[data-role]"))
return;
const a = l.nameEditor();
if (a && e.value) {
const n = e.value.name;
n !== o && (a.trigger("select", { name: n }), r(n));
}
},
[o]
), N = t.useCallback((e) => {
const a = l.nameEditor();
if (a)
if (e.key === "Enter") {
const n = e.target.value;
a.trigger("enter", { value: n }), r(n);
} else e.key === "Escape" && (a.trigger("cancel"), r(m.prevValue));
}, []), R = t.useCallback((e) => {
m.prevValue = e.value.name;
}, []), p = S().toLanguageString(f.nameBox, F[f.nameBox]);
return /* @__PURE__ */ t.createElement("div", { className: "k-spreadsheet-name-editor", onKeyDown: N }, /* @__PURE__ */ t.createElement(
B,
{
ref: s,
title: p,
popupSettings: { className: "k-spreadsheet-names-popup" },
fillMode: "flat",
clearButton: !1,
dataItemKey: "name",
textField: "name",
itemRender: C,
data: c,
value: o ? c.find((e) => e.name === o) || { name: o } : null,
onChange: D,
opened: v,
onOpen: y,
onClose: h,
onFocus: R,
listNoDataRender: x,
allowCustom: !0,
ariaLabel: p
}
));
});
g.displayName = "NameBox";
g.propTypes = {};
export {
g as NameBox
};