@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
139 lines (137 loc) • 4.81 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import Grid from '@mui/material/Grid';
import { AudiencesFormSection } from './AudiencesFormSection';
import SecondaryButton from '../SecondaryButton';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import PrimaryButton from '../PrimaryButton';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import Input from '../FormEngineControls/Input';
import Dropdown from '../FormEngineControls/Dropdown';
import CheckboxGroup from '../FormEngineControls/CheckboxGroup';
import DateTime from '../FormEngineControls/DateTime';
import { Alert } from '@mui/material';
const useStyles = makeStyles()((theme) => ({
panelMargin: {
margin: theme.spacing(1)
},
actionButtons: {
textAlign: 'right',
'& .MuiButton-root': {
marginRight: theme.spacing(1)
}
}
}));
const controlsMap = {
dropdown: Dropdown,
'checkbox-group': CheckboxGroup,
'date-time': DateTime,
input: Input
};
const messages = defineMessages({
controlNotFound: {
id: 'audiencesPanel.undefinedControlType',
defaultMessage: 'Unknown control type'
}
});
const getDefaultModel = (fields) => {
const props = {};
Object.keys(fields).forEach((fieldId) => {
const propValue = fields[fieldId].defaultValue;
props[fieldId] = propValue;
props[fieldId] = propValue;
});
return props;
};
const UndefinedControlType = () => {
const { formatMessage } = useIntl();
return React.createElement(Alert, { severity: 'warning', children: formatMessage(messages.controlNotFound) });
};
export function AudiencesPanelUI(props) {
const { classes } = useStyles();
const { model, modelApplying, onChange, onSaveModel, fields } = props;
const onFieldChange = (fieldId, type) => (value) => {
let props;
if (type === 'date-time') {
props = {
...model,
[fieldId]: value.toISOString()
};
} else {
props = {
...model,
[fieldId]: value
};
}
onChange(props);
};
return React.createElement(
React.Fragment,
null,
React.createElement(
Grid,
{ sx: { p: 2 } },
Object.keys(fields).map((fieldId) => {
const type = fields[fieldId].type;
const Control = controlsMap[type] ?? UndefinedControlType;
const controlProps = {
field: fields[fieldId],
value: model[fieldId] ?? undefined,
onChange: onFieldChange(fieldId, type),
disabled: modelApplying
};
if (controlProps.field.type === 'date-time' && !controlProps.value) {
controlProps.value = fields[fieldId].defaultValue;
}
return React.createElement(
AudiencesFormSection,
{ field: fields[fieldId], key: fieldId, showDivider: true },
React.createElement(Control, { ...controlProps })
);
})
),
React.createElement(
Grid,
{ className: classes.actionButtons, sx: { p: 2 } },
React.createElement(
SecondaryButton,
{ disabled: modelApplying, variant: 'contained', onClick: () => onChange(getDefaultModel(fields)) },
React.createElement(FormattedMessage, { id: 'audiencesPanel.defaults', defaultMessage: 'Defaults' })
),
React.createElement(
PrimaryButton,
{ onClick: () => onSaveModel(), loading: modelApplying },
React.createElement(FormattedMessage, { id: 'audiencesPanel.apply', defaultMessage: 'Apply' })
)
)
);
}