Mobil görünümdeki Popup Edit Form problemi giderildi.

This commit is contained in:
Sedat ÖZTÜRK 2026-08-19 17:58:24 +03:00
parent 6da6654ec4
commit 690da79b87
3 changed files with 25 additions and 3 deletions

View file

@ -511,6 +511,7 @@ const Grid = (props: GridProps) => {
mode,
isPopupFullScreen,
useMobileEditPopup,
baseWrapperClass: 'dx-datagrid-edit-popup',
translate,
handlers: {
onSave: () => getGridInstance()?.saveEditData(),

View file

@ -507,6 +507,7 @@ const Tree = (props: TreeProps) => {
mode,
isPopupFullScreen,
useMobileEditPopup,
baseWrapperClass: 'dx-treelist-edit-popup',
translate,
handlers: {
onSave: () => getTreeInstance()?.saveEditData(),

View file

@ -15,16 +15,27 @@ export const isMobileViewport = () =>
/** Popup'ın mobil davranış kurallarıyla açılıp açılmayacağını belirler. */
export const shouldUseMobileEditPopup = () => isMobileViewport() || isTouchLikeDevice()
/**
* Tam ekran popup'ta yükseklik verilmez; DevExtreme kendi `fullScreen` ölçümünü
* uygular. Buraya '100%' yazıldığında DevExtreme yüzdeyi pencereye değil
* popup'ın görsel container'ına (grid elemanı) göre çözüyor, içerik alanı
* yanlış yükseklikte kırpılıyordu.
*/
export const getEditPopupHeight = (useMobileEditPopup: boolean, isPopupFullScreen: boolean) =>
useMobileEditPopup && isPopupFullScreen ? '100%' : 'auto'
useMobileEditPopup && isPopupFullScreen ? undefined : 'auto'
/**
* Yüzdelik maxHeight container'a göre çözüldüğü için mobil tam ekranda hiç
* gönderilmez. Diğer durumlarda px veya `vh` kullanılır; `vh` pencereye göre
* hesaplanır ve container'dan etkilenmez.
*/
export const getEditPopupMaxHeight = (
useMobileEditPopup: boolean,
isPopupFullScreen: boolean,
configuredHeight?: number,
) => {
if (useMobileEditPopup && isPopupFullScreen) {
return '100%'
return undefined
}
return configuredHeight && configuredHeight > 0 ? configuredHeight : '90vh'
@ -92,6 +103,12 @@ type BuildEditPopupParams = {
handlers: EditPopupToolbarHandlers
/** Scheduler gibi ek sınıf gerektiren yerler için. */
mobileWrapperClass?: string
/**
* DevExtreme'in kendi wrapper sınıfı (`dx-datagrid-edit-popup`,
* `dx-treelist-edit-popup` ). `wrapperAttr` verildiğinde bileşenin varsayılan
* sınıfı eziliyor; tema kuralları kaybolmasın diye başa eklenir.
*/
baseWrapperClass?: string
}
/**
@ -106,10 +123,13 @@ export const buildEditPopupOptions = ({
translate,
handlers,
mobileWrapperClass = 'mobile-edit-popup',
baseWrapperClass,
}: BuildEditPopupParams) => ({
animation: {},
deferRendering: true,
wrapperAttr: useMobileEditPopup ? { class: mobileWrapperClass } : undefined,
wrapperAttr: useMobileEditPopup
? { class: [baseWrapperClass, mobileWrapperClass].filter(Boolean).join(' ') }
: undefined,
title: (mode === 'new' ? '✚ ' : '🖊️ ') + translate('::' + popupOptions?.title),
showTitle: popupOptions?.showTitle,
hideOnOutsideClick: popupOptions?.hideOnOutsideClick,