@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
195 lines (186 loc) • 11.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const material_1 = require("@mui/material");
const react_core_1 = require("@selfcommunity/react-core");
const react_intl_1 = require("react-intl");
const Composer_1 = tslib_1.__importDefault(require("../Composer"));
const notistack_1 = require("notistack");
const contribution_1 = require("../../utils/contribution");
const EventFormDialog_1 = tslib_1.__importDefault(require("../EventFormDialog"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const GroupForm_1 = tslib_1.__importDefault(require("../GroupForm"));
const CreateLiveStreamDialog_1 = tslib_1.__importDefault(require("../CreateLiveStreamDialog"));
const types_1 = require("@selfcommunity/types");
const PREFIX = 'SCComposerIconButton';
const classes = {
root: `${PREFIX}-root`,
menuRoot: `${PREFIX}-menu-root`
};
const Root = (0, material_1.styled)(material_1.IconButton, {
name: PREFIX,
slot: 'Root'
})(() => ({}));
const MenuRoot = (0, material_1.styled)(material_1.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
*/
exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps, ref) {
var _a, _b, _c;
// PROPS
const props = (0, material_1.useThemeProps)({
props: inProps,
name: PREFIX
});
const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
// STATE
const [openComposer, setOpenComposer] = (0, react_1.useState)(false);
const [openPopper, setOpenPopper] = (0, react_1.useState)(false);
const [openCreateGroup, setOpenCreateGroup] = (0, react_1.useState)(false);
const [openCreateEvent, setOpenCreateEvent] = (0, react_1.useState)(false);
const [openCreateLiveStream, setOpenCreateLiveStream] = (0, react_1.useState)(false);
const [listItem, setListItem] = (0, react_1.useState)([
{
icon: 'edit',
text: 'ui.composerIconButton.list.content',
onClick: () => {
setOpenComposer(true);
setOpenPopper(false);
}
}
]);
// REFS
const popperRef = (0, react_1.useRef)(null);
// CONTEXT
const scUserContext = (0, react_core_1.useSCUser)();
const scContext = (0, react_core_1.useSCContext)();
const scRoutingContext = (0, react_core_1.useSCRouting)();
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
// HOOKS
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
const { preferences } = (0, react_core_1.useSCPreferences)();
// MEMOS
const canCreateGroup = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useMemo)(() => preferences &&
react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === types_1.SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
const canCreateLiveStream = (0, react_1.useMemo)(() => (isFreeTrialTier && isCommunityOwner && canCreateLive) || (!isFreeTrialTier && canCreateLive), [isFreeTrialTier, isCommunityOwner, canCreateLive]);
const renderContent = (0, react_1.useMemo)(() => {
return ((0, jsx_runtime_1.jsx)(material_1.MenuList, { children: listItem.map((item, i) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: item.icon })) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: item.text, defaultMessage: item.text }) })) })] }), i))) }));
}, [listItem]);
// EFFECTS
(0, react_1.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 = (0, react_1.useCallback)((event) => {
if (scUserContext.user) {
if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.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 = (0, react_1.useCallback)(() => {
setOpenComposer(false);
onClose === null || onClose === void 0 ? void 0 : onClose();
}, [setOpenComposer, onClose]);
const handleCloseMenu = (0, react_1.useCallback)(() => {
setOpenPopper(false);
}, [setOpenPopper]);
const handleCloseCreateGroup = (0, react_1.useCallback)(() => {
setOpenCreateGroup(false);
}, [setOpenCreateGroup]);
const handleCloseCreateEvent = (0, react_1.useCallback)(() => {
setOpenCreateEvent(false);
}, [setOpenCreateEvent]);
const handleCloseCreateLiveStream = (0, react_1.useCallback)(() => {
setOpenCreateLiveStream(false);
}, [setOpenCreateLiveStream]);
const handleSuccess = (0, react_1.useCallback)((feedObject) => {
setOpenComposer(false);
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
action: () => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(feedObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
variant: 'success',
autoHideDuration: 7000
});
}, [setOpenComposer]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClick, ref: (innerRef) => {
popperRef.current = innerRef;
return ref;
} }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }) })), openComposer && (0, jsx_runtime_1.jsx)(Composer_1.default, Object.assign({ open: true, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateGroup && (0, jsx_runtime_1.jsx)(GroupForm_1.default, Object.assign({ open: true, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && (0, jsx_runtime_1.jsx)(EventFormDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && (0, jsx_runtime_1.jsx)(CreateLiveStreamDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps))] }));
});