feat: add pseudo style-selectors

[lessp]

EDIT:

So I went on and implemented active([...]) as well, using the same approach with adding active to the Style-type. Which perhaps is still not ideal, but may be good enough. So in my mind, the extractPseudoStyles-function is the mainly what needs improvements.

---

Draft for brainstorming

Ok, so this is still a work in progress! I've stumbled upon a few things which I'm still trying to get my head around.

• Did you have any specific ideas on how to hold state in the Primitives.re @Akin909? I just added something to get it to render hover-styles on screen for now (any text-element that is being hovered will apply the styles)

• Currently to make the Style.create-function accept the list(textStyleProps) we're forced(?) to add hover to Style.t. This also leads me to add it to applyStyle which I've currently made recursive to loop over all the properties of the hover-styles. Right now we could just return style since it's not used at all.

---

Eventually closes #352

[akinsho]

should this be all props i.e. on hover can we only change the styles that relate to text elements?

[lessp]

My thought was to only accept whatever style-props a Text-element (in this case) can take. But it's possible I'm overlooking some use-cases! 🙂

(I've only begun with the Text-primitive for now, but once there's a solid approach I'll add them to the others as well)

[akinsho]

@lessp, I wonder if since the setState is happening inside of a component we could actually just actually use Hooks.state (might not be the exact api of the top of my head) to keep track of the Idle and Hover status

[lessp]

@lessp, I wonder if since the setState is happening inside of a component we could actually just actually use Hooks.state (might not be the exact api of the top of my head) to keep track of the Idle and Hover status

Thanks @Akin909, I'll have another look!

The main-issue I have with how it works now is the extractPseudoStyles-function and the fact I can't figure out a good way to not have to add hover to the Style-type. So if there are any ideas on that let me know! 🙂

[akinsho]

@lessp re. having to add hover to Style.t, that seems like the right and tbh inevitable thing. We can't have any value in that list that isn't in the type so I think it should be there so having to add it to the other helper functions also makes sense

[lessp]

@lessp re. having to add hover to Style.t, that seems like the right and tbh inevitable thing. We can't have any value in that list that isn't in the type so I think it should be there so having to add it to the other helper functions also makes sense

Cool! I'll have another look-over at this and then implement it to the others as well! 🙂

[lessp]

@Akin909, I made some minor adjustments and added hover-styles to most primitives, I did notice that there's a conflict with the View-primitive rooting from the fact that general styles can be passed to the Input-component and then filtered out respectively to its Primitive via extractViewStyles, which is a very nice feature, so it would be nice to apply a workaround to be able to make it work with the View-primitive as well! 🙂

If someone has any pointers to what direction we could go here, that would be great!

[rudolfs]

I could use this feature in a project that I'm working on right now. Is there anything I can help with to move this along?

[lessp]

I could use this feature in a project that I'm working on right now. Is there anything I can help with to move this along?

I've paused this a bit @rudolfs, since I'm not sure how this will align itself with the new API #489

When working on the Hackernews-example I've resorted to doing something like this:

module InteractableText = {
  type state =
    | Idle
    | Hover
    | Active;

  type action =
    | Idle
    | Hover
    | Active;

  let component = React.component("InteractableText");

  let make =
      (
        ~children: list(React.syntheticElement),
        ~hoverStyles=[],
        ~activeStyles=[],
        ~style=[],
        ~text,
        (),
      ) =>
    component(hooks => {
      let (state, dispatch, hooks) =
        Hooks.reducer(
          ~initialState=Idle,
          (action, _state) =>
            switch (action) {
            | Idle => Idle
            | Hover => Hover
            | Active => Active
            },
          hooks,
        );

      let currentStyle =
        switch (state) {
        | Idle => style
        | Hover => Style.merge(~source=style, ~target=hoverStyles)
        | Active => Style.merge(~source=style, ~target=activeStyles)
        };

      (
        hooks,
        <Text
          onMouseOut={_ => dispatch(Idle)}
          onMouseOver={_ => dispatch(Hover)}
          onMouseDown={_ => dispatch(Active)}
          style=currentStyle
          text
        />,
      );
    });

  let createElement =
      (~children, ~hoverStyles=[], ~activeStyles=[], ~style=[], ~text, ()) =>
    make(~children, ~hoverStyles, ~activeStyles, ~style, ~text, ());
};

<InteractableText 
  style=Style.[color(Colors.blue)] 
  hoverStyles=Style.[color(Colors.red)] 
  text="Hello!" 
/>

[rudolfs]

Gotcha. Thanks for the snippet @lessp!

[lessp]

Closing in favour of a hook-based approach e.g.: #868

I think this is my first PR in Revery. They lure you in...