@progress/kendo-react-common
Version:
React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities package
338 lines (337 loc) • 8.49 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
*-------------------------------------------------------------------------------------------
*/
import { gridPrefix as o, sizeMap as h, base as t, grid as n, containers as m, elements as a, states as l, dimensions as b, cursor as x, gridRowReorder as p } from "./json-classes.mjs";
const $ = {
wrapper: {
main: o,
size: {
small: `${o}-${h.small}`,
medium: `${o}-${h.medium}`
},
virtual: `${o}-${t.virtual}`
},
ariaRoot: `${o}-${n.ariaRoot}`,
container: `${o}-${m.container}`,
content: {
main: `${o}-${m.content}`,
virtual: `${t.prefix}-${t.virtual}-${m.content}`
},
tableWrap: `${o}-${n.tableWrap}`,
table: {
main: `${t.prefix}-${a.table}`,
gridTable: `${o}-${a.table}`,
size: {
small: `${t.prefix}-${a.table}-${h.small}`,
medium: `${t.prefix}-${a.table}-${h.medium}`
}
},
tbody: `${t.prefix}-${a.table}-${a.tbody}`,
thead: {
main: `${o}-${a.table}-${a.thead}`,
draggable: `${o}-${l.draggable}-${a.header}`
},
header: {
main: `${o}-${a.header}`,
draggable: `${o}-${l.draggable}-${a.header}`
},
headerWrap: `${o}-${a.header}-${m.wrap}`,
headerTable: {
main: `${t.prefix}-${a.table}`,
header: `${o}-${a.header}-${a.table}`,
size: {
small: `${t.prefix}-${a.table}-${h.small}`,
medium: `${t.prefix}-${a.table}-${h.medium}`
}
},
headerTh: {
main: `${t.prefix}-${a.table}-${a.th}`,
header: `${t.prefix}-${a.header}`,
first: `${t.prefix}-${l.first}`,
filterable: `${t.prefix}-${l.filterable}`,
locked: `${o}-${a.header}-${l.sticky}`,
sorted: `${t.prefix}-${l.sorted}`
},
tableThead: `${t.prefix}-${a.table}-${a.thead}`,
heightContainer: `${t.prefix}-${b.height}-${m.container}`,
sortIcon: `${t.prefix}-${l.sort}-${a.icon}`,
sortOrder: `${t.prefix}-${l.sort}-${l.order}`,
tr: {
main: `${t.prefix}-${a.table}-${n.row}`,
header: `${t.prefix}-${a.table}-${n.group}-${n.row}`,
grouping: `${t.prefix}-${l.grouping}-${n.row}`,
footer: `${t.prefix}-${n.group}-${a.footer}`,
master: `${t.prefix}-${n.master}-${n.row}`,
rowAlt: `${t.prefix}-${a.table}-${l.alt}-${n.row}`,
alt: `${t.prefix}-${l.alt}`,
selected: `${t.prefix}-${l.selected}`,
isInEdit: `${o}-${l.edit}-${n.row}`
},
detailTr: {
main: `${t.prefix}-${a.table}-${n.row}`,
row: `${t.prefix}-${n.detail}-${n.row}`,
rowAlt: `${t.prefix}-${a.table}-${l.alt}-${n.row}`,
alt: `${t.prefix}-${l.alt}`
},
simpleTr: `${t.prefix}-${a.table}-${n.row}`,
headerCellInner: `${t.prefix}-${n.cellInner}`,
columnTitle: `${t.prefix}-${n.column}-${a.title}`,
headerCellLink: {
main: `${t.prefix}-${a.link}`,
notSortable: `${t.important}${t.prefix}-${x.default}`
},
noRecords: `${o}-${n.noRecords}`,
noRecordsTemplate: `${o}-${n.noRecords}-${l.template}`,
pager: `${o}-${n.pager}`,
sorted: `${t.prefix}-${l.sorted}`,
contentSticky: `${o}-${m.content}-${l.sticky}`,
hierarchyCell: {
main: `${t.prefix}-${n.hierarchy}-${n.cell}`,
header: `${t.prefix}-${a.header}`
},
rowReorder: {
dropIndicator: {
main: `${t.prefix}-${p.drop}-${p.hint}`,
direction: `${t.prefix}-${p.drop}-${p.hint}-${p.horizontal}`
},
dragClue: {
main: `${t.prefix}-${p.drag}-${p.clue}`,
operation: `${t.prefix}-${p.reorder}-${p.clue}`
}
},
td: {
main: `${t.prefix}-${a.table}-${a.td}`,
selected: `${t.prefix}-${l.selected}`
},
detailTd: {
main: `${t.prefix}-${a.table}-${a.td}`,
cell: `${t.prefix}-${n.detail}-${n.cell}`
},
editTd: {
main: `${t.prefix}-${a.table}-${a.td}`,
cell: `${o}-${l.edit}-${n.cell}`,
selected: `${t.prefix}-${l.selected}`
},
hierarchyTd: {
main: `${t.prefix}-${a.table}-${a.td}`,
cell: `${t.prefix}-${n.hierarchy}-${n.cell}`
}
}, T = {
wrapper: (r) => {
const { size: e, virtual: i, c: d = $.wrapper } = r;
return {
[d.main]: !0,
[d.size[e]]: d.size[e],
[`${o}-${e}`]: e && !d.size[e],
[d.virtual]: i
};
},
ariaRoot: (r) => {
const { c: e = $ } = r;
return e.ariaRoot;
},
container: (r) => {
const { c: e = $ } = r;
return e.container;
},
content: (r) => {
const { c: e = $.content } = r;
return {
[e.main]: !0,
[e.virtual]: !0
};
},
tableWrap: (r) => {
const { c: e = $ } = r;
return e.tableWrap;
},
table: (r) => {
const { size: e, c: i = $.table } = r;
return {
[i.main]: !0,
[i.gridTable]: !0,
[i.size[e]]: i.size[e],
[`${t.prefix}-${a}-${e}`]: !i.size[e]
};
},
tbody: (r) => {
const { c: e = $ } = r;
return e.tbody;
},
thead: (r) => {
const { draggable: e, c: i = $.thead } = r;
return {
[i.main]: !0,
[i.draggable]: e
};
},
header: (r) => {
const { draggable: e, c: i = $.header } = r;
return {
[i.main]: !0,
[i.draggable]: e
};
},
headerWrap: (r) => {
const { c: e = $ } = r;
return e.headerWrap;
},
headerTable: (r) => {
const { size: e, c: i = $.headerTable } = r;
return {
[i.main]: !0,
[i.header]: !0,
[i.size[e]]: i.size[e],
[`${t.prefix}-${a.table}-${e}`]: !i.size[e]
};
},
headerTh: (r) => {
const { first: e, filterable: i, locked: d, sorted: u, c = $.headerTh } = r;
return {
[c.main]: !0,
[c.header]: !0,
[c.first]: e,
[c.filterable]: i,
[c.locked]: d,
[c.sorted]: u
};
},
tableThead: (r) => {
const { c: e = $ } = r;
return e.tableThead;
},
heightContainer: (r) => {
const { c: e = $ } = r;
return e.heightContainer;
},
sortIcon: (r) => {
const { c: e = $ } = r;
return e.sortIcon;
},
sortOrder: (r) => {
const { c: e = $ } = r;
return e.sortOrder;
},
tr: (r) => {
const { isHeader: e, isFooter: i, isMaster: d, isAltRow: u, selected: c, isInEdit: f, c: s = $.tr } = r;
return {
[s.main]: !0,
[s.header]: e,
[s.grouping]: e,
[s.footer]: i,
[s.master]: d,
[s.rowAlt]: d && u,
[s.alt]: d && u,
[s.selected]: c,
[s.isInEdit]: f
};
},
detailTr: (r) => {
const { isAlt: e, c: i = $.detailTr } = r;
return {
[i.main]: !0,
[i.row]: !0,
[i.rowAlt]: e,
[i.alt]: e
};
},
simpleTr: (r) => {
const { c: e = $ } = r;
return e.simpleTr;
},
rowReorder: (r) => {
const {
dropIndicatorMain: e,
dropIndicatorDirection: i,
dragClueMain: d,
dragClueOperation: u,
c = $.rowReorder
} = r;
return {
[c.dropIndicator.main]: e,
[c.dropIndicator.direction]: i,
[c.dragClue.main]: d,
[c.dragClue.operation]: u
};
},
headerCellInner: (r) => {
const { c: e = $ } = r;
return e.headerCellInner;
},
columnTitle: (r) => {
const { c: e = $ } = r;
return e.columnTitle;
},
headerCellLink: (r) => {
const { sortable: e, c: i = $.headerCellLink } = r;
return {
[i.main]: !0,
[i.notSortable]: !e
};
},
noRecords: (r) => {
const { c: e = $ } = r;
return e.noRecords;
},
noRecordsTemplate: (r) => {
const { c: e = $ } = r;
return e.noRecordsTemplate;
},
pager: (r) => {
const { c: e = $ } = r;
return e.pager;
},
sorted: (r) => {
const { c: e = $ } = r;
return e.sorted;
},
contentSticky: (r) => {
const { locked: e, c: i = $ } = r;
return {
[i.contentSticky]: e
};
},
hierarchyCell: (r) => {
const { c: e = $.hierarchyCell } = r;
return {
[e.main]: !0,
[e.header]: !0
};
},
td: (r) => {
const { selected: e, c: i = $.td } = r;
return {
[i.main]: !0,
[i.selected]: e
};
},
detailTd: (r) => {
const { c: e = $.detailTd } = r;
return {
[e.main]: !0,
[e.cell]: !0
};
},
editTd: (r) => {
const { selected: e, c: i = $.editTd } = r;
return {
[i.main]: !0,
[i.cell]: !0,
[i.selected]: e
};
},
hierarchyTd: (r) => {
const { c: e = $.hierarchyTd } = r;
return {
[e.main]: !0,
[e.cell]: !0
};
}
};
export {
T as uGrid
};