Come creare un pulsante smart usando React

Questa è una storia di tre pulsanti e come uno sviluppatore web che si sporge dal design ha realizzato i suoi sogni front-end.

Dovresti sapere in anticipo che la maggior parte dello stile qui è Bootstrap a piastre. Ha un bell'aspetto ed è un prodotto rivolto verso l'interno, quindi non ripariamo qualcosa che non è rotto.

Il nostro compito era creare un'interfaccia di facile comprensione per gestire un record. Il nostro record ha tre parti: disponibile, malato o vab. Non molto stato per comunicare una volta, ma abbiamo bisogno di cinque settimane di questi su una pagina.

Nota a margine: "VAB" è una parola svedese che si riferisce a stare a casa con il tuo bambino malato. C'è una differenza tra farlo ed ammalarsi qui, sia in retribuzione che in tempo libero!

Verifica di un record esistente

Il primo passo è stato mostrare se l'utente avesse o meno un record per il giorno in questione. Come in ogni progetto React che conosco, stavamo prendendo un elenco da un'API (la nostra) e ripetendo su di esso. Poiché l'API restituirà un elenco di record esistenti e ignorerà i giorni senza record, dovremo impostare il nostro array di giorni.

Ecco il nostro codice per ottenere cinque settimane di giorni:

export const dateArray = (numberOfDays, startDate) => {
  const day = moment (startDate);
  const days = [];
  while (days.length 

Ho scritto su Moment.js prima. Se non lo stai usando, sali sul dannato carrozzone! Rende stupido lavorare con le date, come qui dove possiamo chiamare day.add (1, 'giorni') o dove otteniamo il giorno della settimana con momento (startDate) .day ().

Gli oggetti momentanei sono mutabili! Quindi fai attenzione in generale, ma qui è fantastico perché dobbiamo aggiornare la nostra giornata e possiamo farlo con pochissimo codice.

Nota a margine: gli americani renderebbero naturalmente sabato l'ultimo giorno della settimana - 6 - e domenica il primo giorno - 0. Ma non gli svedesi o sostanzialmente il resto del mondo. Per quasi tutti non americani, la settimana inizia lunedì. La programmazione può essere stranamente incentrata sull'America.

Qui puoi vedere che stiamo assemblando un elenco di date, a partire da startDate, e continuiamo fino a raggiungere il numero di giorni, saltando i fine settimana. Useremo questo array per costruire il nostro elenco di record in modo da poter mettere alcuni pulsanti gustosi su di esso.

Mappatura del nostro array di giorni per riflettere i record effettivi

Ora che abbiamo tutti i giorni che dobbiamo mostrare (di seguito chiamiamo dateArray), dovremo passare in rassegna il nostro set di dati dall'API per capire se dovremmo mostrare un record. Poiché vogliamo vedere le date che non hanno record, dobbiamo impostare un array con alcuni record riempiti e alcuni vuoti:

const userRecords = dateArray (50, startDay) .map (date => {
  const recordToReturn = data.find (record =>
    record.date === data
  );

  return {data, record: recordToReturn};
});

Ora abbiamo una serie di date, alcune con un record completo e altre con un record: non definito.

Logica pulsante disponibile

Ora che possiamo vedere se c'è un record in quel giorno o no, possiamo condizionare il nostro pulsante per mostrare verde e dire "Disponibile" o bianco e "Aggiungi". Ancora una volta, sto usando Reactstrap per lo stile di base. Il componente Button viene fornito con una bella spaziatura, angoli arrotondati e quant'altro, oltre a pratici parametri di "colore" che posso impostare su cose come "informazioni" e "successo".

Impostazione del testo del pulsante

Per impostare il pulsante Testo, controllerò se esiste un record:

const buttonText = () =>
  isEmpty (this.props.data.record)? 'Aggiungi': 'Disponibile'

Ricorda che sto passando {date: 'some date', registra: {some: 'record'}} in ciascuno dei miei componenti del pulsante. Se il mio userRecords non ha trovato un record per quel giorno, non avremo nulla in data.record e possiamo dire "Aggiungi". IsEmpty proviene dall'eccellente lodash della libreria Javascript. Ancora una volta, sali sul carrozzone. Lodash rende Javascript molto più pulito e facile da lavorare.

Impostazione del colore del pulsante

La nostra funzione setColor verificherà anche se il record esiste, ma dovrà inoltre controllare lo stato del record per vedere di che colore dobbiamo visualizzare.

const setColor = () => {
  if (esistenteRegord && record.status === 'available') {
    restituire "successo";
  } else if (istingRecord)) {
    ritorna "grigio";
  } altro {
    ritorno 'secondario';
  }
};

Bootstrap è un valore predefinito. Abbiamo sovrascritto queste parole predefinite con i nostri colori, ma anche le opzioni predefinite sono belle. Qui controlliamo se il record è disponibile. Se non è disponibile ma c'è ancora un record, deve essere malato o vab, ma in entrambi i casi, l'utente non è più disponibile in quel giorno, quindi dovremo disattivare il pulsante.

I pulsanti colorati mostrano quattro stati.

Gli altri due pulsanti

Posso usare il super condizionale display di React per nascondere i pulsanti “malato” e “vab” quando non c'è nessun record. Ecco il codice per i restanti due pulsanti:

{esistentiRegord && (
  
           malato                 VAB         )}

Per assicurarci che i nostri pulsanti ottengano i colori giusti, verificheremo semplicemente che il record abbia lo stato "malato" o "vab", rispettivamente. Se lo stato del record non corrisponde al pulsante, faremo in modo che non sia colorato (il nostro colore del pulsante "secondario" è bianco).

const setSecondaryColor = (record, status) => {
  if (record.status! == status) {return 'secondario'}
  if (status === 'ammalato') {return 'danger'}
  if (status === 'vab') {return 'giallo'}
}

Diventare fantasiosi con i rollover

A questo punto, i pulsanti hanno fatto tutto ciò di cui avevo bisogno (oltre a tutta la logica della richiesta API che sto omettendo da questo post - stiamo creando e aggiornando i record con questi pulsanti).

Ma come può una ragazza essere soddisfatta dei suoi pulsanti se non ci sono effetti di rollover? Dobbiamo essere in grado di rimuovere un record per un giorno in qualche modo. Invece di creare una X e fare clic sui nostri utenti, non sarebbe meglio se potessero fare clic su uno dei pulsanti esistenti per rimuovere il record? Così ho pensato.

Ho aggiunto un evento onMouseOver e onMouseOut al mio pulsante "Disponibile" / "Aggiungi":

const mouseOver = () => {
  if (esistenteRegord) {
    this.setState ({buttonText: 'Remove'});
  }
};
const mouseOut = () => this.setState ({buttonText: buttonText ()});

Ora quando si passa il mouse sopra il pulsante, cambierà in "Rimuovi" se esiste un record (e altrimenti rimane lo stesso). Quando tocchi il mouse, tornerà a dire "Disponibile". Così carino, così funzionale!

Dimostrazione del mouse sulla funzionalità dei pulsanti

Sono stato sorpreso da quanto pensiero e sforzo hanno dovuto investire in qualcosa di relativamente semplice. Ottenere i pulsanti per avere il colore giusto, avere il testo giusto e fare le cose giuste è più complesso di quanto possa sembrare. In effetti, ho mostrato questi pulsanti a persone come mio marito, che si limitano a scrollare le spalle. È un dato di fatto: a nessuno piaceranno i tuoi pulsanti tanto quanto te.