@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
94 lines (92 loc) • 3.28 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: Object.assign({ height: '100%', overflow: 'auto' }, sx === null || sx === void 0 ? void 0 : sx.root),
header: Object.assign(
{ display: 'flex', padding: '20px', alignItems: 'center' },
sx === null || sx === void 0 ? void 0 : sx.header
),
backButton: Object.assign(
{
color: '#4F4F4F',
backgroundColor: '#FFFFFF',
marginRight: '30px',
'&:hover': {
backgroundColor: '#FFFFFF'
}
},
sx === null || sx === void 0 ? void 0 : 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;