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

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

"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 material_1 = require("@mui/material");
const styles_1 = require("@mui/material/styles");
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const TagChip_1 = tslib_1.__importDefault(require("../../../shared/TagChip"));
const constants_1 = require("../constants");
const classes = {
    root: `${constants_1.PREFIX}-attributes-root`
};
const Root = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'AttributesRoot'
})(() => ({}));
exports.default = (props) => {
    var _a, _b, _c, _d;
    // PROPS
    const { className = null, value = null, onChange = null, onClick = null } = props;
    // HANDLERS
    const handleDeleteCategory = (0, react_1.useCallback)((id) => () => {
        onChange && onChange(Object.assign(Object.assign({}, value), { categories: value.categories.filter((cat) => cat.id !== id) }));
    }, [value, onChange]);
    const handleClickCategory = (0, react_1.useCallback)(() => {
        onClick && onClick('categories');
    }, [onClick]);
    const handleDeleteEvent = (0, react_1.useCallback)(() => {
        onChange && onChange(Object.assign(Object.assign({}, value), { event: null }));
    }, [value, onChange]);
    const handleClickEvent = (0, react_1.useCallback)(() => {
        onClick && onClick('event');
    }, [onClick]);
    const handleDeleteGroup = (0, react_1.useCallback)(() => {
        onChange && onChange(Object.assign(Object.assign({}, value), { group: null }));
    }, [value, onChange]);
    const handleClickGroup = (0, react_1.useCallback)(() => {
        onClick && onClick('group');
    }, [onClick]);
    const handleDeleteTag = (0, react_1.useCallback)((id) => () => {
        onChange && onChange(Object.assign(Object.assign({}, value), { addressing: value.addressing.filter((tag) => tag.id !== id) }));
    }, [value, onChange]);
    const handleClickTag = (0, react_1.useCallback)(() => {
        onClick && onClick('addressing');
    }, [onClick]);
    const handleDeleteLocation = (0, react_1.useCallback)(() => {
        onChange && onChange(Object.assign(Object.assign({}, value), { location: null }));
    }, [value, onChange]);
    const handleClickLocation = (0, react_1.useCallback)(() => {
        onClick && onClick('location');
    }, [onClick]);
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [((_a = value === null || value === void 0 ? void 0 : value.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
                (value === null || value === void 0 ? void 0 : value.categories.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: c.name, onDelete: handleDeleteCategory(c.id), icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "category" }), onClick: handleClickCategory }, c.id)))), (value === null || value === void 0 ? void 0 : value.group) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: value === null || value === void 0 ? void 0 : value.group.name, onDelete: handleDeleteGroup, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }), onClick: handleClickGroup, disabled: !((_b = value === null || value === void 0 ? void 0 : value.group) === null || _b === void 0 ? void 0 : _b.subscription_status) }, value === null || value === void 0 ? void 0 : value.group.id)), (value === null || value === void 0 ? void 0 : value.event) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: value === null || value === void 0 ? void 0 : value.event.name, onDelete: handleDeleteEvent, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }), onClick: handleClickEvent, disabled: !((_c = value === null || value === void 0 ? void 0 : value.event) === null || _c === void 0 ? void 0 : _c.subscription_status) }, value === null || value === void 0 ? void 0 : value.event.id)), ((_d = value === null || value === void 0 ? void 0 : value.addressing) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
                (value === null || value === void 0 ? void 0 : value.addressing.map((t) => ((0, jsx_runtime_1.jsx)(TagChip_1.default, { tag: t, onDelete: handleDeleteTag(t.id), icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "label" }), onClick: handleClickTag }, t.id)))), (value === null || value === void 0 ? void 0 : value.location) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))] })));
};