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