@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
81 lines • 5.43 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/** @jsx withSlots */
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var Button_1 = require("../Button/Button");
var Foundation_1 = require("../../Foundation");
exports.MicroFeedbackView = function (props) {
var children = props.children, sendFollowUpIndex = props.sendFollowUpIndex, likeIconTitle = props.likeIconTitle, dislikeIconTitle = props.dislikeIconTitle, likeIconAriaLabel = props.likeIconAriaLabel, dislikeIconAriaLabel = props.dislikeIconAriaLabel, likeQuestion = props.likeQuestion, dislikeQuestion = props.dislikeQuestion, vote = props.vote, isFollowUpVisible = props.isFollowUpVisible, isThanksVisible = props.isThanksVisible, likeRef = props.likeRef, dislikeRef = props.dislikeRef, onCalloutDismiss = props.onCalloutDismiss, onThanksDismiss = props.onThanksDismiss, onThanksShow = props.onThanksShow, onLikeVote = props.onLikeVote, onDislikeVote = props.onDislikeVote, thanksText = props.thanksText, inline = props.inline;
var likeIcon = vote === 'like' ? 'LikeSolid' : 'Like';
var dislikeIcon = vote === 'dislike' ? 'DislikeSolid' : 'Dislike';
var hideDislikeCallout = vote !== 'dislike' || !isFollowUpVisible;
var hideLikeCallout = vote !== 'like' || !isFollowUpVisible;
var Slots = Foundation_1.getSlots(props, {
root: office_ui_fabric_react_1.Stack,
iconContainer: office_ui_fabric_react_1.Stack,
followUpContainer: inline ? office_ui_fabric_react_1.Stack : office_ui_fabric_react_1.Callout,
followUpQuestion: office_ui_fabric_react_1.Text,
followUpOptionList: office_ui_fabric_react_1.List,
// eslint-disable-next-line deprecation/deprecation
followUpOption: Button_1.Button,
followUpOptionText: office_ui_fabric_react_1.Text,
thanksContainer: office_ui_fabric_react_1.Callout,
});
// eslint-disable-next-line deprecation/deprecation
var followUpOptionTokens = { contentPadding: '6px 0px' };
var renderFollowup = function (followUp, targetRef) {
var onRenderCalloutItem = function (item, index) {
var listOption = function () {
onCalloutDismiss();
if (sendFollowUpIndex && index !== undefined && followUp) {
sendFollowUpIndex(followUp.id, index);
onThanksShow();
}
};
return (Foundation_1.withSlots(Slots.followUpOption, { "data-is-focusable": true,
// eslint-disable-next-line react/jsx-no-bind
onClick: listOption, tokens: followUpOptionTokens },
Foundation_1.withSlots(Slots.followUpOptionText, null, "" + item)));
};
return (Foundation_1.withSlots(Slots.followUpContainer, { gapSpace: 0, onDismiss: onCalloutDismiss, role: "alertdialog", setInitialFocus: true, target: targetRef },
Foundation_1.withSlots(office_ui_fabric_react_1.FocusZone, { direction: office_ui_fabric_react_1.FocusZoneDirection.vertical },
Foundation_1.withSlots(Slots.followUpQuestion, { block: true, variant: "small" }, followUp.question),
Foundation_1.withSlots(Slots.followUpOptionList, { items: followUp.options,
// eslint-disable-next-line react/jsx-no-bind
onRenderCell: onRenderCalloutItem }))));
};
var showThanks = function (followUp, voteType) {
// If vote while thanks is showing, dismiss
if (isThanksVisible) {
onThanksDismiss();
}
// Show thanks if there is no follow up question and not unselecting a vote
if (!followUp && vote !== voteType) {
onThanksShow();
}
};
var likeVoteClick = function () {
showThanks(likeQuestion, 'like');
onLikeVote();
};
var dislikeVoteClick = function () {
showThanks(dislikeQuestion, 'dislike');
onDislikeVote();
};
return (Foundation_1.withSlots(Slots.root, null,
Foundation_1.withSlots(Slots.iconContainer, { horizontal: true },
children,
Foundation_1.withSlots("div", { ref: likeRef },
Foundation_1.withSlots(office_ui_fabric_react_1.IconButton, { menuIconProps: { iconName: likeIcon }, title: likeIconTitle, ariaLabel: likeIconAriaLabel,
// eslint-disable-next-line react/jsx-no-bind
onClick: likeVoteClick })),
Foundation_1.withSlots("div", { ref: dislikeRef },
Foundation_1.withSlots(office_ui_fabric_react_1.IconButton, { menuIconProps: { iconName: dislikeIcon }, title: dislikeIconTitle, ariaLabel: dislikeIconAriaLabel,
// eslint-disable-next-line react/jsx-no-bind
onClick: dislikeVoteClick }))),
likeQuestion && !hideLikeCallout && renderFollowup(likeQuestion, likeRef.current),
dislikeQuestion && !hideDislikeCallout && renderFollowup(dislikeQuestion, dislikeRef.current),
thanksText && isThanksVisible && (Foundation_1.withSlots(Slots.thanksContainer, { setInitialFocus: false, target: vote === 'like' ? likeRef.current : dislikeRef.current, gapSpace: 0, isBeakVisible: false, onDismiss: onThanksDismiss },
Foundation_1.withSlots(Slots.followUpOptionText, { block: true, variant: "small" }, thanksText)))));
};
//# sourceMappingURL=MicroFeedback.view.js.map