codogo-react-widgets/dist/components/old/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 _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n\t", "\n\tcursor: pointer;\n\tposition: relative;\n\tfont-weight: bold;\n\ttext-transform: uppercase;\n\ttransition: 0.1s all linear;\n\t", "\n\t", "\n\t", "\n"], ["\n\t", "\n\tcursor: pointer;\n\tposition: relative;\n\tfont-weight: bold;\n\ttext-transform: uppercase;\n\ttransition: 0.1s all linear;\n\t", "\n\t", "\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);

var _icon = require("./icon");

var _icon2 = _interopRequireDefault(_icon);

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

var colorMap = function colorMap(p) {
	return {
		confirm: {
			color: p.theme.main,
			text: p.theme.white,
			hover: true
		},
		select: {
			color: p.theme.slight,
			text: p.theme.white,
			hover: true
		},
		cancel: {
			color: p.theme.warn,
			text: p.theme.white,
			hover: true
		},
		white: {
			color: p.theme.white,
			text: p.theme.main,
			hover: true
		}
	};
};

var Button = function Button(props) {
	return _react2.default.createElement(
		Wrapper,
		(0, _extends3.default)({
			disabled: !props.active
		}, props),
		props.icon && _react2.default.createElement(_icon2.default, {
			type: props.icon,
			color: colorMap(props)[props.type.toLowerCase()].text,
			input: true
		}),
		props.children || props.text
	);
};

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"]),
	icon: _react2.default.PropTypes.oneOf(_icons2.default),
	fullWidth: _react2.default.PropTypes.bool,
	text: _react2.default.PropTypes.string,
	active: _react2.default.PropTypes.bool
};

Button.defaultProps = {
	active: true,
	theme: theme,
	type: "SELECT"
};

var Wrapper = _styledComponents2.default.button(_templateObject, common.inputAndButton, function (p) {
	return p.icon && !p.fullWidth && "padding-left: " + (3 - 0.4) + "em;";
}, function (p) {
	return p.fullWidth && "width: 100%;";
}, function (p) {
	var o = colorMap(p)[p.type.toLowerCase()];
	var disableColor = mixins.darken(o.color, 0.2);

	return "\n\t\t\t\tbackground-color: " + (p.active ? o.color : disableColor) + ";\n\t\t\t\tcolor: " + (p.active ? o.text : mixins.mix(disableColor, o.text)) + ";\n\t\t\t\t" + (p.active && o.hover && "\n\t\t\t\t\t\t&:hover,\n\t\t\t\t\t\t&:active {\n\t\t\t\t\t\t\tbackground-color: " + mixins.darken(o.color) + "\n\t\t\t\t\t\t}\n\t\t\t\t\t") + "\n\t\t\t";
});

exports.default = Button;

//# sourceMappingURL=button.js.map