diff --git a/packages/core/content-type-builder/admin/src/components/BooleanRadioGroup/index.js b/packages/core/content-type-builder/admin/src/components/BooleanRadioGroup/index.js new file mode 100644 index 0000000000..872caa22f8 --- /dev/null +++ b/packages/core/content-type-builder/admin/src/components/BooleanRadioGroup/index.js @@ -0,0 +1,20 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import CustomRadioGroup from '../CustomRadioGroup'; + +const BooleanRadioGroup = ({ onChange, name, ...rest }) => { + const handleChange = e => { + const checked = e.target.value !== 'false'; + + onChange({ target: { name, value: checked, type: 'radio' } }); + }; + + return ; +}; + +BooleanRadioGroup.propTypes = { + name: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, +}; + +export default BooleanRadioGroup; diff --git a/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js b/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js index 8133d982fe..523ae27c48 100644 --- a/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js +++ b/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js @@ -10,23 +10,6 @@ import { Wrapper } from './components'; const CustomRadioGroup = ({ intlLabel, name, onChange, radios, value }) => { const { formatMessage } = useIntl(); - const handleChange = e => { - let checked; - - if ( - name === 'multiple' || - name === 'single' || - name === 'createComponent' || - name === 'repeatable' - ) { - checked = e.target.value !== 'false'; - } else { - checked = e.target.value; - } - - onChange({ target: { name, value: checked, type: 'radio' } }); - }; - return ( @@ -43,7 +26,7 @@ const CustomRadioGroup = ({ intlLabel, name, onChange, radios, value }) => { checked={radio.value === value} value={radio.value} key={radio.value} - onChange={handleChange} + onChange={onChange} type="radio" /> diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/attributes/baseForm.js b/packages/core/content-type-builder/admin/src/components/FormModal/attributes/baseForm.js index bdb17ea75e..ec2398f28a 100644 --- a/packages/core/content-type-builder/admin/src/components/FormModal/attributes/baseForm.js +++ b/packages/core/content-type-builder/admin/src/components/FormModal/attributes/baseForm.js @@ -41,7 +41,7 @@ const baseForm = { defaultMessage: 'Type', }, name: 'repeatable', - type: 'radio-group', + type: 'boolean-radio-group', size: 12, radios: [ { @@ -180,7 +180,7 @@ const baseForm = { }, name: 'multiple', size: 12, - type: 'radio-group', + type: 'boolean-radio-group', radios: [ { title: { diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/component/componentField.js b/packages/core/content-type-builder/admin/src/components/FormModal/component/componentField.js index 2194e85fdb..8d4167ba61 100644 --- a/packages/core/content-type-builder/admin/src/components/FormModal/component/componentField.js +++ b/packages/core/content-type-builder/admin/src/components/FormModal/component/componentField.js @@ -6,7 +6,7 @@ const componentField = { defaultMessage: 'Type', }, name: 'createComponent', - type: 'radio-group', + type: 'boolean-radio-group', size: 12, radios: [ { 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 53d28367b1..26396a06b5 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 @@ -32,6 +32,7 @@ import DraftAndPublishToggle from '../DraftAndPublishToggle'; import FormModalHeader from '../FormModalHeader'; import BooleanDefaultValueSelect from '../BooleanDefaultValueSelect'; +import BooleanRadioGroup from '../BooleanRadioGroup'; import CheckboxWithNumberField from '../CheckboxWithNumberField'; import CustomRadioGroup from '../CustomRadioGroup'; import ContentTypeRadioGroup from '../ContentTypeRadioGroup'; @@ -864,6 +865,7 @@ const FormModal = () => { const genericInputProps = { customInputs: { 'allowed-types-select': AllowedTypesSelect, + 'boolean-radio-group': BooleanRadioGroup, 'checkbox-with-number-field': CheckboxWithNumberField, 'component-icon-picker': ComponentIconPicker, 'content-type-radio-group': ContentTypeRadioGroup,