Kako izraditi pametni gumb pomoću React-a

Ovo je priča o tri gumba i o tome kako su joj web programeri koji se naginju od dizajna ostvarili svoje napredne snove.

Trebali biste znati prije vremena da je većina stilova ovdje Bootstrap. Izgleda dobro i proizvod koji je okrenut unutar, tako da ne popravljamo nešto što nije slomljeno.

Naš zadatak je bio stvoriti lako razumljivo sučelje za obradu zapisa. Naš zapis ima trodijelnu državu - dostupnu, bolesnu ili korisničku. Nije puno države da komuniciramo jednom, ali trebamo pet tjedana koliko ih treba na stranici.

Bočna napomena: "VAB" je švedska riječ koja se odnosi na ostanak kod kuće sa bolesnim djetetom. Postoji razlika između toga što radite na tome i što ste sami bolesni ovdje, i u plaći i u slobodnim vremenima!

Provjera postojećeg zapisa

Prvi korak je pokazao je li korisnik imao zapisnik za dotični dan. Kao i u svakom React projektu kojeg poznajem, uzimali smo popis od API-ja (vlastitog) i ponavljali ga. Budući da će API vratiti popis postojećih zapisa i zanemariti dane bez zapisa, morat ćemo postaviti vlastiti niz dana.

Evo našeg koda za dobivanje vrijednosti pet tjedana:

export const dateArray = (brojOfDays, startDate) => {
  const dan = trenutak (startDate);
  const dana = [];
  dok (dana.duljina 

Prije sam pisao o Moment.js. Ako ga ne upotrebljavate, krenite s tragom već! Rad s datumima čini jednostavno glupim, primjerice ovdje gdje možemo nazvati day.add (1, 'days') ili gdje dan u tjednu imamo trenutak (startDate) .day ().

Predmeti momenta su promjenjivi! Tako da općenito budite oprezni, ali ovdje je sjajno jer moramo ažurirati svoj dan i to možemo učiniti s vrlo malo koda.

Sporedna napomena: Amerikanci bi u subotu prirodno činili posljednji dan u tjednu - 6 -, a nedjelju prvi dan - 0. Ali ne i Šveđani, niti u osnovi ostatak svijeta. Tema gotovo svima koji nisu Amerikanci, tjedan počinje u ponedjeljak. Programiranje može biti vrlo čudno usmjereno prema Americi.

Ovdje možete vidjeti da sastavljamo popis datuma, počevši od startDate, i nastavljamo dok ne stignemo do brojaOd dana, preskačemo vikende. Upotrijebit ćemo ovaj niz za izradu našeg popisa za snimanje tako da na njega možemo staviti neke ukusne tipke.

Kartiranje naših dana kako bi odražavali stvarne zapise

Sada kada imamo sve dane koje trebamo pokazati (u nastavku nazivamo DateArray), morat ćemo petljati preko našeg skupa podataka iz API-ja da bismo utvrdili trebamo li prikazati ili ne. Budući da želimo vidjeti datume koji nemaju zapise, moramo postaviti niz s nekim ispunjenim i nekim praznim zapisima:

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

  povratak {datum, zapis: recordToReturn};
});

Sada imamo niz datuma, neki s potpunim zapisom, a drugi s zapisom: nedefinirani.

Dostupna logika gumba

Sada kada možemo vidjeti ima li zapisa tog dana ili ne, možemo uvjetovati da se naš gumb pojavi zelenim i kažemo „Dostupno“ ili bijelo i „Dodaj“. Opet koristim Reactstrap za osnovni stil. Komponenta gumba dolazi s lijepim razmacima i zaobljenim uglovima i što već, te praktičnim paragramima u boji koji mogu postaviti na stvari poput "informacije" i "uspjeh".


  {This.state.buttonText}

Postavljanje teksta gumba

Za postavljanje gumba Tekst provjerit ću ima li zapisa:

const buttonText = () =>
  isEmpty (this.props.data.record)? 'Dodaj': 'dostupno'

Ne zaboravite da prelazim {date: 'neki datum', zapis: {some: 'record'}} u svaku od komponenti gumba. Ako moj userRecords nije pronašao zapis za taj dan, nećemo imati ništa u data.record-u i možemo reći "Add". IsEmpty dolazi iz izvrsne knjižnice Javascript knjižnice. Još jednom, krenite na pojas. Lodash čini Javascript mnogo čišćim i lakšim za rad.

Postavljanje boje gumba

Naša funkcija setColor također će provjeriti postoji li zapis, ali dalje ćemo morati pregledati stanje zapisa da bismo vidjeli koju boju trebamo prikazati.

const setColor = () => {
  ako (postojećiRecord && record.status === 'dostupan') {
    uzvratiti 'uspjeh';
  } else if (postojećiRecord)) {
    povratak 'siva';
  } else {
    povratak 'sekundarno';
  }
};

Bootstrap podrazumeva ugodnost. Prepisali smo ove zadane riječi vlastitim bojama, ali su i opcije izvan okvira. Ovdje provjeravamo je li zapis dostupan. Ako nije dostupan, ali još uvijek postoji zabilješka, mora biti bolestan ili vab, ali u oba slučaja korisnik toga dana više nije dostupan, stoga ćemo morati siviti gumb.

Obojeni gumbi prikazuju četiri statusa.

Druga dva gumba

Mogu se poslužiti super zgodnim uvjetnim zaslonom Reacta da sakrijem tipke "bolesni" i "vab" kad nema zapisa. Evo koda za preostala dva gumba:

{postojećiRecord && (
  
    

Kako bi bili sigurni da naši gumbi dobivaju prave boje, samo ćemo provjeriti ima li zapis stanja "bolesno" ili "vab". Ako se status zapisa ne podudara s gumbom gumba, pobrinut ćemo se da nije obojen (naša "sekundarna" boja gumba je bijela).

const setSecondaryColor = (zapis, status) => {
  if (record.status! == status) {return 'sekundarni'}
  if (status === 'bolestan') {povratak 'opasnost'}
  if (status === 'vab') {return 'žuti'}
}

Zamišljajući rollovere

U ovom trenutku, gumbi su učinili sve što su mi trebali učiniti (plus svu logiku zahtjeva API-a koju izostavljam iz ovog posta - stvaramo i ažuriramo zapise s tim tipkama).

Ali kako djevojka može biti zadovoljna svojim gumbima ako nema efekata prevrtanja? Moramo biti u mogućnosti nekako ukloniti zapis na jedan dan. Umjesto da napravimo X i da naši korisnici kliknu to, zar ne bi bilo bolje kada bi mogli kliknuti jedan od postojećih gumba da uklone zapis? I mislio sam.

Na gumb "Dostupno" / "Dodaj" dodao sam događaje onMouseOver i onMouseOut:

const mouseOver = () => {
  ako (postojećiRecord) {
    this.setState ({buttonText: 'Remove'});
  }
};
const mouseOut = () => this.setState ({buttonText: buttonText ()});

Sada kada mišem prebacite tipku, promijenit će se u "Ukloni" ako postoji zapis (i inače ostane isti). Kad miš iziđete, vratit će se kazivanju "Dostupno". Tako lijepo, tako funkcionalno!

Demonstracija demonstracije funkcionalnosti gumba

Iznenadilo me koliko misli i truda mora ući u nešto relativno jednostavno. Dobivanje gumba ispravne boje, odgovarajućeg teksta i ispravnih stvari složenije je nego što se možda čini. Ustvari, gumbe sam pokazala ljudima poput mog muža koji samo slegnu ramenima. To je činjenica iz života: nitko se neće svidjeti vašim gumbima kao vi.