@progress/kendo-react-dropdowns
Version:
React DropDowns offer an interface for users to select different items from a list and more. KendoReact Dropdowns package
184 lines (183 loc) • 7.05 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 e from "react";
import se from "prop-types";
import { MultiColumnList as ue } from "../common/MultiColumnList.mjs";
import { createPropsContext as ie, usePropsContext as de, getScrollbarWidth as ce, getter as T, classNames as x, setScrollbarWidth as pe } from "@progress/kendo-react-common";
import { ComboBox as me, ComboBoxWithoutContext as fe } from "../ComboBox/ComboBox.mjs";
import { getItemValue as ge } from "../common/utils.mjs";
import W from "../common/withCustomComponent.mjs";
const he = (u, h) => u ? typeof u == "number" ? u + "px" : u : h, Ce = ie(), P = e.forwardRef(
(u, h) => {
const t = de(Ce, u), C = e.useRef(null), a = e.useRef(null), y = ce(), {
columns: n = s.columns,
popupSettings: p = s.popupSettings,
size: z = s.size,
rounded: O = s.rounded,
fillMode: L = s.fillMode,
className: $,
prefix: j = void 0,
suffix: V = void 0,
onOpen: w,
onClose: E,
onFocus: F,
onBlur: H,
onChange: N,
onFilterChange: S,
onPageChange: M,
...A
} = t;
e.useImperativeHandle(C, () => ({
element: a.current && a.current.element,
focus() {
a.current && a.current.focus();
},
get value() {
return a.current && a.current.value;
},
get name() {
return a.current && a.current.name;
},
props: t
})), e.useImperativeHandle(
h,
() => C.current
);
const c = e.useMemo(() => {
if (t.groupField !== void 0 && t.data)
return ge(t.data[0], t.groupField);
}, [t.data, t.groupField]), [k, m] = e.useState(c), [R, B] = e.useState(!0), [D] = j ? W(t.prefix || e.Fragment) : [], [J] = V ? W(t.suffix || e.Fragment) : [], Q = e.useMemo(() => {
const r = /* @__PURE__ */ e.createElement("th", { className: "k-table-th", colSpan: n.length }, k);
return /* @__PURE__ */ e.createElement(e.Fragment, null, t.header, /* @__PURE__ */ e.createElement("div", { className: "k-table-header-wrap" }, /* @__PURE__ */ e.createElement("table", { className: "k-table", role: "presentation" }, /* @__PURE__ */ e.createElement("colgroup", null, n.map((o, i) => /* @__PURE__ */ e.createElement(
"col",
{
key: o.uniqueKey ? o.uniqueKey : i,
style: { width: o.width ? o.width : s.width }
}
))), /* @__PURE__ */ e.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ e.createElement("tr", { className: "k-table-row" }, n.map((o, i) => /* @__PURE__ */ e.createElement("th", { className: "k-table-th", key: o.uniqueKey ? o.uniqueKey : i }, o.header || " "))), k && R && /* @__PURE__ */ e.createElement("tr", { className: "k-table-group-row" }, t.groupStickyHeaderItemRender ? t.groupStickyHeaderItemRender.call(void 0, r, {}) : r)))));
}, [t.header, n, k, R]), U = e.useMemo(
() => (
// These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
`calc(${n.map((r) => he(r.width, s.width)).filter(Boolean).join(" + ")} + ${y}px + 4px)`
),
[n, y]
), q = t.virtual ? t.virtual.skip : 0, X = e.useCallback(
(r, o) => {
const i = n.map((d, le) => /* @__PURE__ */ e.createElement(
"span",
{
className: t.itemRender ? void 0 : "k-table-td",
style: t.itemRender ? void 0 : { width: d.width ? d.width : s.width },
key: d.uniqueKey ? d.uniqueKey : le
},
d.field ? String(T(d.field)(o.dataItem)) : ""
));
let f, g, b, v, I = t.data || [];
const K = o.index - q;
t.groupField !== void 0 && (v = T(t.groupField), g = v(I[K]), b = v(I[K - 1]), g && b && g !== b && (f = g)), f && t.groupMode === "classic" && i.push(
/* @__PURE__ */ e.createElement("div", { key: "group", className: "k-table-td k-table-group-td" }, /* @__PURE__ */ e.createElement("span", null, f))
);
const G = e.cloneElement(
r,
{
...r.props,
className: x("k-table-row", {
"k-table-alt-row": o.index % 2 !== 0,
"k-focus": o.focused,
"k-selected": o.selected,
"k-first": !!f,
"k-disabled": o.dataItem.disabled
})
},
i
);
return t.itemRender ? t.itemRender.call(void 0, G, o) : G;
},
[n, t.groupField, t.itemRender, t.data, q]
), l = e.useCallback((r, o) => {
r && r.call(void 0, {
...o,
target: C.current
});
}, []), Y = e.useCallback(
(r) => (t.virtual || m(c), l(w, r)),
[l, w, t.virtual, c]
), Z = e.useCallback((r) => l(E, r), [E]), _ = e.useCallback((r) => l(F, r), [F]), ee = e.useCallback((r) => l(H, r), [H]), te = e.useCallback((r) => l(N, r), [N]), re = e.useCallback((r) => l(M, r), [M]), oe = e.useCallback(
(r) => (m(c), l(S, {
...r,
mobileMode: r.target.mobileMode
})),
[S]
), ae = e.useCallback((r) => {
m(r.group);
}, []);
e.useEffect(() => {
pe();
}), e.useEffect(() => {
const r = t.data;
m(c), r && r.length !== 0 ? B(!0) : B(!1);
}, [t.data]);
const ne = e.useCallback((r) => /* @__PURE__ */ e.createElement(ue, { ...r }), []);
return /* @__PURE__ */ e.createElement(
me,
{
...A,
list: ne,
popupSettings: {
...p,
popupClass: x("k-dropdowngrid-popup", p.popupClass),
width: p.width || U,
className: p.className
},
ref: a,
header: Q,
itemRender: X,
groupHeaderItemRender: t.groupHeaderItemRender,
size: z,
rounded: O,
fillMode: L,
groupMode: t.groupMode,
groupField: t.groupField,
isMultiColumn: !0,
onOpen: Y,
onClose: Z,
onFocus: _,
onBlur: ee,
onChange: te,
onFilterChange: oe,
onPageChange: re,
onGroupScroll: ae,
className: x("k-dropdowngrid", $),
required: t.required,
adaptive: t.adaptive,
adaptiveFilter: t.adaptiveFilter,
adaptiveTitle: t.adaptiveTitle,
footer: t.footer,
footerClassName: "k-table-footer",
prefix: D,
suffix: J
}
);
}
), ke = {
...fe.propTypes,
columns: se.any.isRequired
}, s = {
columns: [],
popupSettings: {},
width: "200px",
size: "medium",
rounded: "medium",
fillMode: "solid"
};
P.displayName = "KendoMultiColumnComboBox";
P.propTypes = ke;
export {
P as MultiColumnComboBox,
Ce as MultiColumnComboBoxPropsContext
};