my-react-base v2.2.2

RS Date Picker

Roketsan bünyesinde geliştirilecek React tabanlı ön yüz projelerinde kullanılmak üzere tarih ve saat seçimini sağlayabilmek için yazılmış olan DatePicker kütüphanesidir. Bu kütüphane takvimden tarih, tarih-saat, saat, yıl, ay-yıl ve ay seçimlerinin yapılmasını sağlayan parametrik bir alt yapı ile yazılmıştır. Kütüphane de toplamda 36 parametre bulunmaktadır ancak bu parametrelerden sadece bir tanesi zorunlu olup diğerleri opsiyoneldir. Zorunlu olan parametre onchange fonksiyonudur. Aşağıdaki kod parçasında da görüldüğü üzere sadece onchange fonksiyon parametresiyle component çağrıldığında DatePicker en yalın haliyle çalışacaktır.

<RsDatePicker 
  onchange={onchange} />

Parametreler

onchange

• Tip: Fonksiyon
• Zorunluluk: Zorunlu
• Amacı ve kullanımı: Projeye eklenen date picker üzerinden veri değiştirildiğinde bu fonksiyon çalışır. Date picker component'ının çağırıldığı dosyada bu fonksiyon tanımlanmalıdır. Date picker component'ı tekli veya ikili tarih seçimine imkan sağlamaktadır. Eğer date picker tekli tarih seçimi için kullanılıyorsa aşağıdaki gibi bir kullanım değiştirilmiş olan yeni tarihi almak kullanılabilir.

const onchange = (date: object) => {<br/>
   var dt = date  as Date|null;<br/>
   setStartDate(dt);<br/>
};

Eğer date picker ikili tarih seçimi için kullanılıyorsa aşağıdaki gibi bir kullanım değiştirilmiş olan yeni tarihi almak kullanılabilir.

const onchange = (date: object) => {<br/>
  var drange = date as [Date | null, Date | null];
  if (drange != null) {
     setStartDate(drange[0]!);
     setEndDate(drange[1]);
  }
 };

Bu iki kullanım arasındaki fark ise seçim sonucunda gelen date objesinin birinde sadece tarih diğerinde ise tarih arrayi gelmesidir.

selected & endDate

• Tip: Date
• Zorunluluk: Zorunlu Değil
• Amacı ve kullanımı: Bu iki parametre date picker component'ı oluşturulurken atanan ilk değerler için kullanılır. Eğer component tekli olarak kullanılıyorsa sadece selected parametresinin component ilk değeri için atılması yeterlidir. Ancak component ikili tarih seçimi olarak kullanılıyorsa başlangıç değeri için selected, bitiş değeri için ise endDate parametresi ilk değerler için yeterlidir.

showIcon

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: true
• Amacı ve kullanımı: Bu parametre ile input alanında gelen takvim ikonunun gelip gelmeme durumu ayarlanır.

locale

• Tip: Locale
• Zorunluluk: Zorunlu Değil
• Default: tr
• Amacı ve kullanımı: Takvimin dilini belirlemek için kullanılan alandır. Desteklenen diller: Türkçe(tr), İngilizce(enGB), İspanyolca(es), Azerice(az), Arapça(ar), Fransızca(fr), Rusça(ru). Dil parametresini component'a göndermek için çağırıldığı dosya içerisine date-fns kütüphanesi eklenmelidir. Aşağıdaki kod örnek olarak gösterilebilir.

import { tr, enGB, es, az, ar, ru,fr } from "date-fns/esm/locale";

iconColor

• Tip: string
• Zorunluluk: Zorunlu Değil
• Default: black
• Amacı ve kullanımı: Input alanında yer alan ikonun renginin değiştirilmesi için kullanılır. Burada css te kullanılan string isimler kullanılabilceği gibi renklerin HEX kodları da kullanılabilir.

onCalendarClose

• Tip: Fonksiyon
• Zorunluluk: Zorunlu Değil
• Amacı ve kullanımı: Bu parametre ile tanımlanan fonksiyon kullanılarak takvim kapandıktan sonraki işlemler yapılabilir.

onCalendarOpen

• Tip: Fonksiyon
• Zorunluluk: Zorunlu Değil
• Amacı ve kullanımı: Bu parametre ile tanımlanan fonksiyon kullanılarak takvim açıldığında yapılması istenen işlemler yapılabilir.

dateFormat

• Tip: string
• Zorunluluk: Zorunlu Değil
• Default: "dd/MM/yyyy"
• Amacı ve kullanımı: Takvim den tarih seçimi yapıldıktan sonra input alanında görüntülenecek tarih formatının ayarlandığı parametredir.

isClearable

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: true
• Amacı ve kullanımı: Input alanının dolu olması durumunda temizleme için kullanılan 'x' butonunun olup olmamasına karar vermek için kullanılır.

infoText

• Tip: string
• Zorunluluk: Zorunlu Değil
• Amacı ve kullanımı: Takvim seçimi açıldığında takvimin altında bilgilendirme mesajı göstermek için kullanılır.

closeOnScroll

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı: Takvim açık olduğunda sayfada scrool yapıldığında takvimi kapatmak için kullanılır.

showMonthYearPicker

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı: Takvim seçiminde yalnızca ay ve yıl seçimi için kullanılır.

showFullMonthYearPicker

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı: Takvim seçiminde showMonthYearPicker parametresinde olduğu gibi yalnızca ay ve yıl seçimi için kullanılır. Aralarında tek fark takvim açıldığında bu parametre ile ay isimleri tam olarak gösterilir.

showMonthDropdown

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı:Takvim açıldığında header kısmında ay seçilmesine olanak sağlayan bir dropdown yapısının eklenmesi için kullanılır.

useShortMonthInDropdown

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı:Takvim açıldığında showMonthDropdown parametresinde olduğu gibi header kısmında ay seçilmesine olanak sağlayan bir dropdown yapısının eklenmesi için kullanılır. Aralarında tek fark ise açılan dropdown da ay isimlerinin kısa hallerinin gösterilmesidir.

showYearDropdown

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı:Takvim açıldığında header kısmında yıl seçilmesine olanak sağlayan bir dropdown yapısının eklenmesi için kullanılır.

monthsShown

• Tip: number
• Zorunluluk: Zorunlu Değil
• Default: 1
• Amacı ve kullanımı:Takvimin göstermesi gereken ay sayısı için kullanılmaktadır. Örneğin parametre 2 olarak atanırsa mevcuttaki ve bir sonraki ay otomatik olarak açılan takvimde gösterilir.

label

• Tip: string
• Zorunluluk: Zorunlu Değil
• Amacı ve kullanımı:Input alanında görüntülenecek olan label'ın atanması için kullanılır.

showYearPicker

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı:Takvim üzerinden sadece yıl seçmek için kullanılır.

showTimeSelect

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı:Takvim üzerinden tarih ve saatin beraber seçilmesi için kullanılır.

timeIntervals

• Tip: number
• Zorunluluk: Zorunlu Değil
• Default: 30
• Amacı ve kullanımı:Takvimde açılan saat seçimi alanında saat gösteriminin kaçar dakika olması gerektiğini belirleyen alandır. Örneğin parametre 15 olarak atandığında seçim alanında saatler 15 dakikalık bir liste ile gelecektir(08:00-08:15-08:30-08:45-09:00 ...).

showTimeSelectOnly

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı:Takvimde sadece saat seçimini sağlamak amacıyla kullanılır.

maxDate

• Tip: Date
• Zorunluluk: Zorunlu Değil
• Amacı ve kullanımı:Takvimde tarih seçilirken seçim için seçilebilecek en büyük tarihin belirlenmesi sağlamak amacıyla kullanılır. Bu parametre atandığında parametreye atanan değerden büyük değerler seçilemez hale gelecektir.

minDate

• Tip: Date
• Zorunluluk: Zorunlu Değil
• Amacı ve kullanımı:Takvimde tarih seçilirken seçim için seçilebilecek en küçük tarihin belirlenmesi sağlamak amacıyla kullanılır. Bu parametre atandığında parametreye atanan değerden küçük değerler seçilemez hale gelecektir.

selectsRange

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı:Takvimde başlangıç ve bitiş tarihinin seçilmesini sağlamak için kullanılır. Bu parametre ile belirli bir tarih aralığı seçilebilir.

showWeekNumbers

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı:Takvimde haftaların yanında yılın kaçıncı haftası olduğunu göstermek için kullanılır.

shouldCloseOnSelect

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: true
• Amacı ve kullanımı:Takvimde bir değer seçildiği anda takvimin kapanıp kapanmamasını kontrol etmek için kullanılır.

excludeDates

• Tip: Date[]
• Zorunluluk: Zorunlu Değil
• Amacı ve kullanımı:Açılan takvimde belirlenen tarihlerin disable olarak gelmesini sağlamak için kullanılır.

getOnlyWeekDays

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı:Açılan takvimde sadece haftaiçi günlerinin seçimini sağlamak için kullanılır.

maxTime

• Tip: Date
• Zorunluluk: Zorunlu Değil
• Amacı ve kullanımı:Takvimde saat seçilirken seçim için seçilebilecek en büyük saatin belirlenmesi sağlamak amacıyla kullanılır. Bu parametre atandığında parametreye atanan değerden büyük değerler seçilemez hale gelecektir.

minTime

• Tip: Date
• Zorunluluk: Zorunlu Değil
• Amacı ve kullanımı:Takvimde saat seçilirken seçim için seçilebilecek en küçük saatin belirlenmesi sağlamak amacıyla kullanılır. Bu parametre atandığında parametreye atanan değerden küçük değerler seçilemez hale gelecektir.

todayButton

• Tip: string
• Zorunluluk: Zorunlu Değil
• Amacı ve kullanımı:Açılan takvim penceresinin alt kısmında bugünğ seçmek için buton çıkmasını sağlamak için kullanılır. Bu alanda atanan veri buton içerisindeki metin olarak takvime yansımaktadır.

withPortal

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı:Input alanına tıklandığı zaman takvimin sayfa tamamında büyük bir modal şeklinde açılmasını sağlamak amacıyla kullanılır.

readOnly

• Tip: boolean
• Zorunluluk: Zorunlu Değil
• Default: false
• Amacı ve kullanımı:Input alanına tıklandığı zaman takvimin disable olmasını sağlamak amacıyla kullanılır. Bu parametre ile takvim açılması ve input metninin güncellenmesi engellenmiş olur.

timeCaption

• Tip: string
• Zorunluluk: Zorunlu Değil
• Default: "Saat"
• Amacı ve kullanımı:Saat seçiminde açılan takvimdeki saat alanının başlığını belirlemek için kullanılır.

RS Drag Drop

Roketsan içinde geliştirilecek olan ön yüz projelerinde sürükle-bırak yönetimi ile dosya yüklenemsini sağlayan bileşendir.

Kullanacağınız uygulamanıza bileşeni import ettiğinizde

'import semantic-ui-css/semantic.min.css'

import edilmesi gerekmektedir. Aksi takdirde bileşende yer alan ikonlar görünmeyecektir.