39 wiersze
978 B
TypeScript
39 wiersze
978 B
TypeScript
import React from "react";
|
|
import { SvgSymbolContext } from "./svg-symbol";
|
|
|
|
export const SymbolContextWidget: React.FC<{
|
|
ctx: SvgSymbolContext;
|
|
onChange: (value: SvgSymbolContext) => void;
|
|
}> = ({ ctx, onChange }) => {
|
|
const updateCtx = (updates: Partial<SvgSymbolContext>) => {
|
|
onChange({ ...ctx, ...updates });
|
|
};
|
|
|
|
return (
|
|
<p>
|
|
<label htmlFor="stroke">Stroke: </label>
|
|
<input
|
|
type="color"
|
|
value={ctx.stroke}
|
|
onChange={(e) => updateCtx({ stroke: e.target.value })}
|
|
id="stroke"
|
|
/>{" "}
|
|
<label htmlFor="fill">Fill: </label>
|
|
<input
|
|
type="color"
|
|
value={ctx.fill}
|
|
onChange={(e) => updateCtx({ fill: e.target.value })}
|
|
id="fill"
|
|
/>{" "}
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={ctx.showSpecs}
|
|
onChange={(e) => updateCtx({ showSpecs: e.target.checked })}
|
|
/>{" "}
|
|
Show specs
|
|
</label>
|
|
</p>
|
|
);
|
|
};
|