codogo-react-widgets/lib/components/button.js

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

import _taggedTemplateLiteral from "babel-runtime/helpers/taggedTemplateLiteral";

var _templateObject = _taggedTemplateLiteral(["\n\tbackground-color: ", ";\n\tborder-radius: ", ";\n\tborder: 1px solid ", ";\n\tcolor: ", " !important;\n\tcursor: pointer;\n\tmargin: ", ";\n\tmax-height: ", "em;\n\tpadding: ", "em ", "em;\n\tposition: relative;\n\ttransition: 0.1s all linear;\n\tvertical-align: bottom;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tflex-direction: row;\n\n\t", ";\n\n\t&:hover,\n\t&:active {\n\t\topacity: ", ";\n\t\t", ";\n\t}\n\n\tspan {\n\t\talign-self: flex-end;\n\t}\n"], ["\n\tbackground-color: ", ";\n\tborder-radius: ", ";\n\tborder: 1px solid ", ";\n\tcolor: ", " !important;\n\tcursor: pointer;\n\tmargin: ", ";\n\tmax-height: ", "em;\n\tpadding: ", "em ", "em;\n\tposition: relative;\n\ttransition: 0.1s all linear;\n\tvertical-align: bottom;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tflex-direction: row;\n\n\t", ";\n\n\t&:hover,\n\t&:active {\n\t\topacity: ", ";\n\t\t", ";\n\t}\n\n\tspan {\n\t\talign-self: flex-end;\n\t}\n"]),
    _templateObject2 = _taggedTemplateLiteral(["\n\t", ";\n"], ["\n\t", ";\n"]),
    _templateObject3 = _taggedTemplateLiteral(["\n\theight: 1.33em;\n\twidth: 1.33em;\n\tmargin-right: 0.33em;\n"], ["\n\theight: 1.33em;\n\twidth: 1.33em;\n\tmargin-right: 0.33em;\n"]),
    _templateObject4 = _taggedTemplateLiteral(["\n\tmargin: ", "em;\n"], ["\n\tmargin: ", "em;\n"]),
    _templateObject5 = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: ", ";\n\tflex-wrap: wrap;\n\tmargin: -", "em;\n\n\t& > ", " {\n\t\t", ";\n\t}\n\t& > ", " {\n\t\t", ";\n\t}\n\t& > ", " {\n\t\t", ";\n\t}\n"], ["\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: ", ";\n\tflex-wrap: wrap;\n\tmargin: -", "em;\n\n\t& > ", " {\n\t\t", ";\n\t}\n\t& > ", " {\n\t\t", ";\n\t}\n\t& > ", " {\n\t\t", ";\n\t}\n"]);

import React from "react";
import PropTypes from "prop-types";
import styled, { css } from "styled-components";
import { Link } from "react-router-dom";

import { getPaddingHorizontal, getPaddingVertical, getMarginFourEm } from "../getters";

import Icon from "./icon";

// --------------------------------------------------

var getButtonMaxHeight = R.pipe(getPaddingVertical, R.multiply(2), R.add(1.2));

// --------------------------------------------------

var getButtonTextColor = function getButtonTextColor(_ref) {
	var _ref$theme$colors = _ref.theme.colors,
	    colors = _ref$theme$colors === undefined ? {} : _ref$theme$colors,
	    type = _ref.type,
	    textColorOverride = _ref.textColorOverride;
	return textColorOverride || {
		CONFIRM: colors.white,
		SELECT: colors.white,
		CANCEL: colors.white,
		WHITE: colors.primary,
		PLAIN: colors.darkgray
	}[type];
};

var getButtonBorderColor = function getButtonBorderColor(_ref2) {
	var _ref2$theme$colors = _ref2.theme.colors,
	    colors = _ref2$theme$colors === undefined ? {} : _ref2$theme$colors,
	    type = _ref2.type,
	    colorOverride = _ref2.colorOverride;
	return colorOverride || {
		CONFIRM: colors.primary,
		SELECT: colors.secondary,
		CANCEL: colors.darkgray,
		WHITE: colors.primary,
		PLAIN: colors.darkgray
	}[type];
};

var getButtonBackgroundColor = function getButtonBackgroundColor(_ref3) {
	var _ref3$theme$colors = _ref3.theme.colors,
	    colors = _ref3$theme$colors === undefined ? {} : _ref3$theme$colors,
	    type = _ref3.type,
	    colorOverride = _ref3.colorOverride;
	return colorOverride || {
		CONFIRM: colors.primary,
		SELECT: colors.secondary,
		CANCEL: colors.darkgray,
		WHITE: colors.white,
		PLAIN: colors.white
	}[type];
};

var buttonStyle = css(_templateObject, getButtonBackgroundColor, R.path(["theme", "sizes", "borderRadius"]), getButtonBorderColor, getButtonTextColor, getMarginFourEm, getButtonMaxHeight, getPaddingVertical, getPaddingHorizontal, function (props) {
	return props.shadow && R.path(["theme", "functions", "shadowProxy", 1]);
}, R.path(["theme", "colors", "translucent"]), function (props) {
	return props.shadow && "\n\t\t\t" + R.path(["theme", "functions", "shadowProxy", 2]) + "\n\t\t\ttransform: translateY(-2px);\n\t\t";
});

var ButtonDiv = styled.div(_templateObject2, buttonStyle);

var ButtonLink = styled(Link)(_templateObject2, buttonStyle);

var ButtonA = styled.a(_templateObject2, buttonStyle);

var ButtonIcon = styled(Icon)(_templateObject3);

// --------------------------------------------------

var passedProps = ["type", "onClick", "to", "href", "target", "rel", "colorOverride", "textColorOverride", "shadow"];

var Button = function Button(props) {
	var ButtonStyled = ButtonDiv;
	if (props.href) {
		ButtonStyled = ButtonA;
	}
	if (props.to) {
		ButtonStyled = ButtonLink;
	}
	return React.createElement(
		ButtonStyled,
		R.pick(passedProps)(props),
		props.iconKey && React.createElement(ButtonIcon, { iconKey: props.iconKey }),
		props.text || props.children
	);
};

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

Button.defaultProps = {
	type: "CONFIRM",
	shadow: true
};

// --------------------------------------------------

var buttonInContainerStyle = css(_templateObject4, R.pipe(R.path(["theme", "sizes", "button", "gutter"]), function (x) {
	return 0.5 * x;
}));

var ButtonsContainer = styled.div(_templateObject5, function (props) {
	return props.alignRight ? "flex-end" : "flex-start";
}, R.pipe(R.path(["theme", "sizes", "button", "gutter"]), function (x) {
	return 0.5 * x;
}), ButtonDiv, buttonInContainerStyle, ButtonLink, buttonInContainerStyle, ButtonA, buttonInContainerStyle);

Button.Container = ButtonsContainer;

// --------------------------------------------------

export default Button;