@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
213 lines (211 loc) • 8.02 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 * as React from 'react';
import { makeStyles } from 'tss-react/mui';
import FormControl from '@mui/material/FormControl';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import TextField from '@mui/material/TextField';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import TextFieldWithMax from '../TextFieldWithMax/TextFieldWithMax';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import InputLabel from '@mui/material/InputLabel';
const useStyles = makeStyles()((theme) => ({
formHelperText: {
marginLeft: '5px'
},
environmentLoaderContainer: {
display: 'inline-flex'
},
environmentLoader: {
border: `1px solid ${theme.palette.divider}`,
padding: '15px',
borderRadius: theme.shape.borderRadius,
width: '100%'
}
}));
const messages = defineMessages({
staging: { id: 'words.staging', defaultMessage: 'Staging' },
live: { id: 'words.live', defaultMessage: 'Live' }
});
export function PublishOnDemandForm(props) {
const {
mode,
formData,
disabled,
setFormData,
publishingTargets,
publishingTargetsError,
bulkPublishCommentRequired,
publishByCommitCommentRequired
} = props;
const { classes } = useStyles();
const { formatMessage } = useIntl();
const handleFormChange = (name) => (event) => {
const value = event.target.value;
setFormData({ [name]: name === 'path' ? `/${value}`.replace(/\/{2,}/g, '/') : value });
};
return React.createElement(
'form',
null,
React.createElement(
Grid,
{ container: true, spacing: 3 },
mode !== 'everything' &&
React.createElement(
Grid,
{ item: true, xs: 12, md: 8 },
React.createElement(
FormControl,
{ fullWidth: true },
React.createElement(TextField, {
disabled: disabled,
value: mode === 'studio' ? formData.path : formData.commitIds,
label:
mode === 'studio'
? React.createElement(FormattedMessage, {
id: 'publishOnDemand.formPathLabel',
defaultMessage: 'Path to Publish'
})
: React.createElement(FormattedMessage, {
id: 'publishOnDemand.formPathLabelPreview',
defaultMessage: 'Commit or tag IDs'
}),
fullWidth: true,
required: true,
helperText:
mode === 'studio'
? React.createElement(FormattedMessage, {
id: 'publishOnDemand.formPathExample',
defaultMessage: 'e.g. /site/website/about/index.xml'
})
: React.createElement(FormattedMessage, {
id: 'publishOnDemand.formPathExamplePreview',
defaultMessage: 'You may enter multiple separate by comma'
}),
FormHelperTextProps: { className: classes.formHelperText },
onChange: handleFormChange(mode === 'studio' ? 'path' : 'commitIds'),
onBlur:
mode === 'studio'
? () => {
setFormData({ path: formData.path.replace(/(.+)(\/$)/, '$1') });
}
: void 0
})
)
),
React.createElement(
Grid,
{ item: true, xs: 12, md: mode !== 'everything' ? 4 : 12 },
publishingTargets
? React.createElement(
FormControl,
{ fullWidth: true, variant: 'outlined', required: true, disabled: disabled },
React.createElement(
InputLabel,
{ id: 'publishingTargetLabel' },
React.createElement(FormattedMessage, {
id: 'publishOnDemand.publishingTarget',
defaultMessage: 'Publishing Target'
})
),
React.createElement(
Select,
{
id: 'publishingTargetDropdown',
labelId: 'publishingTargetLabel',
label: React.createElement(FormattedMessage, {
id: 'publishOnDemand.publishingTarget',
defaultMessage: 'Publishing Target'
}),
value: formData.publishingTarget,
onChange: handleFormChange('publishingTarget')
},
publishingTargets.map((target) =>
React.createElement(
MenuItem,
{ key: target.name, value: target.name },
formatMessage(messages[target.name])
)
)
)
)
: React.createElement(
FormControl,
{ fullWidth: true },
React.createElement(
'div',
{ className: classes.environmentLoaderContainer },
React.createElement(
Typography,
{
variant: 'body1',
component: 'span',
className: classes.environmentLoader,
color: publishingTargetsError ? 'error' : 'initial'
},
publishingTargetsError
? React.createElement(FormattedMessage, { id: 'words.error', defaultMessage: 'Error' })
: React.createElement(
React.Fragment,
null,
React.createElement(FormattedMessage, { id: 'words.loading', defaultMessage: 'Loading' }),
'...'
)
)
)
)
),
React.createElement(
Grid,
{ item: true, xs: 12 },
React.createElement(
FormControl,
{ fullWidth: true },
React.createElement(TextFieldWithMax, {
disabled: disabled,
value: formData.comment,
label: React.createElement(FormattedMessage, {
id: 'publishOnDemand.submissionComment',
defaultMessage: 'Submission Comment'
}),
fullWidth: true,
multiline: true,
onChange: handleFormChange('comment'),
required: mode === 'studio' ? bulkPublishCommentRequired : publishByCommitCommentRequired
})
)
)
)
);
}
export default PublishOnDemandForm;