BEM ClassManager

class_manager.ts

module classes {

    export interface ClassManager {
        mod(...name: string[]): ClassManager;
        cmod(condition: boolean, ...name: string[]): ClassManager;
        toString(): string;
        before(...other: ToString[]): ClassManager;
        after(...other: ToString[]): ClassManager;
    }

    export interface ToString {
        toString(): string;
    }

    export class Block implements ClassManager {
        name: string;
        modifiers: string[] = [];
        befores: string[] = [];
        afters: string[] = [];

        constructor(block: string) {
            this.name = block;
        }

        mod(...mod: string[]): Block {
            this.modifiers.push.apply(this.modifiers, mod);
            return this;
        }

        cmod(condition: boolean, ...mod: string[]): Block {
            if (condition) {
                this.mod.apply(this, mod);
            }
            return this;
        }

        toString(): string {
            var block_name = this.name;

            var result = "";

            if (this.befores.length) {
                result += this.befores.join(" ") +  " ";
            }

            result += block_name;

            if (this.modifiers.length) {
                result += " ";
                result += this.modifiers.map(mod => block_name + "_" + mod).join(" ");
            }

            if (this.afters.length) {
                result += " ";
                result += this.afters.join(" ");
            }

            return result;
        }

        el(el: string): Block {
            return new Block(this.name + "__" + el);
        }

        after(...other: ToString[]): Block {
            for(var i = 0; i < other.length; i++) {
                var o = other[i];
                if (o) {
                    this.afters.push(o.toString());
                }
            }
            return this;
        }

        before(...other: ToString[]): Block {
            for(var i = 0; i < other.length; i++) {
                var o = other[i];
                if (o) {
                    this.befores.push(o.toString());
                }
            }
            return this;
        }
    }

    export function block(name: string): Block {
        return new Block(name)
    }

}

usage.ts

render() {
    var authState = this.props.authState;
    var loginErr = this.state.loginErr;
    var passErr = this.state.passErr;

    var cx = classes.cx;
    var b_auth = classes.block("auth");

    return div({className: b_auth},
        form({className: b_auth.el("form"), onSubmit: this.onSubmit},
            div({className: b_auth.el("header")}, "Sign in to ChatLab"),
            authState.lastAuthFailed && div({className: b_auth.el("error").mod("global")}, "Login or password is incorrect."),
            div({className: b_auth.el("field").cmod(!!loginErr, "error")},
                input({
                    className: b_auth.el("input"), name: 'auth', onChange: this.onChangeAuth,
                    type: 'text', placeholder: 'Auth or email', val: this.state.login
                }),
                loginErr && div({className: b_auth.el("error")}, loginErr)
            ),
            div({className: b_auth.el("field").cmod(!!passErr, "error")},
                input({
                    className: b_auth.el("input"), name: 'password', type: 'password', onChange: this.onChangePass,
                    placeholder: 'Password', val: this.state.pass
                }),
                passErr && div({className: b_auth.el("error")}, passErr)
            ),
            div({className: b_auth.el("field")},
                input({
                    className: b_auth.el("button").mod("big", "green", "wide"),
                    type: 'submit',
                    value: authState.isInCheck ? 'Checking ...' : 'Sign in'
                })
            )
        )
    )
}