playtpus_ui/lib/src/components/button/index.js

React Component Libary

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
var react_1 = __importDefault(require("react"));
var config_1 = require("../../config");
var generator_1 = require("../generator");
var generator_2 = require("../generator");
require("../main.scss");
var loader_1 = __importDefault(require("../loader"));
var Bt = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", ""], ["\n  ", "\n  ", "\n  ", "\n  ",
    ""])), function (props) { return generator_2.designStyle(props); }, function (props) { return generator_1.sizeStyle(props); }, function (fontProps) { return generator_1.fontStyle(fontProps, false); }, function (_a) {
    var bg = _a.bg, invert = _a.invert, disabled = _a.disabled, color = _a.color, noBorder = _a.noBorder, noHover = _a.noHover;
    return "\n  background:  " + (bg || config_1.primaryColor) + ";\n  border: 2px solid " + (noBorder ? 'white' : bg || config_1.primaryColor) + ";\n  color : " + (bg ? "white" : color || "white") + ";\n  cursor: pointer;\n  box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);\n  " + (invert ? "background: white; color: " + config_1.primaryColor + ";" : '') + "\n  " + (bg && invert ? "background: white; color: " + (bg !== "white" ? bg : config_1.primaryColor) + ";" : '') + "\n  " + (!disabled ? "\n    &:hover {\n      " + (!noHover ? "\n        border-color: " + (bg || config_1.primaryColor) + ";\n        background: " + (!invert ? color || "white" : bg || config_1.primaryColor) + ";\n        color: " + (bg ? (invert ? "white" : bg) : !invert ? config_1.primaryColor : color || "white") + ";" : '') + "\n      box-shadow: 0 0 0 0;\n      transform: scale(0.99);\n      transition: 350ms ease-out;\n  }"
        : "background: #F0F3F4; border-color: #F0F3F4; color: darkgray;") + "\n\n&:focus{\n    outline:0;\n}";
});
exports.Button = function (props) {
    var onSubmit = props.onSubmit, children = props.children, _a = props.margin, margin = _a === void 0 ? '0.15em' : _a, _b = props.padding, padding = _b === void 0 ? '0.3em 0.4em' : _b, _c = props.minWidth, minWidth = _c === void 0 ? '6.5em' : _c, disabled = props.disabled, _d = props.loading, loading = _d === void 0 ? false : _d, _e = props.noHover, noHover = _e === void 0 ? false : _e, tooltip = props.tooltip;
    var color = props.color, size = props.size, bold = props.bold, textAlign = props.textAlign, placeSelf = props.placeSelf, textShadow = props.textShadow, _f = props.noBorder, noBorder = _f === void 0 ? false : _f, faIcon = props.faIcon;
    var fontProps = { color: color, size: size, bold: bold, textAlign: textAlign, placeSelf: placeSelf, textShadow: textShadow };
    props = __assign(__assign({}, props), { margin: margin, padding: padding, minWidth: minWidth, noHover: noHover });
    return (react_1.default.createElement(Bt, __assign({ type: props.type || "submit" }, props, { fontProps: fontProps, disabled: disabled, onSubmit: onSubmit }, generator_2.elementProps(props)),
        loading && (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(loader_1.default.Spinner, { size: 4 }),
            "\u00A0")),
        faIcon && react_1.default.createElement("i", { className: faIcon }),
        children));
};
exports.Button.Normal = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0.3rem;\n  color: white;\n  cursor: pointer;\n  background: ", ";\n  border: 0.15em solid ", ";\n  border-radius: 0.25em;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 3px 3px rgba(0, 0, 0, 0.22);\n  &:focus {\n    outline: 0;\n  }\n  ", "\n"], ["\n  padding: 0.3rem;\n  color: white;\n  cursor: pointer;\n  background: ", ";\n  border: 0.15em solid ", ";\n  border-radius: 0.25em;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 3px 3px rgba(0, 0, 0, 0.22);\n  &:focus {\n    outline: 0;\n  }\n  ",
    "\n"])), config_1.primaryColor, config_1.primaryColor, function (props) {
    return !props.disabled
        ? "&:hover {\n    background: white;\n    color: " + config_1.primaryColor + ";\n    box-shadow: 0 0 0 0;\n    transform: scale(0.99);\n    transition: 350ms ease-out;\n}"
        : "background: #F0F3F4; border-color: #F0F3F4; color: darkgray; box-shadow: 0 0 0 !important;";
});
exports.default = exports.Button;
var templateObject_1, templateObject_2;
//# sourceMappingURL=index.js.map