yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-09 08:39:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add footer actions. Needs some refactoring

Browse Source 
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette 2021-10-11 11:27:13 +02:00
parent 0309c74b6c
commit 77235f65e1
3 changed files with 193 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/core/content-type-builder/admin/src/components/FormModal/CustomButton.js
View File

@ -1,12 +0,0 @@
import styled from 'styled-components';
import { Button } from '@buffetjs/core';
const CustomButton = styled(Button)`
svg {
height: 11px;
width: 11px;
vertical-align: initial;
}
`;
export default CustomButton;

8
packages/core/content-type-builder/admin/src/components/FormModal/dynamicZone/form.js
View File

@ -26,7 +26,13 @@ const form = {
sectionTitle: null, sectionTitle: null,
items: [ items: [
// FIXME // FIXME
{ type: 'pushRight', size: 6 }, {
type: 'pushRight',
size: 6,
// FIXME
intlLabel: { id: '', defaultMessage: '' },
name: 'pushRight',
},
{ {
name: 'components', name: 'components',
type: 'componentSelect', type: 'componentSelect',

267
packages/core/content-type-builder/admin/src/components/FormModal/index.js
View File

@ -20,6 +20,7 @@ import { get, has, isEmpty, set, toLower } from 'lodash';
import upperFirst from 'lodash/upperFirst'; import upperFirst from 'lodash/upperFirst';
import toString from 'lodash/toString'; import toString from 'lodash/toString';
import { useSelector, useDispatch, shallowEqual } from 'react-redux'; import { useSelector, useDispatch, shallowEqual } from 'react-redux';
import AddIcon from '@strapi/icons/AddIcon';
import { Box } from '@strapi/parts/Box'; import { Box } from '@strapi/parts/Box';
import { Button } from '@strapi/parts/Button'; import { Button } from '@strapi/parts/Button';
import { Divider } from '@strapi/parts/Divider'; import { Divider } from '@strapi/parts/Divider';
@ -35,7 +36,6 @@ import useDataManager from '../../hooks/useDataManager';
import AttributeOptions from '../AttributeOptions'; import AttributeOptions from '../AttributeOptions';
import FormModalHeader from '../FormModalHeader'; import FormModalHeader from '../FormModalHeader';
// import AttributeOption from '../AttributeOption';
// import BooleanBox from '../BooleanBox'; // import BooleanBox from '../BooleanBox';
// import ComponentIconPicker from '../ComponentIconPicker'; // import ComponentIconPicker from '../ComponentIconPicker';
// import CheckboxWithDescription from '../CheckboxWithDescription'; // import CheckboxWithDescription from '../CheckboxWithDescription';
@ -384,6 +384,7 @@ const FormModal = () => {
const headers = createHeadersArray(state); const headers = createHeadersArray(state);
// FIXME rename this constant
const isCreatingContentType = state.modalType === 'contentType'; const isCreatingContentType = state.modalType === 'contentType';
const isCreatingComponent = state.modalType === 'component'; const isCreatingComponent = state.modalType === 'component';
const isCreatingAttribute = state.modalType === 'attribute'; const isCreatingAttribute = state.modalType === 'attribute';
@ -1378,6 +1379,110 @@ const FormModal = () => {
</TabGroup> </TabGroup>
</ModalBody> </ModalBody>
<ModalFooter <ModalFooter
// FIXME
endActions={
<>
{(isCreatingContentType || isCreatingComponent) && !isCreating && (
<Button
type="button"
variant="danger"
onClick={e => {
e.preventDefault();
deleteData();
}}
>
{formatMessage({
id: getTrad('form.button.delete'),
defaultMessage: 'Delete',
})}
</Button>
)}
{isEditingCategory && (
<Button
type="button"
variant="danger"
onClick={e => {
e.preventDefault();
deleteCategory(initialData.name);
}}
>
{formatMessage({
id: getTrad('form.button.delete'),
defaultMessage: 'Delete',
})}
</Button>
)}
{isCreating && state.attributeType === 'dynamiczone' && (
<Button
type={isCreating ? 'submit' : 'button'}
variant={
(isCreatingContentType ||
isCreatingComponent ||
isEditingCategory ||
(state.modalType === 'addComponentToDynamicZone' &&
state.step === '1' &&
!isCreatingComponentFromAView)) &&
!isCreating
? 'default'
: 'secondary'
}
onClick={e => handleSubmit(e, true)}
startIcon={
(isCreatingAttribute &&
!isCreatingComponentFromAView &&
state.step !== '1') ||
(state.modalType === 'addComponentToDynamicZone' &&
isCreatingComponentFromAView) ||
(isCreatingComponentFromAView && state.step === '2') ? (
<AddIcon />
) : null
}
>
{getButtonSubmitMessage()}
</Button>
)}
{state.attributeType !== 'dynamiczone' && (
<Button
type={isCreating ? 'submit' : 'button'}
variant={
(isCreatingContentType ||
isCreatingComponent ||
isEditingCategory ||
(state.modalType === 'addComponentToDynamicZone' &&
state.step === '1' &&
!isCreatingComponentFromAView)) &&
!isCreating
? 'default'
: 'secondary'
}
onClick={e => handleSubmit(e, true)}
startIcon={
(isCreatingAttribute &&
!isCreatingComponentFromAView &&
state.step !== '1') ||
(state.modalType === 'addComponentToDynamicZone' &&
isCreatingComponentFromAView) ||
(isCreatingComponentFromAView && state.step === '2') ? (
<AddIcon />
) : null
}
>
{getButtonSubmitMessage()}
</Button>
)}
{isCreatingAttribute && !isInFirstComponentStep && (
<Button
type={isCreating ? 'button' : 'submit'}
onClick={e => {
handleSubmit(e, false);
}}
>
{formatMessage({ id: 'form.button.finish', defaultMessage: 'Finish' })}
</Button>
)}
</>
}
startActions={ startActions={
<Button variant="tertiary" onClick={handleClosed}> <Button variant="tertiary" onClick={handleClosed}>
{formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })} {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}
@ -1707,87 +1812,87 @@ const FormModal = () => {
// {formatMessage({ id: 'form.button.finish' })} // {formatMessage({ id: 'form.button.finish' })}
// </Button> // </Button>
// )} // )}
// {(isCreatingContentType || isCreatingComponent) && !isCreating && ( // {(isCreatingContentType || isCreatingComponent) && !isCreating && (
// <Button // <Button
// type="button" // type="button"
// color="delete" // color="delete"
// onClick={e => { // onClick={e => {
// e.preventDefault(); // e.preventDefault();
// deleteData(); // deleteData();
// }} // }}
// style={{ marginRight: '10px' }} // style={{ marginRight: '10px' }}
// > // >
// {formatMessage({ id: getTrad('form.button.delete') })} // {formatMessage({ id: getTrad('form.button.delete') })}
// </Button> // </Button>
// )} // )}
// {isEditingCategory && ( // {isEditingCategory && (
// <Button // <Button
// type="button" // type="button"
// color="delete" // color="delete"
// onClick={e => { // onClick={e => {
// e.preventDefault(); // e.preventDefault();
// deleteCategory(initialData.name); // deleteCategory(initialData.name);
// }} // }}
// style={{ marginRight: '10px' }} // style={{ marginRight: '10px' }}
// > // >
// {formatMessage({ id: getTrad('form.button.delete') })} // {formatMessage({ id: getTrad('form.button.delete') })}
// </Button> // </Button>
// )} // )}
// {isCreating && state.attributeType === 'dynamiczone' && ( // {isCreating && state.attributeType === 'dynamiczone' && (
// <CustomButton // <CustomButton
// type={isCreating ? 'submit' : 'button'} // type={isCreating ? 'submit' : 'button'}
// color={ // color={
// (isCreatingContentType || // (isCreatingContentType ||
// isCreatingComponent || // isCreatingComponent ||
// isEditingCategory || // isEditingCategory ||
// (state.modalType === 'addComponentToDynamicZone' && // (state.modalType === 'addComponentToDynamicZone' &&
// state.step === '1' && // state.step === '1' &&
// !isCreatingComponentFromAView)) && // !isCreatingComponentFromAView)) &&
// !isCreating // !isCreating
// ? 'success' // ? 'success'
// : 'primary' // : 'primary'
// } // }
// onClick={e => handleSubmit(e, true)} // onClick={e => handleSubmit(e, true)}
// icon={ // icon={
// (isCreatingAttribute && // (isCreatingAttribute &&
// !isCreatingComponentFromAView && // !isCreatingComponentFromAView &&
// state.step !== '1') || // state.step !== '1') ||
// (state.modalType === 'addComponentToDynamicZone' && // (state.modalType === 'addComponentToDynamicZone' &&
// isCreatingComponentFromAView) || // isCreatingComponentFromAView) ||
// (isCreatingComponentFromAView && state.step === '2') // (isCreatingComponentFromAView && state.step === '2')
// } // }
// > // >
// {getButtonSubmitMessage()} // {getButtonSubmitMessage()}
// </CustomButton> // </CustomButton>
// )} // )}
// {state.attributeType !== 'dynamiczone' && ( // {state.attributeType !== 'dynamiczone' && (
// <CustomButton // <CustomButton
// type={isCreating ? 'submit' : 'button'} // type={isCreating ? 'submit' : 'button'}
// color={ // color={
// (isCreatingContentType || // (isCreatingContentType ||
// isCreatingComponent || // isCreatingComponent ||
// isEditingCategory || // isEditingCategory ||
// (state.modalType === 'addComponentToDynamicZone' && // (state.modalType === 'addComponentToDynamicZone' &&
// state.step === '1' && // state.step === '1' &&
// !isCreatingComponentFromAView)) && // !isCreatingComponentFromAView)) &&
// !isCreating // !isCreating
// ? 'success' // ? 'success'
// : 'primary' // : 'primary'
// } // }
// onClick={e => handleSubmit(e, true)} // onClick={e => handleSubmit(e, true)}
// icon={ // icon={
// (isCreatingAttribute && // (isCreatingAttribute &&
// !isCreatingComponentFromAView && // !isCreatingComponentFromAView &&
// state.step !== '1') || // state.step !== '1') ||
// (state.modalType === 'addComponentToDynamicZone' && // (state.modalType === 'addComponentToDynamicZone' &&
// isCreatingComponentFromAView) || // isCreatingComponentFromAView) ||
// (isCreatingComponentFromAView && state.step === '2') // (isCreatingComponentFromAView && state.step === '2')
// } // }
// > // >
// {getButtonSubmitMessage()} // {getButtonSubmitMessage()}
// </CustomButton> // </CustomButton>
// )} // )}
// </div> // </div>
// </section> // </section>
// </ModalFooter> // </ModalFooter>