labelText: 'hex', value: ctx.newPreviewColor, onChange: (value) => {
const rgb = graphics.hexToRgb(value)
if (!rgb) {
ctx.newPreviewColor = value;
b.invalidate(ctx);
return;
}
updateColorModels(ctx, rgb.r, rgb.g, rgb.b);
}
function getLabel(label: string, color: hex): b.IBobrilNode {
return label
? b.styledDiv(label, {
color: rgbToHex(getContrastColorFromRgb(hexToRgb(color), GradientType.Linear)),
textAlign: 'center',
padding: 6
})
: null;
}
onClick: () => {
const rgb = graphics.hexToRgb(ctx.oldPreviewColor);
updateColorModels(ctx, rgb.r, rgb.g, rgb.b);
}
b.styledDiv(m.Button({
children: 'cancel',
action: ctx.data.onClose,
type: m.ButtonType.Raised
}), baseMargin, { display: 'inline-block', cssFloat: 'right' }),
b.styledDiv(m.Button({
children: 'ok',
action: () => { ctx.data.onColorSelect(ctx.newPreviewColor) },
type: m.ButtonType.Raised
}), baseMargin, { display: 'inline-block', cssFloat: 'right' })
], { height: 40, marginTop: 20, marginBottom: 20 });
}
export const ColorPicker = b.createComponent<IColorPickerData>({
init(ctx: IColorPickerCtx) {
const baseColor = ctx.data.color ? graphics.hexToRgb(ctx.data.color) : defaultColor;
ctx.rgb = baseColor;
ctx.hsv = graphics.rgbToHsv(baseColor);
ctx.oldPreviewColor = graphics.rgbToHex(baseColor);
ctx.newPreviewColor = graphics.rgbToHex(baseColor);
},
render(ctx: IColorPickerCtx, me: b.IBobrilNode) {
me.children = m.Paper({ zDepth: 1, style: { width: ctx.data.width || '100%' } }, [
getHsvPreview(ctx),
getColorBar(ctx),
getTextfields(ctx),
getBaseAndCurrentPreview(ctx),
getButtons(ctx)
]);
}
});