@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
26 lines • 1.68 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Stack, mergeStyles } from '@fluentui/react';
import React, { useEffect, useRef } from 'react';
import { useDraggable } from 'react-use-draggable-scroll';
import { scrollableHorizontalGalleryContainerStyles, scrollableHorizontalGalleryStyles } from './styles/ScrollableHorizontalGallery.style';
/**
* Component to display elements horizontally in a scrollable container
* @private
*/
export const ScrollableHorizontalGallery = (props) => {
const { horizontalGalleryElements, onFetchTilesToRender, containerStyles } = props;
useEffect(() => {
const indexesArray = [...Array(horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length).keys()];
if (onFetchTilesToRender && indexesArray) {
onFetchTilesToRender(indexesArray !== null && indexesArray !== void 0 ? indexesArray : []);
}
}, [onFetchTilesToRender, horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length]);
const ref = useRef();
const { events: dragabbleEvents } = useDraggable(ref);
return React.createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles) }),
React.createElement(Stack, { "data-ui-id": "scrollable-horizontal-gallery", horizontal: true, styles: scrollableHorizontalGalleryStyles, tokens: {
childrenGap: '0.5rem'
} }, horizontalGalleryElements));
};
//# sourceMappingURL=ScrollableHorizontalGallery.js.map