Proje: Okul B2B App · Hub: Okul B2B App — Conventions

PhotoGrid Bileşeni Yapısı

components/gallery/PhotoGrid.tsx — Galeri fotoğraflarını sürükle-bırak destekli grid görünümde gösterir.

Boyutlar

const SCREEN_WIDTH = Dimensions.get('window').width;
const GRID_PADDING = SPACING.XL;         // Grid kenar boşluğu
const GRID_GAP = SPACING.SM;             // Kartlar arası boşluk
const CARD_SIZE = (SCREEN_WIDTH - GRID_PADDING * 2 - GRID_GAP) / 2;  // 2 sütunlu
const COVER_HEIGHT = 250;                // Kapak fotoğrafı yüksekliği
const LOGO_HEIGHT = 160;                 // Logo yüksekliği (1:1 oran)

Props

interface PhotoGridProps {
  photos: GalleryPhoto[];           // Galeri fotoğrafları
  coverPhoto?: GalleryPhoto;        // Kapak fotoğrafı (ayrı gösterilir)
  pendingPhotos?: GalleryPhoto[];   // Yüklenmeyi bekleyenler (client-side)
  onDeletePhoto, onDeletePendingPhoto,
  onSetCover,                       // Kapak fotoğrafı ayarla
  onReorder,                        // Sıralama değişince callback
  onAddPhoto,                       // Yükleme başlat
  onEditPhoto, onViewPhoto,
  isLoading, canEdit, hasUploading,
  scrollViewRef                     // Sortable scroll koordinasyonu
}

Sortable Entegrasyonu

react-native-sortables Sortable.Grid ile:

• Kapak butonu ve ”+” butonu → mode="fixed" (sürüklenemez)
• Galeri fotoğrafları → mode="draggable"
• customHandle={true} ZORUNLU
• onReorder callback’i fotoğraf dizisini yeniden sıralar

Pending Photos

Yükleme henüz tamamlanmamış fotoğraflar isPending: true flag ile gösterilir. Spinner overlay ile yükleniyor göstergesi.

SimpleUploadModal

components/gallery/SimpleUploadModal.tsx — Kamera / Galeriden seç:

• iOS: ActionSheetIOS
• Android: Custom modal

Related

• galeri-yonetimi — galeri domain
• galeri-ekreni-pattern — galeri ekranı
• react-native-sortables-galeri — sortable kararı