playtpus_ui/lib/src/components/generator.js

React Component Libary

"use strict";
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.elementProps = exports.designStyle = exports.sizeStyle = exports.fontStyle = exports.gridStyle = void 0;
var config_1 = require("../config");
;
exports.gridStyle = function (_a) {
    var cols = _a.cols, customCols = _a.customCols, customRows = _a.customRows, gridGap = _a.gridGap, mobileCols = _a.mobileCols, mobileLayout = _a.mobileLayout, placeItems = _a.placeItems, hideOnMobile = _a.hideOnMobile;
    return "\n    display: grid;\n    grid-gap: " + (gridGap || '1em') + " ;\n    grid-template-columns: repeat(" + (cols ? cols : "1") + ", 1fr);\n    " + (customCols ? "grid-template-columns: " + customCols + ";" : "") + "\n    " + (customRows ? "grid-template-rows: " + customRows + ";" : "") + "\n    place-items: center;\n    " + (placeItems ? "place-items: " + placeItems + ";" : "") + "\n    @media(max-width: " + config_1.mobileWidth + "){\n        " + (hideOnMobile ? "display: none; !important" : '') + "\n        " + (mobileLayout !== false ? "grid-template-columns: 1fr;" : "") + "\n        " + (mobileCols ? "grid-template-columns: " + mobileCols + ";" : "") + "  \n    }\n";
};
;
exports.fontStyle = function (_a, darkMode) {
    var color = _a.color, size = _a.size, bold = _a.bold, textAlign = _a.textAlign, placeSelf = _a.placeSelf, textShadow = _a.textShadow;
    return "\n    text-align: " + (textAlign || 'center') + ";\n    " + ("color : " + (color || config_1.primaryTxtColor)) + ";\n    font-size: " + (size || '1em') + ";\n    " + (textShadow ? "text-shadow: 1.2px 1.2px 2px black;" : "") + "\n    font-weight: " + (bold ? "bolder" : 'normal') + ";\n    " + (placeSelf ? "place-self: " + placeSelf + ";" : '');
};
;
exports.sizeStyle = function (_a) {
    var width = _a.width, height = _a.height, max = _a.max, padding = _a.padding, margin = _a.margin, minWidth = _a.minWidth;
    return "\n    width: " + (width || "auto") + ";\n    min-width : " + (minWidth || "auto") + ";\n    height: " + (height || "auto") + ";\n    margin: " + (margin || "0") + " ;\n    padding: " + (padding || "0") + ";\n\n";
};
;
exports.designStyle = function (_a) {
    var shadow = _a.shadow, rounded = _a.rounded, bg = _a.bg, background = _a.background, hideOnMobile = _a.hideOnMobile, cursor = _a.cursor;
    return "\n    " + (shadow ? "box-shadow: 0 .25em .5em rgba(0,0,0,.5);" : "") + "\n    pointer : " + (cursor ? 'cursor' : 'default') + ";\n    transition: 200ms ease-out;\n    border-radius: " + (rounded ? '1.2em' : ".25em") + ";\n    border: 0px;\n    " + (background ? "background: " + background + ";" : "") + "\n    background-repeat: no-repeat;\n    @media(max-width: " + config_1.mobileWidth + "){\n        " + (hideOnMobile ? "display: none;" : '') + "\n    }\n";
};
;
exports.elementProps = function (props) {
    var style = props.style, className = props.className, onClick = props.onClick, ref = props.ref;
    var property = __assign(__assign(__assign(__assign({}, style ? { style: style } : {}), className ? { className: className } : {}), onClick ? { onClick: onClick } : {}), ref ? ref : {});
    return property;
};
//# sourceMappingURL=generator.js.map