Breaking

Post Top Ad

Your Ad Spot

sábado, 28 de diciembre de 2019

Cómo devolver un componente Svelte a pedido

Ayer tuve este problema: estaba usando un componente Datepicker Svelte - 2 instancias de él.
Solo para darle más contexto, quiero establecer una fecha de inicio y una fecha de finalización:
Los 2 recolectores
Cuando hizo clic en la fecha de inicio, apareció el selector de fecha:
El primer recolector
Cuando hizo clic en la fecha de finalización, apareció el segundo selector de fecha:
El segundo recolector
Ahora el problema era que, según la fecha de inicio, la fecha de finalización tenía algunas restricciones. Por ejemplo, uno lógico fue que no se puede establecer una fecha de finalización anterior a la fecha de inicio.
El componente selector de fecha expuso un selectableCallbackaccesorio de función, llamado cuando el componente se renderiza por primera vez, ejecutándose para todas las fechas en el calendario, lo que me permite devolver falso en algunas fechas para desactivarlas.
<script>
let endDateSelectableCallback = date => {
  //TODO: decide if date is ok
}
</script>

<Datepicker
selectableCallback={endDateSelectableCallback
}>
¡Suena genial!
Excepto que esta función solo se ejecutó cuando el componente se renderizó por primera vez.
Necesitaba una forma de volver a ejecutar esa función cuando el otro componente cambió su valor. Entonces podría eliminar todas las fechas anteriores a la fecha de inicio seleccionada. Además, tuvo que ejecutarse varias veces ya que el usuario podía cambiar de idea.
Entonces ... cuando seleccioné una fecha en el otro componente, usé el on:dateSelectedevento para reasignar la función que asigné selectableCallback, llamé endDateSelectableCallbacka sí misma.
<script>
let endDateSelectableCallback = date => {
  //TODO: decide if date is ok
}
</script>

<!-- first date picker, start date -->
<Datepicker on:dateSelected={e => {
  endDateSelectableCallback=endDateSelectableCallback;
}}>
selectableCallback={endDateSelectableCallback
}>

<!-- second date picker, end date -->
<Datepicker selectableCallback={endDateSelectableCallback
}>
Este podría no ser el código Svelte más idiomático y probablemente podría agregar un refresh={refreshComponent}accesorio en su lugar. Pero tal vez sea idiomático, ya que los documentos de Svelte también mencionan agregar una asignación redundante para desencadenar una nueva representación cuando actualizamos un valor:
Los documentos esbeltos
Creo que este es un patrón muy específico que podría no ser muy común. No he encontrado este problema antes, por lo que recuerdo, así que estoy contento con esta solución hasta ahora, funciona.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas