@progress/kendo-react-data-tools
Version:
Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package
135 lines (134 loc) • 5.58 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 * as t from "react";
import { HeaderCell as y } from "./HeaderCell.mjs";
import { normalize as w } from "./SortSettings.mjs";
import { ColumnResizer as D } from "../drag/ColumnResizer.mjs";
import { ColumnDraggable as E } from "../drag/ColumnDraggable.mjs";
import { HeaderThElement as H } from "./HeaderThElement.mjs";
import { Keys as z, classNames as M, IconWrap as v } from "@progress/kendo-react-common";
import { provideLocalizationService as I, registerForLocalization as R } from "@progress/kendo-react-intl";
import { sortAscSmallIcon as x, sortDescSmallIcon as N } from "@progress/kendo-svg-icons";
import { sortAriaLabel as m, messages as F } from "../messages/index.mjs";
const L = {
true: { asc: "desc", desc: "", "": "asc" },
false: { asc: "desc", desc: "asc", "": "asc" }
}, A = {
none: "none",
asc: "ascending",
desc: "descending"
};
class K extends t.Component {
constructor() {
super(...arguments), this.cellClick = (s, r) => {
if (s.preventDefault(), !this.props.sortChange)
return;
const { allowUnsort: p, mode: e } = w(this.props.sortable || !1, r.sortable || !1), l = (this.props.sort || []).filter((a) => a.field === r.field)[0], n = L[p][l && l.dir || ""], i = e === "single" ? [] : (this.props.sort || []).filter((a) => a.field !== r.field);
n !== "" && r.field && i.push({ field: r.field, dir: n }), this.props.sortChange(s, i, r.field);
}, this.cellKeyDown = (s, r) => {
s.isDefaultPrevented() || s.keyCode === z.enter && this.cellClick(s, r);
}, this.cells = (s) => s.map((r, p) => {
const e = this.props.columns[r], { columnResize: l } = this.props, n = l && l.resizable && e.resizable, i = this.props.sortable && e.sortable, a = this.props.sort ? this.props.sort.findIndex((o) => o.field === e.field) : -1, f = a >= 0 && this.props.sort[a].dir || "none", d = {
sort: this.props.sort,
onSortChange: this.props.sortChange,
filter: this.props.columnMenuFilter,
onFilterChange: this.props.columnMenuFilterChange,
field: e.field
}, h = {
field: e.field,
onClick: i && ((o) => this.cellClick(o, e)) || void 0,
selectionChange: this.props.selectionChange,
title: e.title,
selectionValue: e.headerSelectionValue,
render: this.props.cellRender,
children: this.sortIcon(a),
sort: this.props.sort,
sortable: this.props.sortable,
sortChange: this.props.sortChange,
filterChange: this.props.filterChange,
columns: this.props.columns,
columnMenuWrapperProps: d
}, c = e.columnMenu || this.props.columnMenu, u = M(
"k-table-th",
{
"k-first": e.kFirst,
"k-filterable": !!c,
"k-header": !0,
"k-grid-header-sticky": e.locked,
"k-sorted": this.props.sort && this.props.sort.some((o) => o.field === e.field)
},
e.headerClassName
), g = e.locked !== void 0 ? {
left: e.left,
right: e.right,
borderRightWidth: e.rightBorder ? "1px" : ""
} : {}, C = I(this).toLanguageString(m, F[m]), k = e.isAccessible ? {
ariaSort: i ? A[f] : void 0,
role: "columnheader",
ariaColumnIndex: e.ariaColumnIndex,
ariaSelected: !1,
ariaDescription: i ? C : ""
} : {
role: "presentation"
};
return /* @__PURE__ */ t.createElement(
H,
{
key: p,
colSpan: e.colSpan,
rowSpan: e.rowSpan,
className: u,
style: g,
columnId: e.id,
navigatable: e.navigatable,
onKeyDown: i && ((o) => this.cellKeyDown(o, e)) || void 0,
...k
},
e.headerCell && /* @__PURE__ */ t.createElement(e.headerCell, { ...h }),
!e.headerCell && /* @__PURE__ */ t.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ t.createElement(y, { ...h }), c && /* @__PURE__ */ t.createElement(c, { ...d })),
l && n && /* @__PURE__ */ t.createElement(
D,
{
key: "ColumnResizer",
resize: (o, b, S) => l.dragHandler(o, e, b, S)
}
)
);
});
}
sortIcon(s) {
if (!this.props.sort || s < 0)
return null;
const r = this.props.sort[s].dir;
return r ? [
/* @__PURE__ */ t.createElement(v, { key: 1, name: `sort-${r}-small`, icon: r === "asc" ? x : N }),
this.props.sort.length > 1 && /* @__PURE__ */ t.createElement("span", { key: 2, className: "k-sort-order" }, s + 1)
] : null;
}
render() {
return this.props.columnsMap.map(
(s, r) => this.props.pressHandler && /* @__PURE__ */ t.createElement(
E,
{
key: r,
pressHandler: this.props.pressHandler,
dragHandler: this.props.dragHandler,
releaseHandler: this.props.releaseHandler,
ariaRowIndex: r + 1
},
this.cells(s)
) || // eslint-disable-next-line react/jsx-key
/* @__PURE__ */ t.createElement("tr", { className: "k-table-row", "aria-rowindex": r + 1, role: "row" }, this.cells(s))
);
}
}
R(K);
export {
K as HeaderRow
};