React ilə ağıllı bir açar necə yaradılır

Dizayndan üz döndərən bir veb geliştiricinin ön xəyallarını gerçəkləşdirməsinin üç düyməli hekayəsidir.

Buradakı üslubun çoxunun Boilerplate Bootstrap olduğunu əvvəlcədən bilməlisiniz. Gözəl görünür və içəriyə baxan bir məhsuldur. Beləliklə, qırılmayan bir şeyi düzəltmirik.

Bizim vəzifəmiz bir məlumat dəsti ilə işləmək üçün asanlıqla anlaşılan bir interfeys yaratmaq idi. Məlumat dəstimiz üç hissəli bir statusa malikdir - ya mövcud, ya xəstə, ya da vab. Bir dəfə ünsiyyət qurmaq üçün çox dövlət yoxdur, ancaq bunun bir səhifədə beş həftəsinə ehtiyacımız var.

Yan not: “VAB” İsveçli bir sözdür və xəstə övladınızla evdə qalacağınız mənasını verir. Həm maaşınızda, həm də boş vaxtınızda bunu etdiyiniz və ya özünüz xəstə olduğunuzun fərqi var!

Mövcud bir qeyd axtarın

İlk addımda istifadəçinin sözügedən gün üçün bir məlumat qeydinə sahib olub olmadığı göstərildi. Bildiyim hər React layihəsində olduğu kimi, bir API-dən (özümüzün) bir siyahı götürdük və üzərində təkrarladıq. API mövcud qeydlərin siyahısını qaytardığından və qeydləri olmayan günlərə məhəl qoymadığından, öz günlərimizi qurmalıyıq.

Beş həftəyə dəyər olan günləri əldə etmək üçün kodumuz:

ixrac const dateArray = (numberOfDays, startDate) => {const day = moment (startDate); const günləri = []; while (günlər. uzunluq.)

Artıq Moment.js haqqında yazmışam. İstifadə etməsəniz, lənətə gəlmiş qatara minin! Tarixlərlə işləməyi asanlaşdırır - burada day.add (1, 'days') deyə biləcəyimiz və ya həftənin anını moment (startDate) .day () ala biləcəyimiz yerlər kimi.

An obyektləri dəyişkəndir! Buna görə ümumiyyətlə diqqətli olun, amma burada əladır, çünki etiketimizi yeniləməyimiz lazımdır və bunu çox az kodla edə bilərik.

Əlavə qeyd: Amerikalılar, əlbəttə ki, şənbə gününü həftənin son günü - 6 - bazar günü isə ilk gün edəcəklər. 0. Ancaq İsveç və ya dünyanın əksəriyyəti deyil. Amerikalı olmayanların demək olar ki hamısı üçün həftə bazar ertəsi başlayır. Proqramlaşdırma çox qəribə şəkildə Amerikaya yönəldilə bilər.

Burada startDate ilə başlayan tarixlərin siyahısını hazırladığımızı və numberOfDays-a çatana və həftə sonlarını atlayana qədər davam etdiyimizi görə bilərsiniz. Üzərimizə bəzi dadlı düymələr yerləşdirə biləcəyimiz üçün qeydlər siyahımızı yaratmaq üçün bu massivi istifadə edəcəyik.

Həqiqi qeydləri əks etdirmək üçün günlər massivimizin xəritələnməsi

Artıq göstərməli olduğumuz bütün günlərə sahib olduğumuza görə (bundan sonra "dateArray" adlanacaq), bir qeydin göstərilib göstərilməməsini öyrənmək üçün API üzərindəki qeydimizi təkrarlamalıyıq. Məlumatları qeydsiz göstərmək istədiyimiz üçün bəzi doldurulmuş və boş qeydlərlə bir sıra qurmalıyıq:

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

İndi bir sıra tarixlər var, bəziləri tam, bəziləri də verilənlər bazası ilə: undefined.

Mövcud açar məntiq

Artıq o gün bir qeyd olub olmadığını görə bildiyimizə görə düyməmizə yaşıl deyərək "Mövcuddur" və ya ağ və "Əlavə et" deyə bilərik. Yenə də əsas üslub üçün Reactstrap istifadə edirəm. Düymə komponentində bir neçə gözəl boşluq, yuvarlaq künclər və s. Həm də "məlumat" və "müvəffəqiyyət" kimi şeyləri təyin edə biləcəyim lazımlı rəng parametrləri var.

Düymə mətnini qurun

ButtonText-i təyin etmək üçün bir qeydin olub olmadığını yoxlayıram:

const buttonText = () => isEmpty (this.props.data.record)? 'Əlavə et': 'Mövcuddur'

Unutmayın, düymələrimin hər bir hissəsində {date: 'some date', qeyd: {some: 'record'}} keçirəm. UserRecords'um həmin gün üçün bir qeyd tapmadısa, data.record-da heç bir şey yoxdur və "əlavə et" deyə bilərik. IsEmpty əla javascript kitabxana lodash gəlir. Qatara qayıt. Lodash Javascript-i bu qədər təmiz və işləməyi asanlaşdırır.

Düymə rənginin qurulması

SetColor funksiyamız eyni zamanda qeydin mövcudluğunu yoxlayır, lakin hansı rəngin göstəriləcəyini müəyyən etmək üçün qeydin vəziyyətini yoxlamalıdır.

const setColor = () => {if (mevcutRecord && record.status === 'mövcud') {return "Uğur"; } else if (mevcutRecord)) {return 'grey'; } else {return 'İkincisi'; }};

Bootstrap standart olaraq rahatdır. Bu standart sözləri öz rənglərimizlə əvəzlədik, ancaq standart seçimlər də yaxşıdır. Burada məlumat dəstinin mövcud olub olmadığını yoxlayırıq. Mövcud deyilsə, hələ bir qeyd varsa, xəstə və ya xəstə olmalıdır. Hər iki halda da, istifadəçi o gün artıq mövcud deyil. Beləliklə, düyməni bozlaşdırmalıyıq.

Rəngli düymələr dörd vəziyyəti göstərir.

Digər iki düymə

Heç bir qeyd olmadığı zaman "xəstə" və "vab" düymələrini gizlətmək üçün React-in super lazımlı şərti ekranını istifadə edə bilərəm. Qalan iki düymənin kodu:

{MevcutRecord && (

Düymələrimizin düzgün rənglərə sahib olduğundan əmin olmaq üçün qeydin "xəstə" və ya "blok" statusuna sahib olub olmadığını yoxlayırıq. Qeydin vəziyyəti düymə ilə uyğun gəlmirsə, rəngli olmadığından əmin oluruq ("ikinci dərəcəli" düymə rəngimiz ağdır).

const setSecondaryColor = (qeyd, status) => {if (record.status! == status) {return 'second'} if (status === 'sick') {return 'risk'} if (status === ' vab ') {qayıt' sarı '}}

Rollover ilə zövq alın

Bu nöqtədə düymələr etməli olduğum hər şeyi etdi (üstəlik bu yazıdan kənarda qoyduğum bütün API tələb məntiqi - bu düymələri istifadə edərək qeydlər yaradırıq və yeniləyirik).

Ancaq rollover effektləri olmadığı zaman bir qız düymələrindən necə xoşbəxt ola bilər? Bir gün üçün bir yazını birtəhər silməyi bacarmalıyıq. İstifadəçilərimiz X yazmaq və üzərinə vurmaq əvəzinə qeydləri silmək üçün mövcud düymələrdən birini tıklaya bilsəydilər daha yaxşı olmazdımı? Mən də düşündüm.

Available / Add düyməsinə onMouseOver və onMouseOut hadisəsini əlavə etdim:

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

İndi siçanı düymənin üstünə aparırsınızsa, bir məlumat qeydləri varsa (və əks halda dəyişməz olaraq qalır) "Sil" olaraq dəyişir. Siçanla çölə çıxdığınız zaman yenidən "Mövcud" göstərilir. Çox yaraşıqlı, çox funksional!

Düymənin funksionallığının siçan nümayişi

Nisbətən sadə bir işə nə qədər fikir və səy sərf etdiyinə təəccübləndim. Düymələri düzgün rəng, mətn və hərəkətlər etmək göründüyündən daha mürəkkəbdir. Əslində, bu düymələri ərim kimi yalnız çiyinlərini çəkən insanlara göstərdim. Həyat həqiqətidir: heç kim sizin kimi düymələrinizi bəyənməyəcək.