@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
48 lines • 3.29 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useState, useCallback } from 'react';
import { Text, useTheme, Stack } from '@fluentui/react';
import { Rating, RatingSize } from '@fluentui/react';
import { helperTextStyle, ratingHelperTextStyle, ratingStyles, titleContainerClassName } from './StarSurvey.styles';
/**
* A component to allow users to send numerical ratings regarding call quality
*
* @internal
*/
export const _StarSurvey = (props) => {
const { onStarRatingSelected, selectedIcon, unselectedIcon, strings } = props;
const [rating, setRating] = useState(0);
const [ratingHelperText, setRatingHelperText] = useState('');
const theme = useTheme();
const onRatingChange = useCallback((ev, rating) => {
if (rating) {
setRating(rating);
switch (rating) {
case 1:
setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyOneStarText);
break;
case 2:
setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyTwoStarText);
break;
case 3:
setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyThreeStarText);
break;
case 4:
setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyFourStarText);
break;
case 5:
setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyFiveStarText);
break;
default:
break;
}
onStarRatingSelected === null || onStarRatingSelected === void 0 ? void 0 : onStarRatingSelected(rating);
}
}, [strings === null || strings === void 0 ? void 0 : strings.starSurveyOneStarText, strings === null || strings === void 0 ? void 0 : strings.starSurveyTwoStarText, strings === null || strings === void 0 ? void 0 : strings.starSurveyThreeStarText, strings === null || strings === void 0 ? void 0 : strings.starSurveyFourStarText, strings === null || strings === void 0 ? void 0 : strings.starSurveyFiveStarText, onStarRatingSelected]);
return React.createElement(Stack, { verticalAlign: "center" },
React.createElement(Stack, { className: titleContainerClassName },
React.createElement(Text, { className: helperTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.starSurveyHelperText)),
React.createElement(Rating, { max: 5, size: RatingSize.Large, defaultRating: 0, allowZeroStars: true, rating: rating, onChange: onRatingChange, styles: ratingStyles(theme), icon: selectedIcon !== null && selectedIcon !== void 0 ? selectedIcon : 'SurveyStarIconFilled', unselectedIcon: unselectedIcon !== null && unselectedIcon !== void 0 ? unselectedIcon : 'SurveyStarIcon', ariaLabelFormat: strings === null || strings === void 0 ? void 0 : strings.starRatingAriaLabel }),
React.createElement(Text, { className: ratingHelperTextStyle(theme) }, ratingHelperText));
};
//# sourceMappingURL=StarSurvey.js.map