communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
37 lines • 2.3 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import React, { useRef } from 'react';
import { _useContainerHeight } from './utils/responsive';
import { VerticalGallery } from './VerticalGallery';
import { calculateVerticalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';
/**
* Responsive container for the VerticalGallery Component. Performs calculations for number of children
* for the VerticalGallery
* @param props
*
* @beta
*/
export const ResponsiveVerticalGallery = (props) => {
var _a;
const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem, isShort, onFetchTilesToRender, onChildrenPerPageChange } = props;
const containerRef = useRef(null);
const containerHeight = _useContainerHeight(containerRef);
const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;
const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;
let containerHeightWithoutPadding = Math.max((containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0) - topPadding - bottomPadding, 0);
if (Number.isNaN(containerHeightWithoutPadding)) {
containerHeightWithoutPadding = 0;
}
const childrenPerPage = calculateVerticalChildrenPerPage({
numberOfChildren: (_a = React.Children.count(children)) !== null && _a !== void 0 ? _a : 0,
containerHeight: containerHeightWithoutPadding,
gapHeightRem,
controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2,
isShort: isShort !== null && isShort !== void 0 ? isShort : false
});
onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
return (React.createElement("div", { "data-ui-id": "responsive-vertical-gallery", ref: containerRef, className: mergeStyles(containerStyles) },
React.createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, children)));
};
//# sourceMappingURL=ResponsiveVerticalGallery.js.map