@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
193 lines (184 loc) • 10.8 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Icon, IconButton, useMediaQuery, styled, useTheme, SwipeableDrawer, MenuList, MenuItem, ListItemIcon, ListItemText, Typography, useThemeProps, Menu } from '@mui/material';
import { Link, SCPreferences, SCRoutes, UserUtils, useSCContext, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
import { FormattedMessage } from 'react-intl';
import Composer from '../Composer';
import { useSnackbar } from 'notistack';
import { getRouteData } from '../../utils/contribution';
import EventFormDialog from '../EventFormDialog';
import classNames from 'classnames';
import GroupForm from '../GroupForm';
import CreateLiveStreamDialog from '../CreateLiveStreamDialog';
import { SCCommunitySubscriptionTier } from '@selfcommunity/types';
const PREFIX = 'SCComposerIconButton';
const classes = {
root: `${PREFIX}-root`,
menuRoot: `${PREFIX}-menu-root`
};
const Root = styled(IconButton, {
name: PREFIX,
slot: 'Root'
})(() => ({}));
const MenuRoot = styled(Menu, {
name: PREFIX,
slot: 'Root',
overridesResolver: (_props, styles) => styles.popperRoot
})(() => ({}));
/**
* > API documentation for the Community-JS Composer Icon Button component. Learn about the available props and the CSS API.
#### Import
```jsx
import {ComposerIconButton} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SComposerIconButton` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SComposerIconButton-root|Styles applied to the root element.|
* @param inProps
*/
export default React.forwardRef(function ComposerIconButton(inProps, ref) {
var _a, _b, _c;
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = __rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
// STATE
const [openComposer, setOpenComposer] = useState(false);
const [openPopper, setOpenPopper] = useState(false);
const [openCreateGroup, setOpenCreateGroup] = useState(false);
const [openCreateEvent, setOpenCreateEvent] = useState(false);
const [openCreateLiveStream, setOpenCreateLiveStream] = useState(false);
const [listItem, setListItem] = useState([
{
icon: 'edit',
text: 'ui.composerIconButton.list.content',
onClick: () => {
setOpenComposer(true);
setOpenPopper(false);
}
}
]);
// REFS
const popperRef = useRef(null);
// CONTEXT
const scUserContext = useSCUser();
const scContext = useSCContext();
const scRoutingContext = useSCRouting();
const { enqueueSnackbar } = useSnackbar();
// HOOKS
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const { preferences } = useSCPreferences();
// MEMOS
const canCreateGroup = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_group; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
const canCreateEvent = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
const canCreateLive = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.permission]);
const isCommunityOwner = useMemo(() => { var _a; return ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === 1; }, [scUserContext.user]);
const isFreeTrialTier = useMemo(() => preferences &&
SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
const canCreateLiveStream = useMemo(() => (isFreeTrialTier && isCommunityOwner && canCreateLive) || (!isFreeTrialTier && canCreateLive), [isFreeTrialTier, isCommunityOwner, canCreateLive]);
const renderContent = useMemo(() => {
return (_jsx(MenuList, { children: listItem.map((item, i) => (_jsxs(MenuItem, Object.assign({ onClick: item.onClick }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: item.icon })) }), _jsx(ListItemText, { primary: _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: item.text, defaultMessage: item.text }) })) })] }), i))) }));
}, [listItem]);
// EFFECTS
useEffect(() => {
if (canCreateGroup) {
setListItem((prev) => [
...prev,
{
icon: 'groups',
text: 'ui.composerIconButton.list.group',
onClick: () => {
setOpenCreateGroup(true);
setOpenPopper(false);
}
}
]);
}
if (canCreateEvent) {
setListItem((prev) => [
...prev,
{
icon: 'CalendarIcon',
text: 'ui.composerIconButton.list.event',
onClick: () => {
setOpenCreateEvent(true);
setOpenPopper(false);
}
}
]);
}
if (canCreateLiveStream) {
setListItem((prev) => [
...prev,
{
icon: 'movie',
text: 'ui.composerIconButton.list.liveStream',
onClick: () => {
setOpenCreateLiveStream(true);
setOpenPopper(false);
}
}
]);
}
}, [canCreateGroup, setListItem]);
// HANDLERS
const handleClick = useCallback((event) => {
if (scUserContext.user) {
if (UserUtils.isBlocked(scUserContext.user)) {
enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
variant: 'warning',
autoHideDuration: 3000
});
}
else {
if (canCreateGroup || canCreateEvent || canCreateLiveStream) {
setOpenPopper(true);
}
else {
setOpenComposer(true);
}
}
}
else {
scContext.settings.handleAnonymousAction();
}
onClick === null || onClick === void 0 ? void 0 : onClick(event);
}, [onClick, scContext.settings, scUserContext.user]);
const handleCloseComposer = useCallback(() => {
setOpenComposer(false);
onClose === null || onClose === void 0 ? void 0 : onClose();
}, [setOpenComposer, onClose]);
const handleCloseMenu = useCallback(() => {
setOpenPopper(false);
}, [setOpenPopper]);
const handleCloseCreateGroup = useCallback(() => {
setOpenCreateGroup(false);
}, [setOpenCreateGroup]);
const handleCloseCreateEvent = useCallback(() => {
setOpenCreateEvent(false);
}, [setOpenCreateEvent]);
const handleCloseCreateLiveStream = useCallback(() => {
setOpenCreateLiveStream(false);
}, [setOpenCreateLiveStream]);
const handleSuccess = useCallback((feedObject) => {
setOpenComposer(false);
enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
action: () => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], getRouteData(feedObject)) }, { children: _jsx(FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
variant: 'success',
autoHideDuration: 7000
});
}, [setOpenComposer]);
return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClick, ref: (innerRef) => {
popperRef.current = innerRef;
return ref;
} }, rest, { children: _jsx(Icon, { children: "add_circle_outline" }) })), openComposer && _jsx(Composer, Object.assign({ open: true, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : (_jsx(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateGroup && _jsx(GroupForm, Object.assign({ open: true, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && _jsx(EventFormDialog, Object.assign({ open: true, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && _jsx(CreateLiveStreamDialog, Object.assign({ open: true, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps))] }));
});