@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
120 lines (118 loc) • 4.4 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 React from 'react';
import TextField from '@mui/material/TextField';
import Grid from '@mui/material/Grid';
import { makeStyles } from 'tss-react/mui';
import { defineMessages, useIntl } from 'react-intl';
import PasswordTextField from '../PasswordTextField/PasswordTextField';
const useStyles = makeStyles()(() => ({
container: {
width: '100%',
paddingLeft: '24px',
'& .MuiGrid-item': {
paddingTop: '24px',
'&:last-child': {
paddingBottom: '12px'
}
}
}
}));
const messages = defineMessages({
required: {
id: 'createSiteDialog.required',
defaultMessage: '{name} is required.'
}
});
export function PluginFormEngine(props) {
const { classes } = useStyles();
const { parameters, handleInputChange, submitted, fields, onKeyPress } = props;
const { formatMessage } = useIntl();
function renderHelperText(name, value = '', helperText, required, submitted) {
if (required && !value && submitted) {
return formatMessage(messages.required, { name: name });
} else {
return helperText;
}
}
function renderParameters(parameters) {
return parameters.map((parameter, index) => {
return React.createElement(
Grid,
{ item: true, xs: 12, key: index },
parameter.type === 'STRING'
? React.createElement(TextField, {
id: parameter.name,
fullWidth: true,
name: parameter.name,
label: parameter.label,
required: parameter.required,
onKeyPress: onKeyPress,
placeholder: parameter.defaultValue,
onChange: (event) => handleInputChange(event, 'fields'),
value: fields[parameter.name] ? fields[parameter.name] : '',
error: parameter.required && submitted && !fields[parameter.name],
helperText: renderHelperText(
parameter.label,
fields[parameter.name],
parameter.description,
parameter.required,
submitted
)
})
: React.createElement(PasswordTextField, {
id: parameter.name,
fullWidth: true,
name: parameter.name,
label: parameter.label,
required: parameter.required,
onKeyPress: onKeyPress,
onChange: (event) => handleInputChange(event, 'fields'),
value: fields[parameter.name] ? fields[parameter.name] : '',
error: parameter.required && submitted && !fields[parameter.name],
helperText: renderHelperText(
parameter.label,
fields[parameter.name],
parameter.description,
parameter.required,
submitted
)
})
);
});
}
return React.createElement(
Grid,
{ container: true, spacing: 0, className: classes.container },
renderParameters(parameters)
);
}
export default PluginFormEngine;