devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
123 lines (122 loc) • 4.31 kB
JavaScript
/**
* DevExtreme (esm/__internal/grids/new/card_view/content_view/content/card/header.js)
* Version: 25.1.3
* Build date: Wed Jun 25 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import {
createVNode,
createFragment,
createComponentVNode
} from "inferno";
import {
isCommandKeyPressed
} from "../../../../../../../common/core/events/utils/index";
import messageLocalization from "../../../../../../../localization/message";
import {
isDefined
} from "../../../../../../core/utils/m_type";
import {
Toolbar
} from "../../../../../../grids/new/grid_core/inferno_wrappers/toolbar";
import {
normalizeToolbarItems
} from "../../../../../../grids/new/grid_core/toolbar/utils";
import {
Component
} from "inferno";
export const CLASSES = {
cardHeader: "dx-cardview-card-header",
cardSelectCheckBox: "dx-cardview-select-checkbox"
};
export class CardHeader extends Component {
getCheckBoxItem() {
const {
isCheckBoxesRendered: isCheckBoxesRendered,
selectCard: selectCard,
card: card
} = this.props;
if (card && isCheckBoxesRendered) {
return {
location: "before",
name: "selectionCheckBox",
widget: "dxCheckBox",
cssClass: CLASSES.cardSelectCheckBox,
options: {
elementAttr: {
"aria-label": messageLocalization.format("dxCardView-ariaSelectCard")
},
value: card.isSelected,
onValueChanged: e => {
const event = e.event;
null === selectCard || void 0 === selectCard || selectCard(card, {
control: isCommandKeyPressed(event),
shift: event.shiftKey,
needToUpdateCheckboxes: true
});
event.stopPropagation()
}
}
}
}
return null
}
getDefaultToolbarItems() {
const {
captionExpr: captionExpr,
card: card,
allowUpdating: allowUpdating,
allowDeleting: allowDeleting,
onEdit: onEdit,
onDelete: onDelete
} = this.props;
const checkBoxItem = this.getCheckBoxItem();
const captionItem = !!captionExpr && (null === card || void 0 === card ? void 0 : card[captionExpr]) && {
name: "caption",
location: "before",
text: card[captionExpr]
};
const updateButton = allowUpdating && {
name: "updateButton",
location: "after",
widget: "dxButton",
options: {
icon: "edit",
onClick: onEdit,
stylingMode: "text"
}
};
const deleteButton = allowDeleting && {
name: "deleteButton",
location: "after",
widget: "dxButton",
options: {
icon: "trash",
onClick: onDelete,
stylingMode: "text"
}
};
const items = [checkBoxItem, captionItem, updateButton, deleteButton].filter((item => !!item));
return items
}
render() {
const {
visible: visibleProp,
items: userToolbarItems,
template: Template,
card: card
} = this.props;
const toolbarItems = normalizeToolbarItems(this.getDefaultToolbarItems(), userToolbarItems, ["caption", "selectionCheckBox", "updateButton", "deleteButton"]);
const visible = isDefined(visibleProp) ? visibleProp : !!toolbarItems.length;
if (!visible) {
return createFragment()
}
return createVNode(1, "div", CLASSES.cardHeader, Template ? createComponentVNode(2, Template, {
card: card
}) : createComponentVNode(2, Toolbar, {
items: toolbarItems
}), 0)
}
}