@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
98 lines (96 loc) • 3.14 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 Fab from '@mui/material/Fab';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import Typography from '@mui/material/Typography';
import React from 'react';
import Box from '@mui/material/Box';
import PluginFormEngine from '../PluginFormBuilder';
import { FormattedMessage } from 'react-intl';
function getSx(sx) {
return {
root: {
height: '100%',
overflow: 'auto',
...sx?.root
},
header: {
display: 'flex',
padding: '20px',
alignItems: 'center',
...sx?.header
},
backButton: {
color: '#4F4F4F',
backgroundColor: '#FFFFFF',
marginRight: '30px',
'&:hover': {
backgroundColor: '#FFFFFF'
},
...sx?.backButton
}
};
}
export function PluginParametersForm(props) {
const { plugin, fields, submitted, onCancel, onPluginFieldChange } = props;
const sx = getSx();
const handleInputChange = (e, type) => {
e.persist();
onPluginFieldChange(e.target.name, e.target.value);
};
return React.createElement(
Box,
{ sx: sx.root },
React.createElement(
Box,
{ sx: sx.header },
React.createElement(
Fab,
{ 'aria-label': 'back', sx: sx.backButton, onClick: onCancel },
React.createElement(ArrowBackIcon, null)
),
React.createElement(
Typography,
{ variant: 'h5', component: 'h1' },
plugin.name,
' ',
React.createElement(FormattedMessage, { id: 'word.configuration', defaultMessage: 'Configuration' })
)
),
React.createElement(PluginFormEngine, {
fields: fields,
submitted: submitted,
handleInputChange: handleInputChange,
parameters: plugin.parameters
})
);
}
export default PluginParametersForm;