self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-02-10 19:41:29 +02:00
Code Issues Releases Activity

Migrating some components to functional components

Browse Source
This commit is contained in:
Jesús Espino 2021-03-26 14:52:31 +01:00
parent 7c156cfd84
commit 77343c2f03
4 changed files with 67 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
webapp/src/widgets/menu/colorOption.tsx
View File

@ -10,23 +10,21 @@ type ColorOptionProps = MenuOptionProps & {
icon?: React.ReactNode
}
export default class ColorOption extends React.PureComponent<ColorOptionProps> {
private handleOnClick = (e: React.MouseEvent): void => {
e.target.dispatchEvent(new Event('menuItemClicked'))
this.props.onClick(this.props.id)
}
public render(): JSX.Element {
const {id, name, icon} = this.props
return (
<div
className='MenuOption ColorOption menu-option'
onClick={this.handleOnClick}
>
{icon ?? <div className='noicon'/>}
<div className='menu-name'>{name}</div>
<div className={`menu-colorbox ${id}`}/>
</div>
)
}
function ColorOption(props: ColorOptionProps): JSX.Element {
const {id, name, icon} = props
return (
<div
className='MenuOption ColorOption menu-option'
onClick={(e: React.MouseEvent): void => {
e.target.dispatchEvent(new Event('menuItemClicked'))
props.onClick(props.id)
}}
>
{icon ?? <div className='noicon'/>}
<div className='menu-name'>{name}</div>
<div className={`menu-colorbox ${id}`}/>
</div>
)
}
export default React.memo(ColorOption)

20
webapp/src/widgets/menu/labelOption.tsx
View File

@ -9,14 +9,14 @@ type LabelOptionProps = {
children: React.ReactNode
}
export default class LabelOption extends React.PureComponent<LabelOptionProps> {
public render(): JSX.Element {
return (
<div className='MenuOption LabelOption menu-option'>
{this.props.icon ?? <div className='noicon'/>}
<div className='menu-name'>{this.props.children}</div>
<div className='noicon'/>
</div>
)
}
function LabelOption(props: LabelOptionProps): JSX.Element {
return (
<div className='MenuOption LabelOption menu-option'>
{props.icon ?? <div className='noicon'/>}
<div className='menu-name'>{props.children}</div>
<div className='noicon'/>
</div>
)
}
export default React.memo(LabelOption)

41
webapp/src/widgets/menu/switchOption.tsx
View File

@ -11,26 +11,25 @@ type SwitchOptionProps = MenuOptionProps & {
icon?: React.ReactNode,
}
export default class SwitchOption extends React.PureComponent<SwitchOptionProps> {
private handleOnClick = (e: React.MouseEvent): void => {
e.target.dispatchEvent(new Event('menuItemClicked'))
this.props.onClick(this.props.id)
}
function SwitchOption(props: SwitchOptionProps): JSX.Element {
const {name, icon, isOn} = props
public render(): JSX.Element {
const {name, icon, isOn} = this.props
return (
<div
className='MenuOption SwitchOption menu-option'
onClick={this.handleOnClick}
>
{icon ?? <div className='noicon'/>}
<div className='menu-name'>{name}</div>
<Switch
isOn={isOn}
onChanged={() => {}}
/>
</div>
)
}
return (
<div
className='MenuOption SwitchOption menu-option'
onClick={(e: React.MouseEvent) => {
e.target.dispatchEvent(new Event('menuItemClicked'))
this.props.onClick(props.id)
}}
>
{icon ?? <div className='noicon'/>}
<div className='menu-name'>{name}</div>
<Switch
isOn={isOn}
onChanged={() => {}}
/>
</div>
)
}
export default React.memo(SwitchOption)

42
webapp/src/widgets/menu/textOption.tsx
View File

@ -10,27 +10,25 @@ type TextOptionProps = MenuOptionProps & {
className?: string
}
export default class TextOption extends React.PureComponent<TextOptionProps> {
private handleOnClick = (e: React.MouseEvent): void => {
e.target.dispatchEvent(new Event('menuItemClicked'))
this.props.onClick(this.props.id)
}
public render(): JSX.Element {
const {name, icon, rightIcon} = this.props
let className = 'MenuOption TextOption menu-option'
if (this.props.className) {
className += ' ' + this.props.className
}
return (
<div
className={className}
onClick={this.handleOnClick}
>
{icon ?? <div className='noicon'/>}
<div className='menu-name'>{name}</div>
{rightIcon ?? <div className='noicon'/>}
</div>
)
function TextOption(props:TextOptionProps): JSX.Element {
const {name, icon, rightIcon} = props
let className = 'MenuOption TextOption menu-option'
if (props.className) {
className += ' ' + props.className
}
return (
<div
className={className}
onClick={(e: React.MouseEvent) => {
e.target.dispatchEvent(new Event('menuItemClicked'))
props.onClick(props.id)
}}
>
{icon ?? <div className='noicon'/>}
<div className='menu-name'>{name}</div>
{rightIcon ?? <div className='noicon'/>}
</div>
)
}
export default React.memo(TextOption)