@selfcommunity/react-ui/lib/cjs/components/Composer/Layer/AudienceLayer/AudienceLayer.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AudienceTypes = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const react_intl_1 = require("react-intl");
const TextField_1 = tslib_1.__importDefault(require("@mui/material/TextField"));
const parse_1 = tslib_1.__importDefault(require("autosuggest-highlight/parse"));
const match_1 = tslib_1.__importDefault(require("autosuggest-highlight/match"));
const material_1 = require("@mui/material");
const styles_1 = require("@mui/material/styles");
const TagChip_1 = tslib_1.__importDefault(require("../../../../shared/TagChip"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
const react_core_1 = require("@selfcommunity/react-core");
const constants_1 = require("../../constants");
const GroupAutocomplete_1 = tslib_1.__importDefault(require("../../../GroupAutocomplete"));
const types_1 = require("@selfcommunity/types");
const EventAutocomplete_1 = tslib_1.__importDefault(require("../../../EventAutocomplete"));
var AudienceTypes;
(function (AudienceTypes) {
    AudienceTypes["AUDIENCE_ALL"] = "all";
    AudienceTypes["AUDIENCE_TAG"] = "tag";
    AudienceTypes["AUDIENCE_GROUP"] = "group";
    AudienceTypes["AUDIENCE_EVENT"] = "event";
})(AudienceTypes = exports.AudienceTypes || (exports.AudienceTypes = {}));
const classes = {
    root: `${constants_1.PREFIX}-layer-audience-root`,
    title: `${constants_1.PREFIX}-layer-title`,
    content: `${constants_1.PREFIX}-layer-content`,
    message: `${constants_1.PREFIX}-layer-audience-message`,
    autocomplete: `${constants_1.PREFIX}-layer-audience-autocomplete`
};
const Root = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'LayerAudienceRoot'
})(() => ({}));
const AudienceLayer = react_1.default.forwardRef((props, ref) => {
    // Props
    const { className, onClose, onSave, defaultValue = AudienceTypes.AUDIENCE_TAG ? [] : null, TextFieldProps = {
        variant: 'outlined',
        label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tags.label", defaultMessage: "ui.composer.layer.audience.tags.label" })
    } } = props, rest = tslib_1.__rest(props, ["className", "onClose", "onSave", "defaultValue", "TextFieldProps"]);
    // STATE
    const [autocompleteOpen, setAutocompleteOpen] = (0, react_1.useState)(false);
    const [audience, setAudience] = (0, react_1.useState)(
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    defaultValue === null || defaultValue.length === 0
        ? AudienceTypes.AUDIENCE_ALL
        : defaultValue && Object.prototype.hasOwnProperty.call(defaultValue, 'recurring')
            ? AudienceTypes.AUDIENCE_EVENT
            : defaultValue && Object.prototype.hasOwnProperty.call(defaultValue, 'managed_by')
                ? AudienceTypes.AUDIENCE_GROUP
                : AudienceTypes.AUDIENCE_TAG);
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    const [value, setValue] = (0, react_1.useState)(defaultValue || undefined);
    // HOOKS
    const { scAddressingTags } = (0, react_core_1.useSCFetchAddressingTagList)({ fetch: autocompleteOpen });
    const { preferences, features } = (0, react_core_1.useSCPreferences)();
    // MEMO
    const groupsEnabled = (0, react_1.useMemo)(() => preferences &&
        features &&
        features.includes(types_1.SCFeatureName.TAGGING) &&
        features.includes(types_1.SCFeatureName.GROUPING) &&
        react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in preferences &&
        preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [preferences, features]);
    const eventsEnabled = (0, react_1.useMemo)(() => preferences &&
        features &&
        features.includes(types_1.SCFeatureName.TAGGING) &&
        react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
        preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
    // HANDLERS
    const handleSave = (0, react_1.useCallback)(() => {
        audience === AudienceTypes.AUDIENCE_GROUP || audience === AudienceTypes.AUDIENCE_EVENT
            ? onSave(value)
            : onSave((value === null || value === void 0 ? void 0 : value.length) && (value === null || value === void 0 ? void 0 : value.length) > 0 ? value : null);
    }, [value, onSave, audience]);
    const handleChange = (0, react_1.useCallback)((event, tags) => setValue(tags), []);
    const handleEventChange = (0, react_1.useCallback)((event) => setValue(event), []);
    const handleGroupChange = (0, react_1.useCallback)((group) => setValue(group), []);
    const handleChangeAudience = (0, react_1.useCallback)((event, data) => setAudience(data), []);
    const handleAutocompleteOpen = (0, react_1.useCallback)(() => setAutocompleteOpen(true), []);
    const handleAutocompleteClose = (0, react_1.useCallback)(() => setAutocompleteOpen(false), []);
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.title", defaultMessage: "ui.composer.layer.audience.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: audience, onChange: handleChangeAudience, "aria-label": "audience type" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: AudienceTypes.AUDIENCE_ALL, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "public" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.all", defaultMessage: "ui.composer.layer.audience.all" }) }), eventsEnabled && ((0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: (Boolean(value === null || value === void 0 ? void 0 : value.length) && !Object.prototype.hasOwnProperty.call(value, 'recurring')) ||
                                    (value !== undefined && Boolean(!(value === null || value === void 0 ? void 0 : value.length)) && audience !== AudienceTypes.AUDIENCE_ALL) ||
                                    (Boolean((value === null || value === void 0 ? void 0 : value.length) === 0) && audience === AudienceTypes.AUDIENCE_ALL && Boolean((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== 0)), value: AudienceTypes.AUDIENCE_EVENT, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.event", defaultMessage: "ui.composer.layer.audience.event" }) })), groupsEnabled && ((0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: (Boolean(value === null || value === void 0 ? void 0 : value.length) && !Object.prototype.hasOwnProperty.call(value, 'managed_by')) ||
                                    (value !== undefined && Boolean(!(value === null || value === void 0 ? void 0 : value.length)) && audience !== AudienceTypes.AUDIENCE_ALL) ||
                                    (Boolean((value === null || value === void 0 ? void 0 : value.length) === 0) && audience === AudienceTypes.AUDIENCE_ALL && Boolean((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== 0)), value: AudienceTypes.AUDIENCE_GROUP, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.group", defaultMessage: "ui.composer.layer.audience.group" }) })), (0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: value && Object.prototype.hasOwnProperty.call(value, 'managed_by'), value: AudienceTypes.AUDIENCE_TAG, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "label" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tag", defaultMessage: "ui.composer.layer.audience.tag" }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.message }, { children: [audience === AudienceTypes.AUDIENCE_ALL && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.all.message", defaultMessage: "ui.composer.audience.layer.all.message" })), audience === AudienceTypes.AUDIENCE_EVENT && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.event.message", defaultMessage: "ui.composer.audience.layer.event.message" })), audience === AudienceTypes.AUDIENCE_GROUP && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.group.message", defaultMessage: "ui.composer.audience.layer.group.message" })), audience === AudienceTypes.AUDIENCE_TAG && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tag.message", defaultMessage: "ui.composer.audience.layer.tag.message" }))] })), audience === AudienceTypes.AUDIENCE_TAG && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { className: classes.autocomplete, open: autocompleteOpen, onOpen: handleAutocompleteOpen, onClose: handleAutocompleteClose, multiple: true, options: scAddressingTags || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, clearIcon: null, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tags.empty", defaultMessage: "ui.composer.layer.audience.tags.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderTags: (value, getTagProps) => {
                            return value.map((option, index) => (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ tag: option }, getTagProps({ index })), option.id));
                        }, renderOption: (props, option, { selected, inputValue }) => {
                            const matches = (0, match_1.default)(option.name, inputValue);
                            const parts = (0, parse_1.default)(option.name, matches);
                            return ((0, jsx_runtime_1.jsx)("li", Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(TagChip_1.default, { tag: option, label: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, option.id) })));
                        }, renderInput: (params) => {
                            return ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: params.InputProps.endAdornment }) }) })));
                        } })), audience === AudienceTypes.AUDIENCE_GROUP && (0, jsx_runtime_1.jsx)(GroupAutocomplete_1.default, { onChange: handleGroupChange, defaultValue: defaultValue }), audience === AudienceTypes.AUDIENCE_EVENT && (0, jsx_runtime_1.jsx)(EventAutocomplete_1.default, { onChange: handleEventChange, defaultValue: defaultValue })] }))] })));
});
exports.default = AudienceLayer;