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,
|
mode,
|
||||||
isPopupFullScreen,
|
isPopupFullScreen,
|
||||||
useMobileEditPopup,
|
useMobileEditPopup,
|
||||||
|
baseWrapperClass: 'dx-datagrid-edit-popup',
|
||||||
translate,
|
translate,
|
||||||
handlers: {
|
handlers: {
|
||||||
onSave: () => getGridInstance()?.saveEditData(),
|
onSave: () => getGridInstance()?.saveEditData(),
|
||||||
|
|
|
||||||
|
|
@ -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(),
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue