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

fix(react,vue): backdrop for inline modal/popover overlay (#24453)

Browse Source 
Resolves #24449
This commit is contained in:
Sean Perkins
2022-01-07 13:21:20 -05:00
committed by GitHub
parent 388622f973
commit 77f8412b74
9 changed files with 65 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/react/src/components/IonActionSheet.tsx
View File

@ -3,17 +3,17 @@ import {
ActionSheetOptions as ActionSheetOptionsCore,
actionSheetController as actionSheetControllerCore,
} from '@ionic/core/components';
import { IonActionSheet as IonActionSheetCmp } from '@ionic/core/components/ion-action-sheet.js';
import { defineCustomElement } from '@ionic/core/components/ion-action-sheet.js';
import { createOverlayComponent } from './createOverlayComponent';
export interface ActionSheetButton extends Omit<ActionSheetButtonCore, 'icon'> {
icon?:
| {
ios: string;
md: string;
}
| string;
| {
ios: string;
md: string;
}
| string;
}
export interface ActionSheetOptions extends Omit<ActionSheetOptionsCore, 'buttons'> {
@ -30,4 +30,4 @@ const actionSheetController = {
export const IonActionSheet = /*@__PURE__*/ createOverlayComponent<
ActionSheetOptions,
HTMLIonActionSheetElement
>('ion-action-sheet', actionSheetController, IonActionSheetCmp);
>('ion-action-sheet', actionSheetController, defineCustomElement);

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

@ -1,9 +1,9 @@
import { JSX } from '@ionic/core/components';
import { IonModal as IonModalCmp } from '@ionic/core/components/ion-modal.js';
import { defineCustomElement } from '@ionic/core/components/ion-modal.js';
import { createInlineOverlayComponent } from './createInlineOverlayComponent'
export const IonModal = /*@__PURE__*/ createInlineOverlayComponent<
JSX.IonModal,
HTMLIonModalElement
>('ion-modal', IonModalCmp);
>('ion-modal', defineCustomElement);

4
packages/react/src/components/IonPopover.tsx
View File

@ -1,9 +1,9 @@
import { JSX } from '@ionic/core/components';
import { IonPopover as IonPopoverCmp } from '@ionic/core/components/ion-popover.js';
import { defineCustomElement } from '@ionic/core/components/ion-popover.js';
import { createInlineOverlayComponent } from './createInlineOverlayComponent'
export const IonPopover = /*@__PURE__*/ createInlineOverlayComponent<
JSX.IonPopover,
HTMLIonPopoverElement
>('ion-popover', IonPopoverCmp);
>('ion-popover', defineCustomElement);

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

@ -5,7 +5,6 @@ import {
attachProps,
camelToDashCase,
dashToPascalCase,
defineCustomElement,
isCoveredByReact,
mergeRefs,
} from './react-component-lib/utils';
@ -26,10 +25,11 @@ interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<Elem
export const createInlineOverlayComponent = <PropType, ElementType>(
tagName: string,
customElement?: any
defineCustomElement?: () => void
) => {
defineCustomElement(tagName, customElement);
if (defineCustomElement) {
defineCustomElement();
}
const displayName = dashToPascalCase(tagName);
const ReactComponent = class extends React.Component<IonicReactInternalProps<PropType>, InlineOverlayState> {
ref: React.RefObject<HTMLElement>;

8
packages/react/src/components/createOverlayComponent.tsx
View File

@ -2,7 +2,7 @@ import { OverlayEventDetail } from '@ionic/core/components';
import React from 'react';
import ReactDOM from 'react-dom';
import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './react-component-lib/utils';
import { attachProps, dashToPascalCase, setRef } from './react-component-lib/utils';
interface OverlayElement extends HTMLElement {
present: () => Promise<void>;
@ -24,9 +24,11 @@ export const createOverlayComponent = <
>(
tagName: string,
controller: { create: (options: any) => Promise<OverlayType> },
customElement?: any
defineCustomElement?: () => void
) => {
defineCustomElement(tagName, customElement);
if (defineCustomElement !== undefined) {
defineCustomElement();
}
const displayName = dashToPascalCase(tagName);
const didDismissEventName = `on${displayName}DidDismiss`;