Mobil görünümdeki Popup Edit Form problemi giderildi.
This commit is contained in:
parent
6da6654ec4
commit
690da79b87
3 changed files with 25 additions and 3 deletions
|
|
@ -511,6 +511,7 @@ const Grid = (props: GridProps) => {
|
|||
mode,
|
||||
isPopupFullScreen,
|
||||
useMobileEditPopup,
|
||||
baseWrapperClass: 'dx-datagrid-edit-popup',
|
||||
translate,
|
||||
handlers: {
|
||||
onSave: () => getGridInstance()?.saveEditData(),
|
||||
|
|
|
|||
|
|
@ -507,6 +507,7 @@ const Tree = (props: TreeProps) => {
|
|||
mode,
|
||||
isPopupFullScreen,
|
||||
useMobileEditPopup,
|
||||
baseWrapperClass: 'dx-treelist-edit-popup',
|
||||
translate,
|
||||
handlers: {
|
||||
onSave: () => getTreeInstance()?.saveEditData(),
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue