init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>

1 files changed, 47 insertions, 0 deletions

diff --git a/src/react/SVGIcon.js b/src/react/SVGIcon.js
new file mode 100644
index 0000000..8a5b1ae
--- /dev/null
+++ b/src/react/SVGIcon.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import iconMap from './utils/iconMap.js';
+
+const SVGIcon = ({name, onClick, label, className, iconClassName, labelClassName, labelPosition, color, disabled, ...other}) => {
+
+	let colorClass = (color !== '') ? '__' + color : '';
+	let classes = `svg-icon-wrapper ${iconClassName} ${className} ${colorClass} ${onClick ? 'clickable' : ''} ${labelPosition}`;
+	let camelCasedName = name.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+	let IconComponent = iconMap[camelCasedName];
+	if (!IconComponent) {
+		console.error('Icon by the name ' + camelCasedName + ' is missing.');
+	}
+
+	return (
+		<div {...other} onClick={onClick} className={classes} disabled={disabled}>
+			{ IconComponent && <IconComponent className={`svg-icon __${name}`} /> }
+			{ !IconComponent && <span className='svg-icon-missing'>Missing Icon</span> }
+			{label && <span className={`svg-icon-label ${labelClassName}`}>{label}</span>}
+		</div>
+	);
+
+};
+
+SVGIcon.propTypes = {
+	name: PropTypes.string.isRequired,
+	onClick: PropTypes.func,
+	label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+	labelPosition: PropTypes.string,
+	className: PropTypes.string,
+	iconClassName: PropTypes.string,
+	labelClassName: PropTypes.string,
+	color: PropTypes.string
+};
+
+SVGIcon.defaultProps = {
+	name: '',
+	label: '',
+	className: '',
+	iconClassName: '',
+	labelClassName: '',
+	labelPosition: 'bottom',
+	color: ''
+};
+
+export default SVGIcon;