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, mode,
isPopupFullScreen, isPopupFullScreen,
useMobileEditPopup, useMobileEditPopup,
baseWrapperClass: 'dx-datagrid-edit-popup',
translate, translate,
handlers: { handlers: {
onSave: () => getGridInstance()?.saveEditData(), onSave: () => getGridInstance()?.saveEditData(),

View file

@ -507,6 +507,7 @@ const Tree = (props: TreeProps) => {
mode, mode,
isPopupFullScreen, isPopupFullScreen,
useMobileEditPopup, useMobileEditPopup,
baseWrapperClass: 'dx-treelist-edit-popup',
translate, translate,
handlers: { handlers: {
onSave: () => getTreeInstance()?.saveEditData(), 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. */ /** Popup'ın mobil davranış kurallarıyla açılıp açılmayacağını belirler. */
export const shouldUseMobileEditPopup = () => isMobileViewport() || isTouchLikeDevice() 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) => 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 = ( export const getEditPopupMaxHeight = (
useMobileEditPopup: boolean, useMobileEditPopup: boolean,
isPopupFullScreen: boolean, isPopupFullScreen: boolean,
configuredHeight?: number, configuredHeight?: number,
) => { ) => {
if (useMobileEditPopup && isPopupFullScreen) { if (useMobileEditPopup && isPopupFullScreen) {
return '100%' return undefined
} }
return configuredHeight && configuredHeight > 0 ? configuredHeight : '90vh' return configuredHeight && configuredHeight > 0 ? configuredHeight : '90vh'
@ -92,6 +103,12 @@ type BuildEditPopupParams = {
handlers: EditPopupToolbarHandlers handlers: EditPopupToolbarHandlers
/** Scheduler gibi ek sınıf gerektiren yerler için. */ /** Scheduler gibi ek sınıf gerektiren yerler için. */
mobileWrapperClass?: string 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, translate,
handlers, handlers,
mobileWrapperClass = 'mobile-edit-popup', mobileWrapperClass = 'mobile-edit-popup',
baseWrapperClass,
}: BuildEditPopupParams) => ({ }: BuildEditPopupParams) => ({
animation: {}, animation: {},
deferRendering: true, deferRendering: true,
wrapperAttr: useMobileEditPopup ? { class: mobileWrapperClass } : undefined, wrapperAttr: useMobileEditPopup
? { class: [baseWrapperClass, mobileWrapperClass].filter(Boolean).join(' ') }
: undefined,
title: (mode === 'new' ? '✚ ' : '🖊️ ') + translate('::' + popupOptions?.title), title: (mode === 'new' ? '✚ ' : '🖊️ ') + translate('::' + popupOptions?.title),
showTitle: popupOptions?.showTitle, showTitle: popupOptions?.showTitle,
hideOnOutsideClick: popupOptions?.hideOnOutsideClick, hideOnOutsideClick: popupOptions?.hideOnOutsideClick,