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

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { SVGIcon } from 'ca-ui-toolkit';
import './QuickLaunchTarget.scss';
import filter from 'lodash/filter';

export class QuickLaunchTarget extends Component {
	static propTypes = {
		/** Custom class name(s) */
		className: PropTypes.string,
		/** A function used to set the text in the Quick Launch content bar */
		setUploadText: PropTypes.func,
		/** A reference to the ES5 homeView object */
		homeView: PropTypes.object,
		/** An object containing the strings and icons for the quick launch target */
		content: PropTypes.object,
		/** Hides the quick launch when called */
		hideQuickLaunch: PropTypes.func,
		/** a reference to the glass context from homeView */
		glassContext: PropTypes.object
	};

	goals = {
		'uploadedFile': 'upload',
		'module': 'createModule'
	}

	constructor (props) {
		super(props);

		this.state = {
			hover: false,
			dragCounter: 0  /* Drag counter to check if over target or it's children */
		};
	}

	_onDragEnter (e) {
		e.preventDefault();
		const counter = this.state.dragCounter + 1;
		this.setState({ hover: true, dragCounter: counter });
		this.props.setUploadText && this.props.setUploadText(`: ${this.props.content.label}`);
	}

	_onDragLeave (e) {
		e.preventDefault();
		const counter = this.state.dragCounter - 1;
		let hover = true;

		if (counter === 0) {
			hover = false;
			this.props.setUploadText && this.props.setUploadText();
		}

		this.setState({ hover, dragCounter: counter });
	}

	/**
	* Filters supported file objects from list, leaving only unsupported ones
	* @param droppedFiles {array} array of dropped file objects
	* @param supportedTypes {array} array of supported file extensions
	* @returns {array} filtered list of file objects
	*/
	_getUnsupportedFiles (droppedFiles) {
		const { content } = this.props;
		return filter(droppedFiles, file => content.fileTypes.indexOf(this._getFileExtension(file.name)) === -1);
	}

	/**
	* Extracts extension portion of a filename
	* @param filename {string} name of file
	* @returns {string} extension of file or blank string if no extension was found
	*/
	_getFileExtension (filename) {
		const lastPeriod = filename && filename.lastIndexOf('.');
		return (!lastPeriod || lastPeriod < 1) ? '' : filename.substring(filename.lastIndexOf('.')+1, filename.length).toLowerCase();
	}

	/**
	* Drop event-handler
	* @param event {object} mouse event object
	*/
	onDrop (event) {
		event.stopPropagation();
		event.preventDefault();

		const { content, hideQuickLaunch, homeView, glassContext } = this.props;

		let data;
		hideQuickLaunch();
		// Check to see if drop has files for dataTransfer
		if ((data = event.dataTransfer) && data.files) {
			let unsupportedFiles = this._getUnsupportedFiles(data.files);
			if (unsupportedFiles.length === 0) {
				if (homeView.allowUploadFiles && homeView.canUploadFiles() && homeView._hasFiles(data)) {
					return homeView.uploadThenLaunch(content, this.goals[content.requiredType], data);
				}
				return Promise.resolve();
			} else {
				const fileNames = unsupportedFiles.map(file => file.name);
				const numDroppedFiles = data.files.length;
				let unsupportedFilesMsg;
				if (numDroppedFiles === 1) {
					unsupportedFilesMsg = homeView.stringGetter.get('unsupportedFilesSingle', {
						files: fileNames[0]
					});
				} else {
					const msgKey = (fileNames.length === 1) ? 'unsupportedFilesSingleInvalid' : 'unsupportedFilesMultipleInvalid';
					unsupportedFilesMsg = homeView.stringGetter.get('unsupportedFilesMultiple') + ' ' + homeView.stringGetter.get(msgKey, {
						files: fileNames.join(', ')
					});
				}
				const supportedFileTypesMsg = homeView.stringGetter.get('supportedFileTypes', {
					extensions: content.fileTypes.join(', ')
				});
				glassContext.appController.showToast(unsupportedFilesMsg + ' ' + supportedFileTypesMsg, { 'type':'error' });
			}
		}
	}

	render() {
		const { content } = this.props;
		const className = this.state.hover ? 'quickLaunchTarget hover' : 'quickLaunchTarget';
		return (
			<div>
				<div className={ className } onDragEnter={ this._onDragEnter.bind(this) } onDragLeave={ this._onDragLeave.bind(this) } onDrop={ this.onDrop.bind(this) }>
					<SVGIcon className="quickLaunchTargetIcon" iconId={ content.icon }></SVGIcon>
					<div className="quickLaunchTargetName">{ content.label }</div>
				</div>
			</div>
		);
	}
}