Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
BEM ClassManager
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)
}
}
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'
})
)
)
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment