iconButton.tsx

TLDR

The iconButton.tsx file contains a functional component called IconButton that renders a button with an icon. It accepts various props such as onClick, title, icon, className, size, inverted, and onMouseDown. The component applies different CSS classes based on the provided props.

Classes

IconButton

The IconButton component is a functional component that renders a button element with an icon. It accepts the following props:

• onClick (optional): A function that will be called when the button is clicked.
• title (optional): The title of the button.
• icon (optional): The icon to be displayed inside the button.
• className (optional): Additional CSS class(es) to be applied to the button.
• size (optional): The size of the button. It affects the overall appearance of the button.
• inverted (optional): A boolean value indicating whether the button should have an inverted style.
• onMouseDown (optional): A function that will be called when the mouse button is pressed down on the button.

The component generates CSS classes based on the provided props and applies them to the button element.

Methods

None

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'

import './iconButton.scss'
import {Utils} from '../../utils'

type Props = {
    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
    title?: string
    icon?: React.ReactNode
    className?: string
    size?: string
    inverted?: boolean
    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void
}

function IconButton(props: Props): JSX.Element {
    const classNames: Record<string, boolean> = {
        IconButton: true,
        'style--inverted': Boolean(props.inverted),
    }
    classNames[`${props.className}`] = Boolean(props.className)
    classNames[`size--${props.size}`] = Boolean(props.size)

    return (
        <button
            type='button'
            onClick={props.onClick}
            onMouseDown={props.onMouseDown}
            className={Utils.generateClassName(classNames)}
            title={props.title}
            aria-label={props.title}
        >
            {props.icon}
        </button>
    )
}

export default React.memo(IconButton)