daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ client: 2154 Make renderCheckboxField a controlled input

Browse Source
This commit is contained in:
ArtemBaskal
2020-10-05 14:53:20 +03:00
parent 8856dd6e4c
commit 0ae00932e9
7 changed files with 38 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/helpers/form.js
View File

@@ -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,