La meilleure façon d'implémenter la commutation à trois états en réaction ?

Question

Je crée des boutons dans React qui déclenchent un changement d'état de l'un à l'autre. Certains de mes boutons ont trois états, représentés par des énumérations. Ces trois états doivent être définis dans un ordre consécutif. Lorsque la dernière valeur est atteinte, l'opération suivante doit rétablir l'état à la première valeur de l'énumération. Quelle est la manière intelligente d’y parvenir ?

import { create } from 'zustand'
import { devtools, persist, createJSONStorage } from 'zustand/middleware'
import { BackgroundVariant as Background } from 'reactflow';

function nextBackground(background: Background): Background {
  switch (background) {
    case Background.Dots:
      return Background.Cross;
    case Background.Cross:
      return Background.Lines;
    default:
      return Background.Dots;
  };
};

interface MenuState {
  background: Background;
  toggleBackground: () => void;
}

export const useMenuStore = create<MenuState>()(
  devtools(
    persist(
      (set) => ({
        background: Background.Dots,
        toggleBackground: () => set((state) => ({
          background: nextBackground(state.background)
        }))
      }),
      {
        name: 'menu-storage',
        storage: createJSONStorage(() => localStorage),
      }
    )
  )
);

Answer 1

Voici un exemple de fonction qui accepte n'importe quelle énumération et renverra la valeur suivante ou la première valeur si c'est la dernière valeur :

function getNextEnumValue>(enumObj: T, currentValue: T[keyof T]): T[keyof T] {
  const enumValues = Object.values(enumObj);
  const enumKeys = Object.keys(enumObj) as (keyof T)[];
  const currentIndex = enumKeys.findIndex(key => enumObj[key] === currentValue);

  if (currentIndex === -1) {
    throw new Error(`Invalid enum value: ${currentValue}`);
  }

  const nextIndex = currentIndex + 1;
  if (nextIndex === enumKeys.length) {
    return enumObj[enumKeys[0]];
  }

  const nextValue = enumObj[enumKeys[nextIndex]];
  if (!enumValues.includes(nextValue)) {
    throw new Error(`Invalid enum value: ${nextValue}`);
  }

  return nextValue;
}