@selfcommunity/react-ui/lib/esm/shared/CourseTypePopover/CourseTypePopover.js

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Button, Icon, Popover, Stack, styled, Typography } from '@mui/material';
import classNames from 'classnames';
import { memo, useCallback, useState } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
const PREFIX = 'SCCourseTypePopover';
const classes = {
    root: `${PREFIX}-root`,
    button: `${PREFIX}-button`,
    contrastColor: `${PREFIX}-contrast-color`
};
const Root = styled(Stack, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (_props, styles) => styles.root
})(() => ({}));
function CourseTypePopover(props) {
    // PROPS
    const { course, className } = props;
    // STATES
    const [anchorEl, setAnchorEl] = useState(null);
    const open = Boolean(anchorEl);
    // INTL
    const intl = useIntl();
    // HANDLERS
    const handleOpenPopover = useCallback((e) => {
        setAnchorEl(e.currentTarget);
    }, [setAnchorEl]);
    const handlePopoverClose = useCallback(() => {
        setAnchorEl(null);
    }, [setAnchorEl]);
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, classes.contrastColor, className) }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "courses" })), _jsx(Button, Object.assign({ variant: "text", color: "inherit", size: "small", className: classes.button, onClick: handleOpenPopover }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.type", defaultMessage: "ui.course.type", values: {
                            typeOfCourse: intl.formatMessage({
                                id: `ui.course.type.${course.type}`,
                                defaultMessage: `ui.course.type.${course.type}`
                            })
                        } }) })) })), open && (_jsx(Popover, Object.assign({ open: true, anchorEl: anchorEl, anchorOrigin: {
                    vertical: 'bottom',
                    horizontal: 'left'
                }, transformOrigin: {
                    vertical: 'top',
                    horizontal: 'left'
                }, onClose: handlePopoverClose }, { children: _jsx(Box, Object.assign({ sx: { padding: '10px' } }, { children: _jsx(Typography, Object.assign({ component: "span", variant: "body2", sx: { whiteSpace: 'pre-line' } }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${course.type}.info`, defaultMessage: `ui.courseForm.${course.type}.info` }) })) })) })))] })));
}
export default memo(CourseTypePopover);