Feature request: singleton popup

[mariusGundersen]

I have some popups that should only be open one at a time, and it would be nice if that was something react-call can be configured to handle/restrict. I have a few different thoughts on how this could be implemented, not sure what you think:

simple version: include index in call props

If the index of the array item is included in the call props then I can have a useEffect that checks if the index is 0 or more than 0, and if it is something other than 0 I can just call end() right away:

export const Confirm = createCallable(({ call, message }) => {
  useEffect(() => {
    // This causes any confirm popup that isn't the first one to close
    if(call.index > 0) call.end();
  }, []);

  return (
    <div role="dialog">
      <p>{message}</p>
      <button onClick={() => call.end(true)}>Yes</button>
      <button onClick={() => call.end(false)}>No</button>
    </div>
  );
})

more complex version: configure what happens with subsequent calls

Another option is to set an option in createCallable as to what should happen with multiple simultaneous calls. By default they stack, but there could be an option for "only-first" or "close-previous", or some other option.

export const Confirm = createCallable(({ call, message }) => (
  <div role="dialog">
    <p>{message}</p>
    <button onClick={() => call.end(true)}>Yes</button>
    <button onClick={() => call.end(false)}>No</button>
  </div>
), {
  multipleCalls: "only-first" // this one is "stacks" by default
})

The last one would be nicer, but I can live with the first option.

[desko27]

Hi @mariusGundersen,

Thanks for your suggestions! I think this is a legit use case and in fact someone already mentioned in #9 they only needed one active instance at a time.

I'd like to provide configuration capabilities as in your second scenario, but before deciding on the final API I just released v1.4.0 which adds call.index and call.stackSize properties.

I was planning on adding them to enable list virtualization solutions, as done here for the demo site:

react-call/src/CallableScenes/YourNested.tsx

Line 26 in b0286b2

if (call.index < call.stackSize - DOM_LIMIT_TO_VIRTUALIZE) return null

...but I hope they can also be used to fix your singleton case before something more tailored is released in incoming versions. Let's keep this issue open meanwhile.