Preserve open/closed state of <details>.

pull/230/head
Atul Varma 2021-09-28 12:08:26 -04:00
rodzic 9d91a08761
commit 202259a533
1 zmienionych plików z 15 dodań i 2 usunięć

Wyświetl plik

@ -473,20 +473,33 @@ function CreaturePartEditor<T extends CreatureSymbol>({
); );
} }
const RememberedDetails: React.FC<{ id: string }> = ({ id, children }) => {
const [isOpen, setIsOpen] = useRememberedState(id, false);
return (
<details
onToggle={(e) => setIsOpen((e.currentTarget as HTMLDetailsElement).open)}
open={isOpen}
>
{children}
</details>
);
};
const CreatureEditorWidget: React.FC<{ const CreatureEditorWidget: React.FC<{
creature: CreatureSymbol; creature: CreatureSymbol;
onChange: (symbol: CreatureSymbol) => void; onChange: (symbol: CreatureSymbol) => void;
}> = ({ creature, onChange }) => { }> = ({ creature, onChange }) => {
return ( return (
<div className="thingy"> <div className="thingy">
<details> <RememberedDetails id="creature_editor_widget">
<summary>Edit cluster&hellip;</summary> <summary>Edit cluster&hellip;</summary>
<CreaturePartEditor <CreaturePartEditor
creature={creature} creature={creature}
onChange={onChange} onChange={onChange}
idPrefix="creature_edit_" idPrefix="creature_edit_"
/> />
</details> </RememberedDetails>
</div> </div>
); );
}; };