devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
188 lines (186 loc) • 12.3 kB
JavaScript
/**
* DevExtreme (cjs/__internal/grids/new/card_view/content_view/content/content.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.Content = exports.CLASSES = void 0;
var _inferno = require("inferno");
var _utils = require("../../../../../../common/core/events/utils");
var _combine_classes = require("../../../../../core/utils/combine_classes");
var _utils2 = require("../../../../../grids/new/grid_core/accessibility/utils");
var _index = require("../../../../../grids/new/grid_core/keyboard_navigation/index");
var _card = require("./card/card");
const CLASSES = exports.CLASSES = {
content: "dx-cardview-content",
grid: "dx-cardview-content-grid",
selectCheckBoxesHidden: "dx-cardview-select-checkboxes-hidden",
wrapEnabled: "dx-cardview-word-wrap-enabled"
};
const CardWithKbn = (0, _index.withKeyDownHandler)((0, _index.withKbnNavigationItem)(_card.Card));
function getInfernoCardKey(card) {
if ("string" === typeof card.key || "number" === typeof card.key) {
return card.key
}
return
}
class Content extends _inferno.Component {
constructor() {
super(...arguments);
this.containerRef = (0, _inferno.createRef)();
this.cardElementRefs = [];
this.focusFirstCardAfterReload = false
}
getCssVariables() {
var _this$props$cardProps, _this$props$cardProps3, _this$props$cardProps5, _this$props$cardProps7;
const variables = {};
if (this.props.cardsPerRow) {
variables["--dx-cardview-cardsperrow"] = this.props.cardsPerRow
}
if (null !== (_this$props$cardProps = this.props.cardProps) && void 0 !== _this$props$cardProps && _this$props$cardProps.minWidth) {
var _this$props$cardProps2;
variables["--dx-cardview-card-min-width"] = `${null===(_this$props$cardProps2=this.props.cardProps)||void 0===_this$props$cardProps2?void 0:_this$props$cardProps2.minWidth}px`
}
if (null !== (_this$props$cardProps3 = this.props.cardProps) && void 0 !== _this$props$cardProps3 && _this$props$cardProps3.maxWidth) {
var _this$props$cardProps4;
variables["--dx-cardview-card-max-width"] = `${null===(_this$props$cardProps4=this.props.cardProps)||void 0===_this$props$cardProps4?void 0:_this$props$cardProps4.maxWidth}px`
}
if (null !== (_this$props$cardProps5 = this.props.cardProps) && void 0 !== _this$props$cardProps5 && null !== (_this$props$cardProps5 = _this$props$cardProps5.cover) && void 0 !== _this$props$cardProps5 && _this$props$cardProps5.maxHeight) {
var _this$props$cardProps6;
variables["--dx-cardview-card-cover-max-height"] = `${null===(_this$props$cardProps6=this.props.cardProps)||void 0===_this$props$cardProps6||null===(_this$props$cardProps6=_this$props$cardProps6.cover)||void 0===_this$props$cardProps6?void 0:_this$props$cardProps6.maxHeight}px`
}
if (null !== (_this$props$cardProps7 = this.props.cardProps) && void 0 !== _this$props$cardProps7 && null !== (_this$props$cardProps7 = _this$props$cardProps7.cover) && void 0 !== _this$props$cardProps7 && _this$props$cardProps7.ratio) {
var _this$props$cardProps8;
variables["--dx-cardview-card-cover-ratio"] = `${null===(_this$props$cardProps8=this.props.cardProps)||void 0===_this$props$cardProps8||null===(_this$props$cardProps8=_this$props$cardProps8.cover)||void 0===_this$props$cardProps8?void 0:_this$props$cardProps8.ratio}`
}
return variables
}
render() {
const className = (0, _combine_classes.combineClasses)({
[CLASSES.content]: true,
[CLASSES.grid]: true,
[CLASSES.selectCheckBoxesHidden]: !!this.props.needToHiddenCheckBoxes,
[CLASSES.wrapEnabled]: !!this.props.wordWrapEnabled
});
const CardItem = this.props.kbnEnabled ? CardWithKbn : _card.Card;
this.cardElementRefs = new Array(this.props.items.length).fill(void 0).map(() => (0, _inferno.createRef)());
return (0, _inferno.createComponentVNode)(2, _index.KbnNavigationContainer, {
enabled: this.props.kbnEnabled,
navigationStrategy: this.props.navigationStrategy,
onFocusMoved: (newIdx, element) => {
this.onCardFocusMoved(newIdx, element)
},
children: (0, _inferno.createVNode)(1, "div", className, this.props.items.map((item, idx) => (0, _inferno.normalizeProps)((0, _inferno.createComponentVNode)(2, CardItem, Object.assign({}, this.props.cardProps, {
elementRef: this.cardElementRefs[idx],
navigationIdx: idx,
kbnEnabled: this.props.kbnEnabled,
navigationStrategy: this.props.navigationStrategy,
keyDownConfig: {
PageUp: () => {
var _this$props$onPageCha, _this$props;
null === (_this$props$onPageCha = (_this$props = this.props).onPageChange) || void 0 === _this$props$onPageCha || _this$props$onPageCha.call(_this$props, -1);
this.focusFirstCardAfterReload = true
},
PageDown: () => {
var _this$props$onPageCha2, _this$props2;
null === (_this$props$onPageCha2 = (_this$props2 = this.props).onPageChange) || void 0 === _this$props$onPageCha2 || _this$props$onPageCha2.call(_this$props2, 1);
this.focusFirstCardAfterReload = true
},
Space: event => {
var _this$props$cardProps9, _this$props$cardProps0;
null === (_this$props$cardProps9 = this.props.cardProps) || void 0 === _this$props$cardProps9 || null === (_this$props$cardProps0 = _this$props$cardProps9.selectCard) || void 0 === _this$props$cardProps0 || _this$props$cardProps0.call(_this$props$cardProps9, item, {
control: (0, _utils.isCommandKeyPressed)(event),
shift: event.shiftKey,
needToUpdateCheckboxes: true
})
},
"Space+shift": event => {
var _this$props$cardProps1, _this$props$cardProps10;
null === (_this$props$cardProps1 = this.props.cardProps) || void 0 === _this$props$cardProps1 || null === (_this$props$cardProps10 = _this$props$cardProps1.selectCard) || void 0 === _this$props$cardProps10 || _this$props$cardProps10.call(_this$props$cardProps1, item, {
control: (0, _utils.isCommandKeyPressed)(event),
shift: event.shiftKey,
needToUpdateCheckboxes: true
})
},
"a+ctrl": () => {
var _this$props$cardProps11, _this$props$cardProps12;
null === (_this$props$cardProps11 = this.props.cardProps) || void 0 === _this$props$cardProps11 || null === (_this$props$cardProps12 = _this$props$cardProps11.onSelectAllCards) || void 0 === _this$props$cardProps12 || _this$props$cardProps12.call(_this$props$cardProps11)
},
"f+ctrl": () => {
var _this$props$cardProps13, _this$props$cardProps14;
null === (_this$props$cardProps13 = this.props.cardProps) || void 0 === _this$props$cardProps13 || null === (_this$props$cardProps14 = _this$props$cardProps13.onSearchFocus) || void 0 === _this$props$cardProps14 || _this$props$cardProps14.call(_this$props$cardProps13)
},
"Enter+shift": () => {
var _this$props$cardProps15, _this$props$cardProps16;
null === (_this$props$cardProps15 = this.props.cardProps) || void 0 === _this$props$cardProps15 || null === (_this$props$cardProps16 = _this$props$cardProps15.onEdit) || void 0 === _this$props$cardProps16 || _this$props$cardProps16.call(_this$props$cardProps15, item.key, this.cardElementRefs[idx].current ?? void 0)
},
Delete: () => {
var _this$props$cardProps17, _this$props$cardProps18;
null === (_this$props$cardProps17 = this.props.cardProps) || void 0 === _this$props$cardProps17 || null === (_this$props$cardProps18 = _this$props$cardProps17.onDelete) || void 0 === _this$props$cardProps18 || _this$props$cardProps18.call(_this$props$cardProps17, item.key, this.cardElementRefs[idx].current ?? void 0)
}
},
caughtEventPreventDefault: true,
card: item,
position: (0, _utils2.getPosition)(idx, this.props.cardsPerRow ?? 1),
onContextMenu: e => {
var _this$props$showCardC, _this$props3;
null === (_this$props$showCardC = (_this$props3 = this.props).showCardContextMenu) || void 0 === _this$props$showCardC || _this$props$showCardC.call(_this$props3, e, item, idx)
},
onFocusMoved: (newIdx, element) => {
this.onCardFocusMoved(newIdx, element)
}
}), getInfernoCardKey(item)))), 0, {
style: this.getCssVariables()
}, null, this.containerRef)
})
}
updateSizesInfo() {
var _this$cardElementRefs, _this$props$onFirstEl, _this$props4, _this$props$onRowHeig, _this$props5, _this$props$onColumnG, _this$props6;
const firstCardElement = (null === (_this$cardElementRefs = this.cardElementRefs[0]) || void 0 === _this$cardElementRefs ? void 0 : _this$cardElementRefs.current) ?? void 0;
null === (_this$props$onFirstEl = (_this$props4 = this.props).onFirstElementChange) || void 0 === _this$props$onFirstEl || _this$props$onFirstEl.call(_this$props4, firstCardElement);
if (!firstCardElement || !this.containerRef.current) {
return
}
const cardHeight = firstCardElement.offsetHeight;
const rowGap = parseFloat(getComputedStyle(this.containerRef.current).rowGap);
const rowHeight = cardHeight + rowGap;
null === (_this$props$onRowHeig = (_this$props5 = this.props).onRowHeightChange) || void 0 === _this$props$onRowHeig || _this$props$onRowHeig.call(_this$props5, rowHeight);
const columnGap = parseFloat(getComputedStyle(this.containerRef.current).columnGap);
null === (_this$props$onColumnG = (_this$props6 = this.props).onColumnGapChange) || void 0 === _this$props$onColumnG || _this$props$onColumnG.call(_this$props6, columnGap)
}
componentDidMount() {
this.updateSizesInfo()
}
componentDidUpdate() {
this.handleFocusPageChange();
this.updateSizesInfo()
}
onCardFocusMoved(newIdx, element) {
var _cardProps$onFocusedC;
const {
items: items,
cardProps: cardProps
} = this.props;
null === cardProps || void 0 === cardProps || null === (_cardProps$onFocusedC = cardProps.onFocusedCardChanged) || void 0 === _cardProps$onFocusedC || _cardProps$onFocusedC.call(cardProps, items[newIdx], newIdx, element)
}
handleFocusPageChange() {
const {
isLoading: isLoading,
navigationStrategy: navigationStrategy
} = this.props;
if (!isLoading && this.focusFirstCardAfterReload) {
this.focusFirstCardAfterReload = false;
const [, newActiveItem] = navigationStrategy.getNewActiveItem(() => navigationStrategy.setActiveItem(0, true));
if (newActiveItem) {
this.onCardFocusMoved(newActiveItem.idx, newActiveItem.element)
}
}
}
}
exports.Content = Content;