Fix validations

Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette 2021-11-09 11:19:50 +01:00
parent 991d83b370
commit ea2a6d5182
4 changed files with 114 additions and 4 deletions

View File

@ -34,7 +34,10 @@ const CheckboxWithNumberField = ({ error, intlLabel, modifiedData, name, onChang
id={name}
name={name}
onValueChange={value => {
onChange({ target: { name, value: value || value === 0 ? 0 : null } });
const initValue = type === 'text' ? '0' : 0;
const nextValue = value ? initValue : null;
onChange({ target: { name, value: nextValue } });
setShowInput(prev => !prev);
}}
value={showInput}
@ -51,7 +54,7 @@ const CheckboxWithNumberField = ({ error, intlLabel, modifiedData, name, onChang
id={name}
name={name}
onChange={onChange}
value={typeof value === 'boolean' ? '0' : value}
value={value === null ? '' : value}
/>
) : (
<NumberInput
@ -63,7 +66,7 @@ const CheckboxWithNumberField = ({ error, intlLabel, modifiedData, name, onChang
onValueChange={value => {
onChange({ target: { name, value, type } });
}}
value={typeof value === 'boolean' ? 0 : value}
value={value || 0}
/>
)}
</Box>

View File

@ -224,7 +224,7 @@ const baseForm = {
defaultMessage: 'Number format',
},
name: 'type',
type: 'select',
type: 'select-number',
options: [
{
key: '__null_reset_value__',

View File

@ -68,6 +68,7 @@ import {
RESET_PROPS_AND_SAVE_CURRENT_DATA,
RESET_PROPS,
} from './constants';
import SelectNumber from '../SelectNumber';
/* eslint-disable indent */
/* eslint-disable react/no-array-index-key */
@ -832,6 +833,7 @@ const FormModal = () => {
'select-component': SelectComponent,
'select-components': SelectComponents,
'select-default-boolean': BooleanDefaultValueSelect,
'select-number': SelectNumber,
'toggle-draft-publish': DraftAndPublishToggle,
'text-plural': PluralName,
'text-singular': SingularName,

View File

@ -0,0 +1,105 @@
/**
*
* SelectNumber
*
*/
import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { Select, Option } from '@strapi/design-system/Select';
const SelectNumber = ({ intlLabel, error, modifiedData, name, onChange, options, value }) => {
const { formatMessage } = useIntl();
const label = formatMessage(intlLabel);
const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
const handleChange = nextValue => {
onChange({ target: { name, value: nextValue, type: 'select' } });
if (!value) {
return;
}
if (nextValue === 'biginteger' && value !== 'biginteger') {
if (modifiedData.default !== undefined && modifiedData.default !== null) {
onChange({ target: { name: 'default', value: null } });
}
if (modifiedData.max !== undefined && modifiedData.max !== null) {
onChange({ target: { name: 'max', value: null } });
}
if (modifiedData.min !== undefined && modifiedData.min !== null) {
onChange({ target: { name: 'min', value: null } });
}
}
if (['decimal', 'float', 'integer'].includes(nextValue) && value === 'biginteger') {
if (modifiedData.default !== undefined && modifiedData.default !== null) {
onChange({ target: { name: 'default', value: null } });
}
if (modifiedData.max !== undefined && modifiedData.max !== null) {
onChange({ target: { name: 'max', value: null } });
}
if (modifiedData.min !== undefined && modifiedData.min !== null) {
onChange({ target: { name: 'min', value: null } });
}
}
};
return (
<Select
error={errorMessage}
label={label}
id={name}
name={name}
onChange={handleChange}
value={value || ''}
>
{options.map(({ metadatas: { intlLabel, disabled, hidden }, key, value }) => {
return (
<Option key={key} value={value} disabled={disabled} hidden={hidden}>
{formatMessage(intlLabel)}
</Option>
);
})}
</Select>
);
};
SelectNumber.defaultProps = {
error: undefined,
value: '',
};
SelectNumber.propTypes = {
error: PropTypes.string,
intlLabel: PropTypes.shape({
id: PropTypes.string.isRequired,
defaultMessage: PropTypes.string.isRequired,
values: PropTypes.object,
}).isRequired,
modifiedData: PropTypes.object.isRequired,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
options: PropTypes.arrayOf(
PropTypes.shape({
metadatas: PropTypes.shape({
intlLabel: PropTypes.shape({
id: PropTypes.string.isRequired,
defaultMessage: PropTypes.string.isRequired,
}).isRequired,
disabled: PropTypes.bool,
hidden: PropTypes.bool,
}).isRequired,
key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
}).isRequired
).isRequired,
value: PropTypes.string,
};
export default SelectNumber;