Komponentit liikkeelle! Osa 3

Noniin rakkaat pullukat ja pallukat! Viikkoja vierähti ja yksi taisikin jäädä välistä, mutta ei anneta sen haitata – tämä on kestävyyslaji, ei voimalaji.

Lupasin viimeksi johdatella teitä lukijoita valaistuksen äärelle: mitä voimme saavuttaa aikaisemmin opituilla taidoilla? Rakennetaan tällä kertaa esimerkin kautta ihan oikea komponentti – jonka näette tässä! Tadaa!

Kuinka koodataan

Tämänkertaisessa koodiesimerkissämmehän ei ole konsepteissa mitään uutta (koska olen onnistuneesti iskostanut mm. react-posen perusperiaatteet sekä transitiot sinulle viime kerroilla!) Katsotaanpa miten tämä monissa lomakkeissa käytetty toggle-komponentti oikein toimii.

<ToggleSwitch 
  onClick={() => setToggled(!toggled)} 
  initialPose="init" 
  pose={isToggled ? "toggled" : "init"}
>
  <Toggle>
    <Switch />
  </Toggle>
</ToggleSwitch>

Kuten aiemminkin, toggletamme komponenttimme tilaa. Tilan perusteella taas annamme posen, joka määrittää mihin asiat asettuvat. Tässä esimerkissä näemme, kuinka react-pose käsittelee lapsiaan: ilman eksplisiittistä mainintaa, react-pose valuttaa oletuksena posensa myös lapsilleen – jos ne ovat posekomponentteja. Näin vältämme posen määrittelemisen jokaiselle komponentille erikseen ja selviämme vain yhdellä määrittelyllä ja koodimme on puhtoisen puhtoista!

Esimerkissäni pose vaihtaa kahden komponentin ulkonäköä: <Toggle>-komponentin taustaväri vaihtuu valkoisen ja vihreän välillä, <Switch />-komponentin pallo taas liikkuu vasemman ja oikean laidan välillä. Katsotaan, miten tämä on saatu aikaan:

const Switch = posed(SwitchStyle)({
  init: {
    left: 0,
  },
  toggled: {
    left: `calc(100% - ${SWITCH_WIDTH}px)`,
    transition: {
      ease: "easeOut",
      duration: 250
    }
  }
})

Olen määritellyt erikseen SWITCH_WIDTH-muuttujan, joka antaa elementille sen leveyden. Näin voimme laskea helposti paikan, minne elementin pitää liikkua toggled-posessa (ilman vähennystä elementti liikkuisi <Toggle>-elementin rajojen ulkopuolelle). Voimme suorittaa laskutoimituksen kätevästi CSS:n calc-funktiolla – joka muuten antaa vähentää prosenteista pikseleitä 🙂

const Toggle = posed(ToggleStyle)({
  init: {
    background: "#FFFAFF",
  },
  toggled: {
    background: "#ADFC92"
  }
})

<Toggle>-komponentin posenmääritys taas on yksinkertaisempaakin yksinkertaisempi – vaihdetaan vain taustaväriä. Tässä on tärkeää huomioida se, että react-pose haluaa värit määriteltynä mielellään heksoina.

Kas niin! Olemme onnistuneesti rakentaneet ikioman toggle-komponenttimme. Ja vältimme samassa rytäkässä jonkin ulkoisen kirjaston käyttämisen. Hyvä me!

Ensi kertaan

Aion syventää yhteistä osaamistamme animaatioiden ja react-posen saralla myös jatkossakin – meillä kun on vielä paljon hyvää asiaa opeteltavaksi. Epistolasta löytyy esimerkiksi keyframe-animaatiot, monimutkaisemmat animaatiosekvenssit ja useampien asioiden animoiminen joko putkeen tai yhtä aikaa.

Taklaillaan noita yhdessä tulevissa osissa 🙂

ps. Klikkaa tästä, jos haluat käydä kuikuilemassa esimerkkini lähdekoodia!