From ae94a75d935f031e3eb5082a1c2e6a0de028d27d Mon Sep 17 00:00:00 2001 From: soupette Date: Tue, 12 Oct 2021 11:06:29 +0200 Subject: [PATCH] Created TabForm component Signed-off-by: soupette --- .../components/CustomRadioGroup/components.js | 2 +- .../admin/src/components/FormModal/index.js | 194 ++---------------- .../admin/src/components/TabForm/index.js | 105 ++++++++++ 3 files changed, 127 insertions(+), 174 deletions(-) create mode 100644 packages/core/content-type-builder/admin/src/components/TabForm/index.js diff --git a/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/components.js b/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/components.js index d471e26fc5..0e2f75adfd 100644 --- a/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/components.js +++ b/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/components.js @@ -4,7 +4,7 @@ import { Text } from '@strapi/parts/Text'; const Wrapper = styled(Stack)` position: relative; - align--items: stretch; + align-items: stretch; label { max-width: 50%; diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/index.js b/packages/core/content-type-builder/admin/src/components/FormModal/index.js index 398324fa51..c150cf0f21 100644 --- a/packages/core/content-type-builder/admin/src/components/FormModal/index.js +++ b/packages/core/content-type-builder/admin/src/components/FormModal/index.js @@ -1,6 +1,5 @@ import React, { useCallback, useEffect, useState, useMemo } from 'react'; import { - GenericInput, getYupInnerErrors, useTracking, useNotification, @@ -16,9 +15,8 @@ import AddIcon from '@strapi/icons/AddIcon'; import { Box } from '@strapi/parts/Box'; import { Button } from '@strapi/parts/Button'; import { Divider } from '@strapi/parts/Divider'; -import { Grid, GridItem } from '@strapi/parts/Grid'; import { ModalLayout, ModalBody, ModalFooter } from '@strapi/parts/ModalLayout'; -import { H2, H3 } from '@strapi/parts/Text'; +import { H2 } from '@strapi/parts/Text'; import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/parts/Tabs'; import { Row } from '@strapi/parts/Row'; import { Stack } from '@strapi/parts/Stack'; @@ -31,8 +29,10 @@ import DraftAndPublishToggle from '../DraftAndPublishToggle'; import FormModalHeader from '../FormModalHeader'; import BooleanDefaultValueSelect from '../BooleanDefaultValueSelect'; +import CheckboxWithNumberField from '../CheckboxWithNumberField'; import CustomRadioGroup from '../CustomRadioGroup'; import ContentTypeRadioGroup from '../ContentTypeRadioGroup'; +import TabForm from '../TabForm'; // import ComponentIconPicker from '../ComponentIconPicker'; // import RelationForm from '../RelationForm'; // import WrapperSelect from '../WrapperSelect'; @@ -51,7 +51,6 @@ import { import forms from './forms'; import { createComponentUid, createUid } from './utils/createUid'; import { INITIAL_STATE_DATA } from './utils/staticData'; -// import CustomButton from './CustomButton'; import makeSelectFormModal from './selectors'; import { SET_DATA_TO_EDIT, @@ -65,7 +64,6 @@ import { RESET_PROPS_AND_SAVE_CURRENT_DATA, RESET_PROPS, } from './constants'; -import CheckboxWithNumberField from '../CheckboxWithNumberField'; /* eslint-disable indent */ /* eslint-disable react/no-array-index-key */ @@ -1206,178 +1204,28 @@ const FormModal = () => { - {state.settingType === 'base' && - baseForm.map((section, sectionIndex) => { - // Don't display an empty section - if (section.items.length === 0) { - return null; - } - - return ( - - {section.sectionTitle && ( - -

{formatMessage(section.sectionTitle)}

- - )} - - {section.items.map((input, i) => { - const key = `${sectionIndex}.${i}`; - - const retrievedValue = get(modifiedData, input.name, ''); - - let value; - - if (input.name === 'enum' && Array.isArray(retrievedValue)) { - value = retrievedValue.join('\n'); - } else if (input.name === 'uid') { - value = input.value; - } else if ( - input.name === 'allowedTypes' && - retrievedValue === '' - ) { - value = null; - } else { - value = retrievedValue; - } - - // When extending the yup schema of an existing field (like in https://github.com/strapi/strapi/blob/293ff3b8f9559236609d123a2774e3be05ce8274/packages/strapi-plugin-i18n/admin/src/index.js#L52) - // and triggering a yup validation error in the UI (missing a required field for example) - // We got an object that looks like: formErrors = { "pluginOptions.i18n.localized": {...} } - // In order to deal with this error, we can't rely on lodash.get to resolve this key - // - lodash will try to access {pluginOptions: {i18n: {localized: true}}}) - // - and we just want to access { "pluginOptions.i18n.localized": {...} } - // NOTE: this is a hack - const pluginOptionError = Object.keys(formErrors).find( - key => key === input.name - ); - - // Retrieve the error for a specific input - const errorId = pluginOptionError - ? formErrors[pluginOptionError].id - : get( - formErrors, - [ - ...input.name - .split('.') - // The filter here is used when creating a component - // in the component step 1 modal - // Since the component info is stored in the - // componentToCreate object we can access the error - // By removing the key - .filter(key => key !== 'componentToCreate'), - 'id', - ], - null - ); - - return ( - - - - ); - })} - - - ); - })} + {state.settingType === 'base' && ( + + )} - {state.settingType === 'advanced' && - advancedForm.map((section, sectionIndex) => { - // Don't display an empty section - if (section.items.length === 0) { - return null; - } - - return ( - - {section.sectionTitle && ( - -

{formatMessage(section.sectionTitle)}

- - )} - - {section.items.map((input, i) => { - const key = `${sectionIndex}.${i}`; - - let value; - - const retrievedValue = get(modifiedData, input.name, ''); - - // Condition for the boolean default value - // The radio input doesn't accept false, true or null as value - // So we pass them as string - // This way the data stays accurate and we don't have to operate - // any data mutation - if (input.name === 'enum' && Array.isArray(retrievedValue)) { - value = retrievedValue.join('\n'); - } else if (input.name === 'uid') { - value = input.value; - } else if ( - input.name === 'allowedTypes' && - retrievedValue === '' - ) { - value = null; - } else { - value = retrievedValue; - } - - // When extending the yup schema of an existing field (like in https://github.com/strapi/strapi/blob/293ff3b8f9559236609d123a2774e3be05ce8274/packages/strapi-plugin-i18n/admin/src/index.js#L52) - // and triggering a yup validation error in the UI (missing a required field for example) - // We got an object that looks like: formErrors = { "pluginOptions.i18n.localized": {...} } - // In order to deal with this error, we can't rely on lodash.get to resolve this key - // - lodash will try to access {pluginOptions: {i18n: {localized: true}}}) - // - and we just want to access { "pluginOptions.i18n.localized": {...} } - // NOTE: this is a hack - const pluginOptionError = Object.keys(formErrors).find( - key => key === input.name - ); - - // Retrieve the error for a specific input - const errorId = pluginOptionError - ? formErrors[pluginOptionError].id - : get( - formErrors, - [ - ...input.name - .split('.') - // The filter here is used when creating a component - // in the component step 1 modal - // Since the component info is stored in the - // componentToCreate object we can access the error - // By removing the key - .filter(key => key !== 'componentToCreate'), - 'id', - ], - null - ); - - return ( - - - - ); - })} - - - ); - })} + {state.settingType === 'advanced' && ( + + )} diff --git a/packages/core/content-type-builder/admin/src/components/TabForm/index.js b/packages/core/content-type-builder/admin/src/components/TabForm/index.js new file mode 100644 index 0000000000..6e183ed946 --- /dev/null +++ b/packages/core/content-type-builder/admin/src/components/TabForm/index.js @@ -0,0 +1,105 @@ +/** + * + * TabForm + * + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import { useIntl } from 'react-intl'; +import get from 'lodash/get'; +import { GenericInput } from '@strapi/helper-plugin'; +import { Box } from '@strapi/parts/Box'; +import { Grid, GridItem } from '@strapi/parts/Grid'; +import { H3 } from '@strapi/parts/Text'; + +/* eslint-disable react/no-array-index-key */ +const TabForm = ({ form, formErrors, genericInputProps, modifiedData, onChange }) => { + const { formatMessage } = useIntl(); + + return form.map((section, sectionIndex) => { + // Don't display an empty section + if (section.items.length === 0) { + return null; + } + + return ( + + {section.sectionTitle && ( + +

{formatMessage(section.sectionTitle)}

+ + )} + + {section.items.map((input, i) => { + const key = `${sectionIndex}.${i}`; + + const retrievedValue = get(modifiedData, input.name, ''); + + let value; + + if (input.name === 'enum' && Array.isArray(retrievedValue)) { + value = retrievedValue.join('\n'); + } else if (input.name === 'uid') { + value = input.value; + } else if (input.name === 'allowedTypes' && retrievedValue === '') { + value = null; + } else { + value = retrievedValue; + } + + // When extending the yup schema of an existing field (like in https://github.com/strapi/strapi/blob/293ff3b8f9559236609d123a2774e3be05ce8274/packages/strapi-plugin-i18n/admin/src/index.js#L52) + // and triggering a yup validation error in the UI (missing a required field for example) + // We got an object that looks like: formErrors = { "pluginOptions.i18n.localized": {...} } + // In order to deal with this error, we can't rely on lodash.get to resolve this key + // - lodash will try to access {pluginOptions: {i18n: {localized: true}}}) + // - and we just want to access { "pluginOptions.i18n.localized": {...} } + // NOTE: this is a hack + const pluginOptionError = Object.keys(formErrors).find(key => key === input.name); + + // Retrieve the error for a specific input + const errorId = pluginOptionError + ? formErrors[pluginOptionError].id + : get( + formErrors, + [ + ...input.name + .split('.') + // The filter here is used when creating a component + // in the component step 1 modal + // Since the component info is stored in the + // componentToCreate object we can access the error + // By removing the key + .filter(key => key !== 'componentToCreate'), + 'id', + ], + null + ); + + return ( + + + + ); + })} + + + ); + }); +}; + +TabForm.propTypes = { + form: PropTypes.arrayOf(PropTypes.object).isRequired, + formErrors: PropTypes.object.isRequired, + genericInputProps: PropTypes.object.isRequired, + modifiedData: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, +}; + +export default TabForm;