codogo-react-widgets/dist/components/button.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 _templateObject = (0, _taggedTemplateLiteral3.default)(["\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tcursor: pointer;\n\tdisplay: inline-block;\n\tfont-weight: bold;\n\tmargin: 4px;\n\tpadding: 4px;\n\tposition: relative;\n\ttext-align: center;\n\ttext-transform: uppercase;\n\ttransition: 0.1s all linear;\n\n\t&:hover,\n\t&:active {\n\t\tbackground-color: ", "\n\t}\n"], ["\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tcursor: pointer;\n\tdisplay: inline-block;\n\tfont-weight: bold;\n\tmargin: 4px;\n\tpadding: 4px;\n\tposition: relative;\n\ttext-align: center;\n\ttext-transform: uppercase;\n\ttransition: 0.1s all linear;\n\n\t&:hover,\n\t&:active {\n\t\tbackground-color: ", "\n\t}\n"]);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _polished = require("polished");

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

var getButtonTextColor = function getButtonTextColor(_ref) {
	var theme = _ref.theme,
	    type = _ref.type;
	return {
		CONFIRM: theme.colors.white,
		SELECT: theme.colors.white,
		CANCEL: theme.colors.white,
		WHITE: theme.colors.main
	}[type];
};

var getButtonBackgroundColor = function getButtonBackgroundColor(_ref2) {
	var theme = _ref2.theme,
	    type = _ref2.type;
	return {
		CONFIRM: theme.colors.main,
		SELECT: (0, _polished.lighten)(0.1, theme.colors.main),
		CANCEL: theme.colors.main,
		WHITE: theme.colors.white
	}[type];
};

var ButtonStyled = _styledComponents2.default.div(_templateObject, getButtonBackgroundColor, getButtonTextColor, function (p) {
	return (0, _polished.darken)(0.2, getButtonBackgroundColor(p));
});

var Button = function Button(props) {
	return _react2.default.createElement(
		ButtonStyled,
		{
			type: props.type,
			onClick: props.onClick
		},
		props.text || props.children
	);
};

Button.propTypes = {
	children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
	onClick: _react2.default.PropTypes.func.isRequired,
	type: _react2.default.PropTypes.oneOf(["SELECT", "CONFIRM", "CANCEL", "WHITE"]),
	fullWidth: _react2.default.PropTypes.bool,
	text: _react2.default.PropTypes.string,
	active: _react2.default.PropTypes.bool
};

exports.default = Button;

//# sourceMappingURL=button.js.map