@selfcommunity/react-ui/lib/esm/components/VoteButton/VoteButton.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useRef, useState } from 'react';
import { styled } from '@mui/material/styles';
import { LoadingButton } from '@mui/lab';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import Icon from '@mui/material/Icon';
import { IconButton, Paper, Popper, Tooltip, useMediaQuery, useTheme } from '@mui/material';
import { UserUtils, useSCContext, useSCFetchVote, useSCUser } from '@selfcommunity/react-core';
import { FormattedMessage } from 'react-intl';
import { useSnackbar } from 'notistack';
import { catchUnauthorizedActionByBlockedUser } from '../../utils/errors';
const PREFIX = 'SCVoteButton';
const classes = {
    root: `${PREFIX}-root`,
    voted: `${PREFIX}-voted`,
    popperRoot: `${PREFIX}-popper-root`,
    reactionList: `${PREFIX}-reaction-list`,
    reaction: `${PREFIX}-reaction`
};
const Root = styled(LoadingButton, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => [styles.root, styles.voted]
})(({ theme }) => ({}));
const PopperRoot = styled(Popper, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.popperRoot
})(() => ({}));
/**
 * > API documentation for the Community-JS Vote Button component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {VoteAudienceButton} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCVoteButton` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCVoteButton-root|Styles applied to the root element.|
 |voted|.SCVoteButton-voted|Styles applied to the root element when the user has vote the contribution.|

 * @param inProps
 */
export default function VoteButton(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, contributionId, contributionType, contribution = null, onVote } = props, rest = __rest(props, ["className", "contributionId", "contributionType", "contribution", "onVote"]);
    // STATE
    const [anchorEl, setAnchorEl] = useState(null);
    // REF
    const timeoutRef = useRef(null);
    // CONTEXT
    const scContext = useSCContext();
    const scUserContext = useSCUser();
    const { enqueueSnackbar } = useSnackbar();
    // HANDLERS
    const handleMouseEnter = (event) => {
        handleClearTimeout();
        timeoutRef.current = setTimeout(() => setAnchorEl(event.target), 1000);
    };
    const handleMouseLeave = (event) => {
        handleClearTimeout();
        timeoutRef.current = setTimeout(() => setAnchorEl(null), 500);
    };
    const handleClearTimeout = () => {
        timeoutRef.current && clearTimeout(timeoutRef.current);
        timeoutRef.current = null;
    };
    /**
     * Perform vote action
     * @param reaction
     */
    const handleVoteAction = (reaction) => {
        if (!scUserContext.user) {
            scContext.settings.handleAnonymousAction();
        }
        else if (UserUtils.isBlocked(scUserContext.user)) {
            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                variant: 'warning',
                autoHideDuration: 3000
            });
        }
        else {
            handleVote(reaction);
        }
    };
    /**
     * Handle callback onVote
     * @param contribution
     * @param error
     */
    const handleOnVote = (contribution, error) => {
        setAnchorEl(null);
        if (error) {
            if (!catchUnauthorizedActionByBlockedUser(error, scUserContext.managers.blockedUsers.isBlocked(contribution.author), enqueueSnackbar)) {
                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
                    variant: 'error',
                    autoHideDuration: 3000
                });
            }
        }
        else {
            onVote && onVote(contribution);
        }
    };
    // HOOKS
    const { isLoading, isVoting, contributionVoted, contributionReaction, reactions, handleVote, error } = useSCFetchVote({
        id: contributionId,
        contributionType,
        contribution,
        onVote: handleOnVote
    });
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
    // MEMO
    const rootProps = useMemo(() => {
        if (!reactions.default) {
            return {};
        }
        return {
            onMouseEnter: handleMouseEnter,
            onMouseLeave: handleMouseLeave
        };
    }, [reactions]);
    // RENDER
    const button = (_jsx(Root, Object.assign({ onClick: isMobile && reactions.reactions
            ? handleMouseEnter
            : () => handleVoteAction(contributionReaction ? contributionReaction : reactions.default ? reactions.default : null), disabled: isLoading || Boolean(error), loading: isVoting, className: classNames(classes.root, className, {
            [classes.voted]: scUserContext.user && contributionVoted
        }) }, rest, rootProps, { children: scUserContext.user && contributionVoted ? (contributionReaction ? (_jsx(Icon, { children: _jsx("img", { alt: contributionReaction.label, src: contributionReaction.image, width: "100%", height: "100%" }) })) : (_jsx(Icon, { children: "thumb_up" }))) : (_jsx(Icon, { children: "thumb_up_off_alt" })) })));
    return (_jsxs(_Fragment, { children: [reactions.default ? (button) : (_jsx(Tooltip, Object.assign({ title: contributionVoted ? (_jsx(FormattedMessage, { id: "ui.voteButton.voteDown", defaultMessage: "ui.voteButton.voteDown" })) : (_jsx(FormattedMessage, { id: "ui.voteButton.voteUp", defaultMessage: "ui.voteButton.voteUp" })) }, { children: _jsx("span", { children: button }) }))), reactions.default && Boolean(anchorEl) && !isVoting && !isLoading && (_jsx(PopperRoot, Object.assign({ id: `vote_${contributionId}_${contributionType}_popper`, className: classes.popperRoot, open: true, anchorEl: anchorEl, placement: "top", keepMounted: true }, { children: _jsx(Paper, Object.assign({ className: classes.reactionList, onMouseEnter: handleClearTimeout, onMouseLeave: handleMouseLeave }, { children: reactions.reactions
                        .filter((reaction) => !contributionVoted || (contributionVoted && contributionReaction.id !== reaction.id) ? reaction.active : reaction)
                        .map((reaction) => (_jsx(IconButton, Object.assign({ className: classes.reaction, onClick: () => handleVoteAction(reaction) }, { children: _jsx(Icon, { children: _jsx("img", { alt: reaction.label, src: reaction.image, width: "100%", height: "100%" }) }) }), reaction.id))) })) })))] }));
}