devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
120 lines (118 loc) • 4.56 kB
JavaScript
/**
* DevExtreme (cjs/__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/
*/
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CardHeader = exports.CLASSES = void 0;
var _inferno = require("inferno");
var _index = require("../../../../../../../common/core/events/utils/index");
var _message = _interopRequireDefault(require("../../../../../../../localization/message"));
var _m_type = require("../../../../../../core/utils/m_type");
var _toolbar = require("../../../../../../grids/new/grid_core/inferno_wrappers/toolbar");
var _utils = require("../../../../../../grids/new/grid_core/toolbar/utils");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const CLASSES = exports.CLASSES = {
cardHeader: "dx-cardview-card-header",
cardSelectCheckBox: "dx-cardview-select-checkbox"
};
class CardHeader extends _inferno.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": _message.default.format("dxCardView-ariaSelectCard")
},
value: card.isSelected,
onValueChanged: e => {
const event = e.event;
null === selectCard || void 0 === selectCard || selectCard(card, {
control: (0, _index.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 = (0, _utils.normalizeToolbarItems)(this.getDefaultToolbarItems(), userToolbarItems, ["caption", "selectionCheckBox", "updateButton", "deleteButton"]);
const visible = (0, _m_type.isDefined)(visibleProp) ? visibleProp : !!toolbarItems.length;
if (!visible) {
return (0, _inferno.createFragment)()
}
return (0, _inferno.createVNode)(1, "div", CLASSES.cardHeader, Template ? (0, _inferno.createComponentVNode)(2, Template, {
card: card
}) : (0, _inferno.createComponentVNode)(2, _toolbar.Toolbar, {
items: toolbarItems
}), 0)
}
}
exports.CardHeader = CardHeader;