Cómo

React select async

PorMarcos diciembre 3, 2020

Escenario

Estoy diseñando un formulario web en el que quiero mostrar un combo que se carga dinámicamente con una petición XHR.

Problema

Los datos a cargar cuentan con miles de registros. Necesito un combo que se cargue de manera dinámica y disponga de un autocomplete para filtrar los resultos.

Solución

React select es un módulo de React que he venido usando desde hace algún tiempo y siempre ha respondido a mis expectativas. Hasta ahora nunca lo había utilizado para cargar los datos de manera asíncrona. La diferencia es que, en vez de usar el componente por defecto, usamos react-select/async y la llamada loadOptions debe devolver un promise. Al final, he acabado descartando usar un react-select porque necesitaba cargar más de 7000 registros y por muy rápido y asíncrono que sea, la capacidad de reacción del combo disminuye considerablemente, afectando la experiencia de usuario. Aun así me he dicho que voy a dejar el código por aquí por si algún otro día me hace fata:

import React from 'react';
let ReactDom = require('react-dom');
import AsyncSelect from 'react-select/async';


class OfficeSearch extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedOffice: null,
        };
    }

    getOfficesOptions = (inputValue) => {
        const url = '/api/office';
        let request = new Request(url, {
            credentials: 'same-origin',
            headers: new Headers({
                'Content-Type': 'text/plain'
            })
        });

        return fetch(request, { method: 'get' }).then(response => response.json());
    };

    handleOfficeChange = selectedOffice => {
        this.setState(
            { selectedOffice },
            () => console.log(`Option selected:`, this.state.selectedOffice)
        );
    };

    render() {
        const { selectedOffice } = this.state;

        return (
            <AsyncSelect
                cacheOptions
                defaultOptions
                value={selectedOffice}
                getOptionLabel={o => o.code}
                getOptionValue={o => o.id}                
                onChange={this.handleOfficeChange}
                loadOptions={this.getOfficesOptions}
                noOptionsMessage={() => 'No hay datos'}
                loadingMessage={() => 'Cargando…'}
                placeholder= 'Seleccionar…'
            />
        );
    }
}

let container = document.getElementById('office-search-container');
if (container !== null) {
    ReactDom.render(<OfficeSearch />, container);
}

import React from 'react';

let ReactDom = require('react-dom');

import AsyncSelect from 'react-select/async';

class OfficeSearch extends React.Component {

constructor(props) {

super(props);

this.state = {

selectedOffice: null,

};

}

getOfficesOptions = (inputValue) => {

const url = '/api/office';

let request = new Request(url, {

credentials: 'same-origin',

headers: new Headers({

'Content-Type': 'text/plain'

})

});

return fetch(request, { method: 'get' }).then(response => response.json());

};

handleOfficeChange = selectedOffice => {

this.setState(

{ selectedOffice },

() => console.log(`Option selected:`, this.state.selectedOffice)

);

};

render() {

const { selectedOffice } = this.state;

return (

<AsyncSelect

cacheOptions

defaultOptions

value={selectedOffice}

getOptionLabel={o => o.code}

getOptionValue={o => o.id}

onChange={this.handleOfficeChange}

loadOptions={this.getOfficesOptions}

noOptionsMessage={() => 'No hay datos'}

loadingMessage={() => 'Cargando…'}

placeholder= 'Seleccionar…'

);

}

let container = document.getElementById('office-search-container');

if (container !== null) {

ReactDom.render(<OfficeSearch />, container);

}

Cómo

Renovación de la llave gpg
PorMarcos julio 2, 2020septiembre 13, 2020

Escenario En mi trabajo usamos gpg para cifrar los documentos con información sensible. Problema Resulta que, en su día, di de alta la clave con una esperanza de vida de dos años. Y dos años pasan muy rápido. Solución Estos son los comandos que hay que ejecutar para extender la fecha de caducidad. Para listar…

Leer más Renovación de la llave gpg
Cómo

Restringir acceso a un bucket de AWS s3 por IP
PorMarcos diciembre 29, 2021diciembre 29, 2021

Escenario Una de nuestra aplicaciones web usa el servicio de almacenaje del webservice s3 de Amazon para guardar los ficheros que se suben a la web. Para ello el usuario dispone de un formulario y, una vez enviado, la aplicación utiliza el API de AWS para guardarlo en su bucket de s3. Problema En ningún…

Leer más Restringir acceso a un bucket de AWS s3 por IP
Cómo

Recuperar perfil de Firefox de un disco duro
PorMarcos noviembre 27, 2019diciembre 3, 2020

Escenario Después de 13 años de fiel servicio mi ordenador de casa no arranca, se queda atascado en la pantalla de la BIOS. Tras unas tentativas vanas para intentar arreglarlo me decidí por cambiar de ordenador. Después de todo, aunque había estado funcionando correctamente, al tener un sistema operativo de 32 bits, cada vez eran…

Leer más Recuperar perfil de Firefox de un disco duro
Cómo

Gunicorn, Django, Systemd y, por si fuera poco, nginx
PorMarcos febrero 29, 2024marzo 12, 2024

Ésta va a ser rápida. Es solo un recordatorio personal de cómo configurar varias instancias de gunicorn en una máquina con systemd. De modo que si no sabes qué es unicorn o systemd es muy posible que no te vaya interesar nada de lo que vaya a contar. Si aun sigues ahí a pesar de…

Leer más Gunicorn, Django, Systemd y, por si fuera poco, nginx

Cómo

Sonata Admin: el calendario no se cierra

PorMarcos diciembre 5, 2020diciembre 5, 2020

Escenario Incluir un filtro de rango de fechas en SonataAdmin que use un calendario para seleccionar la fecha es más o menos fácil. Primero añadimos el siguiente bloque en el admin de nuestra entidad:

<?php

// src/Admin/InvoiceAdmin.php

namespace Acme\Admin;

use Sonata\AdminBundle\Admin\AbstractAdmin;
use Sonata\DoctrineORMAdminBundle\Filter\DateRangeFilter;
use Sonata\Form\Type\DateTimeRangePickerType;

/**
 *
 * @author Marcos
 */
class InvoiceAdmin extends AbstractAdmin
{
    protected function configureDatagridFilters(DatagridMapper $datagridMapper)
    {
        $datagridMapper->add('createdAt', DateRangeFilter::class, array(
            'label' => 'created_at',
            'field_type' => DateTimeRangePickerType::class
        ));
    }
}
</php>

<?php

// src/Admin/InvoiceAdmin.php

namespace Acme\Admin;

use Sonata\AdminBundle\Admin\AbstractAdmin;

use Sonata\DoctrineORMAdminBundle\Filter\DateRangeFilter;

use Sonata\Form\Type\DateTimeRangePickerType;

/**

* @author Marcos

class InvoiceAdmin extends AbstractAdmin

{

protected function configureDatagridFilters(DatagridMapper $datagridMapper)

{

$datagridMapper->add('createdAt', DateRangeFilter::class, array(

'label' => 'created_at',

'field_type' => DateTimeRangePickerType::class

));

}

</php>

Y la siguiente clave bajo form_themesen el fichero config/packages/twig.yaml:

twig:
    default_path: '%kernel.project_dir%/templates'
    debug: '%kernel.debug%'
    strict_variables: '%kernel.debug%'
    form_themes:
        - '@SonataForm/Form/datepicker.html.twig'

twig:

default_path: '%kernel.project_dir%/templates'

debug: '%kernel.debug%'

strict_variables: '%kernel.debug%'

form_themes:

- '@SonataForm/Form/datepicker.html.twig'

Problema El calendario no se cierra automáticamente cuando se selecciona…

Cómo

Cómo extender sfGuardPlugin
PorMarcos enero 29, 2012febrero 27, 2013

Ésta es simple, o por lo menos eso me parecía. Sólo necesitaba añadir funcionalidad extra a las acción de cerrar sesión executeSignout del sfGuardPlugin…

Leer más Cómo extender sfGuardPlugin

Escenario

Problema

Solución

Publicaciones Similares

Deja una respuesta Cancelar la respuesta