@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
80 lines (79 loc) • 4.2 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 S from "react-dom";
import { adaptiveColumnMenuCheckboxFilterTitle as i, messages as c, filterCheckAll as r, filterSelectedItems as m, filterSubmitButton as s, filterClearButton as u } from "../../messages/index.mjs";
import { GridContext as b } from "../../utils/GridContext.mjs";
import { ActionSheetHeader as x, ActionSheetContent as M, ActionSheetFooter as N } from "@progress/kendo-react-layout";
import { Button as h } from "@progress/kendo-react-buttons";
import { chevronRightIcon as A, chevronLeftIcon as w, xIcon as B } from "@progress/kendo-svg-icons";
import { useLocalization as y } from "@progress/kendo-react-intl";
import { Checkbox as d } from "@progress/kendo-react-inputs";
import { GridColumnMenuAdaptiveContext as F } from "../adaptiveContext/GridColumnMenuAdaptiveContext.mjs";
import { GridActionSheetFooterContent as I } from "./GridActionSheetFooter.mjs";
const H = (t) => {
const n = e.useContext(b), l = y(), { actionSheetRef: o, secondViewRef: k } = e.useContext(F), f = n.dir === "rtl" ? A : w, g = l.toLanguageString(
i,
c[i]
);
e.useEffect(() => {
n != null && n.mobileMode && o.current.element.style.setProperty("--kendo-actionsheet-view-current", 2);
}, []);
const E = () => {
t.onBackView && t.onBackView(), n != null && n.mobileMode && o.current.element.style.setProperty("--kendo-actionsheet-view-current", 1);
};
return /* @__PURE__ */ e.createElement(e.Fragment, null, S.createPortal(
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-titlebar-group" }, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ e.createElement(
h,
{
type: "button",
onClick: E,
svgIcon: f,
fillMode: "flat"
}
)), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ e.createElement("div", { className: "k-text-center" }, g)), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ e.createElement(h, { type: "button", svgIcon: B, onClick: t.handleClose, fillMode: "flat" })))), /* @__PURE__ */ e.createElement(M, null, /* @__PURE__ */ e.createElement("div", { className: "k-filter-menu" }, /* @__PURE__ */ e.createElement("div", { className: "k-filter-menu-container" }, t.searchBox, /* @__PURE__ */ e.createElement("ul", { className: "k-reset k-multicheck-wrap" }, /* @__PURE__ */ e.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ e.createElement(
d,
{
size: n.mobileMode ? "large" : "medium",
label: l.toLanguageString(
r,
c[r]
),
onChange: (a) => t.handleCheckBoxChange(a, "all"),
checked: t.isAllSelected()
}
)), t.currentData.map((a, C) => /* @__PURE__ */ e.createElement("li", { className: "k-item", key: `colmenu-checkbox-item-${C}` }, /* @__PURE__ */ e.createElement(
d,
{
size: n.mobileMode ? "large" : "medium",
label: String(a),
onChange: (v) => t.handleCheckBoxChange(v, a),
checked: t.uniqueFilterValues.includes(a)
}
)))), /* @__PURE__ */ e.createElement("div", { className: "k-filter-selected-items" }, t.uniqueFilterValues.length + " " + l.toLanguageString(
m,
c[m]
))))), /* @__PURE__ */ e.createElement(N, null, /* @__PURE__ */ e.createElement(
I,
{
onApply: t.submit,
onReset: t.clear,
submitMessage: l.toLanguageString(
s,
c[s]
),
resetMessage: l.toLanguageString(u, c[u])
}
))),
k.current.current
));
};
export {
H as GridAdaptiveCheckboxFilter
};