Kuidas nutikat nuppu Reaxi abil üles ehitada

See on lugu kolmest nupust ja sellest, kuidas disainist eemale kalduv veebiarendaja tegi oma esiotsa unistused teoks.

Te peaksite juba ette teadma, et enamus siinsetest stiilidest on boileri Bootstrap. See näeb hea välja ja on sisemise tootega, nii et me ei paranda midagi, mis pole katki.

Meie ülesandeks oli luua hõlpsasti mõistetav liides, et toimida dokumentidega. Meie salvestusel on kolmeosaline olek - kas saadaval, haige või vab. Pole vaja palju kordi suhelda, kuid meil on vaja neid lehel viis nädalat väärt.

Külgmärkus: “VAB” on rootsikeelne sõna, mis viitab teie haige lapsega koju jäämisele. Nii palga kui ka puhkuse ajal on siin nii tegemise kui ka iseenda haigeks jäämise erinevus!

Olemasoleva kirje kontrollimine

Esimene samm oli näidata, kas kasutajal oli kõnealuse päeva rekord või mitte. Nagu igas teadsin Reacti projektis, võtsime me API-st (meie enda) nimekirja ja iteerisime seda. Kuna API tagastab olemasolevate kirjete loendi ja ignoreerib kirjeteta päevi, peame seadistama oma päevade massiivi.

Siin on meie kood viie nädala väärtuste päevade saamiseks:

eksport const dateArray = (numberOfDays, alguskuupäev) => {
  const päev = hetk (alguskuupäev);
  konstantsed päevad = [];
  kuigi (päevades.pikkus 

Ma olen Moment.js-st varem kirjutanud. Kui te ei kasuta seda, astuge juba pimedasse vagunisse! See muudab kuupäevadega töötamise lolliks, näiteks siin, kus saame helistada day.add (1, 'Days') või kus saame nädalapäeva hetkega (startDate) .day ().

Hetkeobjektid on muutlikud! Seega olge üldiselt ettevaatlik, kuid siin on tore, sest peame oma päeva värskendama ja saame seda teha väga väikese koodiga.

Külgmärkus: ameeriklased muudaksid laupäeva loomulikult nädala viimaseks päevaks - 6 ja pühapäevaks esimese päeva - 0. Kuid mitte rootslased ega põhimõtteliselt muu maailm. Peaaegu kõigile, kes pole ameeriklased, algab nädal esmaspäeval. Programmeerimine võib olla väga kummaliselt Ameerika-keskne.

Siin näete, et koostame kuupäevade loendi, alustades alguskuupäevast, ja jätkame, kuni jõuame nädalavahetuste vahele saabumiseni numberOfDays. Kasutame seda massiivi oma salvestusloendi koostamiseks, et saaksime sellele mõned nami nupud panna.

Meie päevade massiivi kaardistamine tegelike andmete kajastamiseks

Nüüd, kui meil on käes kõik päevad, mida peame näitama (allpool nimetame dateArray), peame API-st oma andmestiku üle minema, et teada saada, kas peaksime rekordit näitama või mitte. Kuna me tahame näha kuupäevi, millel puuduvad kirjed, peame üles seadma massiivi koos mõne täidetud ja mõne tühja kirjega:

const userRecords = dateArray (50, startDay) .map (kuupäev => {
  const recordToReturn = data.find (rekord =>
    rekord.kuupäev === kuupäev
  );

  return {kuupäev, kirje: recordToReturn};
});

Nüüd on meil hulgaliselt kuupäevi, mõned täieliku ja teised rekordilised: määratlemata.

Saadaoleva nupu loogika

Nüüd, kui me näeme, kas sellel päeval on rekordit või mitte, saame oma nupu tingimuseks näidata rohelist värvi ja öelda "Saadaval" või valge ja "Lisa". Taas kasutan põhiliseks kujundamiseks Reactstrapi. Nupukomponendil on mõningad kenad vahed ja ümarad nurgad ning nohik, lisaks käepärased “värvilised” parameetrid, mida saan seada näiteks “info” ja “edu” alla.


  {this.state.buttonText}

Nupu teksti seadistamine

NupuText seadmiseks kontrollin, kas rekord on olemas:

const buttonText = () =>
  isEmpty (this.props.data.record)? 'Lisa': 'Saadaval'

Pidage meeles, et ma kannan igasse minu nupukomponenti {date: 'some date', record: {some: 'record'}}. Kui minu kasutajaRecords ei leidnud selle päeva ülestähendust, pole meil andmeid.rekordis midagi ja võime öelda “Lisa”. IsEmpty pärineb suurepärasest Javascripti teegi lodashist. Asuge taas kord vagunisse. Lodash muudab Javascripti nii puhtamaks ja hõlpsamaks töötamiseks.

Nupu värvi määramine

Meie funktsioon setColor kontrollib ka kirje olemasolu, kuid see peab täiendavalt vaatama kirje olekut, et näha, millist värvi me kuvama peame.

const setColor = () => {
  if (olemasolevRecord && record.status === 'saadaval') {
    tagastama 'edu';
  } else if (olemasolevRecord)) {
    tagasi 'hall';
  } veel {
    naasta 'teisene';
  }
};

Bootstrap vähendab meeldivust. Oleme need vaikimisi sõnad oma värviga üle kirjutanud, kuid toredad on ka kastivälised valikud. Siin kontrollime, kas salvestus on saadaval. Kui see pole saadaval, kuid salvestus on endiselt olemas, peab ta olema haige või vab, kuid mõlemal juhul pole kasutaja sellel päeval enam saadaval, nii et peame nupu välja hallitama.

Värvilised nupud näitavad nelja olekut.

Kaks muud nuppu

Ma saan kasutada Reaketi ülilihtsat tingimuslikku kuva, et peita nupud “haige” ja “vab”, kui salvestust pole. Siin on ülejäänud kahe nupu kood:

{olemasolevRecord && (
  
           Haige                 VAB        
)}

Veendumaks, et meie nupud saavad õigeid värve, kontrollime lihtsalt, kas salvestus on vastavalt „haige“ või „vab“. Kui kirje olek ei vasta nupu omale, siis veenduge, et see poleks värvitud (meie teisese nupu värv on valge).

const setSecondaryColor = (kirje, olek) => {
  if (record.status! == olek) {tagasta 'teisene'}
  if (status === 'haige') {return 'oht'}
  if (status === 'vab') {return 'yellow'}
}

Üleminekuga väljamõeldis

Sel hetkel tegid nupud kõik, mida ma nende tegemiseks vajasin (pluss kogu API päringu loogika, mille ma sellest postitusest välja jätan - loome ja värskendame nende nuppudega kirjeid).

Kuid kuidas saab tüdruk oma nuppudega rahule jääda, kui ümbermineku efekte pole? Peame suutma ühe päeva kirje kuidagi eemaldada. Selle asemel, et teha X ja lasta meie kasutajatel sellel klõpsata, kas poleks parem, kui nad saaks kirje eemaldamiseks klõpsata mõnel olemasoleval nupul? Ma arvasin nii.

Lisasin nupule Saadaval / Lisa "onMouseOver ja onMouseOut sündmused:

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

Kui te nupu üle hiirenupuga liigutate, muutub see kirje olemasolu korral "Eemalda" (ja muidu jääb samaks). Kui hiirt välja viite, naaseb see sõnaga „Saadaval”. Nii ilus, nii funktsionaalne!

Nuppude funktsionaalsuse tutvustamine hiirekursoriga

Mind üllatas, kui palju mõttetööd ja vaeva tuli minna millegi suhteliselt lihtsa poole. Nuppude õige värvi, õige teksti ja õigete toimingute saamine on keerukam, kui võib tunduda. Tegelikult olen neid nuppe näidanud inimestele, nagu mu mees, kes lihtsalt kehitavad õlgu. See on tõsiasi: keegi ei armasta teie nuppe nii palju kui teie.