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