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

feat(react): add stronger typing for useIonModal and useIonPopover

Browse Source 
Co-authored-by: aeharding <aeharding@users.noreply.github.com>
This commit is contained in:
Liam DeBeasi
2024-03-13 15:54:06 -04:00
parent 7821b7899d
commit c2918e7324
3 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/react/src/hooks/useIonModal.ts
View File

@ -8,14 +8,18 @@ import type { ReactComponentOrElement } from '../models/ReactComponentOrElement'
import type { HookOverlayOptions } from './HookOverlayOptions';
import { useOverlay } from './useOverlay';
// TODO(FW-2959): types
/**
* A hook for presenting/dismissing an IonModal component
* @param component The component that the modal will show. Can be a React Component, a functional component, or a JSX Element
* @param componentProps The props that will be passed to the component, if required
* @returns Returns the present and dismiss methods in an array
*/
export function useIonModal(component: JSX.Element, componentProps?: any): UseIonModalResult;
export function useIonModal<P extends undefined>(component: React.ComponentClass<P> | React.FC<P>): UseIonModalResult;
export function useIonModal<P extends Record<string, never>>(
component: React.ComponentClass<P> | React.FC<P>
): UseIonModalResult;
export function useIonModal<P>(component: React.ComponentClass<P> | React.FC<P>, componentProps: P): UseIonModalResult;
export function useIonModal(component: ReactComponentOrElement, componentProps?: any): UseIonModalResult {
const controller = useOverlay<ModalOptions, HTMLIonModalElement>(
'IonModal',

13
packages/react/src/hooks/useIonPopover.ts
View File

@ -8,14 +8,23 @@ import type { ReactComponentOrElement } from '../models/ReactComponentOrElement'
import type { HookOverlayOptions } from './HookOverlayOptions';
import { useOverlay } from './useOverlay';
// TODO(FW-2959): types
/**
* A hook for presenting/dismissing an IonPicker component
* @param component The component that the popover will show. Can be a React Component, a functional component, or a JSX Element
* @param componentProps The props that will be passed to the component, if required
* @returns Returns the present and dismiss methods in an array
*/
export function useIonPopover(component: JSX.Element, componentProps?: any): UseIonPopoverResult;
export function useIonPopover<P extends undefined>(
component: React.ComponentClass<P> | React.FC<P>
): UseIonPopoverResult;
export function useIonPopover<P extends Record<string, never>>(
component: React.ComponentClass<P> | React.FC<P>
): UseIonPopoverResult;
export function useIonPopover<P>(
component: React.ComponentClass<P> | React.FC<P>,
componentProps: P
): UseIonPopoverResult;
export function useIonPopover(component: ReactComponentOrElement, componentProps?: any): UseIonPopoverResult {
const controller = useOverlay<PopoverOptions, HTMLIonPopoverElement>(
'IonPopover',

10
packages/react/test/base/src/pages/overlay-hooks/ModalHook.tsx
View File

@ -11,10 +11,10 @@ import {
import { useContext } from 'react';
const Body: React.FC<{
type: string;
count: number;
type?: string;
count?: number;
onDismiss: (data?: any, role?: string) => void;
onIncrement: () => void;
onIncrement?: () => void;
}> = ({ count, onDismiss, onIncrement, type }) => (
<IonPage>
<IonHeader>
@ -24,7 +24,7 @@ const Body: React.FC<{
</IonHeader>
<IonContent>
Count in modal: {count}
<IonButton expand="block" onClick={() => onIncrement()}>
<IonButton expand="block" onClick={() => onIncrement?.()}>
Increment Count
</IonButton>
<IonButton expand="block" onClick={() => onDismiss({ test: true }, 'close')}>
@ -51,7 +51,7 @@ const ModalHook: React.FC = () => {
setCount(count + 1);
}, [count, setCount]);
const handleDismissWithComponent = useCallback((data: any, role: string) => {
const handleDismissWithComponent = useCallback((data?: any, role?: string) => {
dismissWithComponent(data, role);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);