@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
55 lines (54 loc) • 4.17 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import { Box, Chip } from '@mui/material';
import { styled } from '@mui/material/styles';
import Icon from '@mui/material/Icon';
import classNames from 'classnames';
import TagChip from '../../../shared/TagChip';
import { PREFIX } from '../constants';
const classes = {
root: `${PREFIX}-attributes-root`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'AttributesRoot'
})(() => ({}));
export default (props) => {
var _a, _b, _c, _d;
// PROPS
const { className = null, value = null, onChange = null, onClick = null } = props;
// HANDLERS
const handleDeleteCategory = useCallback((id) => () => {
onChange && onChange(Object.assign(Object.assign({}, value), { categories: value.categories.filter((cat) => cat.id !== id) }));
}, [value, onChange]);
const handleClickCategory = useCallback(() => {
onClick && onClick('categories');
}, [onClick]);
const handleDeleteEvent = useCallback(() => {
onChange && onChange(Object.assign(Object.assign({}, value), { event: null }));
}, [value, onChange]);
const handleClickEvent = useCallback(() => {
onClick && onClick('event');
}, [onClick]);
const handleDeleteGroup = useCallback(() => {
onChange && onChange(Object.assign(Object.assign({}, value), { group: null }));
}, [value, onChange]);
const handleClickGroup = useCallback(() => {
onClick && onClick('group');
}, [onClick]);
const handleDeleteTag = useCallback((id) => () => {
onChange && onChange(Object.assign(Object.assign({}, value), { addressing: value.addressing.filter((tag) => tag.id !== id) }));
}, [value, onChange]);
const handleClickTag = useCallback(() => {
onClick && onClick('addressing');
}, [onClick]);
const handleDeleteLocation = useCallback(() => {
onChange && onChange(Object.assign(Object.assign({}, value), { location: null }));
}, [value, onChange]);
const handleClickLocation = useCallback(() => {
onClick && onClick('location');
}, [onClick]);
return (_jsxs(Root, Object.assign({ className: classNames(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) => (_jsx(Chip, { label: c.name, onDelete: handleDeleteCategory(c.id), icon: _jsx(Icon, { children: "category" }), onClick: handleClickCategory }, c.id)))), (value === null || value === void 0 ? void 0 : value.group) && (_jsx(Chip, { label: value === null || value === void 0 ? void 0 : value.group.name, onDelete: handleDeleteGroup, icon: _jsx(Icon, { 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) && (_jsx(Chip, { label: value === null || value === void 0 ? void 0 : value.event.name, onDelete: handleDeleteEvent, icon: _jsx(Icon, { 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) => (_jsx(TagChip, { tag: t, onDelete: handleDeleteTag(t.id), icon: _jsx(Icon, { children: "label" }), onClick: handleClickTag }, t.id)))), (value === null || value === void 0 ? void 0 : value.location) && (_jsx(Chip, { icon: _jsx(Icon, { children: "add_location_alt" }), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))] })));
};