41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
|
interface CanvasMarkingPopoverProps {
|
||
|
|
value?: string;
|
||
|
|
placeholder: string;
|
||
|
|
onChange: (value: string) => void;
|
||
|
|
onClear: () => void;
|
||
|
|
onDone: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function CanvasMarkingPopover({
|
||
|
|
value,
|
||
|
|
placeholder,
|
||
|
|
onChange,
|
||
|
|
onClear,
|
||
|
|
onDone,
|
||
|
|
}: CanvasMarkingPopoverProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="studio-canvas-marking-popover"
|
||
|
|
onMouseDown={(event) => event.stopPropagation()}
|
||
|
|
onClick={(event) => event.stopPropagation()}
|
||
|
|
>
|
||
|
|
<textarea
|
||
|
|
className="studio-canvas-marking-input"
|
||
|
|
placeholder={placeholder}
|
||
|
|
value={value || ""}
|
||
|
|
onChange={(event) => onChange(event.target.value)}
|
||
|
|
/>
|
||
|
|
<div className="studio-canvas-marking-actions">
|
||
|
|
{value ? (
|
||
|
|
<button type="button" className="studio-canvas-marking-clear" onClick={onClear}>
|
||
|
|
清除
|
||
|
|
</button>
|
||
|
|
) : null}
|
||
|
|
<button type="button" className="studio-canvas-marking-done" onClick={onDone}>
|
||
|
|
完成
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|