devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
164 lines (163 loc) • 8.22 kB
JavaScript
/**
* DevExtreme (cjs/__internal/grids/new/card_view/content_view/view.js)
* Version: 25.2.7
* Build date: Tue May 05 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ContentView = void 0;
var _data = require("../../../../../core/utils/data");
var _type = require("../../../../../core/utils/type");
var _index = require("../../../../core/state_manager/index");
var _index2 = require("../../../../grids/new/grid_core/keyboard_navigation/index");
var _view = require("../../grid_core/content_view/view");
var _content_view = require("./content_view");
var _utils = require("./utils");
class ContentView extends _view.ContentView {
constructor() {
super(...arguments);
this.cardMinWidth = this.options.oneWay("cardMinWidth");
this.rowHeight = (0, _index.signal)(0);
this.columnGap = (0, _index.signal)(0);
this.cardsPerRowProp = this.options.oneWay("cardsPerRow");
this.cardsPerRow = (0, _index.computed)(() => {
const width = this.width.value;
const cardMinWidth = this.cardMinWidth.value;
const pageSize = this.dataController.pageSize.value;
const cardsPerRowProp = this.cardsPerRowProp.value;
if ("auto" !== cardsPerRowProp) {
return cardsPerRowProp
}
const result = (0, _utils.factors)(pageSize).reverse().find(cardsPerRow => {
const cardWidth = (width - this.columnGap.value * (cardsPerRow - 1)) / cardsPerRow;
return cardMinWidth <= cardWidth
});
return result ?? 1
});
this.navigationStrategy = new _index2.NavigationStrategyMatrix(this.cardsPerRow.peek());
this.component = _content_view.ContentView;
this.items = (0, _index.computed)(() => this.itemsController.items.value.filter(item => item.visible));
(0, _index.effect)(() => {
this.navigationStrategy.updateColumnsCount(this.cardsPerRow.value)
})
}
getProps() {
return (0, _index.computed)(() => Object.assign({}, this.getBaseProps(), {
contentProps: {
items: this.items.value,
kbnEnabled: this.keyboardNavigationController.enabled.value,
navigationStrategy: this.navigationStrategy,
isLoading: this.dataController.isReloading.value,
needToHiddenCheckBoxes: this.selectionController.needToHiddenCheckBoxes.value,
cardsPerRow: this.cardsPerRow.value,
onRowHeightChange: height => {
this.rowHeight.value = height
},
onFirstElementChange: firstElement => {
this.keyboardNavigationController.setFirstCardElement(firstElement)
},
onColumnGapChange: gap => {
this.columnGap.value = gap
},
onPageChange: this.onPageChange.bind(this),
showCardContextMenu: this.showCardContextMenu.bind(this),
wordWrapEnabled: this.options.oneWay("wordWrapEnabled").value,
cardProps: {
minWidth: this.cardMinWidth.value,
maxWidth: this.options.oneWay("cardMaxWidth").value,
fieldHintEnabled: this.options.oneWay("fieldHintEnabled").value,
isCheckBoxesRendered: this.selectionController.isCheckBoxesRendered.value,
allowSelectOnClick: this.selectionController.allowSelectOnClick.value,
onHold: this.onCardHold.bind(this),
onClick: this.options.action("onCardClick").value,
onDblClick: this.options.action("onCardDblClick").value,
onHoverChanged: this.options.action("onCardHoverChanged").value,
onPrepared: this.options.action("onCardPrepared").value,
fieldProps: {
captionProps: {
onClick: this.options.action("onFieldCaptionClick").value,
onDblClick: this.options.action("onFieldCaptionDblClick").value,
onPrepared: this.options.action("onFieldCaptionPrepared").value
},
valueProps: {
onClick: this.options.action("onFieldValueClick").value,
onDblClick: this.options.action("onFieldValueDblClick").value,
onPrepared: this.options.action("onFieldValuePrepared").value
}
},
onEdit: (key, returnFocusTo) => {
this.keyboardNavigationController.setReturnFocusTo(returnFocusTo);
this.editingController.editCard(key)
},
onDelete: (key, returnFocusTo) => {
this.keyboardNavigationController.setReturnFocusTo(returnFocusTo);
this.editingController.deleteCard(key)
},
allowUpdating: this.editingController.allowUpdating.value,
allowDeleting: this.editingController.allowDeleting.value,
footerTemplate: this.options.template("cardFooterTemplate").value,
template: this.options.template("cardTemplate").value,
contentTemplate: this.options.template("cardContentTemplate").value,
cover: {
imageExpr: this.processExpr(this.options.oneWay("cardCover.imageExpr").value),
altExpr: this.processExpr(this.options.oneWay("cardCover.altExpr").value),
maxHeight: this.options.oneWay("cardCover.maxHeight").value,
ratio: this.options.oneWay("cardCover.aspectRatio").value,
template: this.options.template("cardCover.template").value
},
header: {
visible: this.options.oneWay("cardHeader.visible").value,
items: this.options.oneWay("cardHeader.items").value,
template: this.options.template("cardHeader.template").value
},
toolbar: this.options.oneWay("cardHeader.items").value,
selectCard: this.selectCard.bind(this),
onSelectAllCards: this.onSelectAllCards.bind(this),
onSearchFocus: () => {
this.searchUIController.doUIAction("focusSearchTextBox")
},
onFocusedCardChanged: (card, cardIdx, element) => {
this.keyboardNavigationController.onFocusedCardChanged(card, cardIdx, element)
}
}
}
}))
}
processExpr(expr) {
if (!(0, _type.isDefined)(expr)) {
return
}
return (0, _data.compileGetter)(expr)
}
selectCard(card, options) {
if (options.needToUpdateCheckboxes) {
this.selectionController.updateSelectionCheckBoxesVisible(true)
}
this.selectionController.changeCardSelection(card.index, options)
}
onCardHold(e) {
this.selectionController.processLongTap(e.card)
}
showCardContextMenu(e, card, cardIndex) {
this.contextMenuController.show(e, "content", {
card: card,
cardIndex: cardIndex
})
}
onSelectAllCards() {
this.selectionController.selectAll()
}
onPageChange(value) {
if (value < 0) {
this.dataController.decreasePageIndex()
} else {
this.dataController.increasePageIndex()
}
}
}
exports.ContentView = ContentView;