return (c: f.ICursor<TState>) => b.createDerivedComponent<TData>( b.createComponent<TData>({ init(ctx: IDataComponentContext<TState, TData>) { ctx.cursor = c; ctx.state = f.getState(ctx.cursor); }, render(ctx: IDataComponentContext<TState, TData>) { ctx.state = f.getState(ctx.cursor); } }), component);
return (c: f.ICursor<TState>) => (children?: b.IBobrilChildren) => b.createDerivedComponent( b.createComponent({ init(ctx: IContext<TState>) { ctx.cursor = c; ctx.state = f.getState(ctx.cursor); }, shouldChange(ctx: IContext<TState>, me: b.IBobrilNode, oldMe: b.IBobrilCacheNode): boolean { let previousState = ctx.state; ctx.state = f.getState(ctx.cursor); return ctx.forceShouldChange || ctx.state !== previousState; } }), component)(null, children);
return (c: f.ICursor<TState>) => b.createDerivedComponent<TData>( b.createComponent<TData>({ init(ctx: IRouteComponentContext<TState, TData>) { ctx.cursor = c; ctx.state = f.getState(ctx.cursor); ctx.lastData = ctx.data; }, shouldChange(ctx: IRouteComponentContext<TState, TData>, me: b.IBobrilNode, oldMe: b.IBobrilCacheNode): boolean { let previousState = ctx.state; let previousData = ctx.lastData; ctx.state = f.getState(ctx.cursor); ctx.lastData = ctx.data; return ctx.forceShouldChange || !(ctx.data === previousData && ctx.state === previousState); } }), component);
const documentation = b.createComponent<IData>({ render(ctx: IContext, me: b.IBobrilNode) { me.children = [ LCenter.create({ children: [ Label.create({ label: 'Documentation under construction.', size: Label.LabelSize.Title, style: { textAlign: 'center' } }), b.styledDiv( 'We know, that it is not easy to develop application without any documentation. ' + 'We hope, that these materials will help you to start.', { marginTop: 24, marginBottom: 24 } ), getMotivationSection(), getHowToStartSection(), getExamplesSection() ], maxWidth: styles.maxPageWidth, } ) ]; } });
} interface IContext extends b.IBobrilCtx { data: IData; } export const create = b.createComponent<IData>({ render(ctx: IContext, me: b.IBobrilNode){ const d = ctx.data; me.children = [ d.label ]; b.style( me, buttonStyle, d.isActive && {color: m.white} ); }, onPointerDown(ctx: IContext): boolean { ctx.data.action(); return true; } }); export const buttonStyle = b.styleDef({ cursor: 'pointer', height: 64, lineHeight: '64px', paddingLeft: 8,
interface IPaperCtx extends b.IBobrilCtx { data: IPaperData; } export let paperStyle = b.styleDef([c.noTapHighlight, { backgroundColor: styles.canvasColor, boxSizing: 'border-box', fontFamily: styles.fontFamily, }]); export let circleStyle = b.styleDef(c.circle); export let roundStyle = b.styleDef({ borderRadius: 2 }); export const Paper = b.createComponent<IPaperData>({ render(ctx: IPaperCtx, me: b.IBobrilNode) { const d = ctx.data; me.children = d.children; b.style(me, paperStyle); let zDepth = d.zDepth; if (zDepth == null) zDepth = 1; if (zDepth > 0) b.style(me, styles.zDepthShadows[zDepth - 1]); if (d.circle) { b.style(me, circleStyle); } else if (d.round !== false) { b.style(me, roundStyle); } b.style(me, d.style); } });
import * as b from 'bobril'; const iconShine = b.sprite("light.png", "#80ff80"); const iconOff = b.sprite("light.png", "#e03030"); export interface IData { value: boolean; onChange(value: boolean); } interface ICtx extends b.IBobrilCtx { data: IData; } export default b.createComponent<IData>({ render(ctx: ICtx, me: b.IBobrilNode) { b.style(me, ctx.data.value ? iconShine : iconOff); }, onClick(ctx: ICtx): boolean { ctx.data.onChange(!ctx.data.value); return true; } });
import * as b from 'bobril'; import * as Label from '../../../components/label/lib'; interface IData { } interface IContext extends b.IBobrilCtx { data: IData; } export const create = b.createComponent<IData>({ render(ctx: IContext, me: b.IBobrilNode){ const d = ctx.data; me.children = [ // TODO // Label.create({ // label: 'Get Started', // size: Label.LabelSize.Title // }), ]; } });
import * as b from 'bobril'; import * as styles from './styles'; interface IData { content: b.IBobrilChildren; } interface IContext extends b.IBobrilCtx { data: IData; media: b.IBobrilMedia; } export const create = b.createComponent<IData>({ render(ctx: IContext, me: b.IBobrilNode) { ctx.media = b.getMedia(); const data = ctx.data; const media = ctx.media; me.children = data.content; b.style( me, styles.contentPc ); }, });
export const IconButton = b.createComponent<IIconButtonData>({ init(ctx: IIconButtonCtx) { ctx.focusFromKeyboard = false; }, render(ctx: IIconButtonCtx, me: b.IBobrilNode) { let d = ctx.data; me.attrs = { role: 'button', 'aria-disabled': d.disabled ? 'true' : 'false', tabindex: d.disabled ? undefined : (d.tabindex || 0) }; b.style(me, d.disabled ? disabledStyle : enabledStyle); me.children = ripple.Ripple({ pulse: ctx.focusFromKeyboard && !d.disabled, pointerDown: () => { if (d.action) d.action(); }, disabled: d.disabled, style: [rootStyle, iconStyle, { backgroundColor: ctx.focusFromKeyboard ? styles.hoverColor : undefined }] }, d.children); }, onKeyDown(ctx: IIconButtonCtx, ev: b.IKeyDownUpEvent): boolean { if ((ev.which === 13 || ev.which === 32) && !ctx.data.disabled && ctx.focusFromKeyboard) { if (ctx.data.action) ctx.data.action(); return true; } return false; }, onFocus(ctx: IIconButtonCtx) { ctx.focusFromKeyboard = true; ctx.data.onFocus(); b.invalidate(ctx); }, onBlur(ctx: IIconButtonCtx) { ctx.focusFromKeyboard = false; ctx.data.onBlur(); b.invalidate(ctx); } });