I think I should probably use spawn, and I see a recursive structure that allows me to keep opening the nested menu when I press the nested menu button.
It also reminds me of the composite pattern and file systems.
But I can't think of a way to model this as a state machine.
Do you have any ideas or resources for modeling this dropdown as a state machine?
#How should this dropdown menu be implemented?
1 messages · Page 1 of 1 (latest)
You might want to use a pre-built component library for something like this, e.g. Radix
Hmm... Of course I know radix, but I wanted to try making it myself using a state machine.
In the meantime, I created components such as dialogs, accordions, and tabs using state machines. I asked because I had no idea about components with nested structures, such as drop-down menus.
Thanks for the reply
Ah okay! In that case, let's talk about it
The way that I would model this is by having two states: closed and opened, and having context.highlighted with an ID
Why only one context.highlighted? Because the rest (open menus) can be derived from that
good idea,
If I think about it further, the menu list that opens by pressing the Edit button in the drop-down photo I uploaded and the opening of another menu list by pressing the Find button are structurally the same, so, um, I think it's a nested structure of the same state machine.
So what I'm thinking about right now is...
When the items in a menu list are called MenuItems, there are menus that trigger other menu lists and menus that do not.
If we express this as a type,
type MenuItem = { type: "item" } | { type: "menu", items: MenuItem[] }
It can be expressed like this,
Here I add {type: "menu", items: MenuItem[], ref: ActorRef<...> }
I'm going to make it like this and try to spawn.
This is because I think that each menu state should be managed using an actor.
Am I making it too complicated?
Of course, I have to implement it,,, but I failed to implement it all day today, so this is my last idea haha