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