communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
32 lines • 2.07 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import React, { useRef } from 'react';
import { HorizontalGallery } from './HorizontalGallery';
import { _useContainerWidth } from './utils/responsive';
import { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';
/**
* Wrapped HorizontalGallery that adjusts the number of items per page based on the
* available width obtained from a ResizeObserver, width per child, gap width, and button width
*/
export const ResponsiveHorizontalGallery = (props) => {
const { gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender, onChildrenPerPageChange } = props;
const containerRef = useRef(null);
const containerWidth = _useContainerWidth(containerRef);
const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
let containerWidthWithoutPadding = Math.max((containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding, 0);
if (Number.isNaN(containerWidthWithoutPadding)) {
containerWidthWithoutPadding = 0;
}
const childrenPerPage = calculateHorizontalChildrenPerPage({
numberOfChildren: React.Children.count(props.children),
containerWidth: containerWidthWithoutPadding,
gapWidthRem,
buttonWidthRem
});
onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
return (React.createElement("div", { "data-ui-id": "responsive-horizontal-gallery", ref: containerRef, className: mergeStyles(props.containerStyles) },
React.createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, props.children)));
};
//# sourceMappingURL=ResponsiveHorizontalGallery.js.map