javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +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 type { HookOverlayOptions } from './HookOverlayOptions';
import { useOverlay } from './useOverlay'; import { useOverlay } from './useOverlay';
// TODO(FW-2959): types
/** /**
* A hook for presenting/dismissing an IonModal component * 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 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 * @param componentProps The props that will be passed to the component, if required
* @returns Returns the present and dismiss methods in an array * @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 { export function useIonModal(component: ReactComponentOrElement, componentProps?: any): UseIonModalResult {
const controller = useOverlay<ModalOptions, HTMLIonModalElement>( const controller = useOverlay<ModalOptions, HTMLIonModalElement>(
'IonModal', '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 type { HookOverlayOptions } from './HookOverlayOptions';
import { useOverlay } from './useOverlay'; import { useOverlay } from './useOverlay';
// TODO(FW-2959): types
/** /**
* A hook for presenting/dismissing an IonPicker component * 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 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 * @param componentProps The props that will be passed to the component, if required
* @returns Returns the present and dismiss methods in an array * @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 { export function useIonPopover(component: ReactComponentOrElement, componentProps?: any): UseIonPopoverResult {
const controller = useOverlay<PopoverOptions, HTMLIonPopoverElement>( const controller = useOverlay<PopoverOptions, HTMLIonPopoverElement>(
'IonPopover', 'IonPopover',

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

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