@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
90 lines (89 loc) • 4.72 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
*-------------------------------------------------------------------------------------------
*/
"use client";
import e from "react";
import { GridContext as x } from "../../utils/GridContext.mjs";
import { xIcon as b, searchIcon as A } from "@progress/kendo-svg-icons";
import { adaptiveColumnMenuChooserTitle as m, messages as l, adaptiveColumnMenuChooserSubTitle as r, filterSelectAll as s, columnMenuColumnChooserSelectedItems as d, filterResetButton as u, filterApplyButton as h } from "../../messages/index.mjs";
import { Button as N } from "@progress/kendo-react-buttons";
import { useLocalization as p } from "@progress/kendo-react-intl";
import { TextBox as M, Checkbox as g, InputPrefix as y } from "@progress/kendo-react-inputs";
import { ActionSheet as L, ActionSheetView as R, ActionSheetHeader as T, ActionSheetContent as w, ActionSheetFooter as B } from "@progress/kendo-react-layout";
import { useAdaptiveModeContext as I, IconWrap as z } from "@progress/kendo-react-common";
import { GridActionSheetFooterContent as G } from "../../columnMenu/adaptiveContent/GridActionSheetFooter.mjs";
import { GridToolbarAdaptiveContext as F } from "../adaptiveContext/GridToolbarAdaptiveContext.mjs";
const U = (t) => {
const o = e.useContext(x), { actionSheetRef: f } = e.useContext(F), i = I(), n = p(), C = {
animation: !0,
navigatable: !1,
navigatableElements: [],
expand: t.computedShow,
animationStyles: i && o.adaptiveColumnMenuRef <= i.small ? { top: 0, width: "100%", height: "100%" } : void 0,
className: "k-adaptive-actionsheet",
position: i && o.adaptiveColumnMenuRef <= i.small ? "fullscreen" : void 0
}, k = n.toLanguageString(
m,
l[m]
), v = n.toLanguageString(
r,
l[r]
), E = () => /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(z, { name: "search", icon: A }));
return /* @__PURE__ */ e.createElement(
L,
{
...C,
ref: f,
style: { "--kendo-actionsheet-view-current": 1 },
onClose: t.onClose
},
/* @__PURE__ */ e.createElement(R, null, /* @__PURE__ */ e.createElement(T, null, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-titlebar-group" }, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ e.createElement("div", { className: "k-text-center" }, k), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, v)), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ e.createElement(N, { type: "button", svgIcon: b, onClick: t.onClose, fillMode: "flat" })))), /* @__PURE__ */ e.createElement(w, null, /* @__PURE__ */ e.createElement("div", { className: "k-filter-menu" }, /* @__PURE__ */ e.createElement("div", { className: "k-filter-menu-container" }, /* @__PURE__ */ e.createElement(
M,
{
size: o.mobileMode ? "large" : "medium",
className: "k-searchbox",
value: t.filter,
onChange: t.onFilter,
prefix: E
}
), /* @__PURE__ */ e.createElement("ul", { className: "k-reset k-multicheck-wrap" }, !t.filter && /* @__PURE__ */ e.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ e.createElement(
g,
{
size: o.mobileMode ? "large" : "medium",
checked: t.allSelected,
onChange: t.onSelectAll,
label: n.toLanguageString(s, l[s])
}
)), t.filtered.map((a, P) => /* @__PURE__ */ e.createElement("li", { key: a.id, className: "k-item" }, /* @__PURE__ */ e.createElement(
g,
{
size: o.mobileMode ? "large" : "medium",
disabled: t.selectedColumns[a.id || ""] && t.checkedCount === 1,
checked: t.selectedColumns[a.id || ""],
onChange: (S) => {
var c;
return t.onCheckChange(!!((c = S.target.element) != null && c.checked), a.id);
},
label: a.title || a.field
}
)))), /* @__PURE__ */ e.createElement("div", { className: "k-filter-selected-items" }, t.checkedCount, " ", n.toLanguageString(
d,
l[d]
))))), /* @__PURE__ */ e.createElement(B, null, /* @__PURE__ */ e.createElement(
G,
{
onApply: t.onApply,
onReset: t.onReset,
resetMessage: n.toLanguageString(u, l[u]),
submitMessage: n.toLanguageString(h, l[h])
}
)))
);
};
export {
U as GridAdaptiveToolbarColumnChooser
};