REACT UI MECHANICS
React ile Admin Tool Geliştirelim — Listede Seçim
React UI Mekanikleri konusunda önceki yazı serisini içerikleri kapsayacak bir senaryo geliştirmeye karar verdim. Bu konuda bir eTicaret sitesinin yönetiminde kullanılacak bir araç tasarlamaya çalışacağız.
Not: Bu yazı daha önce yazılan bir serinin parçası olduğu için, önceki yazılara bu adresteki Admin Tool Mekanikleri başlığı altından ulaşabilirsiniz.
Bu yazıda bir listeden istenilen bazı elemanları hızlı şekilde seçmek için farklı yöntemler kullanacağız;
- Tümünü listeyi aktar.
- Tüm seçilenleri temizle.
- Seçili olanları aktar.
- Seçili olanlar haricindeki aktar.
- Listeden Drag-Drop yöntemi ile aktar.
- Listede aramaya göre filtreleme yap,
Bunun için önce bir liste elemanına ihtiyacımız var. Material UI List Bileşinini kullanıyor olacağız.
Adım 1. İlk adım buna SideMenu’de yeni bir sayfa oluşturalım.
Adım 2. Layout oluşturalım. Ekranımızı 3 parçaya bölelim
- Source Listesi
- Aksiyon Düğmeleri
- Target Listesi
Adım 3. Bu Layout içerisinde hazır bileşenleri bulup ekleyelim.
- Source Listesi (Material UI List)
- Aksiyon Düğmeleri (Button Group List)
- Target Listesi (Material UI List)
Adım 4. Bu bileşen bütünleşik bir yapıda olduğu için bunu Redux değil direk kendi içerisinde Lift State Up yöntemi uygulayalım. Bu bütünleşik bileşenin state bilgisini tutacak olan bileşen ListSelectionComp olacak. Bu Mediator/Manager gibi bu 3 alt bileşeni yönetecek.
Adım 5. Bu bileşen içerisinde neler tutacağız ve hangi aksiyonları yakalayıp bunlar ile ilgili işlemleri yapacak.
- Mevcut Source Listesini
- Mevcut Target Listesini
- Source Listesindeki Seçimi
- Düğmelere basıldığındaki Aksiyonları
Action handling mekanizmamızı yazalım ve ve Actions.js bileşenimize bu handler prop olarak geçelim…
Şimdi geldi state yapısının içerisine bir takım değerler oluşturarak bunları bileşenlere geçmeye.
- sourceList ve sourceSelects değerlerini sourceList bileşenine geçiyoruz
- handleToggleSelection fonksiyonu sourceList geçip Checkbox click handle edecek kodu geliştireceğiz.
- targetList değerinide targetList bileşenine geçiyoruz
Not: Bileşen ve state isimleri aynı olduğu için karışıklık olmasın. state bu bileşenin modelini tutan değişken isimleri. Bileşenlerdeki ise Class isimleri
Adım 5. Şimdi geldi mekanikleri kodlamaya kullanıcı düğmelere bastığında
Artık ekrandaki fonksiyonlarımız çalışıyor.. Listeden seçim yapabiliyor, bu seçimleri veya seçilmeyenleri karşıdaki listeye atabiliyoruz.
Bileşene Filtreleme Ekleyelim
Diyelim ki Ülke, Şehir, Nace Kodu gibi çok uzun listelerde seçim yapacaksınız, aradığınız elemanlara hızlı şekilde erişim yöntemlerinden birisi de filtrelemek. Bunun için SourceList üzerine bir filtre ekleyelim.
Bu yapı bizim state model yapımızda bir değişiklik yapmayacağı için Filtreleme bileşenini direk SourceList.js bileşenin içerisinde ekleyeceğim.
Aşağıdaki şekilde search/filtreleme mekanizmasını sistemimize ekleyelim.
Not: Drag-Drop mekanizması yazıyı çok fazla uzatacağı için onu bir sonraki yazıda ele almaya karar verdim.
GitHub Kod Örneği
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
