react-native-style-tachyons/lib/reactWrapper.js

functional, maintainable styling for react-native

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ReactWrapper = void 0;
const react_1 = __importDefault(require("react"));
const lodash_1 = __importDefault(require("lodash"));
const css_color_names_1 = __importDefault(require("css-color-names"));
const lineHeight_1 = require("./styles/lineHeight");
class ReactWrapper {
    static configure(styles, options) {
        this.styles = styles;
        this.options = options;
    }
    static wrap(componentOrFunction) {
        var _a;
        if (!(componentOrFunction.prototype !== undefined && "render" in componentOrFunction.prototype)) {
            const func = componentOrFunction;
            return function wrappedRender(...args) {
                return ReactWrapper.recursiveStyle(func.apply(func, args));
            };
        }
        const WrappedComponent = componentOrFunction;
        const newClass = class extends WrappedComponent {
            render() {
                return ReactWrapper.recursiveStyle(super.render());
            }
        };
        newClass.displayName = (_a = WrappedComponent.displayName) !== null && _a !== void 0 ? _a : WrappedComponent.name;
        newClass.isTachyonsWrapped = true;
        return newClass;
    }
    static setStyles(props, clsPropName, typeScale) {
        const newProps = {};
        if (lodash_1.default.isArray(props.style)) {
            newProps.style = props.style.slice();
        }
        else if (lodash_1.default.isObject(props.style)) {
            newProps.style = [props.style];
        }
        else {
            newProps.style = [];
        }
        const splitted = props[clsPropName].replace(/-/gu, "_").split(" ");
        const fontSize = lodash_1.default.find(lodash_1.default.keys(typeScale), (fSetting) => lodash_1.default.includes(splitted, fSetting));
        for (let i = 0; i < splitted.length; i++) {
            const cls = splitted[i];
            if (cls.length > 0) {
                if (lodash_1.default.has(this.styles, cls)) {
                    newProps.style.push(this.styles[cls]);
                }
                else if (cls.startsWith("lh_")) {
                    if (!lodash_1.default.isString(fontSize)) {
                        throw new Error(`setting '${cls}' needs explicit font-size`);
                    }
                    newProps.style.push({
                        lineHeight: lineHeight_1.lhStyles[cls.replace(/_/gu, "-")] * this.styles[fontSize]["fontSize"]
                    });
                }
                else if (cls.startsWith("bg_")) {
                    newProps.style.push({
                        backgroundColor: cls.slice(3)
                    });
                }
                else if (cls.startsWith("b__")) {
                    newProps.style.push({
                        borderColor: cls.slice(3)
                    });
                }
                else if (cls.startsWith("tint_")) {
                    newProps.style.push({
                        tintColor: cls.slice(3)
                    });
                }
                else if (lodash_1.default.has(css_color_names_1.default, cls) || (/^(rgb|#|hsl)/u).test(cls)) {
                    newProps.style.push({
                        color: cls
                    });
                }
                else {
                    throw new Error(`style '${cls}' not found`);
                }
            }
        }
        return newProps;
    }
    static recursiveStyle(elementsTree) {
        if (elementsTree.type.isTachyonsWrapped) {
            return elementsTree;
        }
        const { props } = elementsTree;
        const { clsPropName, typeScale } = this.options;
        let newProps = null;
        let translated = false;
        if (lodash_1.default.isString(props[clsPropName])) {
            translated = true;
            newProps = this.setStyles(props, clsPropName, typeScale);
        }
        let newChildren = props.children;
        if (lodash_1.default.isArray(newChildren)) {
            newChildren = react_1.default.Children.toArray(newChildren);
            for (let i = 0; i < newChildren.length; i++) {
                const c = newChildren[i];
                if (react_1.default.isValidElement(c)) {
                    const converted = this.recursiveStyle(c);
                    if (converted !== c) {
                        translated = true;
                        newChildren[i] = converted;
                    }
                }
            }
        }
        else if (react_1.default.isValidElement(newChildren)) {
            const converted = this.recursiveStyle(newChildren);
            if (converted !== newChildren) {
                translated = true;
                newChildren = converted;
            }
        }
        else if (lodash_1.default.isFunction(newChildren)) {
            const originalChildrenFunction = newChildren;
            const converted = (...args) => this.recursiveStyle(originalChildrenFunction(...args));
            if (converted !== newChildren) {
                translated = true;
                newChildren = converted;
            }
        }
        if (translated) {
            return react_1.default.cloneElement(elementsTree, newProps, newChildren);
        }
        return elementsTree;
    }
}
exports.ReactWrapper = ReactWrapper;
ReactWrapper.styles = {};
ReactWrapper.options = {};