box-ui-elements-mlh/src/components/label/Label.js.flow

Box UI Elements

// @flow
import * as React from 'react';
import { FormattedMessage } from 'react-intl';

import commonMessages from '../../common/messages';

import InfoIconWithTooltip from './InfoIconWithTooltip';
import StandardLabel from './StandardLabel';
import HiddenLabel from './HiddenLabel';

import './Label.scss';

const OptionalFormattedMessage = () => (
    <span className="label-optional bdl-Label-optional">
        (<FormattedMessage {...commonMessages.optional} />)
    </span>
);

type Props = {
    children: React.Node,
    /** Whether the text of the label should be accessibly hidden */
    hideLabel?: boolean,
    infoIconProps?: Object,
    /** Tooltip text for the info icon */
    infoTooltip?: React.Node,
    /** Whether to show the `(Optional)` text next to the label for an optional field */
    showOptionalText?: boolean,
    /** The label text */
    text: React.Node,
    /** Tooltip text for the label */
    tooltip?: React.Node,
};

const Label = ({ text, tooltip, infoTooltip, infoIconProps, showOptionalText, hideLabel, children }: Props) => {
    const labelContent = [
        <span key="labelText">{text}</span>,
        showOptionalText ? <OptionalFormattedMessage key="optionalMessage" /> : null,
    ];

    if (infoTooltip) {
        labelContent.push(
            <InfoIconWithTooltip
                key="infoTooltip"
                iconProps={{ className: 'tooltip-icon', ...infoIconProps }}
                tooltipText={infoTooltip}
            />,
        );
    }

    if (hideLabel) {
        return <HiddenLabel labelContent={labelContent}>{children}</HiddenLabel>;
    }

    return (
        <StandardLabel labelContent={labelContent} tooltip={tooltip}>
            {children}
        </StandardLabel>
    );
};

export default Label;