Discussion :

[bouh31]

Bonjour

Je fais un component qui servirais pour un tour d'horizon dans une page web.
Quand je clique sur le bouton Next le contenu de la popover s'actualise et ensuite ça position s'actualise.

Ca ne rend pas ce que je souhaite, j'aurais voulu qu'elle bouge a la prochaine position et que le contenu s'actualise après.
Si vous avez des idées je suis preneur, le code est ici:

https://codesandbox.io/s/form-m1lf8

[gwyohm]

Salut,

J'ai regardé ton exemple, puis la doc de Popover puis le source de updatePosition
Le souci, c'est que updatePosition passe par un debounce (pour ne pas freezer l'interface je suppose).

Une solution simple pour ton cas, c'est de passer par une 2ème variable dans ton state:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
    this.state = {
      open: true,
      index: 0,
      indexData: 0,
      indexMax: guidelines.length - 1,

De te baser sur celle-ci pour l'affichage de l'aide:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
          <Grid container style={styles.container}>
            <Grid item xs={12} style={styles.description}>
              <Typography variant="h5">
                {guidelines[this.state.indexData].title}
              </Typography>
              <Typography wrap="true">
                {guidelines[this.state.indexData].description}
              </Typography>
            </Grid>

et de modifier cette variable une fois le updatePosition fait:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
  componentDidUpdate(prevProps, prevState) {
    if (this.state.index !== prevState.index) {
      this.inputRef.current.updatePosition();
      setTimeout(() => this.setState({indexData: this.state.index}), 300); //debounce fait un timeout à 166
    }
  }

C'est pas top, mais comme updatePosition n'est pas une Promise, je doute que tu puisses savoir avec certitude quand le Popover a été déplacé...

[bouh31]

Merci, en effet c'est bien une solution, elle est sale mais elle fonctionne donc c'est plutôt bien.
Dans ton commentaire du met "debounce fait un timeout à 166", tu sais ça comment ?

[bouh31]

Même pas moyen de mettre un callback
https://github.com/mui-org/material-...opover.js#L338

[gwyohm]

Dans ton commentaire du met "debounce fait un timeout à 166", tu sais ça comment ?

https://github.com/mui-org/material-...debounce.js#L3