communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
59 lines • 3.87 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { FocusZone, Label, mergeStyles, Stack } from '@fluentui/react';
import { useId, useWarnings } from '@fluentui/react-hooks';
import React from 'react';
import { chunk } from '../utils';
import { _VideoEffectsItem } from './VideoEffectsItem';
import { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';
/**
* Picker for choosing a Video Background Effect.
*
* @remarks
* This functions similar to a radio group of buttons, where the user can select one of the options.
*
* @internal
*/
export const _VideoBackgroundEffectsPicker = (props) => {
var _a, _b, _c, _d, _e;
const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState(props.defaultSelectedEffectKey);
// Warn the developer if they use the component in an incorrect controlled way.
useWarnings({
name: 'VideoBackgroundEffectsPicker',
props,
controlledUsage: {
onChangeProp: 'onChange',
valueProp: 'selectedEffectKey',
defaultValueProp: 'defaultSelectedEffectKey'
}
});
const selectedEffect = (_a = props.selectedEffectKey) !== null && _a !== void 0 ? _a : componentControlledSelectedEffectKey;
const setSelectedEffect = (selectedEffectKey) => {
var _a;
setComponentControlledSelectedEffectKey(selectedEffectKey);
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, selectedEffectKey);
};
const convertedOptions = props.options.map((option) => (Object.assign({ isSelected: option.itemKey === selectedEffect, onSelect: () => setSelectedEffect(option.itemKey) }, option)));
const itemsPerRow = (_b = props.itemsPerRow) !== null && _b !== void 0 ? _b : 3;
const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);
// If the final row is not full, fill it with hidden items to ensure layout.
const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - ((_d = (_c = optionsByRow[optionsByRow.length - 1]) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0);
const effectsLabelId = useId('effects-radio-label');
return (React.createElement(FocusZone, null,
React.createElement(Stack, { tokens: { childrenGap: '0.5rem' }, role: "radiogroup", "aria-labelledby": effectsLabelId },
React.createElement(Label, { id: effectsLabelId, className: mergeStyles((_e = props.styles) === null || _e === void 0 ? void 0 : _e.label) }, props.label),
optionsByRow.map((options, rowIndex) => {
var _a;
return (React.createElement(Stack, { className: mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' }, "data-ui-id": "video-effects-picker-row" },
options.map((option, i) => {
if (i === 0 && rowIndex === 0) {
return (React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, componentRef: props.componentRef })));
}
return React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey }));
}),
fillCount > 0 &&
rowIndex === optionsByRow.length - 1 &&
Array.from({ length: fillCount }).map((_, index) => (React.createElement(Stack, { key: index, styles: hiddenVideoEffectsItemContainerStyles, "data-ui-id": "video-effects-hidden-item" })))));
}))));
};
//# sourceMappingURL=VideoBackgroundEffectsPicker.js.map