@selfcommunity/react-ui/lib/cjs/components/Composer/Content/ContentPoll/ContentPoll.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 react_intl_1 = require("react-intl");
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const react_sortablejs_1 = require("react-sortablejs");
const InputAdornment_1 = tslib_1.__importDefault(require("@mui/material/InputAdornment"));
const x_date_pickers_1 = require("@mui/x-date-pickers");
const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
const Composer_1 = require("../../../../constants/Composer");
const it_1 = tslib_1.__importDefault(require("date-fns/locale/it"));
const en_US_1 = tslib_1.__importDefault(require("date-fns/locale/en-US"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const system_1 = require("@mui/system");
const date_fns_1 = require("date-fns");
const constants_1 = require("../../constants");
const localeMap = {
    en: en_US_1.default,
    it: it_1.default
};
const classes = {
    root: `${constants_1.PREFIX}-content-poll-root`,
    generalError: `${constants_1.PREFIX}-general-error`,
    title: `${constants_1.PREFIX}-content-poll-title`,
    choices: `${constants_1.PREFIX}-content-poll-choices`,
    choiceNew: `${constants_1.PREFIX}-content-poll-choice-new`,
    metadata: `${constants_1.PREFIX}-content-poll-metadata`
};
const Root = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'ContentPollRoot'
})(({ theme }) => ({}));
const messages = (0, react_intl_1.defineMessages)({
    choicePlaceholder: {
        id: 'ui.composer.content.poll.choice.placeholder',
        defaultMessage: 'ui.composer.content.poll.choice.placeholder'
    }
});
const SortableComponent = (0, react_1.forwardRef)((_a, ref) => {
    var { children } = _a, props = tslib_1.__rest(_a, ["children"]);
    return ((0, jsx_runtime_1.jsx)(material_1.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)]
};
exports.default = (inProps) => {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.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 = (0, react_1.useMemo)(() => value.poll ? value.poll : Object.assign({}, DEFAULT_POLL), [value, DEFAULT_POLL]);
    // INTL
    const intl = (0, react_intl_1.useIntl)();
    // HANDLERS
    const handleChangeTitle = (0, react_1.useCallback)((event) => {
        onChange(Object.assign(Object.assign({}, value), { poll: Object.assign(Object.assign({}, poll), { title: event.target.value }) }));
    }, [value, poll]);
    const handleSortChoices = (0, react_1.useCallback)((choices) => {
        onChange(Object.assign(Object.assign({}, value), { poll: Object.assign(Object.assign({}, poll), { choices }) }));
    }, [value, poll]);
    const handleChangeChoice = (0, react_1.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 = (0, react_1.useCallback)(() => {
        onChange(Object.assign(Object.assign({}, value), { poll: Object.assign(Object.assign({}, poll), { choices: [...poll.choices, Object.assign({}, DEFAULT_CHOICE)] }) }));
    }, [value, poll]);
    const handleDeleteChoice = (0, react_1.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 = (0, react_1.useCallback)((event) => {
        onChange(Object.assign(Object.assign({}, value), { poll: Object.assign(Object.assign({}, poll), { multiple_choices: event.target.checked }) }));
    }, [value, poll]);
    const handleChangeExpiration = (0, react_1.useCallback)((expiration) => {
        onChange(Object.assign(Object.assign({}, value), { poll: Object.assign(Object.assign({}, poll), { expiration_at: expiration }) }));
    }, [value, poll]);
    // RENDER
    const minDate = (0, react_1.useMemo)(() => {
        const minDate = new Date();
        minDate.setDate(minDate.getDate() + Composer_1.COMPOSER_POLL_MIN_CLOSE_DATE_DELTA);
        return minDate;
    }, []);
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [generalError && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { autoFocus: true, disabled: disabled, label: (0, jsx_runtime_1.jsx)(react_intl_1.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: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Composer_1.COMPOSER_POLL_TITLE_MAX_LENGTH - poll.title.length }))
                    } }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.choices }, { children: (0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: [...poll.choices], setList: handleSortChoices, tag: SortableComponent }, { children: poll.choices.map((choice, index) => ((0, jsx_runtime_1.jsx)(material_1.TextField, { placeholder: intl.formatMessage(messages.choicePlaceholder), value: choice.choice, onChange: handleChangeChoice(index), variant: "outlined", disabled: disabled, InputProps: {
                            startAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "drag" }) }))),
                            endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: poll.choices.length <= Composer_1.COMPOSER_POLL_MIN_CHOICES ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.delete.disabled", defaultMessage: "ui.composer.content.poll.choice.delete.disabled" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.delete", defaultMessage: "ui.composer.content.poll.choice.delete" })) }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleDeleteChoice(index), disabled: poll.choices.length <= Composer_1.COMPOSER_POLL_MIN_CHOICES, edge: "end" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) })) }) })) })))
                        } }, index))) })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.choiceNew }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ color: "inherit", variant: "text", onClick: handleAddChoice }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.add", defaultMessage: "ui.composer.choice.add" })] })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.metadata }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: poll.multiple_choices, onChange: handleChangeMultiple }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.multiple", defaultMessage: "ui.composer.content.poll.multiple" }) }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: localeMap[intl.locale] }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { disabled: disabled, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.expiration", defaultMessage: "ui.composer.content.poll.expiration" }), value: typeof poll.expiration_at === 'string' ? (0, date_fns_1.parseISO)(poll.expiration_at) : poll.expiration_at, onChange: handleChangeExpiration, slotProps: { textField: { variant: 'outlined' } }, minDate: minDate }) }))] }))] })));
};