@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
103 lines (98 loc) • 5.35 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { styled } from '@mui/material/styles';
import { useThemeProps } from '@mui/system';
import { useSCUser } from '@selfcommunity/react-core';
import { SCEventLocationType } from '@selfcommunity/types';
import classNames from 'classnames';
import { FormattedMessage } from 'react-intl';
import BaseDialog from '../../shared/BaseDialog';
import { PREFIX } from './constants';
import EventForm from '../EventForm';
import LiveStreamSelector from './LiveStreamSelector/LiveStreamSelector';
import { CreateLiveStreamStep, LiveStreamType } from './types';
import LiveStreamForm from '../LiveStreamForm';
import Slide from '@mui/material/Slide';
import { Box, Button, Icon } from '@mui/material';
const classes = {
root: `${PREFIX}-root`,
title: `${PREFIX}-title`,
content: `${PREFIX}-content`
};
const Root = styled(BaseDialog, {
name: PREFIX,
slot: 'Root'
})(() => ({
paddingBottom: '0px !important',
[`& .${classes.title}`]: {
display: 'flex',
alignItems: 'center'
},
[`& .${classes.content}`]: {
paddingBottom: 0
}
}));
const Transition = React.forwardRef(function Transition(props, ref) {
return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
});
/**
*> API documentation for the Community-JS CreateLiveStreamDialog component. Learn about the available props and the CSS API.
*
#### Import
```jsx
import {CreateLivestreamDialog} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCCreateLivestreamDialog` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
|content|.SCCreateLivestreamDialog-content|Styles applied to the content element.|
* @param inProps
*/
export default function CreateLiveStreamDialog(inProps) {
var _a;
//PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { className, open = true, onClose, onSuccess } = props, rest = __rest(props, ["className", "open", "onClose", "onSuccess"]);
// CONTEXT
const scUserContext = useSCUser();
// 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; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
// STATE
const [step, setStep] = useState(canCreateEvent ? CreateLiveStreamStep.SELECT_TYPE : CreateLiveStreamStep.CREATE_LIVE);
const [liveType, setLiveType] = useState(canCreateEvent ? null : LiveStreamType.DIRECT_LIVE);
const canShowBackButton = useMemo(() => step === CreateLiveStreamStep.CREATE_LIVE && canCreateEvent, [step, canCreateEvent]);
// HANDLER
const handleLiveTypeSelected = useCallback((l) => {
setLiveType(l);
}, []);
const handleLiveTypeSelectedNext = useCallback((l) => {
setLiveType(l);
setStep(CreateLiveStreamStep.CREATE_LIVE);
}, []);
const handleBack = useCallback(() => {
setStep(CreateLiveStreamStep.SELECT_TYPE);
}, []);
const handleSubmit = useCallback((e) => {
onSuccess && onSuccess(e);
}, [onSuccess]);
useEffect(() => {
if (!canCreateEvent) {
setLiveType(LiveStreamType.DIRECT_LIVE);
}
}, [canCreateEvent]);
// user must be logged
if (!scUserContext.user) {
return null;
}
/**
* Renders root object
*/
return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: _jsxs(Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), _jsx(Box, Object.assign({ component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? (_jsx(EventForm, { EventAddressComponentProps: { locations: [SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit })) : (_jsx(LiveStreamForm, { onSuccess: handleSubmit })) }))] })) })));
}