@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
315 lines (306 loc) • 19.4 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 = require("react");
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const api_services_1 = require("@selfcommunity/api-services");
const react_core_1 = require("@selfcommunity/react-core");
const react_intl_1 = require("react-intl");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
const system_1 = require("@mui/system");
const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
const constants_1 = require("./constants");
const logo_1 = tslib_1.__importDefault(require("../../assets/logo"));
const Grow_1 = tslib_1.__importDefault(require("@mui/material/Grow"));
const classes = {
root: `${constants_1.PREFIX}-root`,
title: `${constants_1.PREFIX}-title`,
content: `${constants_1.PREFIX}-content`,
actions: `${constants_1.PREFIX}-actions`,
action: `${constants_1.PREFIX}-action`,
actionHighlighted: `${constants_1.PREFIX}-action-highlighted`,
tutorial: `${constants_1.PREFIX}-tutorial`,
tutorialContent: `${constants_1.PREFIX}-tutorial-content`,
tutorialTitle: `${constants_1.PREFIX}-tutorial-title`,
tutorialTitleClose: `${constants_1.PREFIX}-tutorial-title-close`,
tutorialDesc: `${constants_1.PREFIX}-tutorial-desc`,
tutorialOpen: `${constants_1.PREFIX}-tutorial-open`,
divider: `${constants_1.PREFIX}-divider`,
tutorialControls: `${constants_1.PREFIX}-tutorial-controls`,
btnStep: `${constants_1.PREFIX}-btn-step`,
btnPreviousStep: `${constants_1.PREFIX}-btn-previous-step`,
btnNextStep: `${constants_1.PREFIX}-btn-next-step`
};
const Root = (0, styles_1.styled)(Widget_1.default, {
name: constants_1.PREFIX,
slot: 'Root'
})(({ theme }) => ({
padding: '0px !important',
[`&.${classes.tutorialOpen}`]: {
position: 'relative',
zIndex: theme.zIndex.drawer + 2,
[`& .${classes.tutorial}`]: {
padding: 0
}
},
[`& .${classes.title}`]: {
display: 'flex',
justifyContent: 'center',
marginBottom: theme.spacing(1)
},
[`& .${classes.content}`]: {
padding: `${theme.spacing(2)} 0 0 0`,
backgroundColor: '#EFEFEF'
},
[`& .${classes.actions}`]: {
display: 'flex',
paddingBottom: 0,
boxShadow: 'inset -1px -3px 7px -4px #CECECE',
'-webkit-overflow-scrolling': 'touch',
overflowX: 'auto',
overflowY: 'hidden',
scrollbarWidth: 'none' /* Firefox */,
'-ms-overflow-style': 'none' /* IE and Edge */,
'&::-webkit-scrollbar': {
display: 'none'
}
},
[`& .${classes.action}`]: {
padding: `0px 2px ${theme.spacing(2)} 2px`,
display: 'flex',
flexGrow: 1,
justifyContent: 'center',
'& .MuiButton-root': {
color: theme.palette.getContrastText(theme.palette.common.white),
backgroundColor: theme.palette.common.white,
'&:hover': {
color: theme.palette.getContrastText(theme.palette.primary.main),
backgroundColor: theme.palette.primary.main
}
}
},
[`& .${classes.tutorialContent}`]: {
width: '100%'
},
[`& .${classes.divider}`]: {
paddingTop: theme.spacing()
},
[`& .${classes.tutorialTitle}`]: {
position: 'relative',
fontWeight: 700,
fontSize: 15,
padding: `${theme.spacing(3)} ${theme.spacing()} ${theme.spacing()} ${theme.spacing(3)}`
},
[`& .${classes.tutorialTitleClose}`]: {
position: 'absolute',
top: theme.spacing(3),
right: theme.spacing(3)
},
[`& .${classes.tutorialDesc}`]: {
fontSize: 14,
fontWeight: 500,
color: theme.palette.grey[700],
padding: `0px ${theme.spacing(3)} ${theme.spacing()} ${theme.spacing(3)}`
},
[`& .${classes.tutorialControls}`]: {
padding: theme.spacing(2)
},
[`& .${classes.actionHighlighted}`]: {
position: 'relative',
'&:before': {
content: '""',
display: 'block',
position: 'absolute',
bottom: -11,
width: 10,
height: 10,
transform: 'translateY(-50%) rotate(45deg)',
boxShadow: '0px -20px 20px 0px #CECECE',
zIndex: 0,
backgroundColor: theme.palette.common.white
},
'& .MuiButton-root': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white
}
},
[`& .${classes.btnStep}`]: {
borderRadius: 3
}
}));
/**
* > API documentation for the Community-JS PlatformWidget component. Learn about the available props and the CSS API.
*
*
* This component renders a widget containing the links that allow users and moderators to handle their application content.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Platform)
#### Import
```jsx
import {PlatformWidget} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCPlatformWidget` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCPlatformWidget-root|Styles applied to the root element.|
|title|.SCPlatformWidget-title|Styles applied to the title element.|
|actions|.SCPlatformWidget-actions|Styles applied to the actions container.|
|action|.SCPlatformWidget-action|Styles applied to the single action element.|
|actionHighlighted|.SCPlatformWidget-action-highlighted|Styles applied to the action highlighted.|
|tutorial|.SCPlatformWidget-tutorial|Styles applied to the tutorial element.|
|tutorialContent|.SCPlatformWidget-tutorial-content|Styles applied to the content of the tutorial element.|
|tutorialTitle|.SCPlatformWidget-tutorial-title|Styles applied to the title element of the tutorial.|
|tutorialTitleClose|.SCPlatformWidget-tutorial-title-close|Styles applied to the close button of the title in the tutorial.|
|tutorialDesc|.SCPlatformWidget-tutorial-desc|Styles applied to the tutorial description element.|
|tutorialOpen|.SCPlatformWidget-tutorial-open|Styles applied to the tutorial element when is active.|
|divider|.SCPlatformWidget-divider|Styles applied to the divider element in the tutorial container.|
|tutorialControls|.SCPlatformWidget-tutorial-controls|Styles applied to the tutorial bottom controls.|
|btnStep|.SCPlatformWidget-btn-step|Styles applied to the button next/previous/skip/close of the tutorial controls.|
|btnPreviousStep|.SCPlatformWidget-btn-previous-step|Styles applied to the button previous element of the tutorial controls.|
|btnNextStep|.SCPlatformWidget-btn-next-step|Styles applied to the button next element of the tutorial controls.|
*
* @param inProps
*/
function PlatformWidget(inProps) {
var _a;
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { autoHide, className, title = null, startActions = [], endActions = [], hideConsoleAction = false, hideModerationAction = false, hideHubAction = false, hideContactUsAction = false, onHeightChange } = props, rest = tslib_1.__rest(props, ["autoHide", "className", "title", "startActions", "endActions", "hideConsoleAction", "hideModerationAction", "hideHubAction", "hideContactUsAction", "onHeightChange"]);
// CONTEXT
const scContext = (0, react_core_1.useSCContext)();
const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
// STATE
const [tutorialIndex, setTutorialIndex] = (0, react_1.useState)(0);
const [isTutorialOpen, setIsTutorialOpen] = (0, react_1.useState)(false);
// CONST
const isAdmin = (0, react_1.useMemo)(() => react_core_1.UserUtils.isAdmin(scUserContext.user), [scUserContext.user]);
const isEditor = (0, react_1.useMemo)(() => react_core_1.UserUtils.isEditor(scUserContext.user), [scUserContext.user]);
const isModerator = (0, react_1.useMemo)(() => react_core_1.UserUtils.isModerator(scUserContext.user), [scUserContext.user]);
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 isStage = scContext.settings.portal.includes('stage');
const actions = [
...startActions,
...((isAdmin || isEditor) && !hideConsoleAction
? [
{
render: ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", onClick: () => fetchPlatform('') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }) }))),
title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }),
content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.adm.desc", defaultMessage: "ui.platformWidget.adm.desc" })
}
]
: []),
...((isAdmin || isModerator) && !hideModerationAction
? [
{
render: ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", onClick: () => fetchPlatform('/moderation/flags/') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }) }))),
title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }),
content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.mod.desc", defaultMessage: "ui.platformWidget.mod.desc" })
}
]
: []),
...(isAdmin && isCommunityOwner && !hideHubAction
? [
{
render: ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", component: react_core_1.Link, to: isStage ? constants_1.HUB_STAGE : constants_1.HUB_PROD, target: "_blank" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }) }))),
title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }),
content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.hub.desc", defaultMessage: "ui.platformWidget.hub.desc" })
}
]
: []),
...(isCommunityOwner && !hideContactUsAction
? [
{
render: ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", component: react_core_1.Link, to: isStage ? constants_1.CONTACT_STAGE : constants_1.CONTACT_PROD, target: "_blank" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }) }))),
title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }),
content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.contactUs.desc", defaultMessage: "ui.platformWidget.contactUs.desc" })
}
]
: []),
...endActions
];
/**
* Handle open tutorial
*/
const handleOpenTutorial = (0, react_1.useCallback)(() => {
setTutorialIndex(0);
setIsTutorialOpen(true);
onHeightChange && onHeightChange();
}, [setTutorialIndex, setIsTutorialOpen, onHeightChange]);
/**
* Handle close tutorial
*/
const handleCloseTutorial = (0, react_1.useCallback)(() => {
setIsTutorialOpen(false);
setTutorialIndex(0);
onHeightChange && onHeightChange();
}, [setIsTutorialOpen, setTutorialIndex, onHeightChange]);
/**
* Handle next step tutorial
*/
const handlePrevious = (0, react_1.useCallback)(() => {
if (tutorialIndex > 0) {
setTutorialIndex((prev) => prev - 1);
}
else {
handleCloseTutorial();
}
onHeightChange && onHeightChange();
}, [tutorialIndex, setTutorialIndex, handleCloseTutorial, onHeightChange]);
/**
* Handle next step tutorial
*/
const handleNext = (0, react_1.useCallback)(() => {
if (tutorialIndex < actions.length - 1) {
setTutorialIndex((prev) => prev + 1);
}
else {
handleCloseTutorial();
}
onHeightChange && onHeightChange();
}, [actions, tutorialIndex, setTutorialIndex, handleCloseTutorial, onHeightChange]);
/**
* Fetches platform url
*/
function fetchPlatform(query) {
api_services_1.http
.request({
url: api_services_1.Endpoints.Platform.url(),
method: api_services_1.Endpoints.Platform.method,
params: {
next: query
}
})
.then((res) => {
const platformUrl = res.data.platform_url;
window.open(platformUrl, '_blank').focus();
})
.catch((error) => {
console.log(error);
});
}
/**
* Render tutorial
*/
const tutorial = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: "auto", alignItems: "center", justifyContent: "center" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) }))), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: "auto" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [(0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: true, timeout: 1000 }, { children: (0, jsx_runtime_1.jsx)("span", { children: actions[tutorialIndex].title }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: true, timeout: 1200 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.divider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: (0, classnames_1.default)(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: (0, classnames_1.default)(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
/**
* Renders platform card
*/
const content = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: title ? (title) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" }, { children: (0, jsx_runtime_1.jsx)("img", { src: logo_1.default, alt: "logo" }) })) }))) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1, className: classes.action }), actions.map((a, i) => {
return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: "auto", className: (0, classnames_1.default)(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, { children: a.render }), i));
}), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1, className: classes.action })] }))] })));
/**
* Renders root object (if not hidden by autoHide prop)
*/
if (!autoHide && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.role)) {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className, { [classes.tutorialOpen]: isTutorialOpen }) }, rest, { children: [content, tutorial] })), (0, jsx_runtime_1.jsx)(material_1.Backdrop, { sx: { color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }, open: isTutorialOpen, onClick: handleCloseTutorial })] }));
}
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
}
exports.default = PlatformWidget;