@selfcommunity/react-ui/lib/esm/components/Composer/Layer/CategoryLayer/CategoryLayer.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Box, Button, DialogTitle, IconButton, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import { UserUtils, useSCUser } from '@selfcommunity/react-core';
import Icon from '@mui/material/Icon';
import CategoryAutocomplete from '../../../CategoryAutocomplete';
import DialogContent from '@mui/material/DialogContent';
import classNames from 'classnames';
import { PREFIX } from '../../constants';
const classes = {
    root: `${PREFIX}-layer-category-root`,
    title: `${PREFIX}-layer-title`,
    content: `${PREFIX}-layer-content`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'LayerCategoryRoot'
})(() => ({}));
const CategoryLayer = React.forwardRef((props, ref) => {
    // Props
    const { className, onClose, onSave, defaultValue = [] } = props, rest = __rest(props, ["className", "onClose", "onSave", "defaultValue"]);
    // STATE
    const [value, setValue] = useState(defaultValue);
    // CONTEXT
    const scUserContext = useSCUser();
    // HANDLERS
    const handleSave = useCallback(() => onSave(value), [value, onSave]);
    const handleChange = useCallback((categories) => setValue(categories), []);
    return (_jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.category.title", defaultMessage: "ui.composer.layer.category.title" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), _jsx(DialogContent, Object.assign({ className: classes.content }, { children: _jsx(CategoryAutocomplete, Object.assign({ multiple: true, onChange: handleChange, defaultValue: defaultValue }, (!UserUtils.isStaff(scUserContext.user) && { endpointQueryParams: { can_create_content: true } }))) }))] })));
});
export default CategoryLayer;