@selfcommunity/react-ui/lib/esm/components/Composer/Content/ContentPoll/ContentPoll.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 { forwardRef, useCallback, useMemo } from 'react';
import { Box, Button, Checkbox, Divider, FormControlLabel, FormGroup, IconButton, TextField, Tooltip, Typography, } from '@mui/material';
import { styled } from '@mui/material/styles';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import Icon from '@mui/material/Icon';
import { ReactSortable } from 'react-sortablejs';
import InputAdornment from '@mui/material/InputAdornment';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_POLL_MIN_CLOSE_DATE_DELTA, COMPOSER_POLL_TITLE_MAX_LENGTH, } from '../../../../constants/Composer';
import itLocale from 'date-fns/locale/it';
import enLocale from 'date-fns/locale/en-US';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import { parseISO } from 'date-fns';
import { PREFIX } from '../../constants';
const localeMap = {
    en: enLocale,
    it: itLocale
};
const classes = {
    root: `${PREFIX}-content-poll-root`,
    generalError: `${PREFIX}-general-error`,
    title: `${PREFIX}-content-poll-title`,
    choices: `${PREFIX}-content-poll-choices`,
    choiceNew: `${PREFIX}-content-poll-choice-new`,
    metadata: `${PREFIX}-content-poll-metadata`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'ContentPollRoot'
})(({ theme }) => ({}));
const messages = defineMessages({
    choicePlaceholder: {
        id: 'ui.composer.content.poll.choice.placeholder',
        defaultMessage: 'ui.composer.content.poll.choice.placeholder'
    }
});
const SortableComponent = forwardRef((_a, ref) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    return (_jsx(FormGroup, Object.assign({ direction: "column", ref: ref }, props, { children: children })));
});
/**
 * Default poll
 */
const DEFAULT_CHOICE = { choice: '' };
const DEFAULT_POLL = {
    title: '',
    multiple_choices: false,
    expiration_at: null,
    choices: [Object.assign({}, DEFAULT_CHOICE), Object.assign({}, DEFAULT_CHOICE)]
};
export default (inProps) => {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className = null, value = { poll: Object.assign({}, DEFAULT_POLL) }, error = {}, disabled, onChange } = props;
    const { titleError = null, error: generalError = null } = Object.assign({}, error);
    // MEMO
    const poll = useMemo(() => value.poll ? value.poll : Object.assign({}, DEFAULT_POLL), [value, DEFAULT_POLL]);
    // INTL
    const intl = useIntl();
    // HANDLERS
    const handleChangeTitle = useCallback((event) => {
        onChange(Object.assign(Object.assign({}, value), { poll: Object.assign(Object.assign({}, poll), { title: event.target.value }) }));
    }, [value, poll]);
    const handleSortChoices = useCallback((choices) => {
        onChange(Object.assign(Object.assign({}, value), { poll: Object.assign(Object.assign({}, poll), { choices }) }));
    }, [value, poll]);
    const handleChangeChoice = useCallback((index) => {
        return (event) => {
            const _choices = [...poll.choices];
            _choices[index].choice = event.target.value;
            onChange(Object.assign(Object.assign({}, value), { poll: Object.assign(Object.assign({}, poll), { choices: _choices }) }));
        };
    }, [value, poll]);
    const handleAddChoice = useCallback(() => {
        onChange(Object.assign(Object.assign({}, value), { poll: Object.assign(Object.assign({}, poll), { choices: [...poll.choices, Object.assign({}, DEFAULT_CHOICE)] }) }));
    }, [value, poll]);
    const handleDeleteChoice = useCallback((index) => {
        return (event) => {
            const _choices = [...poll.choices];
            _choices.splice(index, 1);
            onChange(Object.assign(Object.assign({}, value), { poll: Object.assign(Object.assign({}, poll), { choices: _choices }) }));
        };
    }, [value, poll]);
    const handleChangeMultiple = useCallback((event) => {
        onChange(Object.assign(Object.assign({}, value), { poll: Object.assign(Object.assign({}, poll), { multiple_choices: event.target.checked }) }));
    }, [value, poll]);
    const handleChangeExpiration = useCallback((expiration) => {
        onChange(Object.assign(Object.assign({}, value), { poll: Object.assign(Object.assign({}, poll), { expiration_at: expiration }) }));
    }, [value, poll]);
    // RENDER
    const minDate = useMemo(() => {
        const minDate = new Date();
        minDate.setDate(minDate.getDate() + COMPOSER_POLL_MIN_CLOSE_DATE_DELTA);
        return minDate;
    }, []);
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [generalError && _jsx(Typography, Object.assign({ className: classes.generalError }, { children: _jsx(FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` }) })), _jsx(Box, Object.assign({ className: classes.title }, { children: _jsx(TextField, { autoFocus: true, disabled: disabled, label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.title", defaultMessage: "ui.composer.content.poll.title" }), variant: "outlined", value: poll.title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, InputProps: {
                        endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COMPOSER_POLL_TITLE_MAX_LENGTH - poll.title.length }))
                    } }) })), _jsx(Box, Object.assign({ className: classes.choices }, { children: _jsx(ReactSortable, Object.assign({ list: [...poll.choices], setList: handleSortChoices, tag: SortableComponent }, { children: poll.choices.map((choice, index) => (_jsx(TextField, { placeholder: intl.formatMessage(messages.choicePlaceholder), value: choice.choice, onChange: handleChangeChoice(index), variant: "outlined", disabled: disabled, InputProps: {
                            startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "drag" }) }))),
                            endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(Tooltip, Object.assign({ title: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES ? (_jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.delete.disabled", defaultMessage: "ui.composer.content.poll.choice.delete.disabled" })) : (_jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.delete", defaultMessage: "ui.composer.content.poll.choice.delete" })) }, { children: _jsx("span", { children: _jsx(IconButton, Object.assign({ onClick: handleDeleteChoice(index), disabled: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES, edge: "end" }, { children: _jsx(Icon, { children: "delete" }) })) }) })) })))
                        } }, index))) })) })), _jsx(Box, Object.assign({ className: classes.choiceNew }, { children: _jsxs(Button, Object.assign({ color: "inherit", variant: "text", onClick: handleAddChoice }, { children: [_jsx(Icon, { children: "add" }), _jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.add", defaultMessage: "ui.composer.choice.add" })] })) })), _jsx(Divider, {}), _jsxs(FormGroup, Object.assign({ className: classes.metadata }, { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: poll.multiple_choices, onChange: handleChangeMultiple }), label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.multiple", defaultMessage: "ui.composer.content.poll.multiple" }) }), _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: localeMap[intl.locale] }, { children: _jsx(DatePicker, { disabled: disabled, label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.expiration", defaultMessage: "ui.composer.content.poll.expiration" }), value: typeof poll.expiration_at === 'string' ? parseISO(poll.expiration_at) : poll.expiration_at, onChange: handleChangeExpiration, slotProps: { textField: { variant: 'outlined' } }, minDate: minDate }) }))] }))] })));
};