15 lines
1.1 KiB
TypeScript
15 lines
1.1 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import type { CanvasState } from "@dada/shared-contracts";
|
|
|
|
type CanvasElement = CanvasState["elements"][number];
|
|
|
|
export function DynamicInspector(props: { element: CanvasElement; onCommit: (value: string) => void }) {
|
|
const [value, setValue] = useState(props.element.formatted_value ?? "");
|
|
useEffect(() => setValue(props.element.formatted_value ?? ""), [props.element.element_id, props.element.formatted_value]);
|
|
return <section className="editor-dynamic-inspector">
|
|
{props.element.template_or_asset_id === "DYN012" ? <p className="editor-font-substitution" role="note">原 DIN_MediumAlternate.otf 缺失，当前明确使用 FONT081 · Lexend Deca 替代。</p> : null}
|
|
<label>显示文字<textarea aria-label="动态贴纸显示文字" onChange={(event) => setValue(event.target.value)} value={value} /></label>
|
|
<button className="editor-wide-command" disabled={!value.trim() || value === props.element.formatted_value} onClick={() => props.onCommit(value)} type="button">应用显示文字</button>
|
|
</section>;
|
|
}
|