本文整理汇总了TypeScript中bobril.createDerivedComponent函数的典型用法代码示例。如果您正苦于以下问题：TypeScript createDerivedComponent函数的具体用法？TypeScript createDerivedComponent怎么用？TypeScript createDerivedComponent使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了createDerivedComponent函数的6个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: return
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);示例2: return
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);示例3: return
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);示例4: header
me.children = [ b.styledDiv('', bobrilLogo), ' ', ctx.data.children ];
b.style(me, { fontSize: ctx.data.fontSize });
}
});
interface IWarnHeaderData extends IHeaderData {
isWarning?: boolean;
}
interface IWarnHeaderCtx extends b.IBobrilCtx {
data: IWarnHeaderData;
}
const warnStyle = b.styleDef({ background: "#ffc0c0" });
const warnHeader = b.createDerivedComponent<IWarnHeaderData>(header, {
render(ctx: IWarnHeaderCtx, me: b.IBobrilNode) {
b.style(me, ctx.data.isWarning && warnStyle);
}
});
setInterval(1000, ()=> {
b.invalidate();
});
b.init(() => [
header({ fontSize: 20 }, t('Hello')),
warnHeader({ fontSize: 25, isWarning: true }, 'World'),
header({ fontSize: 15 }, t('Right now is {now, date, LLLL}', { now: b.now() }))
]);
示例5: render
import * as b from 'bobril';
import * as tag from 'bobrilstrap-tag';
export interface IData extends tag.IData {
}
interface ICtx extends b.IBobrilCtx {
data: IData;
}
export default b.createDerivedComponent<IData>(tag.default, {
render(ctx: ICtx, me: b.IBobrilNode) {
me.className = (me.className || '') + ' row';
}
});
示例6: render
export const create = b.createDerivedComponent<IData>(m.Paper, {
render(ctx: IContext, me: b.IBobrilNode) {
const d = ctx.data;
me.children = [
b.styledDiv(
[
d.leftChildren && b.styledDiv(
d.leftChildren.map((button) => {
return b.styledDiv(
button,
styles.button,
);
}),
styles.buttonsContainer
),
d.rightChildren && b.styledDiv(
d.rightChildren.map((button) => {
return b.styledDiv(
button,
styles.rightButton,
);
}),
styles.rightButtonsContainer
)
],
d.contentWidth && {
minWidth: 852,
maxWidth: d.contentWidth,
margin: 'auto'
}
)
];
b.style(
me,
styles.appBar,
{background: m.primary2Color()}
);
}
});