Skip to main content
Version: 1.0.1

Input Örnekleri

Bu doküman, OpsGridForm ile kullanılan tüm input türlerini ve bunların en basit örneklerini sunar. Her input türü için, doğrudan kopyalayıp kendi schema tanımınıza ekleyebileceğiniz objeler verilmiştir.

Input Türleri ve Basit Örnekler​

1. Text Field (Metin Girişi)​

{
  name: "Name",
  type: FormItemTypeEnum.TEXT,
  label: "Ad",
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (any): Varsayılan değer. 
    defaultValue: "",
  • infoText (string): Bilgi metni. 
    infoText: "Bu alan zorunludur",
  • registerOptions (RegisterOptions): Validasyon kuralları. 
    registerOptions: {
      required: true, // Zorunluluk kontrolü
      maxLength: 50, // Maksimum karakter sayısı
    },
  • multiLine (boolean): Çok satırlı giriş alanı. 
    multiLine: true,
  • rows (number): Çok satırlı giriş için satır sayısı. 
    rows: 5,
  • gridSize (ResponsiveStyleValue<GridSize>): Alanın grid boyutu. 
    gridSize: { xs: 12, sm: 6 },
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !isEdit,
  • onChange ((data: any, newValue: any) => void): Değer değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

2. Number Field (Sayı Girişi)​

{
  name: "Price",
  type: FormItemTypeEnum.NUMBER,
  label: "Fiyat",
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (number): Varsayılan değer. 
    defaultValue: 0,
  • min (number): Minimum değer. 
    min: 0,
  • max (number): Maksimum değer. 
    max: 10000,
  • registerOptions (RegisterOptions): Validasyon kuralları. 
    registerOptions: {
      required: true, // Zorunluluk kontrolü
      min: 1, // Minimum değer kontrolü
      max: 10000, // Maksimum değer kontrolü
    },
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !isEdit,
  • onChange ((data: any, newValue: any) => void): Değer değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

3. Email Field​

{
  name: "Email",
  type: FormItemTypeEnum.EMAIL,
  label: "E-posta",
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (string): Varsayılan değer. 
    defaultValue: "",
  • registerOptions (RegisterOptions): Validasyon kuralları. 
    registerOptions: {
      required: true, // Zorunluluk kontrolü
      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, // E-posta format kontrolü
    },
  • gridSize (ResponsiveStyleValue<GridSize>): Alanın grid boyutu. 
    gridSize: { xs: 12, md: 6 },
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !data?.email,
  • onChange ((data: any, newValue: any) => void): Değer değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

4. Telephone Field​

{
  name: "Phone",
  type: FormItemTypeEnum.TEL,
  label: "Telefon",
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (string): Varsayılan değer. 
    defaultValue: "",
  • registerOptions (RegisterOptions): Validasyon kuralları. 
    registerOptions: {
      required: true, // Zorunluluk kontrolü
      pattern: /^[0-9]{10}$/, // Telefon format kontrolü
    },
  • placeholder (string): Giriş için varsayılan metin. 
    placeholder: "(555) 555-5555",
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !data?.phone,
  • onChange ((data: any, newValue: any) => void): Değer değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

5. Checkbox​

{
  name: "AcceptTerms",
  type: FormItemTypeEnum.CHECKBOX,
  label: "Şartları kabul ediyorum",
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (boolean): Varsayılan değer. 
    defaultValue: false,
  • registerOptions (RegisterOptions): Validasyon kuralları. 
    registerOptions: {
      required: true, // Zorunluluk kontrolü
    },
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !data?.termsAccepted,
  • onChange ((data: any, newValue: any) => void): Değer değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

6. Switch (Açma/Kapama Anahtarı)​

{
  name: "Published",
  type: FormItemTypeEnum.SWITCH,
  label: "Yayınlandı",
  defaultValue: true,
  options: [
    { label: "Evet", value: true },
    { label: "Hayır", value: false },
  ],
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (boolean): Varsayılan değer. 
    defaultValue: true,
  • options (Array<{ label: string; value: any }>): Açma/Kapama seçenekleri. 
    options: [
      { label: "Evet", value: true },
      { label: "Hayır", value: false },
    ],
  • registerOptions (RegisterOptions): Validasyon kuralları. 
    registerOptions: {
      required: true, // Zorunluluk kontrolü
    },
  • infoText (string): Ek bilgi metni. 
    infoText: "Bu alan yayın durumu içindir.",
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !isEdit,
  • onChange ((data: any, newValue: any) => void): Değer değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

7. Select (Seçim Kutusu)​

{
  name: "Category",
  type: FormItemTypeEnum.SELECT,
  label: "Kategori",
  options: [
    { label: "Seçenek 1", value: 1 },
    { label: "Seçenek 2", value: 2 },
  ],
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (any): Varsayılan değer. 
    defaultValue: 1,
  • options (Array<{ label: string; value: any }>): Seçim seçenekleri. 
    options: [
      { label: "Seçenek 1", value: 1 },
      { label: "Seçenek 2", value: 2 },
    ],
  • registerOptions (RegisterOptions): Validasyon kuralları. 
    registerOptions: {
      required: true, // Zorunluluk kontrolü
    },
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !isEdit,
  • onChange ((data: any, newValue: any) => void): Değer değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

8. AutoComplete (Otomatik Tamamlama)​

{
  name: "Tags",
  type: FormItemTypeEnum.AUTO_COMPLETE,
  label: "Etiketler",
  autoCompleteProps: {
    isMultiple: true,
    getOptions: (setLoading, setOptions) => {
      setLoading(true);
      setTimeout(() => {
        setOptions([
          { label: "Etiket 1", value: "tag1" },
          { label: "Etiket 2", value: "tag2" },
        ]);
        setLoading(false);
      }, 1000);
    },
  },
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (any): Varsayılan değer. 
    defaultValue: [],
  • autoCompleteProps (IAutoCompleteProps): Otomatik tamamlama ayarları. 
    autoCompleteProps: {
      isMultiple: true,
      getOptions: (setLoading, setOptions) => {
        setLoading(true);
        setTimeout(() => {
          setOptions([
            { label: "Etiket 1", value: "tag1" },
            { label: "Etiket 2", value: "tag2" },
          ]);
          setLoading(false);
        }, 1000);
      },
    },
  • registerOptions (RegisterOptions): Validasyon kuralları. 
    registerOptions: {
      required: true, // Zorunluluk kontrolü
    },
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !data?.tags,
  • onChange ((data: any, newValue: any) => void): Değer değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

9. Date Picker (Tarih Seçici)​

{
  name: "StartDate",
  type: FormItemTypeEnum.DATE,
  label: "Başlangıç Tarihi",
  minDate: "2023-01-01",
  maxDate: "2024-01-01",
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (string | Date): Varsayılan tarih değeri. 
    defaultValue: "2023-06-01",
  • minDate (string | Date): Minimum tarih. 
    minDate: "2023-01-01",
  • maxDate (string | Date): Maksimum tarih. 
    maxDate: "2024-01-01",
  • registerOptions (RegisterOptions): Validasyon kuralları. 
    registerOptions: {
      required: true, // Zorunluluk kontrolü
    },
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !data?.startDate,
  • onChange ((data: any, newValue: any) => void): Değer değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

10. DateTime Picker (Tarih ve Saat Seçici)​

{
  name: "EventDateTime",
  type: FormItemTypeEnum.Date_Time,
  label: "Etkinlik Tarihi ve Saati",
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (string | Date): Varsayılan tarih ve saat değeri. 
    defaultValue: "2023-06-01T10:00:00",
  • minDate (string | Date): Minimum tarih. 
    minDate: "2023-01-01",
  • maxDate (string | Date): Maksimum tarih. 
    maxDate: "2024-01-01",
  • registerOptions (RegisterOptions): Validasyon kuralları. 
    registerOptions: {
      required: true, // Zorunluluk kontrolü
    },
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !data?.eventDateTime,
  • onChange ((data: any, newValue: any) => void): Değer değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

id: ops-grid-inputs-part3 title: Input Örnekleri - Son Bölüm sidebar_label: Input Örnekleri - Son Bölüm

11. Time Input (Saat Girişi)​

{
  name: "Time",
  type: FormItemTypeEnum.TimeInput,
  label: "Saat",
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (string | Date): Varsayılan saat değeri. 
    defaultValue: "12:00",
  • registerOptions (RegisterOptions): Validasyon kuralları. 
    registerOptions: {
      required: true, // Zorunluluk kontrolü
    },
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !isEdit,
  • onChange ((data: any, newValue: any) => void): Değer değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

12. Image Upload (Görsel Yükleme)​

{
  name: "Image",
  type: FormItemTypeEnum.Image,
  label: "Görsel",
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (string): Varsayılan görsel URL. 
    defaultValue: "https://example.com/default-image.png",
  • onChange ((data: any, base64: string) => void): Görsel değişiminde çağrılan fonksiyon. 
    onChange: (data, base64) => console.log(base64),
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !isEdit,
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

13. File Input (Dosya Girişi)​

{
  name: "File",
  type: FormItemTypeEnum.FILE,
  label: "Dosya",
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (File | null): Varsayılan dosya. 
    defaultValue: null,
  • onChange ((data: any, file: File | null) => void): Dosya değişiminde çağrılan fonksiyon. 
    onChange: (data, file) => console.log(file),
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !isEdit,
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

14. Radio Button (Radyo Düğmesi)​

{
  name: "Gender",
  type: FormItemTypeEnum.RADIO,
  label: "Cinsiyet",
  options: [
    { label: "Erkek", value: "male" },
    { label: "Kadın", value: "female" },
  ],
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (any): Varsayılan değer. 
    defaultValue: "male",
  • options (Array<{ label: string; value: any }>): Radyo düğmesi seçenekleri. 
    options: [
      { label: "Erkek", value: "male" },
      { label: "Kadın", value: "female" },
    ],
  • registerOptions (RegisterOptions): Validasyon kuralları. 
    registerOptions: {
      required: true, // Zorunluluk kontrolü
    },
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !isEdit,
  • onChange ((data: any, newValue: any) => void): Değer değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

15. Multi-Language Text Field (Çoklu Dil Desteği Metin Girişi)​

{
  name: "Title",
  type: FormItemTypeEnum.LANGUAGE_TEXT,
  label: "Başlık",
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (any): Varsayılan değer. 
    defaultValue: {},
  • onChange ((data: any, newValue: any) => void): Değer değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !data?.title,
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

16. Rich Text Editor (Zengin Metin Düzenleyici)​

{
  name: "Content",
  type: FormItemTypeEnum.Editor,
  label: "İçerik",
  visibility: FormItemVisibilityEnum.Both,
}

Props Alabileceğiniz Değerler​

  • defaultValue (string): Varsayılan değer. 
    defaultValue: "",
  • onChange ((data: any, newValue: any) => void): İçerik değişiminde çağrılan fonksiyon. 
    onChange: (data, newValue) => console.log(newValue),
  • handleDisabled ((isEdit: boolean, data: any) => boolean): Alanın devre dışı bırakılma durumu. 
    handleDisabled: (isEdit, data) => !isEdit,
  • hanndleDisabledLabel ((apiData: any) => string): Devre dışı bir etiket döndüren fonksiyon. 
    hanndleDisabledLabel: (apiData) => "Devre dışı",

Genel İpuçları​

  1. Ortak Props Kullanımı:

    • Birçok input türü için geçerli olan onChange, handleDisabled, ve handleDisabledLabel gibi props'ları tekrar kullanabilirsiniz. Bu, kodunuzu daha okunabilir ve yönetilebilir hale getirir.

  2. Doğru type Değerini Kullanın:

    • Her input türü için FormItemTypeEnum değerini doğru şekilde belirleyin. Yanlış bir type değeri formun beklenmedik şekilde çalışmasına neden olabilir.

  3. Validasyon Kuralları Ekleyin:

    • Kullanıcı hatalarını önlemek için her input türüne uygun registerOptions ekleyin. Örneğin, email tipi için bir regex deseni kullanarak format doğrulaması yapabilirsiniz.

  4. gridSize ile Tasarımı Özelleştirin:

    • Input öğelerinin yerleşim düzenini özelleştirmek için gridSize değerlerini kullanabilirsiniz. Özellikle mobil cihazlar için daha iyi bir kullanıcı deneyimi sağlamak amacıyla xs, sm, ve md gibi değerleri dikkatlice ayarlayın.

Spesifik İpuçları​

Text Field İpuçları​

  • Çok Satırlı Alanlar: Eğer bir metin alanının birden fazla satır içermesi gerekiyorsa, multiLine ve rows props'larını kullanabilirsiniz. 
    multiLine: true,
    rows: 4,
  • Uzun Metinler: maxLength validasyon kuralı ile metin uzunluğunu sınırlandırabilirsiniz.

Number Field İpuçları​

  • Değer Aralıkları: Minimum ve maksimum değerleri min ve max ile belirleyin. 
    min: 0,
    max: 100,
  • Varsayılan Değerler: Kullanıcılar için anlamlı bir varsayılan değer belirleyin. 
    defaultValue: 10,

Select Field İpuçları​

  • Dinamik Seçenekler: Seçenekleri bir API çağrısından dinamik olarak doldurun. 
    options: fetchOptionsFromApi(),
  • Varsayılan Seçim: Sık kullanılan bir seçeneği varsayılan olarak belirleyin. 
    defaultValue: 1,

AutoComplete İpuçları​

  • Çoklu Seçim: isMultiple özelliği ile kullanıcıların birden fazla öğe seçmesine izin verin. 
    autoCompleteProps: {
      isMultiple: true,
    },
  • Performans Optimizasyonu: Büyük veri setleriyle çalışıyorsanız, seçenekleri sayfalayarak alın.

File & Image Input İpuçları​

  • Dosya Tipi Kısıtlaması: Kullanıcıların yalnızca belirli dosya türlerini yüklemesini sağlayın. 
    accept: ["image/png", "image/jpeg"],
  • Varsayılan Görsel: Bir input için varsayılan bir görsel URL sağlayın. 
    defaultValue: "https://example.com/default.png",

Bu ipuçları, OpsGridForm ile çalışırken daha etkili ve kullanıcı dostu bir deneyim sunmanıza yardımcı olacaktır. Daha fazla detay veya ekleme isterseniz, lütfen bana bildirin!