patternplate-client/application/components/common/icon.js

Universal javascript client application for patternplate

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _lodash = require('lodash');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactSideEffect = require('react-side-effect');

var _reactSideEffect2 = _interopRequireDefault(_reactSideEffect);

var _icons = require('./icons');

var _icons2 = _interopRequireDefault(_icons);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var iconNames = (0, _keys2.default)(_icons2.default);

exports.default = (0, _reactSideEffect2.default)(toState, onChange)(Icon);


function toState(propsList) {
	var list = propsList.map(function (item) {
		return item.symbol;
	}).sort();
	var symbols = (0, _lodash.uniq)(list);
	return _react2.default.createElement(IconRegistry, { symbols: symbols });
}

function onChange(registry) {
	var element = getRegistryMountPoint();
	_reactDom2.default.render(registry, element);
}

function getRegistryMountPoint() {
	var _global = global,
	    document = _global.document;

	var found = document.querySelector('[data-icon-registry]');
	if (found) {
		return found;
	}

	var created = document.createElement('div');
	created.setAttribute('data-icon-registry', true);
	document.body.appendChild(created);
	return created;
}

function Icon(props) {
	var className = (0, _classnames2.default)('icon', props.className, {
		'icon--has-description': props.description
	});

	var textStyle = { display: props.fallback ? 'none' : null };
	var xlinkHref = '#' + props.symbol;

	return _react2.default.createElement(
		'div',
		{ className: className, style: props.style },
		_react2.default.createElement(
			'div',
			{ className: 'svg-icon' },
			_react2.default.createElement(
				'svg',
				{ className: 'svg' },
				_react2.default.createElement('use', { xlinkHref: xlinkHref })
			)
		),
		_react2.default.createElement(
			'div',
			{ className: 'svg-text', style: textStyle },
			props.children
		),
		props.description && _react2.default.createElement(
			'small',
			{ className: 'icon__description' },
			props.description
		)
	);
}

Icon.defaultProps = {
	fallback: true
};

var hiddenStyles = {
	position: 'fixed',
	height: 0,
	width: 0,
	overflow: 'hidden',
	padding: 0,
	visibility: 'hidden'
};

function IconRegistry(props) {
	return _react2.default.createElement(
		'svg',
		{ style: hiddenStyles },
		props.symbols.map(function (symbol) {
			var creator = _icons2.default[symbol] || _lodash.noop;
			var paths = creator() || [];
			return _react2.default.createElement(_Symbol, { id: symbol, key: symbol, definition: paths });
		})
	);
}

IconRegistry.defaultProps = {
	symbols: []
};

function _Symbol(props) {
	var paths = Array.isArray(props.definition) ? props.definition : [props.definition];

	return _react2.default.createElement(
		'symbol',
		{
			id: props.id,
			viewBox: '0 0 24 24'
		},
		paths.map(function (path) {
			return _react2.default.createElement(Path, { definition: path, key: path });
		})
	);
}

function Path(props) {
	var definition = props.definition;

	var def = typeof definition === 'string' ? { d: definition } : definition;
	var tagName = def.tagName,
	    p = (0, _objectWithoutProperties3.default)(def, ['tagName']);

	var Component = tagName || 'path';
	return _react2.default.createElement(Component, p);
}

module.exports = exports['default'];
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NvdXJjZS9hcHBsaWNhdGlvbi9jb21wb25lbnRzL2NvbW1vbi9pY29uLmpzIl0sIm5hbWVzIjpbImljb25OYW1lcyIsInRvU3RhdGUiLCJvbkNoYW5nZSIsIkljb24iLCJwcm9wc0xpc3QiLCJsaXN0IiwibWFwIiwiaXRlbSIsInN5bWJvbCIsInNvcnQiLCJzeW1ib2xzIiwicmVnaXN0cnkiLCJlbGVtZW50IiwiZ2V0UmVnaXN0cnlNb3VudFBvaW50IiwicmVuZGVyIiwiZ2xvYmFsIiwiZG9jdW1lbnQiLCJmb3VuZCIsInF1ZXJ5U2VsZWN0b3IiLCJjcmVhdGVkIiwiY3JlYXRlRWxlbWVudCIsInNldEF0dHJpYnV0ZSIsImJvZHkiLCJhcHBlbmRDaGlsZCIsInByb3BzIiwiY2xhc3NOYW1lIiwiZGVzY3JpcHRpb24iLCJ0ZXh0U3R5bGUiLCJkaXNwbGF5IiwiZmFsbGJhY2siLCJ4bGlua0hyZWYiLCJzdHlsZSIsImNoaWxkcmVuIiwiZGVmYXVsdFByb3BzIiwiaGlkZGVuU3R5bGVzIiwicG9zaXRpb24iLCJoZWlnaHQiLCJ3aWR0aCIsIm92ZXJmbG93IiwicGFkZGluZyIsInZpc2liaWxpdHkiLCJJY29uUmVnaXN0cnkiLCJjcmVhdG9yIiwicGF0aHMiLCJTeW1ib2wiLCJBcnJheSIsImlzQXJyYXkiLCJkZWZpbml0aW9uIiwiaWQiLCJwYXRoIiwiUGF0aCIsImRlZiIsImQiLCJ0YWdOYW1lIiwicCIsIkNvbXBvbmVudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7QUFBQTs7OztBQUNBOztBQUNBOzs7O0FBQ0E7Ozs7QUFDQTs7OztBQUNBOzs7Ozs7QUFFQSxJQUFNQSxZQUFZLG9DQUFsQjs7a0JBRWUsK0JBQWVDLE9BQWYsRUFBd0JDLFFBQXhCLEVBQWtDQyxJQUFsQyxDOzs7QUFFZixTQUFTRixPQUFULENBQWlCRyxTQUFqQixFQUE0QjtBQUMzQixLQUFNQyxPQUFPRCxVQUNYRSxHQURXLENBQ1A7QUFBQSxTQUFRQyxLQUFLQyxN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QUFBQSxVQUFRLDhCQUFDLElBQUQsSUFBTSxZQUFZMkMsSUFBbEIsRUFBd0IsS0FBS0EsSUFBN0IsR0FBUjtBQUFBLEdBQVY7QUFMRixFQUREO0FBVUE7O0FBT0QsU0FBU0MsSUFBVCxDQUFjMUIsS0FBZCxFQUFxQjtBQUFBLEtBQ2J1QixVQURhLEdBQ0N2QixLQURELENBQ2J1QixVQURhOztBQUVwQixLQUFNSSxNQUFNLE9BQU9KLFVBQVAsS0FBc0IsUUFBdEIsR0FBaUMsRUFBQ0ssR0FBR0wsVUFBSixFQUFqQyxHQUFtREEsVUFBL0Q7QUFGb0IsS0FHYk0sT0FIYSxHQUdJRixHQUhKLENBR2JFLE9BSGE7QUFBQSxLQUdEQyxDQUhDLDBDQUdJSCxHQUhKOztBQUlwQixLQUFNSSxZQUFZRixXQUFXLE1BQTdCO0FBQ0EsUUFBTyw4QkFBQyxTQUFELEVBQWVDLENBQWYsQ0FBUDtBQUNBIiwiZmlsZSI6Imljb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgam9pbiBmcm9tICdjbGFzc25hbWVzJztcbmltcG9ydCB7bm9vcCwgdW5pcX0gZnJvbSAnbG9kYXNoJztcbmltcG9ydCBSZWFjdCwge1Byb3BUeXBlcyBhcyB0fSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJztcbmltcG9ydCB3aXRoU2lkZUVmZmVjdCBmcm9tICdyZWFjdC1zaWRlLWVmZmVjdCc7XG5pbXBvcnQgaWNvbnMgZnJvbSAnLi9pY29ucyc7XG5cbmNvbnN0IGljb25OYW1lcyA9IE9iamVjdC5rZXlzKGljb25zKTtcblxuZXhwb3J0IGRlZmF1bHQgd2l0aFNpZGVFZmZlY3QodG9TdGF0ZSwgb25DaGFuZ2UpKEljb24pO1xuXG5mdW5jdGlvbiB0b1N0YXRlKHByb3BzTGlzdCkge1xuXHRjb25zdCBsaXN0ID0gcHJvcHNMaXN0XG5cdFx0Lm1hcChpdGVtID0+IGl0ZW0uc3ltYm9sKVxuXHRcdC5zb3J0KCk7XG5cdGNvbnN0IHN5bWJvbHMgPSB1bmlxKGxpc3QpO1xuXHRyZXR1cm4gPEljb25SZWdpc3RyeSBzeW1ib2xzPXtzeW1ib2xzfS8+O1xufVxuXG5mdW5jdGlvbiBvbkNoYW5nZShyZWdpc3RyeSkge1xuXHRjb25zdCBlbGVtZW50ID0gZ2V0UmVnaXN0cnlNb3VudFBvaW50KCk7XG5cdFJlYWN0RE9NLnJlbmRlcihyZWdpc3RyeSwgZWxlbWVudCk7XG59XG5cbmZ1bmN0aW9uIGdldFJlZ2lzdHJ5TW91bnRQb2ludCgpIHtcblx0Y29uc3Qge2RvY3VtZW50fSA9IGdsb2JhbDtcblx0Y29uc3QgZm91bmQgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCdbZGF0YS1pY29uLXJlZ2lzdHJ5XScpO1xuXHRpZiAoZm91bmQpIHtcblx0XHRyZXR1cm4gZm91bmQ7XG5cdH1cblxuXHRjb25zdCBjcmVhdGVkID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnZGl2Jyk7XG5cdGNyZWF0ZWQuc2V0QXR0cmlidXRlKCdkYXRhLWljb24tcmVnaXN0cnknLCB0cnVlKTtcblx0ZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZChjcmVhdGVkKTtcblx0cmV0dXJuIGNyZWF0ZWQ7XG59XG5cbmZ1bmN0aW9uIEljb24ocHJvcHMpIHtcblx0Y29uc3QgY2xhc3NOYW1lID0gam9pbignaWNvbicsIHByb3BzLmNsYXNzTmFtZSwge1xuXHRcdCdpY29uLS1oYXMtZGVzY3JpcHRpb24nOiBwcm9wcy5kZXNjcmlwdGlvblxuXHR9KTtcblxuXHRjb25zdCB0ZXh0U3R5bGUgPSB7ZGlzcGxheTogcHJvcHMuZmFsbGJhY2sgPyAnbm9uZScgOiBudWxsfTtcblx0Y29uc3QgeGxpbmtIcmVmID0gYCMke3Byb3BzLnN5bWJvbH1gO1xuXG5cdHJldHVybiAoXG5cdFx0PGRpdiBjbGFzc05hbWU9e2NsYXNzTmFtZX0gc3R5bGU9e3Byb3BzLnN0eWxlfT5cblx0XHRcdDxkaXYgY2xhc3NOYW1lPVwic3ZnLWljb25cIj5cblx0XHRcdHtcblx0XHRcdFx0PHN2ZyBjbGFzc05hbWU9XCJzdmdcIj5cblx0XHRcdFx0XHQ8dXNlIHhsaW5rSHJlZj17eGxpbmtIcmVmfS8+XG5cdFx0XHRcdDwvc3ZnPlxuXHRcdFx0fVxuXHRcdFx0PC9kaXY+XG5cdFx0XHQ8ZGl2IGNsYXNzTmFtZT1cInN2Zy10ZXh0XCIgc3R5bGU9e3RleHRTdHlsZX0+XG5cdFx0XHRcdHtwcm9wcy5jaGlsZHJlbn1cblx0XHRcdDwvZGl2PlxuXHRcdFx0e1xuXHRcdFx0XHRwcm9wcy5kZXNjcmlwdGlvbiAmJlxuXHRcdFx0XHRcdDxzbWFsbCBjbGFzc05hbWU9XCJpY29uX19kZXNjcmlwdGlvblwiPlxuXHRcdFx0XHRcdFx0e3Byb3BzLmRlc2NyaXB0aW9ufVxuXHRcdFx0XHRcdDwvc21hbGw+XG5cdFx0XHR9XG5cdFx0PC9kaXY+XG5cdCk7XG59XG5cbkljb24ucHJvcFR5cGVzID0ge1xuXHRzeW1ib2w6IHQub25lT2YoaWNvbk5hbWVzKS5pc1JlcXVpcmVkLFxuXHRjbGFzc05hbWU6IHQuc3RyaW5nLFxuXHRmYWxsYmFjazogdC5ib29sLmlzUmVxdWlyZWQsXG5cdGNoaWxkcmVuOiB0LmFueSxcblx0ZGVzY3JpcHRpb246IHQuc3RyaW5nLFxuXHRzdHlsZTogdC5vYmplY3Rcbn07XG5cbkljb24uZGVmYXVsdFByb3BzID0ge1xuXHRmYWxsYmFjazogdHJ1ZVxufTtcblxuY29uc3QgaGlkZGVuU3R5bGVzID0ge1xuXHRwb3NpdGlvbjogJ2ZpeGVkJyxcblx0aGVpZ2h0OiAwLFxuXHR3aWR0aDogMCxcblx0b3ZlcmZsb3c6ICdoaWRkZW4nLFxuXHRwYWRkaW5nOiAwLFxuXHR2aXNpYmlsaXR5OiAnaGlkZGVuJ1xufTtcblxuZnVuY3Rpb24gSWNvblJlZ2lzdHJ5KHByb3BzKSB7XG5cdHJldHVybiAoXG5cdFx0PHN2ZyBzdHlsZT17aGlkZGVuU3R5bGVzfT5cblx0XHRcdHtcblx0XHRcdFx0cHJvcHMuc3ltYm9sc1xuXHRcdFx0XHRcdC5tYXAoc3ltYm9sID0+IHtcblx0XHRcdFx0XHRcdGNvbnN0IGNyZWF0b3IgPSBpY29uc1tzeW1ib2xdIHx8IG5vb3A7XG5cdFx0XHRcdFx0XHRjb25zdCBwYXRocyA9IGNyZWF0b3IoKSB8fCBbXTtcblx0XHRcdFx0XHRcdHJldHVybiA8U3ltYm9sIGlkPXtzeW1ib2x9IGtleT17c3ltYm9sfSBkZWZpbml0aW9uPXtwYXRoc30vPjtcblx0XHRcdFx0XHR9KVxuXHRcdFx0fVxuXHRcdDwvc3ZnPlxuXHQpO1xufVxuXG5JY29uUmVnaXN0cnkucHJvcFR5cGVzID0ge1xuXHRzeW1ib2xzOiB0LmFycmF5T2YodC5vbmVPZihpY29uTmFtZXMpKS5pc1JlcXVpcmVkXG59O1xuXG5JY29uUmVnaXN0cnkuZGVmYXVsdFByb3BzID0ge1xuXHRzeW1ib2xzOiBbXVxufTtcblxuZnVuY3Rpb24gU3ltYm9sKHByb3BzKSB7XG5cdGNvbnN0IHBhdGhzID0gQXJyYXkuaXNBcnJheShwcm9wcy5kZWZpbml0aW9uKSA/XG5cdFx0cHJvcHMuZGVmaW5pdGlvbiA6XG5cdFx0W3Byb3BzLmRlZmluaXRpb25dO1xuXG5cdHJldHVybiAoXG5cdFx0PHN5bWJvbFxuXHRcdFx0aWQ9e3Byb3BzLmlkfVxuXHRcdFx0dmlld0JveD1cIjAgMCAyNCAyNFwiXG5cdFx0XHQ+XG5cdFx0XHR7XG5cdFx0XHRcdHBhdGhzLm1hcChwYXRoID0+IDxQYXRoIGRlZmluaXRpb249e3BhdGh9IGtleT17cGF0aH0vPilcblx0XHRcdH1cblx0XHQ8L3N5bWJvbD5cblx0KTtcbn1cblxuU3ltYm9sLnByb3BUeXBlcyA9IHtcblx0ZGVmaW5pdGlvbjogdC5vbmVPZlR5cGUoW3Quc3RyaW5nLCB0Lm9iamVjdCwgdC5hcnJheV0pLmlzUmVxdWlyZWQsXG5cdGlkOiB0LnN0cmluZy5pc1JlcXVpcmVkXG59O1xuXG5mdW5jdGlvbiBQYXRoKHByb3BzKSB7XG5cdGNvbnN0IHtkZWZpbml0aW9ufSA9IHByb3BzO1xuXHRjb25zdCBkZWYgPSB0eXBlb2YgZGVmaW5pdGlvbiA9PT0gJ3N0cmluZycgPyB7ZDogZGVmaW5pdGlvbn0gOiBkZWZpbml0aW9uO1xuXHRjb25zdCB7dGFnTmFtZSwgLi4ucH0gPSBkZWY7XG5cdGNvbnN0IENvbXBvbmVudCA9IHRhZ05hbWUgfHwgJ3BhdGgnO1xuXHRyZXR1cm4gPENvbXBvbmVudCB7Li4ucH0vPjtcbn1cblxuUGF0aC5wcm9wVHlwZXMgPSB7XG5cdGRlZmluaXRpb246IHQub25lT2ZUeXBlKFt0LnN0cmluZywgdC5vYmplY3RdKS5pc1JlcXVpcmVkXG59O1xuIl19