index.tsx

TLDR

This file, index.tsx, contains a React component called PulsatingDot that renders a pulsating dot. The dot's appearance and behavior can be customized using different props.

Classes

PulsatingDot

The PulsatingDot class is a functional component that renders a pulsating dot element. It accepts the following props:

• targetRef (optional): A React ref object that can be used to reference the HTMLImageElement to which the dot should be attached.
• className (optional): A string that specifies additional CSS classes to be applied to the dot element.
• onClick (optional): A function that will be called when the dot is clicked.
• coords (optional): An object of type Coords (imported from '../tutorial_tour_tip/tutorial_tour_tip_backdrop') that specifies the coordinates of the dot.

The component adds CSS classes and styles to the dot element based on the props provided. If coords is provided, the dot's position is transformed using the x and y coordinate values. If onClick is provided, the dot becomes clickable by adding the 'pulsating_dot-clickable' class.

To use this component, import it and include it in your React component hierarchy. Customize its appearance and behavior by passing the appropriate props.

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

import './pulsating_dot.scss'
import {Coords} from '../tutorial_tour_tip/tutorial_tour_tip_backdrop'

type Props = {
    targetRef?: React.RefObject<HTMLImageElement>
    className?: string
    onClick?: (e: React.MouseEvent) => void
    coords?: Coords
}

const PulsatingDot = (props: Props): JSX.Element => {
    let customStyles = {}
    if (props?.coords) {
        customStyles = {
            transform: `translate(${props.coords?.x}px, ${props.coords?.y}px)`,
        }
    }
    let effectiveClassName = 'pulsating_dot'
    if (props.onClick) {
        effectiveClassName += ' pulsating_dot-clickable'
    }
    if (props.className) {
        effectiveClassName = effectiveClassName + ' ' + props.className
    }

    return (
        <span
            className={effectiveClassName}
            onClick={props.onClick}
            ref={props.targetRef}
            style={{...customStyles}}
        />
    )
}

export default PulsatingDot