Sådan oprettes en smart knap ved hjælp af React

Dette er en fortælling om tre knapper, og hvordan en webudvikler, der læner sig væk fra design, fik hendes frontend-drømme til at gå i opfyldelse.

Du skal vide forud at det meste af stylingen her er kedelpladen Bootstrap. Det ser godt ud, og det er et internt vendende produkt, så vi fikserer ikke noget, der ikke er ødelagt.

Vores opgave var at skabe en letforståelig grænseflade til at håndtere en post. Vores rekord har en tre-partstat - enten tilgængelig, syg eller vab. Ikke en masse stat at kommunikere én gang, men vi har brug for disse fem ugers værdi på en side.

Side note: “VAB” er et svensk ord, der refererer til at blive hjemme hos dit syge barn. Der er forskel på at gøre det og være syg selv her, både i løn og i fritid!

Kontrollerer for en eksisterende post

Det første trin viste, om brugeren havde en post for den pågældende dag eller ej. Som i hvert React-projekt, jeg kender, tog vi en liste fra en API (vores egen) og itererede over den. Da API'en returnerer en liste over eksisterende poster og ignorerer dage uden poster, er vi nødt til at opsætte vores eget antal dage.

Her er vores kode til at få fem ugers værdi af dage:

eksport const dateArray = (numberOfDays, startDate) => {
  const day = moment (startdato);
  const dage = [];
  while (dage.længde 

Jeg har skrevet om Moment.js før. Hvis du ikke bruger det, skal du allerede tage på den dyre båndvogn! Det gør arbejdet med datoer dumt let, som her, hvor vi kan kalde day.add (1, 'dage'), eller hvor vi får ugedagen med øjeblikket (startDate) .day ().

Øjeblikkeobjekter er mutable! Så vær forsigtig generelt, men her er det godt, fordi vi er nødt til at opdatere vores dag, og vi kan gøre det med meget lidt kode.

Side note: Amerikanere ville naturligvis lave lørdag til den sidste dag i ugen - 6 - og søndag den første dag - 0. Men ikke svensker eller dybest set resten af ​​verden. For næsten alle ikke amerikanske begynder ugen mandag. Programmering kan være meget underligt Amerika-centreret.

Her kan du se, at vi samler en liste over datoer, begynder med startdato, og vi fortsætter, indtil vi når antalOdDays og springer over weekender. Vi bruger denne matrix til at opbygge vores postliste, så vi kan lægge nogle lækker knapper på den.

Kortlægger vore dage for at afspejle faktiske poster

Nu hvor vi har alle de dage, vi har brug for at vise (nedenfor kalder vi dateArray), bliver vi nødt til at lukke over vores datasæt fra API'en for at finde ud af, om vi skal vise en post eller ej. Fordi vi ønsker at se datoer, der ikke har poster, skal vi oprette en matrix med nogle udfyldte og nogle tomme poster:

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

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

Nu har vi en række datoer, nogle med en fuld rekord og andre med rekord: udefineret.

Tilgængelig knaplogik

Nu hvor vi kan se, om der er en post på den dag eller ej, kan vi forudsætte, at vores knap viser grønt og siger "Tilgængelig" eller hvid og "Tilføj." Igen bruger jeg Reactstrap til grundlæggende styling. Button-komponenten leveres med nogle fine afstande og afrundede hjørner og hvad ikke, plus praktiske “farve” -parametre, som jeg kan indstille til ting som “info” og “succes”.


  {This.state.buttonText}

Indstilling af knapteksten

For at indstille knappenTekst, skal jeg kontrollere, om der er en registrering:

const buttonText = () =>
  er tom (this.props.data.record)? 'Tilføj': 'Tilgængelig'

Husk, at jeg passerer {date: 'nogle dato', post: {nogle: 'post'}} til hver af mine knapkomponenter. Hvis mine userRecords ikke fandt en post for den dag, har vi intet i data.record, og vi kan sige "Tilføj". Kom igen på båndvognen. Lodash gør Javascript så meget renere og lettere at arbejde med.

Indstilling af knapfarve

Vores setColor-funktion vil også kontrollere, om posten findes, men den skal yderligere se på postens tilstand for at se, hvilken farve vi har brug for at vise.

const setColor = () => {
  if (eksisterendeRecord && record.status === 'tilgængelig') {
    vende tilbage 'succes';
  } andet hvis (eksisterendeRecord)) {
    returnere 'grå';
  } andet {
    returnere 'sekundær';
  }
};

Bootstrap er standard for behagelighed. Vi har overskrevet disse standardord med vores egne farver, men valgmulighederne uden for boksen er også dejlige. Her kontrollerer vi, om posten er tilgængelig. Hvis det ikke er tilgængeligt, men der stadig er en post, skal den være syg eller vab, men i begge tilfælde er brugeren ikke længere tilgængelig den dag, så vi bliver nødt til at grå knappen ud.

Farvede knapper viser fire status.

De to andre knapper

Jeg kan bruge Reacts superhendige betingede skærm til at skjule de "syge" og "vab" -knapper, når der ikke er nogen record. Her er koden for de resterende to knapper:

{eksisterendeRecord && (
  
           Syg                 VAB         )}

For at sikre, at vores knapper får de rigtige farver, skal vi bare kontrollere, at posten har henholdsvis status "syg" eller "vab". Hvis postens status ikke stemmer overens med knapens, sørger vi for, at den ikke er farvet (vores "sekundære" knapfarve er hvid).

const setSecondaryColor = (post, status) => {
  if (record.status! == status) {return 'sekundær'}
  if (status === 'syg') {return 'fare'}
  if (status === 'vab') {return 'gul'}
}

Bliv fancy med rollovers

På dette tidspunkt gjorde knapperne alt, hvad jeg havde brug for dem til at gøre (plus al API-anmodningslogik, som jeg udelader fra dette indlæg - vi opretter og opdaterer poster med disse knapper).

Men hvordan kan en pige være tilfreds med sine knapper, hvis der ikke er nogen rollover-effekter? Vi skal på en eller anden måde være i stand til at fjerne en post i en dag. I stedet for at lave et X og få vores brugere til at klikke på det, ville det ikke være bedre, hvis de kunne klikke på en af ​​de eksisterende knapper for at fjerne posten? Det tænkte jeg nok.

Jeg føjede en onMouseOver og onMouseOut begivenheder til min "Tilgængelig" / "Tilføj" -knap:

const mouseOver = () => {
  if (eksisterende Optagelse) {
    this.setState ({buttonText: 'Fjern'});
  }
};
const mouseOut = () => this.setState ({buttonText: buttonText ()});

Når du nu overfører knappen, skifter den til "Fjern", hvis der findes en post (og ellers forbliver den samme). Når du holder musen ud, vil det vende tilbage til at sige "Tilgængelig." Så smuk, så funktionel!

Demonstration af musefunktion af knapfunktionalitet

Jeg blev overrasket over hvor meget tanke og kræfter, der var nødt til at gå ind på noget relativt enkelt. At få knapper til at være den rigtige farve, have den rigtige tekst og gøre de rigtige ting er mere kompliceret end det måske ser ud til. Faktisk har jeg vist disse knapper til folk som min mand, der bare trækker på skulderen. Det er en kendsgerning i livet: ingen vil lide dine knapper så meget som du gør.