From 0ae00932e94429d25995114e2ba9a82f71377d79 Mon Sep 17 00:00:00 2001
From: ArtemBaskal <a.baskal@adguard.com>
Date: Mon, 5 Oct 2020 14:53:20 +0300
Subject: [PATCH] + client: 2154 Make renderCheckboxField a controlled input
---
client/src/components/Filters/Form.js | 21 ++++++++++++++---
.../src/components/Settings/Clients/Form.js | 4 ++--
.../components/Settings/Dns/Config/Form.js | 4 ++--
.../components/Settings/Encryption/Form.js | 6 ++---
.../components/Settings/FiltersConfig/Form.js | 4 ++--
.../components/Settings/LogsConfig/Form.js | 6 ++---
client/src/helpers/form.js | 23 +++++++------------
7 files changed, 38 insertions(+), 30 deletions(-)
diff --git a/client/src/components/Filters/Form.js b/client/src/components/Filters/Form.js
index 9b2787d2..39791a5f 100644
--- a/client/src/components/Filters/Form.js
+++ b/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>;
diff --git a/client/src/components/Settings/Clients/Form.js b/client/src/components/Settings/Clients/Form.js
index 2142b1a5..28f8a59c 100644
--- a/client/src/components/Settings/Clients/Form.js
+++ b/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'
diff --git a/client/src/components/Settings/Dns/Config/Form.js b/client/src/components/Settings/Dns/Config/Form.js
index ecdd2439..a2dd2bf9 100644
--- a/client/src/components/Settings/Dns/Config/Form.js
+++ b/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)}
diff --git a/client/src/components/Settings/Encryption/Form.js b/client/src/components/Settings/Encryption/Form.js
index 15f8a3c6..8d69f665 100644
--- a/client/src/components/Settings/Encryption/Form.js
+++ b/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}
diff --git a/client/src/components/Settings/FiltersConfig/Form.js b/client/src/components/Settings/FiltersConfig/Form.js
index daa5ce25..366d1d84 100644
--- a/client/src/components/Settings/FiltersConfig/Form.js
+++ b/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}
diff --git a/client/src/components/Settings/LogsConfig/Form.js b/client/src/components/Settings/LogsConfig/Form.js
index aa3b61b3..9a1e3ec2 100644
--- a/client/src/components/Settings/LogsConfig/Form.js
+++ b/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}
diff --git a/client/src/helpers/form.js b/client/src/helpers/form.js
index 3b6801a0..85934a5e 100644
--- a/client/src/helpers/form.js
+++ b/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,