devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
176 lines (174 loc) • 8.63 kB
JavaScript
/**
* DevExtreme (cjs/__internal/grids/new/card_view/content_view/view.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/
*/
"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 _signalsCore = require("@preact/signals-core");
var _index = 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");
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function(n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) {
({}).hasOwnProperty.call(t, r) && (n[r] = t[r])
}
}
return n
}, _extends.apply(null, arguments)
}
class ContentView extends _view.ContentView {
constructor() {
super(...arguments);
this.cardMinWidth = this.options.oneWay("cardMinWidth");
this.rowHeight = (0, _signalsCore.signal)(0);
this.columnGap = (0, _signalsCore.signal)(0);
this.cardsPerRowProp = this.options.oneWay("cardsPerRow");
this.cardsPerRow = (0, _signalsCore.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 _index.NavigationStrategyMatrix(this.cardsPerRow.peek());
this.component = _content_view.ContentView;
this.items = (0, _signalsCore.computed)((() => this.itemsController.items.value.filter((item => item.visible))));
(0, _signalsCore.effect)((() => {
this.navigationStrategy.updateColumnsCount(this.cardsPerRow.value)
}))
}
getProps() {
return (0, _signalsCore.computed)((() => _extends({}, 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;