codogo-react-widgets/dist/components/old/icon.js

Provides a unified way to access the styling of commonly used widgets across different apps

"use strict";

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

var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral");

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n\tposition: relative;\n\t", "\n\t", "\t\n"], ["\n\tposition: relative;\n\t", "\n\t", "\t\n"]),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n\tbackground: ", ";\n\tmask-size: contain;\n\tmask-image: url(", ");\n\t", "\n"], ["\n\tbackground: ", ";\n\tmask-size: contain;\n\tmask-image: url(", ");\n\t", "\n"]);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var _icons2 = _interopRequireDefault(_icons);

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

var Icon = function Icon(props) {
	var style = props.style,
	    p = (0, _objectWithoutProperties3.default)(props, ["style"]);


	return _react2.default.createElement(
		Wrapper,
		(0, _extends3.default)({}, p, { style: style }),
		_react2.default.createElement(Picture, p)
	);
};

Icon.propTypes = {
	onClick: _react2.default.PropTypes.func,
	type: _react2.default.PropTypes.oneOf(_icons2.default).isRequired,
	size: _react2.default.PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]),
	color: _react2.default.PropTypes.string
};

Icon.defaultProps = {
	size: "md"
};

var iconSizeMap = {
	xs: 15,
	sm: 20,
	md: 25,
	lg: 30,
	xl: 35
};

var Wrapper = _styledComponents2.default.div(_templateObject, function (p) {
	return p.onClick && "\n\t\topacity: 0.33;\n\t\ttransition: 0.1s linear all;\n\t\tcursor: pointer;\n\n\t\t&:hover {\n\t\t\topacity: 0.66;\n\t\t}\n\t";
}, function (p) {
	return (p.input || p.cm) && "\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t\tleft: " + (p.cm ? 0.5 : 0) + "em;\n\t";
});

var Picture = _styledComponents2.default.div(_templateObject2, function (p) {
	return p.color || p.theme.black;
}, function (p) {
	return require("../img/icons/" + _icons.iconsData[p.type].image + ".svg");
}, function (p) {
	return (p.onClick || p.fauxButton || p.input || p.cm) && "\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\tmargin-top: -" + iconSizeMap[p.size] * 0.5 + "px;\n\t\tmargin-left: -" + iconSizeMap[p.size] * 0.5 + "px;\n\t";
});

exports.default = Icon;

//# sourceMappingURL=icon.js.map