diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/StyledCustomCheckbox.js b/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/StyledCustomCheckbox.js
index dba628cf7f..eb50136ce0 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/StyledCustomCheckbox.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/StyledCustomCheckbox.js
@@ -8,10 +8,14 @@ import styled from 'styled-components';
const StyledCustomCheckbox = styled.div`
width: 100%;
- padding: 0 15px;
- margin-top: -6px;
- margin-bottom: 16px;
- label {
+ // padding: 0 15px;
+ padding: 0;
+ // margin-top: -6px;
+ // margin-bottom: 16px;
+ > label {
+ font-weight: 500 !important;
+ font-size: 12px;
+ line-height: 10px;
cursor: pointer;
input[type='checkbox'] {
margin-left: 0;
@@ -28,10 +32,10 @@ const StyledCustomCheckbox = styled.div`
line-height: 10px;
}
}
- input[type='number'] {
- margin-top: -10px;
- margin-bottom: -4px;
- }
+ // input[type='number'] {
+ // margin-top: -10px;
+ // margin-bottom: -4px;
+ // }
`;
export default StyledCustomCheckbox;
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/index.js
index 4583aa249e..5bffd5e6f1 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/index.js
@@ -4,92 +4,55 @@
*
*/
-import React from 'react';
+import React, { useState } from 'react';
import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-
-import { InputNumberWithErrors as InputNumber } from 'strapi-helper-plugin';
-
+import { isEmpty, isNumber } from 'lodash';
+import { Inputs } from '@buffetjs/custom';
import StyledCustomCheckbox from './StyledCustomCheckbox';
-class CustomCheckbox extends React.Component {
- // eslint-disable-line react/prefer-stateless-function
- state = {
- isChecked: this.props.value !== null && this.props.value !== undefined,
- };
+const CustomCheckbox = ({ label, name, onChange, value, ...rest }) => {
+ const [checked, setChecked] = useState(isNumber(value) || !isEmpty(value));
- handleChange = ({ target: { checked } }) => {
- this.setState({ isChecked: checked });
-
- const { name, onChange } = this.props;
- const value = checked ? '' : null;
- const target = { name, value };
-
- onChange({ target });
- };
-
- handleInputNumberChange = ({ target: { value } }) => {
- const { name, onChange } = this.props;
- const target = {
- name,
- type: 'number',
- value: parseInt(value, 10),
- };
-
- onChange({ target });
- };
-
- render() {
- const { isChecked } = this.state;
- const { didCheckErrors, errors, label, name, value } = this.props;
-
- // TODO: remove inline after migrating to Buffet
- return (
-
-
- {msg => (
-
- )}
-
- {isChecked && (
-
- )}
-
- );
- }
-}
+ return (
+
+ {
+ if (checked) {
+ onChange({
+ target: {
+ name,
+ value: null,
+ },
+ });
+ }
+ setChecked(prev => !prev);
+ }}
+ />
+ {checked && (
+
+ )}
+
+ );
+};
CustomCheckbox.defaultProps = {
- didCheckErrors: false,
- errors: [],
- label: {
- id: 'app.utils.defaultMessage',
- },
+ label: null,
name: '',
value: null,
};
CustomCheckbox.propTypes = {
- didCheckErrors: PropTypes.bool,
- errors: PropTypes.array,
- label: PropTypes.shape({
- id: PropTypes.string,
- }),
+ label: PropTypes.string,
name: PropTypes.string,
onChange: PropTypes.func.isRequired,
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js
index 810479905f..7d5d9b1ae8 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js
@@ -19,6 +19,7 @@ import pluginId from '../../pluginId';
import useQuery from '../../hooks/useQuery';
import useDataManager from '../../hooks/useDataManager';
import AttributeOption from '../../components/AttributeOption';
+import CustomCheckbox from '../../components/CustomCheckbox';
import ModalHeader from '../../components/ModalHeader';
import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
import HeaderNavLink from '../../components/HeaderNavLink';
@@ -167,7 +168,7 @@ const FormModal = () => {
}
if (name === 'maxLength') {
- delete clonedErrors.maxLength;
+ delete clonedErrors.minLength;
}
delete clonedErrors[name];
@@ -211,7 +212,6 @@ const FormModal = () => {
});
} catch (err) {
const errors = getYupInnerErrors(err);
- console.log({ err, errors });
dispatch({
type: 'SET_ERRORS',
@@ -341,6 +341,9 @@ const FormModal = () => {
key={input.name}
>
{
- console.log({ action: action.type });
switch (action.type) {
case 'ON_CHANGE':
return state.updateIn(
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/forms.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/forms.js
index e8ebb40bd4..90ecef087b 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/forms.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/forms.js
@@ -145,7 +145,8 @@ const forms = {
{
autoFocus: false,
name: type === 'number' ? 'max' : 'maxLength',
- type: 'number',
+ // type: 'number',
+ type: 'customCheckboxWithChildren',
label: {
id: getTrad(
`form.attribute.item.maximum${
@@ -161,7 +162,7 @@ const forms = {
{
autoFocus: false,
name: type === 'number' ? 'min' : 'minLength',
- type: 'number',
+ type: 'customCheckboxWithChildren',
label: {
id: getTrad(
`form.attribute.item.minimum${
@@ -169,9 +170,6 @@ const forms = {
}`
),
},
- // description: {
- // id: getTrad('form.attribute.item.uniqueField.description'),
- // },
validations: {},
},
],