IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

[MM-55335] Convert ./components/admin_console/filter/filter_checkbox.tsx from Class Component to Function Component (#25416)

Browse Source 
* migrate filter_checkbox to function from class component

* Update webapp/channels/src/components/admin_console/filter/filter_checkbox.tsx

Co-authored-by: Daniel Espino García <larkox@gmail.com>

* adjust after feedback

* adjust input element to not have conditional rendering

* Revert "adjust input element to not have conditional rendering"

This reverts commit 9d252eb995.

---------

Co-authored-by: Daniel Espino García <larkox@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
ludvigbolin 2023-11-17 10:10:00 +01:00 committed by GitHub
parent b325c3a0ac
commit 2184876c77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
webapp/channels/src/components/admin_console/filter/filter_checkbox.tsx
View File

@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import React, {useCallback} from 'react';
type Props = {
name: string;
@ -10,44 +10,45 @@ type Props = {
updateOption: (checked: boolean, name: string) => void;
};
class FilterCheckbox extends React.PureComponent<Props> {
toggleOption = (e: React.MouseEvent) => {
function FilterCheckbox({
name,
checked,
label,
updateOption,
}: Props) {
const toggleOption = useCallback((e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
const {checked, name, updateOption} = this.props;
updateOption(!checked, name);
};
}, [name, checked, updateOption]);
render() {
const {name, checked, label} = this.props;
return (
<div
className='FilterList_checkbox'
onClick={this.toggleOption}
>
<label>
{checked &&
<input
type='checkbox'
id={name}
name={name}
defaultChecked={true}
/>
}
return (
<div
className='FilterList_checkbox'
onClick={toggleOption}
>
<label>
{checked &&
<input
type='checkbox'
id={name}
name={name}
defaultChecked={true}
/>
}
{!checked &&
<input
type='checkbox'
id={name}
name={name}
defaultChecked={false}
/>
}
{label}
</label>
</div>
);
}
{!checked &&
<input
type='checkbox'
id={name}
name={name}
defaultChecked={false}
/>
}
{label}
</label>
</div>
);
}
export default FilterCheckbox;
export default React.memo(FilterCheckbox);