@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
91 lines (90 loc) • 4.85 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 M from "react-dom";
import { GridContext as N } from "../../utils/GridContext.mjs";
import { chevronRightIcon as A, chevronLeftIcon as y, xIcon as I, searchIcon as w } from "@progress/kendo-svg-icons";
import { adaptiveColumnMenuChooserTitle as r, messages as a, adaptiveColumnMenuChooserSubTitle as m, filterSelectAll as s, columnMenuColumnChooserSelectedItems as u, filterResetButton as d, filterApplyButton as h } from "../../messages/index.mjs";
import { Button as f } from "@progress/kendo-react-buttons";
import { useLocalization as B } from "@progress/kendo-react-intl";
import { TextBox as L, Checkbox as g, InputPrefix as R } from "@progress/kendo-react-inputs";
import { ActionSheetHeader as p, ActionSheetContent as F, ActionSheetFooter as P } from "@progress/kendo-react-layout";
import { IconWrap as T } from "@progress/kendo-react-common";
import { GridColumnMenuAdaptiveContext as z } from "../adaptiveContext/GridColumnMenuAdaptiveContext.mjs";
import { GridActionSheetFooterContent as G } from "./GridActionSheetFooter.mjs";
const Y = (t) => {
const o = B(), l = e.useContext(N), { actionSheetRef: c, secondViewRef: k } = e.useContext(z), C = l.dir === "rtl" ? A : y, E = o.toLanguageString(
r,
a[r]
), v = o.toLanguageString(
m,
a[m]
);
e.useEffect(() => {
l.mobileMode && c.current.element.style.setProperty("--kendo-actionsheet-view-current", 2);
}, []);
const S = () => {
l.mobileMode && c.current.element.style.setProperty("--kendo-actionsheet-view-current", 1), t.onBackView && t.onBackView();
}, x = () => /* @__PURE__ */ e.createElement(R, null, /* @__PURE__ */ e.createElement(T, { name: "search", icon: w }));
return /* @__PURE__ */ e.createElement(e.Fragment, null, M.createPortal(
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(p, null, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-titlebar-group" }, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ e.createElement(
f,
{
type: "button",
onClick: S,
svgIcon: C,
fillMode: "flat"
}
)), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ e.createElement("div", { className: "k-text-center" }, E), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, v)), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ e.createElement(f, { type: "button", svgIcon: I, onClick: t.handleClose, fillMode: "flat" })))), /* @__PURE__ */ e.createElement(F, null, /* @__PURE__ */ e.createElement("div", { className: "k-filter-menu" }, /* @__PURE__ */ e.createElement("div", { className: "k-filter-menu-container" }, /* @__PURE__ */ e.createElement(
L,
{
size: l.mobileMode ? "large" : "medium",
className: "k-searchbox",
value: t.filter,
onChange: t.onFilter,
prefix: x
}
), /* @__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: l.mobileMode ? "large" : "medium",
checked: t.allSelected,
onChange: t.onSelectAll,
label: o.toLanguageString(s, a[s])
}
)), t.filtered.map((n, V) => /* @__PURE__ */ e.createElement("li", { key: n.id, className: "k-item" }, /* @__PURE__ */ e.createElement(
g,
{
size: l.mobileMode ? "large" : "medium",
disabled: t.selectedColumns[n.id || ""] && t.checkedCount === 1,
checked: t.selectedColumns[n.id || ""],
onChange: (b) => {
var i;
return t.onCheckChange(!!((i = b.target.element) != null && i.checked), n.id);
},
label: n.title || n.field
}
)))), /* @__PURE__ */ e.createElement("div", { className: "k-filter-selected-items" }, t.checkedCount, " ", o.toLanguageString(
u,
a[u]
))))), /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(
G,
{
onApply: t.onApply,
onReset: t.onReset,
resetMessage: o.toLanguageString(d, a[d]),
submitMessage: o.toLanguageString(h, a[h])
}
))),
k.current.current
));
};
export {
Y as GridAdaptiveColumnChooser
};