@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
115 lines (114 loc) • 6.77 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 { adaptiveColumnMenuCheckboxFilterTitle as f, messages as i, filterClearAllButton as k, filterCheckAll as g, filterSelectedItems as v, filterSubmitButton as E, filterClearButton as C } from "../../messages/index.mjs";
import { GridContext as L } from "../../utils/GridContext.mjs";
import { ActionSheet as R, ActionSheetView as S, ActionSheetHeader as x, ActionSheetContent as N, ActionSheetFooter as b } from "@progress/kendo-react-layout";
import { Button as m } from "@progress/kendo-react-buttons";
import { chevronRightIcon as V, chevronLeftIcon as G, xIcon as w, filterClearIcon as z } from "@progress/kendo-svg-icons";
import { useLocalization as P } from "@progress/kendo-react-intl";
import { Checkbox as y } from "@progress/kendo-react-inputs";
import { GridActionSheetFooterContent as T } from "../../columnMenu/adaptiveContent/GridActionSheetFooter.mjs";
import { GridToolbarAdaptiveContext as D } from "../adaptiveContext/GridToolbarAdaptiveContext.mjs";
import { useAdaptiveModeContext as q } from "@progress/kendo-react-common";
import { GridColumnMenuItemGroup as _ } from "../../columnMenu/GridColumnMenuItemGroup.mjs";
import { GridColumnMenuItem as $ } from "../../columnMenu/GridColumnMenuItem.mjs";
const ae = (t) => {
const a = e.useContext(L), { actionSheetRef: s, firstViewRef: A, secondViewRef: M } = e.useContext(D), o = q(), l = P(), [d, I] = e.useState(""), p = {
animation: !0,
navigatable: !1,
navigatableElements: [],
expand: t.computedShow,
animationStyles: o && a.adaptiveColumnMenuRef <= o.small ? { top: 0, width: "100%", height: "100%" } : void 0,
className: "k-adaptive-actionsheet",
position: o && a.adaptiveColumnMenuRef <= o.small ? "fullscreen" : void 0
}, B = a.dir === "rtl" ? V : G, h = l.toLanguageString(
f,
i[f]
), F = () => {
t.onBackView && t.onBackView(), a != null && a.mobileMode && s.current.element.style.setProperty("--kendo-actionsheet-view-current", 1);
};
return /* @__PURE__ */ e.createElement(
R,
{
...p,
ref: s,
style: { "--kendo-actionsheet-view-current": 1 },
onClose: t.onClose
},
/* @__PURE__ */ e.createElement(
S,
{
className: "k-actionsheet-view-animated",
ref: A,
style: {
transitionDuration: "500ms",
transitionProperty: "transform"
}
},
/* @__PURE__ */ e.createElement(x, 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" }, h)), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ e.createElement(m, { svgIcon: w, onClick: t.onClose, fillMode: "flat" })))),
/* @__PURE__ */ e.createElement(N, null, /* @__PURE__ */ e.createElement("div", { className: "k-column-menu k-column-menu-lg" }, t.filtered.map((n) => {
var c, r;
return /* @__PURE__ */ e.createElement(_, { key: n.id }, /* @__PURE__ */ e.createElement("div", { className: "k-expander" }, /* @__PURE__ */ e.createElement(
$,
{
title: t.renderTitle(n),
expandable: !0,
expanded: !!((r = (c = t.expandState) == null ? void 0 : c.find(
(u) => u.column.field === n.field
)) != null && r.expanded),
onClick: (u) => (s.current.element.style.setProperty("--kendo-actionsheet-view-current", 2), I(n.field), t.onFilterExpand(u, n))
}
)));
}))),
/* @__PURE__ */ e.createElement(b, null, /* @__PURE__ */ e.createElement("div", { className: "k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer" }, /* @__PURE__ */ e.createElement(m, { svgIcon: z, onClick: t.handleClearAllFilters, size: "large" }, l.toLanguageString(k, i[k]))))
),
/* @__PURE__ */ e.createElement(
S,
{
className: "k-actionsheet-view-animated",
ref: M,
style: {
transitionDuration: "500ms",
transitionProperty: "transform"
}
},
/* @__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(m, { type: "button", onClick: F, svgIcon: B, fillMode: "flat" })), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ e.createElement("div", { className: "k-text-center" }, h + (d ? ` ${d}` : ""))), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ e.createElement(m, { type: "button", svgIcon: w, onClick: t.onClose, fillMode: "flat" })))),
/* @__PURE__ */ e.createElement(N, 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-multicheck-wrap" }, /* @__PURE__ */ e.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ e.createElement(
y,
{
size: a.mobileMode ? "large" : "medium",
label: l.toLanguageString(g, i[g]),
onChange: (n) => t.handleCheckBoxChange(n, "all"),
checked: t.isAllSelected()
}
)), t.currentData.map((n, c) => /* @__PURE__ */ e.createElement("li", { className: "k-item", key: `colmenu-checkbox-item-${c}` }, /* @__PURE__ */ e.createElement(
y,
{
size: a.mobileMode ? "large" : "medium",
label: String(n),
onChange: (r) => t.handleCheckBoxChange(r, n),
checked: t.uniqueFilterValues.includes(n)
}
)))), /* @__PURE__ */ e.createElement("div", { className: "k-filter-selected-items" }, t.uniqueFilterValues.length + " " + l.toLanguageString(v, i[v]))))),
/* @__PURE__ */ e.createElement(b, null, /* @__PURE__ */ e.createElement(
T,
{
onApply: t.submit,
onReset: t.clear,
submitMessage: l.toLanguageString(E, i[E]),
resetMessage: l.toLanguageString(C, i[C])
}
))
)
);
};
export {
ae as GridAdaptiveToolbarCheckboxFilter
};