analytics/webcontent/bi/js/cahome/ui/react/HomeTile/HomeTile.js

import React, { Component } from 'react';
import { Tile } from 'ca-ui-toolkit';
import './HomeTile.scss';
import PropTypes from 'prop-types';
import { SVGIcon, Tooltip } from 'ca-ui-toolkit';
import menuOverflow16 from '@ba-ui-toolkit/ba-graphics/dist/icons/overflow-menu--horizontal_16.svg';

export class HomeTile extends Component {
	static propTypes = {
		/** Custom class name(s) */
		className: PropTypes.string,
		/** An array of all of the tiles, if there are no assets it defaults to empty */
		content: PropTypes.object,
		/** A copy of the es5 homeview object */
		homeView: PropTypes.object,
		/** An object representing the glass context */
		glassContext: PropTypes.object,
		/** An Id used to remove context menus when clicked away */
		stateId: PropTypes.string,
		/** An unformatted object representing all information about the Tile */
		asset: PropTypes.object,
		/** An object that is used to translate all strings */
		stringGetter: PropTypes.object
	};

	constructor(props) {
		super(props);
		this.tileContainer = React.createRef();

		this.state = {
			menuLoading: false
		};
	}

	/**
	* This function is triggered when a user either clicks on the three dots in the corner of the menu or
	* when a user tabs to focus on the three dots and presses enter.
	*/
	_onMenu(e) {
		e.stopPropagation();
		// If not a shift click, ctrl click or a right click or the user pressed enter on the context menu
		if((e.type == 'click' && !e.shiftKey && !e.ctrlKey && e.nativeEvent.which !== 3) || (e.type=='keyup' && e.keyCode === 13)) {
			this.setState({ menuLoading: true });
			e.persist();
			const { homeView, asset } = this.props;

			if(homeView && homeView.requiresAssetVerification) {
				homeView.loadAssetContextMenu(asset, e).then(function() {
					this.setState({ menuLoading: false });
				}.bind(this));
			}
		}
	}

	_openTile(event) {
		if(event.type === 'click' || (event.type === 'keyup' && event.keyCode === 13)) {
			this.props.homeView.onTileClick(this.props.asset);
		}
	}

	_getEllipsisIcon() {
		const { menuLoading } = this.state;

		const className = menuLoading ? 'contextMenuButton contextMenuButton_active' : 'contextMenuButton';
		return (
			<div role="menu" tabIndex='0' className="iconWrapper" onKeyUp={ (e) => { this._onMenu(e); }}>
				<Tooltip orient="right" delay>
					<SVGIcon iconId={menuOverflow16.id} rotate={90} className={className}  onClick={(e) => { this._onMenu(e); }}/>
				</Tooltip>
			</div>
		);
	}


	render() {
		const { content, className, stringGetter, asset, glassContext } = this.props;

		const fullClassName = className ? `${className} caHomeTile` : 'caHomeTile';

		content.type = content.type ? content.type[0].toUpperCase() + content.type.slice(1).toLowerCase() : '';

		let textDir = 'auto';

		if (glassContext && glassContext.services && glassContext.services.userProfile && glassContext.services.userProfile.preferences && glassContext.services.userProfile.preferences.biDirectionalFeaturesEnabled){
			textDir = glassContext.services.userProfile.preferences.baseTextDirection.toLowerCase();
		}
		/**
     * dashboard/report/story => purple tags
     * exploration/notebooks = blue tags
     * data upload, data sets, data module, data = green tags
     * others = grey tags
     */
		if(asset.type === 'report' || asset.type === 'reportView' || asset.type === 'interactiveReport' || asset.type === 'powerPlay8Report' || (asset.type === 'exploration' && (!asset.tags || asset.tags[0] !== 'explore'))){
			content.color = 'purple';
		}else if((asset.type === 'exploration' && asset.tags && asset.tags[0] === 'explore') || asset.type === 'jupyterNotebook'){
			content.color = 'blue';
		}else if(asset.type === 'dataSet2' || asset.type === 'module' || asset.type === 'uploadedFile' || asset.type === 'URL'){
			content.color = 'teal';
			// If it's data and only one word, make all lowercased according to design doc
			content.type = content.type && content.type.split(' ').length === 1? content.type.toLowerCase() : content.type;
		}else{
			content.color = 'gray';
		}

		return (
			<div className={fullClassName} ref={this.tileContainer}>
				<Tile size='large' key={content.label} textDir={textDir} dateLabel={stringGetter.get('list_header_last_modified')} content={content} onClick={ this._openTile.bind(this) } onKeyUp={ this._openTile.bind(this) } ellipsisIcon={this._getEllipsisIcon()} ellipsisTooltipLabel={stringGetter.get('assetActionMenu')}></Tile>
			</div>
		);
	}
}