@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
106 lines (100 loc) • 5.27 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useMemo, useState } from 'react';
import { SCFeedTypologyType } from '@selfcommunity/types';
import { Link, SCPreferences, SCRoutes, UserUtils, useSCContext, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
import { Avatar, Box, Button, CardContent } from '@mui/material';
import { styled } from '@mui/material/styles';
import { FormattedMessage } from 'react-intl';
import { useSnackbar } from 'notistack';
import Widget from '../Widget';
import { useThemeProps } from '@mui/system';
import Composer from '../Composer';
import { File, Link as MediaLink } from '../../shared/Media';
import { PREFIX } from './constants';
import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
const classes = {
root: `${PREFIX}-root`,
content: `${PREFIX}-content`,
input: `${PREFIX}-input`,
avatar: `${PREFIX}-avatar`
};
const Root = styled(Widget, {
name: PREFIX,
slot: 'Root'
})(() => ({}));
/**
* > API documentation for the Community-JS Inline Composer component. Learn about the available props and the CSS API.
*
*
* This component renders This component renders the section used for feed objects creation
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/InlineComposer)
#### Import
```jsx
import {InlineComposerWidget} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCInlineComposerWidget` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCInlineComposerWidget-root|Styles applied to the root element.|
|content|.SCInlineComposerWidget-content|Styles applied to the content element.|
|input|.SCInlineComposerWidget-input|Styles applied to the input element.|
|avatar|.SCInlineComposerWidget-avatar|Styles applied to the avatar element.|
* @param inProps
*/
export default function InlineComposerWidget(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { mediaObjectTypes = [File, MediaLink], defaultValue, onSuccess = null, label, feedType = SCFeedTypologyType.HOME } = props, rest = __rest(props, ["mediaObjectTypes", "defaultValue", "onSuccess", "label", "feedType"]);
// Context
const scContext = useSCContext();
const scUserContext = useSCUser();
const scRoutingContext = useSCRouting();
const { enqueueSnackbar } = useSnackbar();
// PREFERENCES
const preferences = useSCPreferences();
const onlyStaffEnabled = useMemo(() => preferences.preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value, [preferences.preferences]);
// State variables
const [open, setOpen] = useState(false);
// Handlers
const handleOpen = useCallback(() => {
if (scUserContext.user) {
if (UserUtils.isBlocked(scUserContext.user)) {
enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
variant: 'warning',
autoHideDuration: 3000
});
}
else {
setOpen(true);
}
}
else {
scContext.settings.handleAnonymousAction();
}
}, [scUserContext.user, scContext.settings]);
const handleClose = useCallback(() => {
setOpen(false);
}, []);
const handleSuccess = (feedObject) => {
if (onSuccess) {
onSuccess(feedObject);
}
else {
enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.inlineComposerWidget.success", defaultMessage: "ui.inlineComposerWidget.success" }), {
variant: 'success',
autoHideDuration: 3000
});
}
setOpen(false);
};
if (!UserUtils.isStaff(scUserContext.user) && onlyStaffEnabled) {
return _jsx(HiddenPlaceholder, {});
}
return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Box, Object.assign({ className: classes.input }, { children: _jsx(Button, Object.assign({ variant: "text", disableFocusRipple: true, disableRipple: true, disableElevation: true, onClick: handleOpen, fullWidth: true, color: "inherit" }, { children: label !== null && label !== void 0 ? label : _jsx(FormattedMessage, { id: "ui.inlineComposerWidget.label", defaultMessage: "ui.inlineComposerWidget.label" }) })) })), _jsx(Box, Object.assign({ className: classes.avatar }, { children: !scUserContext.user ? (_jsx(Avatar, { variant: "circular" })) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: _jsx(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar }) }))) }))] })) })), open && (_jsx(Composer, { open: open, mediaObjectTypes: mediaObjectTypes, defaultValue: defaultValue, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess, feedType: feedType }))] }));
}