React kullanarak akıllı düğme oluşturma

Bu, üç düğmenin öyküsüdür ve tasarımdan kaçan bir web geliştiricisinin ön uç hayallerini nasıl gerçekleştirdiğini anlatır.

Önceden bilmeniz gerekir ki, buradaki stillerin çoğu Bootstrap’in kazan plakasıdır. İyi görünüyor ve dahili bir ürün, bu yüzden kırılmayan bir şeyi tamir etmiyoruz.

Görevimiz bir kayıtla başa çıkmak için kolay anlaşılır bir arayüz oluşturmaktı. Kayıtlarımız üç bölümden oluşuyor - ya mevcut, hasta ya da değişken. Bir keresinde iletişim kurmak için çok fazla devlet yok, ancak bir sayfada bunlara beş hafta değer veriyoruz.

Yan not: “VAB” hasta çocuğunuzla evde kalmak anlamına gelen İsveççe bir kelimedir. Bunu yapmakla, burada hem hasta olmak hem de izinli olarak hasta olmak arasında bir fark var!

Mevcut bir kaydı kontrol ediyor

İlk adım, kullanıcının söz konusu gün için bir kaydı olup olmadığını göstermekti. Bildiğim her React projesinde olduğu gibi, bir API'den (kendimizden) bir liste alıyorduk ve üzerine yazıyorduk. API, mevcut kayıtların bir listesini döndürecek ve kayıtları olmayan günleri görmezden geleceğinden, kendi günlerimizi oluşturmamız gerekir.

İşte beş haftalık güne değecek kodumuz:

export const dateArray = (numberOfDays, startDate) => {
  const day = moment (başlangıç ​​tarihi);
  const gün = [];
  while (days.length 

Daha önce Moment.js hakkında yazmıştım. Kullanmıyorsan, lanet olasıca grup kavgasına atla! Tarihlerle çalışmayı aptalca kolaylaştırır, buradaki gibi day.add (1, 'days') diyebilir veya haftanın gününü moment (startDate) .day () ile alabiliriz.

Moment nesneleri değişkendir! Genelde dikkatli olun, ancak burası harika çünkü günümüzü güncellememiz gerekiyor ve bunu çok az kodla yapabiliriz.

Yan not: Amerikalılar doğal olarak haftanın son günü - 6 - ve ilk günü Pazar - 0 yapacaklar. Ama İsveçliler ya da temel olarak dünyanın geri kalanı değil. Amerikalı olmayan hemen hemen herkes için hafta Pazartesi başlıyor. Programlama çok garip bir Amerika merkezli olabilir.

Burada, startDate ile başlayan bir tarihler listesi oluşturduğumuzu görebiliyoruz ve hafta sonlarını atlayarak sayılara ulaşana kadar devam ediyoruz. Bu listeyi kayıt listemizi oluşturmak için kullanacağız, böylece üzerine nefis düğmeler koyabiliriz.

Günümüz dizisini gerçek kayıtları yansıtacak şekilde eşleme

Artık göstermemiz gereken tüm günlere sahip olduğumuza göre (dateArray çağrısı altında), bir kaydı gösterip göstermeyeceğimizi bulmak için API'den gelen veri kümemizi değiştirmemiz gerekecek. Kayıtları olmayan tarihleri ​​görmek istediğimiz için, bazı doldurulmuş ve boş kayıtlara sahip bir dizi ayarlamalıyız:

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

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

Şimdi bazılarının tam kaydı, diğerlerinin kaydı: undefined olan bir dizi tarihimiz var.

Mevcut Düğme mantığı

Artık o günlerde bir kayıt olup olmadığını görebiliyoruz, düğmemizi yeşil gösterip “Kullanılabilir” veya beyaz ve “Ekle” olarak göstermeye şartlandırabiliriz. Yine temel stil için Reactstrap kullanıyorum. Button bileşeni bazı hoş aralıklarla ve yuvarlatılmış köşelerle birlikte gelir; bunun dışında “bilgi” ve “başarı” gibi şeylere ayarlayabileceğim kullanışlı “renk” paramları bulunur.


  {This.state.buttonText}

Düğme metnini ayarlama

ButtonText'i ayarlamak için bir kaydın olup olmadığını kontrol edeceğim:

const buttonText = () =>
  Boş (this.props.data.record)? 'Ekle': 'Uygun'

Her bir düğme bileşenime {date: 'some date' geçtiğimi, kayıt: {some: 'record'}} 'ı hatırladığımı unutmayın. UserRecords o gün için bir kayıt bulamazsa, data.record içinde hiçbir şeyimiz kalmaz ve “Add” diyebiliriz. İsEmpty mükemmel Javascript kütüphanesinden gelir. Bir kez daha, vagonda olsun. Lodash, Javascript'i daha temiz ve kullanımı kolay bir hale getirir.

Düğme rengini ayarlama

SetColor işlevimiz aynı zamanda kaydın var olup olmadığını da kontrol eder, ancak hangi rengi görüntülememiz gerektiğini görmek için kaydın durumuna bakmak zorunda kalacaktır.

const setColor = () => {
  if (existingRecord && record.status === 'mevcut') {
    'başarı' döndürmek;
  } else eğer (existingRecord)) {
    'gri' döndür;
  } Başka {
    'ikincil' döndürmek;
  }
};

Önyükleme varsayılanları varsayılandır. Bu varsayılan kelimelerin üzerine kendi renklerimizin üzerine yazdık, ancak kullanıma hazır seçenekler de güzel. Burada kaydın mevcut olup olmadığını kontrol ediyoruz. Kullanılamıyorsa ancak hâlâ bir kayıt varsa, hasta ya da vab olması gerekir, ancak her iki durumda da kullanıcı o gün artık müsait değildir, bu nedenle düğmeyi gri olarak çıkarmamız gerekir.

Renkli düğmeler dört durumu gösterir.

Diğer iki düğme

Kayıt olmadığında “hasta” ve “vab” düğmelerini gizlemek için React’in süper kullanışlı koşullu ekranını kullanabilirim. Kalan iki düğmenin kodu:

{existingRecord && (
  
           Hasta                 VAB         )}

Düğmelerimizin doğru renkleri aldığından emin olmak için, kaydın sırasıyla “hasta” veya “vab” olduğunu kontrol edeceğiz. Kaydın durumu düğmeyle eşleşmiyorsa, renkli olmadığından emin olacağız (“ikincil” düğme rengimiz beyazdır).

const setSecondaryColor = (kayıt, durum) => {
  if (record.status! == status) {return 'ikincil'}
  if (status === 'hasta') {dönüş 'tehlike'}
  if (status === 'vab') {return 'sarı'}
}

Rollover'larla süslü olmak

Bu noktada, düğmeler yapmak istediğim her şeyi yaptı (ayrıca bu gönderiden çıkardığım tüm API istek mantığı - bu düğmelerle kayıt oluşturup güncelliyoruz).

Ancak rollover etkisi olmazsa, bir kız düğmelerinden nasıl memnun olabilir? Her nasılsa bir günlüğün kaydını kaldırabilmeliyiz. Bir X yapmak ve kullanıcılarımızın bunu tıklatmak yerine, kaydı kaldırmak için mevcut düğmelerden birini tıklamaları daha iyi olmaz mıydı? Ben de öyle düşünmüştüm.

“Available” / “Add” butonuma bir onMouseOver ve onMouseOut olayları ekledim:

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

Şimdi düğmeye bastığınızda, bir kayıt varsa (ve aksi halde aynı kalırsa) “Kaldır” olarak değişir. Fareyi uzaklaştırdığınızda, “Kullanılabilir” demeye geri dönecektir. Çok güzel, çok işlevsel!

Düğme işlevselliğinin fareyle gösterilmesi

Ne kadar düşünce ve çabanın nispeten basit bir şeye girmesi gerektiğine şaşırdım. Düğmelerin doğru renk olması, doğru metne sahip olması ve doğru şeylerin yapılması göründüğünden daha karmaşıktır. Aslında, bu düğmeleri sadece omuz silken kocam gibi insanlara gösterdim. Bu bir hayat gerçeği: kimse senin düğmelerini senin kadar beğenmeyecek.