javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 17:42:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into sp/sync-feature-7.1-with-main

Browse Source
This commit is contained in:
Sean Perkins
2023-06-01 12:10:45 -04:00
parent 209880622a d87e692c6c
commit 66d959f5bf
397 changed files with 1509 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/react/src/components/IonModal.tsx
View File

@ -5,5 +5,6 @@ import { createInlineOverlayComponent } from './createInlineOverlayComponent';
export const IonModal = /*@__PURE__*/ createInlineOverlayComponent<JSX.IonModal, HTMLIonModalElement>(
'ion-modal',
defineCustomElement
defineCustomElement,
true
);

25
packages/react/src/components/createInlineOverlayComponent.tsx
View File

@ -29,7 +29,8 @@ interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<Elem
export const createInlineOverlayComponent = <PropType, ElementType>(
tagName: string,
defineCustomElement?: () => void
defineCustomElement?: () => void,
hasDelegateHost?: boolean
) => {
if (defineCustomElement) {
defineCustomElement();
@ -116,6 +117,18 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
style,
};
/**
* Some overlays need `.ion-page` so content
* takes up the full size of the parent overlay.
*/
const getWrapperClasses = () => {
if (hasDelegateHost) {
return `${DELEGATE_HOST} ion-page`;
}
return DELEGATE_HOST;
};
return createElement(
'template',
{},
@ -132,14 +145,8 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
? createElement(
'div',
{
id: 'ion-react-wrapper',
ref: this.wrapperRef,
className: 'ion-delegate-host',
style: {
display: 'flex',
flexDirection: 'column',
height: '100%',
},
className: getWrapperClasses(),
},
children
)
@ -194,3 +201,5 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
};
return createForwardRef<PropType, ElementType>(ReactComponent, displayName);
};
const DELEGATE_HOST = 'ion-delegate-host';