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