mysticsymbolic.github.io/lib/svg-composition-context.tsx

49 wiersze
1.3 KiB
TypeScript

import React from "react";
import { ColorWidget } from "./color-widget";
import { DEFAULT_BG_COLOR } from "./colors";
import { createSvgSymbolContext, SvgSymbolContext } from "./svg-symbol";
import {
SymbolContextWidget,
SymbolContextWidgetProps,
} from "./symbol-context-widget";
const DEFAULT_CONTEXT: SvgCompositionContext = {
background: DEFAULT_BG_COLOR,
...createSvgSymbolContext(),
};
export type SvgCompositionContext = SvgSymbolContext & {
/** The background color of the composition, as a hex hash (e.g. '#ff0000'). */
background: string;
};
export function createSvgCompositionContext(
ctx: Partial<SvgCompositionContext> = {}
): SvgCompositionContext {
return {
...DEFAULT_CONTEXT,
...ctx,
};
}
export type CompositionContextWidgetProps<
T extends SvgCompositionContext
> = SymbolContextWidgetProps<T>;
export function CompositionContextWidget<T extends SvgCompositionContext>({
ctx,
onChange,
children,
}: CompositionContextWidgetProps<T>): JSX.Element {
return (
<SymbolContextWidget ctx={ctx} onChange={onChange}>
{children}
<ColorWidget
label="Background"
value={ctx.background}
onChange={(background) => onChange({ ...ctx, background })}
/>{" "}
</SymbolContextWidget>
);
}