{"size": 2560, "ext": "js", "max_stars_repo_path": "TooltipDecorator/TooltipLabel.js", "max_stars_repo_name": "enactjs/enact-theme-agate", "max_stars_repo_stars_event_min_datetime": "2018-11-30T13:22:58.000Z", "max_stars_repo_stars_event_max_datetime": "2021-07-05T21:57:22.000Z", "max_issues_repo_path": "TooltipDecorator/TooltipLabel.js", "max_issues_repo_name": "enactjs/enact-theme-agate", "max_issues_repo_issues_event_min_datetime": "2018-08-28T20:09:23.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T07:21:29.000Z", "max_forks_repo_path": "TooltipDecorator/TooltipLabel.js", "max_forks_repo_name": "enactjs/enact-theme-agate", "max_forks_repo_forks_event_min_datetime": "2019-09-15T03:45:14.000Z", "max_forks_repo_forks_event_max_datetime": "2021-07-05T21:57:24.000Z"}
{"max_stars_count": 10, "max_issues_count": 282, "max_forks_count": 5, "avg_line_length": 23.2727272727, "max_line_length": 94, "alphanum_fraction": 0.6421875}
import kind from '@enact/core/kind';
import {isRtlText} from '@enact/i18n/util';
import {scaleToRem} from '@enact/ui/resolution';
import PropTypes from 'prop-types';

import Marquee from '../Marquee';

import css from './Tooltip.module.less';

/**
 * {@link agate/TooltipDecorator.TooltipLabel} is a stateless tooltip component with
 * Agate styling applied.
 *
 * @class TooltipLabel
 * @memberof agate/TooltipDecorator
 * @ui
 * @private
 */
const TooltipLabel = kind({
	name: 'TooltipLabel',

	propTypes: /** @lends agate/TooltipDecorator.TooltipLabel.prototype */ {
		/**
		 * The node to be displayed as the main content of the tooltip.
		 *
		 * @type {Node}
		 * @required
		 */
		children: PropTypes.node.isRequired,

		/**
		 * Centers the text when `marquee` is also set.
		 *
		 * @type {Boolean}
		 * @public
		 */
		centered: PropTypes.bool,

		/**
		 * Apply a marquee to support long text.
		 *
		 * It is recommended that you specify a `width` also. If none is specified, a default width
		 * of 600px will be used.
		 *
		 * @type {Boolean}
		 * @public
		 */
		marquee: PropTypes.bool,

		/**
		 * The width of tooltip content.
		 *
		 * Value expects a number of pixels, which will be automatically scaled to the appropriate
		 * size given the current screen resolution, or a string value containing a measurement and
		 * a valid CSS unit included.
		 * If the content goes over the given width, it will automatically wrap, or marquee if
		 * `marquee` is enabled.
		 *
		 * When `null`, content will auto-size and not wrap. If `marquee` is also enabled,
		 * marqueeing will begin when the width is greater than the default (theme specified) width.
		 *
		 * @type {Number|String}
		 * @public
		 */
		width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
	},

	styles: {
		css,
		className: 'tooltipLabel'
	},

	computed: {
		className: ({marquee, width, styler}) => styler.append({
			multi: (!marquee && !!width),
			marquee
		}),
		style: ({children, width, style}) => {
			return {
				...style,
				direction: isRtlText(children) ? 'rtl' : 'ltr',
				'--agate-tooltip-label-width': (typeof width === 'number' ? scaleToRem(width) : width)
			};
		}
	},

	render: ({centered, children, marquee, ...rest}) => {
		delete rest.width;

		if (marquee) {
			return (
				<Marquee {...rest} alignment={centered ? 'center' : null} marqueeOn="render">
					{children}
				</Marquee>
			);
		} else {
			return (
				<div {...rest}>
					{children}
				</div>
			);
		}
	}
});

export default TooltipLabel;
export {
	TooltipLabel
};
