Init custom checkbox that display children for min max settings

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;
+  // padding: 0 15px;
-  margin-top: -6px;
+  padding: 0;
-  margin-bottom: 16px;
+  // margin-top: -6px;
-  label {
+  // 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'] {
+  // input[type='number'] {
-    margin-top: -10px;
+  //   margin-top: -10px;
-    margin-bottom: -4px;
+  //   margin-bottom: -4px;
-  }
+  // }
 `;
 
 export default StyledCustomCheckbox;

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 { isEmpty, isNumber } from 'lodash';
-
+import { Inputs } from '@buffetjs/custom';
-import { InputNumberWithErrors as InputNumber } from 'strapi-helper-plugin';
-
 import StyledCustomCheckbox from './StyledCustomCheckbox';
 
-class CustomCheckbox extends React.Component {
+const CustomCheckbox = ({ label, name, onChange, value, ...rest }) => {
-  // eslint-disable-line react/prefer-stateless-function
+  const [checked, setChecked] = useState(isNumber(value) || !isEmpty(value));
-  state = {
-    isChecked: this.props.value !== null && this.props.value !== undefined,
-  };
 
-  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 (
     <StyledCustomCheckbox>
-        <FormattedMessage id={label.id}>
+      <Inputs
-          {msg => (
+        label={label}
-            <label htmlFor={name}>
-              <input
-                checked={isChecked}
         name={name}
-                id={name}
-                onChange={this.handleChange}
         type="checkbox"
+        value={checked}
+        onChange={() => {
+          if (checked) {
+            onChange({
+              target: {
+                name,
+                value: null,
+              },
+            });
+          }
+          setChecked(prev => !prev);
+        }}
       />
-              <span>{msg}</span>
+      {checked && (
-            </label>
+        <Inputs
-          )}
+          {...rest}
-        </FormattedMessage>
-        {isChecked && (
-          <InputNumber
-            didCheckErrors={didCheckErrors}
-            errors={errors}
           name={name}
-            onChange={this.handleInputNumberChange}
+          onChange={onChange}
-            value={value || ''}
+          value={value}
+          type="number"
         />
       )}
     </StyledCustomCheckbox>
   );
-  }
+};
-}
 
 CustomCheckbox.defaultProps = {
-  didCheckErrors: false,
+  label: null,
-  errors: [],
-  label: {
-    id: 'app.utils.defaultMessage',
-  },
   name: '',
   value: null,
 };
 
 CustomCheckbox.propTypes = {
-  didCheckErrors: PropTypes.bool,
+  label: PropTypes.string,
-  errors: PropTypes.array,
-  label: PropTypes.shape({
-    id: PropTypes.string,
-  }),
   name: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

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}
                               >
                                 <Inputs
+                                  customInputs={{
+                                    customCheckboxWithChildren: CustomCheckbox,
+                                  }}
                                   value={get(modifiedData, input.name, '')}
                                   {...input}
                                   error={

packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/reducer.js

@@ -6,7 +6,6 @@ const initialState = fromJS({
 });
 
 const reducer = (state, action) => {
-  console.log({ action: action.type });
   switch (action.type) {
     case 'ON_CHANGE':
       return state.updateIn(

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: {},
               },
             ],