+ client: 2154 Make renderCheckboxField a controlled input

Close #2154

* commit '0ae00932e94429d25995114e2ba9a82f71377d79':
  + client: 2154 Make renderCheckboxField a controlled input

client/src/components/Filters/Form.js

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 import classNames from 'classnames';
 import { validatePath, validateRequiredValue } from '../../helpers/validators';
-import { renderCheckboxField, renderInputField } from '../../helpers/form';
+import { CheckboxField, renderInputField } from '../../helpers/form';
 import { MODAL_OPEN_TIMEOUT, MODAL_TYPE, FORM_NAME } from '../../helpers/constants';
 
 const filtersCatalog = require('../../helpers/filters/filters.json');
@@ -34,6 +34,22 @@ const renderIcons = (iconsData) => iconsData.map(({
     </svg>
 </a>);
 
+const renderCheckboxField = (
+    props,
+) => <CheckboxField
+        {...props}
+        input={{
+            ...props.input,
+            checked: props.disabled || props.input.checked,
+        }}
+/>;
+
+renderCheckboxField.propTypes = {
+    // https://redux-form.com/8.3.0/docs/api/field.md/#props
+    input: PropTypes.object.isRequired,
+    disabled: PropTypes.bool.isRequired,
+};
+
 const renderFilters = ({ categories, filters }, selectedSources, t) => Object.keys(categories)
     .map((categoryId) => {
         const category = categories[categoryId];
@@ -60,12 +76,11 @@ const renderFilters = ({ categories, filters }, selectedSources, t) => Object.ke
 
                 return <div key={name} className="d-flex align-items-center pb-1">
                     <Field
-                        name={`${filter.id}`}
+                        name={filter.id}
                         type="checkbox"
                         component={renderCheckboxField}
                         placeholder={t(name)}
                         disabled={isSelected}
-                        checked={isSelected}
                     />
                     {renderIcons(iconsData)}
                 </div>;

client/src/components/Settings/Clients/Form.js

@@ -15,7 +15,7 @@ import { toggleAllServices } from '../../../helpers/helpers';
 import {
     renderInputField,
     renderGroupField,
-    renderCheckboxField,
+    CheckboxField,
     renderServiceField,
 } from '../../../helpers/form';
 import { validateClientId, validateRequiredValue } from '../../../helpers/validators';
@@ -151,7 +151,7 @@ let Form = (props) => {
                         <Field
                             name={setting.name}
                             type="checkbox"
-                            component={renderCheckboxField}
+                            component={CheckboxField}
                             placeholder={t(setting.placeholder)}
                             disabled={
                                 setting.name !== 'use_global_settings'

client/src/components/Settings/Dns/Config/Form.js

@@ -6,7 +6,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import {
     renderInputField,
     renderRadioField,
-    renderCheckboxField,
+    CheckboxField,
     toNumber,
 } from '../../../../helpers/form';
 import {
@@ -97,7 +97,7 @@ const Form = ({
                     <Field
                         name={name}
                         type="checkbox"
-                        component={renderCheckboxField}
+                        component={CheckboxField}
                         placeholder={t(placeholder)}
                         disabled={processing}
                         subtitle={t(subtitle)}

client/src/components/Settings/Encryption/Form.js

@@ -7,7 +7,7 @@ import flow from 'lodash/flow';
 
 import {
     renderInputField,
-    renderCheckboxField,
+    CheckboxField,
     renderRadioField,
     toNumber,
 } from '../../../helpers/form';
@@ -101,7 +101,7 @@ let Form = (props) => {
                         <Field
                             name="enabled"
                             type="checkbox"
-                            component={renderCheckboxField}
+                            component={CheckboxField}
                             placeholder={t('encryption_enable')}
                             onChange={handleChange}
                         />
@@ -138,7 +138,7 @@ let Form = (props) => {
                         <Field
                             name="force_https"
                             type="checkbox"
-                            component={renderCheckboxField}
+                            component={CheckboxField}
                             placeholder={t('encryption_redirect')}
                             onChange={handleChange}
                             disabled={!isEnabled}

client/src/components/Settings/FiltersConfig/Form.js

@@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
-import { renderCheckboxField, toNumber } from '../../../helpers/form';
+import { CheckboxField, toNumber } from '../../../helpers/form';
 import { FILTERS_INTERVALS_HOURS, FORM_NAME } from '../../../helpers/constants';
 
 const getTitleForInterval = (interval, t) => {
@@ -49,7 +49,7 @@ const Form = (props) => {
                             name="enabled"
                             type="checkbox"
                             modifier="checkbox--settings"
-                            component={renderCheckboxField}
+                            component={CheckboxField}
                             placeholder={t('block_domain_use_filters_and_hosts')}
                             subtitle={t('filters_block_toggle_hint')}
                             onChange={handleChange}

client/src/components/Settings/LogsConfig/Form.js

@@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
-import { renderCheckboxField, renderRadioField, toNumber } from '../../../helpers/form';
+import { CheckboxField, renderRadioField, toNumber } from '../../../helpers/form';
 import { FORM_NAME, QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants';
 
 const getIntervalFields = (processing, t, toNumber) => QUERY_LOG_INTERVALS_DAYS.map((interval) => {
@@ -35,7 +35,7 @@ const Form = (props) => {
                 <Field
                     name="enabled"
                     type="checkbox"
-                    component={renderCheckboxField}
+                    component={CheckboxField}
                     placeholder={t('query_log_enable')}
                     disabled={processing}
                 />
@@ -44,7 +44,7 @@ const Form = (props) => {
                 <Field
                     name="anonymize_client_ip"
                     type="checkbox"
-                    component={renderCheckboxField}
+                    component={CheckboxField}
                     placeholder={t('anonymize_client_ip')}
                     subtitle={t('anonymize_client_ip_desc')}
                     disabled={processing}

client/src/helpers/form.js

@@ -157,31 +157,24 @@ renderRadioField.propTypes = {
     }).isRequired,
 };
 
-export const renderCheckboxField = ({
+export const CheckboxField = ({
     input,
     placeholder,
     subtitle,
     disabled,
     onClick,
     modifier = 'checkbox--form',
-    checked,
     meta: { touched, error },
 }) => <>
     <label className={`checkbox ${modifier}`} onClick={onClick}>
         <span className="checkbox__marker" />
-        <input {...input} type="checkbox" className="checkbox__input" disabled={disabled}
-               checked={input.checked || checked} />
+        <input {...input} type="checkbox" className="checkbox__input" disabled={disabled} />
         <span className="checkbox__label">
-                        <span className="checkbox__label-text checkbox__label-text--long">
-                            <span className="checkbox__label-title">{placeholder}</span>
-                            {subtitle
-                            && <span
-                                className="checkbox__label-subtitle"
-                                dangerouslySetInnerHTML={{ __html: subtitle }}
-
-                            />}
-                        </span>
-                    </span>
+            <span className="checkbox__label-text checkbox__label-text--long">
+                <span className="checkbox__label-title">{placeholder}</span>
+                {subtitle && <span className="checkbox__label-subtitle">{subtitle}</span>}
+            </span>
+        </span>
     </label>
     {!disabled
     && touched
@@ -189,7 +182,7 @@ export const renderCheckboxField = ({
     && <span className="form__message form__message--error"><Trans>{error}</Trans></span>}
 </>;
 
-renderCheckboxField.propTypes = {
+CheckboxField.propTypes = {
     input: PropTypes.object.isRequired,
     placeholder: PropTypes.string,
     subtitle: PropTypes.string,