From 678cc5e106ef408a47a9e545573aea7450473ad9 Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Wed, 11 Nov 2020 21:18:26 -0700 Subject: [PATCH 01/12] feat(react): add react hooks to control overlay components --- packages/react/src/components/index.ts | 9 ++ .../react/src/hooks/HookOverlayOptions.ts | 8 ++ packages/react/src/hooks/useController.ts | 81 +++++++++++++ packages/react/src/hooks/useIonActionSheet.ts | 52 +++++++++ packages/react/src/hooks/useIonAlert.ts | 52 +++++++++ packages/react/src/hooks/useIonLoading.tsx | 59 ++++++++++ packages/react/src/hooks/useIonModal.ts | 41 +++++++ packages/react/src/hooks/useIonPicker.tsx | 57 +++++++++ packages/react/src/hooks/useIonPopover.ts | 41 +++++++ packages/react/src/hooks/useIonToast.ts | 52 +++++++++ packages/react/src/hooks/useOverlay.ts | 110 ++++++++++++++++++ 11 files changed, 562 insertions(+) create mode 100644 packages/react/src/hooks/HookOverlayOptions.ts create mode 100644 packages/react/src/hooks/useController.ts create mode 100644 packages/react/src/hooks/useIonActionSheet.ts create mode 100644 packages/react/src/hooks/useIonAlert.ts create mode 100644 packages/react/src/hooks/useIonLoading.tsx create mode 100644 packages/react/src/hooks/useIonModal.ts create mode 100644 packages/react/src/hooks/useIonPicker.tsx create mode 100644 packages/react/src/hooks/useIonPopover.ts create mode 100644 packages/react/src/hooks/useIonToast.ts create mode 100644 packages/react/src/hooks/useOverlay.ts diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 4039ada7fc9..f52e3d2ea7a 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -36,6 +36,15 @@ export * from './hrefprops'; // Ionic Animations export { CreateAnimation } from './CreateAnimation'; +// Hooks +export * from '../hooks/useIonActionSheet'; +export * from '../hooks/useIonAlert'; +export * from '../hooks/useIonToast'; +export * from '../hooks/useIonModal'; +export * from '../hooks/useIonPopover'; +export * from '../hooks/useIonPicker'; +export * from '../hooks/useIonLoading'; + // Icons that are used by internal components addIcons({ 'arrow-back-sharp': arrowBackSharp, diff --git a/packages/react/src/hooks/HookOverlayOptions.ts b/packages/react/src/hooks/HookOverlayOptions.ts new file mode 100644 index 00000000000..8404de96077 --- /dev/null +++ b/packages/react/src/hooks/HookOverlayOptions.ts @@ -0,0 +1,8 @@ +import { OverlayEventDetail } from "@ionic/core"; + +export interface HookOverlayOptions { + onDidDismiss?: (event: CustomEvent) => void; + onDidPresent?: (event: CustomEvent) => void; + onWillDismiss?: (event: CustomEvent) => void; + onWillPresent?: (event: CustomEvent) => void; +} diff --git a/packages/react/src/hooks/useController.ts b/packages/react/src/hooks/useController.ts new file mode 100644 index 00000000000..35d56b649c9 --- /dev/null +++ b/packages/react/src/hooks/useController.ts @@ -0,0 +1,81 @@ +import { useMemo, useRef } from "react"; +import { attachProps } from "../components/utils"; +import { OverlayEventDetail } from "@ionic/core"; +import { HookOverlayOptions } from './HookOverlayOptions'; + +interface OverlayBase extends HTMLElement { + present: () => Promise; + dismiss: (data?: any, role?: string | undefined) => Promise; +} + +export function useController< + OptionsType, + OverlayType extends OverlayBase +>( + displayName: string, + controller: { create: (options: OptionsType) => Promise } +) { + const overlayRef = useRef(); + const didDismissEventName = useMemo( + () => `on${displayName}DidDismiss`, + [displayName] + ); + const didPresentEventName = useMemo( + () => `on${displayName}DidPresent`, + [displayName] + ); + const willDismissEventName = useMemo( + () => `on${displayName}WillDismiss`, + [displayName] + ); + const willPresentEventName = useMemo( + () => `on${displayName}WillPresent`, + [displayName] + ); + + const present = async (options: OptionsType & HookOverlayOptions) => { + if (overlayRef.current) { + return; + } + const { + onDidDismiss, + onWillDismiss, + onDidPresent, + onWillPresent, + ...rest + } = options; + + overlayRef.current = await controller.create({ + ...(rest as any), + }); + + attachProps(overlayRef.current, { + [didDismissEventName]: handleDismiss, + [didPresentEventName]: (e: CustomEvent) => + onDidPresent && onDidPresent(e), + [willDismissEventName]: (e: CustomEvent) => + onWillDismiss && onWillDismiss(e), + [willPresentEventName]: (e: CustomEvent) => + onWillPresent && onWillPresent(e), + }); + + overlayRef.current.present(); + + function handleDismiss(event: CustomEvent>) { + if (onDidDismiss) { + onDidDismiss(event); + } + overlayRef.current = undefined; + } + }; + + const dismiss = async () => { + overlayRef.current && await overlayRef.current.dismiss(); + overlayRef.current = undefined; + }; + + return { + present, + dismiss, + }; +} diff --git a/packages/react/src/hooks/useIonActionSheet.ts b/packages/react/src/hooks/useIonActionSheet.ts new file mode 100644 index 00000000000..358c11f0cba --- /dev/null +++ b/packages/react/src/hooks/useIonActionSheet.ts @@ -0,0 +1,52 @@ +import { ActionSheetOptions, actionSheetController, ActionSheetButton } from "@ionic/core"; +import { useController } from "./useController"; +import { HookOverlayOptions } from "./HookOverlayOptions"; + +/** + * A hook for presenting/dismissing an IonActionSheet component + * @returns - Returns the present and dismiss methods in an array + */ +export function useIonActionSheet(): UseIonActionSheetResult { + const controller = useController( + 'IonActionSheet', + actionSheetController + ); + + function present(buttons: ActionSheetButton[], header?: string): void; + function present(options: ActionSheetOptions & HookOverlayOptions): void; + function present(buttonsOrOptions: ActionSheetButton[] | ActionSheetOptions & HookOverlayOptions, header?: string) { + if (Array.isArray(buttonsOrOptions)) { + controller.present({ + buttons: buttonsOrOptions, + header + }); + } else { + controller.present(buttonsOrOptions); + } + } + + return [ + present, + controller.dismiss + ]; +} + +type UseIonActionSheetResult = [ + { + /** + * Presents the action sheet + * @param buttons - An array of buttons for the action sheet + * @param header - Optional - Title for the action sheet + */ + (buttons: ActionSheetButton[], header?: string | undefined): void; + /** + * Presents the action sheet + * @param options - The options to pass to the IonActionSheet + */ + (options: ActionSheetOptions & HookOverlayOptions): void; + }, + /** + * Dismisses the action sheet + */ + () => void +]; diff --git a/packages/react/src/hooks/useIonAlert.ts b/packages/react/src/hooks/useIonAlert.ts new file mode 100644 index 00000000000..2fbfa0ff8dc --- /dev/null +++ b/packages/react/src/hooks/useIonAlert.ts @@ -0,0 +1,52 @@ +import { AlertOptions, alertController, AlertButton } from "@ionic/core"; +import { useController } from "./useController"; +import { HookOverlayOptions } from "./HookOverlayOptions"; + +/** + * A hook for presenting/dismissing an IonAlert component + * @returns - Returns the present and dismiss methods in an array + */ +export function useIonAlert(): UseIonAlertResult { + const controller = useController( + 'IonAlert', + alertController + ); + + function present(message: string, buttons?: AlertButton[]): void; + function present(options: AlertOptions & HookOverlayOptions): void; + function present(messageOrOptions: string | AlertOptions & HookOverlayOptions, buttons?: AlertButton[]) { + if (typeof messageOrOptions === 'string') { + controller.present({ + message: messageOrOptions, + buttons: buttons ?? [{ text: 'Ok' }] + }); + } else { + controller.present(messageOrOptions); + } + }; + + return [ + present, + controller.dismiss + ]; +} + +type UseIonAlertResult = [ + { + /** + * Presents the alert + * @param message - The main message to be displayed in the alert + * @param buttons - Optional - Array of buttons to be added to the alert + */ + (message: string, buttons?: AlertButton[]): void; + /** + * Presents the alert + * @param options - The options to pass to the IonAlert + */ + (options: AlertOptions & HookOverlayOptions): void; + }, + /** + * Dismisses the alert + */ + () => void +]; diff --git a/packages/react/src/hooks/useIonLoading.tsx b/packages/react/src/hooks/useIonLoading.tsx new file mode 100644 index 00000000000..09788991edc --- /dev/null +++ b/packages/react/src/hooks/useIonLoading.tsx @@ -0,0 +1,59 @@ +import { LoadingOptions, loadingController, SpinnerTypes } from "@ionic/core"; +import { useController } from "./useController"; +import { HookOverlayOptions } from "./HookOverlayOptions"; + +/** + * A hook for presenting/dismissing an IonLoading component + * @returns - Returns the present and dismiss methods in an array + */ +export function useIonLoading(): UseIonLoadingResult { + const controller = useController( + "IonLoading", + loadingController + ); + + function present( + message?: string, + duration?: number, + spinner?: SpinnerTypes + ): void; + function present(options: LoadingOptions & HookOverlayOptions): void; + function present( + messageOrOptions: string | (LoadingOptions & HookOverlayOptions) = "", + duration?: number, + spinner?: SpinnerTypes + ) { + if (typeof messageOrOptions === "string") { + controller.present({ + message: messageOrOptions, + duration, + spinner: spinner ?? "lines", + }); + } else { + controller.present(messageOrOptions); + } + } + + return [present, controller.dismiss]; +} + +type UseIonLoadingResult = [ + { + /** + * Presents the loading indicator + * @param message - Optional - Text content to display in the loading indicator, defaults to blank string + * @param duration - Optional - Number of milliseconds to wait before dismissing the loading indicator + * @param spinner - Optional - The name of the spinner to display, defaults to "lines" + */ + (message?: string, duration?: number, spinner?: SpinnerTypes): void; + /** + * Presents the loading indicator + * @param options - The options to pass to the IonLoading + */ + (options: LoadingOptions & HookOverlayOptions): void; + }, + /** + * Dismisses the loading indicator + */ + () => void +]; diff --git a/packages/react/src/hooks/useIonModal.ts b/packages/react/src/hooks/useIonModal.ts new file mode 100644 index 00000000000..ee76bdd2f8b --- /dev/null +++ b/packages/react/src/hooks/useIonModal.ts @@ -0,0 +1,41 @@ +import { ModalOptions, modalController } from "@ionic/core"; +import { useOverlay, ReactComponentOrElement } from "./useOverlay"; +import { HookOverlayOptions } from './HookOverlayOptions'; + +/** + * 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: ReactComponentOrElement, componentProps?: any): UseIonModalResult { + const controller = useOverlay( + 'IonModal', + modalController, + component, + componentProps + ); + + function present(options: Omit & HookOverlayOptions = {}) { + controller.present(options as any); + }; + + return [ + present, + controller.dismiss + ]; +} + +type UseIonModalResult = [ + { + /** + * Presents the modal + * @param options - Optional - The options to pass to the IonModal + */ + (options?: Omit & HookOverlayOptions): void; + }, + /** + * Dismisses the modal + */ + () => void +]; diff --git a/packages/react/src/hooks/useIonPicker.tsx b/packages/react/src/hooks/useIonPicker.tsx new file mode 100644 index 00000000000..eda7f84ac25 --- /dev/null +++ b/packages/react/src/hooks/useIonPicker.tsx @@ -0,0 +1,57 @@ +import { + PickerOptions, + pickerController, + PickerButton, + PickerColumn, +} from "@ionic/core"; +import { useController } from "./useController"; +import { HookOverlayOptions } from "./HookOverlayOptions"; + +/** + * A hook for presenting/dismissing an IonPicker component + * @returns - Returns the present and dismiss methods in an array + */ +export function useIonPicker(): UseIonPickerResult { + const controller = useController( + "IonPicker", + pickerController + ); + + function present(columns: PickerColumn[], buttons?: PickerButton[]): void; + function present(options: PickerOptions & HookOverlayOptions): void; + function present( + columnsOrOptions: PickerColumn[] | (PickerOptions & HookOverlayOptions), + buttons?: PickerButton[] + ) { + if (Array.isArray(columnsOrOptions)) { + controller.present({ + columns: columnsOrOptions, + buttons: buttons ?? [{ text: "Ok" }], + }); + } else { + controller.present(columnsOrOptions); + } + } + + return [present, controller.dismiss]; +} + +type UseIonPickerResult = [ + { + /** + * Presents the picker + * @param columns - Array of columns to be displayed in the picker. + * @param buttons - Optional - Array of buttons to be displayed at the top of the picker. + */ + (columns: PickerColumn[], buttons?: PickerButton[]): void; + /** + * Presents the picker + * @param options - The options to pass to the IonPicker + */ + (options: PickerOptions & HookOverlayOptions): void; + }, + /** + * Dismisses the picker + */ + () => void +]; diff --git a/packages/react/src/hooks/useIonPopover.ts b/packages/react/src/hooks/useIonPopover.ts new file mode 100644 index 00000000000..9f859cdf5bd --- /dev/null +++ b/packages/react/src/hooks/useIonPopover.ts @@ -0,0 +1,41 @@ +import { PopoverOptions, popoverController } from "@ionic/core"; +import { useOverlay } from "./useOverlay"; +import { HookOverlayOptions } from './HookOverlayOptions'; + +/** + * 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 { + const controller = useOverlay( + 'IonPopover', + popoverController, + component, + componentProps + ); + + function present(options: Omit & HookOverlayOptions = {}) { + controller.present(options as any); + }; + + return [ + present, + controller.dismiss + ]; +} + +type UseIonPopoverResult = [ + { + /** + * Presents the popover + * @param options - Optional - The options to pass to the IonPopover + */ + (options?: Omit & HookOverlayOptions): void; + }, + /** + * Dismisses the popover + */ + () => void +]; diff --git a/packages/react/src/hooks/useIonToast.ts b/packages/react/src/hooks/useIonToast.ts new file mode 100644 index 00000000000..087d2ce5269 --- /dev/null +++ b/packages/react/src/hooks/useIonToast.ts @@ -0,0 +1,52 @@ +import { ToastOptions, toastController } from "@ionic/core"; +import { useController } from "./useController"; +import { HookOverlayOptions } from "./HookOverlayOptions"; + +/** + * A hook for presenting/dismissing an IonToast component + * @returns - Returns the present and dismiss methods in an array + */ +export function useIonToast(): UseIonToastResult { + const controller = useController( + 'IonToast', + toastController + ); + + function present(message: string, duration?: number): void; + function present(options: ToastOptions & HookOverlayOptions): void; + function present(messageOrOptions: string | ToastOptions & HookOverlayOptions, duration?: number) { + if (typeof messageOrOptions === 'string') { + controller.present({ + message: messageOrOptions, + duration: duration + }); + } else { + controller.present(messageOrOptions); + } + }; + + return [ + present, + controller.dismiss + ]; +} + +type UseIonToastResult = [ + { + /** + * Presents the toast + * @param message - Message to be shown in the toast. + * @param duration - Optional - How many milliseconds to wait before hiding the toast. By default, it will show until dismissToast() is called. + */ + (message: string, duration?: number): void; + /** + * Presents the Toast + * @param options - The options to pass to the IonToast. + */ + (options: ToastOptions & HookOverlayOptions): void; + }, + /** + * Dismisses the toast + */ + () => void +]; diff --git a/packages/react/src/hooks/useOverlay.ts b/packages/react/src/hooks/useOverlay.ts new file mode 100644 index 00000000000..d07335cc5db --- /dev/null +++ b/packages/react/src/hooks/useOverlay.ts @@ -0,0 +1,110 @@ +import { useMemo, useRef, useEffect, useState } from "react"; +import { attachProps } from "../components/utils"; +import { OverlayEventDetail } from "@ionic/core"; +import ReactDOM from 'react-dom'; +import React from 'react'; +import { HookOverlayOptions } from './HookOverlayOptions'; + +export type ReactComponentOrElement = React.ComponentClass | React.FC | JSX.Element; + +interface OverlayBase extends HTMLElement { + present: () => Promise; + dismiss: (data?: any, role?: string | undefined) => Promise; +} + +export function useOverlay< + OptionsType, + OverlayType extends OverlayBase +>( + displayName: string, + controller: { create: (options: OptionsType) => Promise; }, + component: ReactComponentOrElement, + componentProps?: any +) { + const overlayRef = useRef(); + const containerElRef = useRef(); + const didDismissEventName = useMemo( + () => `on${displayName}DidDismiss`, + [displayName] + ); + const didPresentEventName = useMemo( + () => `on${displayName}DidPresent`, + [displayName] + ); + const willDismissEventName = useMemo( + () => `on${displayName}WillDismiss`, + [displayName] + ); + const willPresentEventName = useMemo( + () => `on${displayName}WillPresent`, + [displayName] + ); + const [isOpen, setIsOpen] = useState(false); + + useEffect(() => { + if (isOpen && component && containerElRef.current) { + if (React.isValidElement(component)) { + ReactDOM.render(component, containerElRef.current); + } else { + ReactDOM.render(React.createElement(component as React.ComponentClass, componentProps), containerElRef.current); + } + } + }, [component, containerElRef.current, isOpen, componentProps]); + + const present = async (options: OptionsType & HookOverlayOptions) => { + if (overlayRef.current) { + return; + } + + const { + onDidDismiss, + onWillDismiss, + onDidPresent, + onWillPresent, + ...rest + } = options; + + if (typeof document !== 'undefined') { + containerElRef.current = document.createElement('div'); + } + + overlayRef.current = await controller.create({ + ...(rest as any), + component: containerElRef.current + }); + + attachProps(overlayRef.current, { + [didDismissEventName]: handleDismiss, + [didPresentEventName]: (e: CustomEvent) => + onDidPresent && onDidPresent(e), + [willDismissEventName]: (e: CustomEvent) => + onWillDismiss && onWillDismiss(e), + [willPresentEventName]: (e: CustomEvent) => + onWillPresent && onWillPresent(e), + }); + + overlayRef.current.present(); + + setIsOpen(true); + + function handleDismiss(event: CustomEvent>) { + if (onDidDismiss) { + onDidDismiss(event); + } + overlayRef.current = undefined; + containerElRef.current = undefined; + setIsOpen(false); + } + }; + + const dismiss = async () => { + overlayRef.current && await overlayRef.current.dismiss(); + overlayRef.current = undefined; + containerElRef.current = undefined; + }; + + return { + present, + dismiss, + }; +} From 493c68624eba7cff43fc01ce190b67c39f2c628e Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Wed, 11 Nov 2020 22:07:05 -0700 Subject: [PATCH 02/12] lint fixes --- packages/react/src/hooks/HookOverlayOptions.ts | 2 +- packages/react/src/hooks/useController.ts | 8 +++++--- packages/react/src/hooks/useIonActionSheet.ts | 7 ++++--- packages/react/src/hooks/useIonAlert.ts | 7 ++++--- packages/react/src/hooks/useIonLoading.tsx | 15 ++++++++------- packages/react/src/hooks/useIonModal.ts | 13 ++++--------- packages/react/src/hooks/useIonPicker.tsx | 15 ++++++++------- packages/react/src/hooks/useIonPopover.ts | 13 ++++--------- packages/react/src/hooks/useIonToast.ts | 9 +++++---- packages/react/src/hooks/useOverlay.ts | 9 +++++---- 10 files changed, 48 insertions(+), 50 deletions(-) diff --git a/packages/react/src/hooks/HookOverlayOptions.ts b/packages/react/src/hooks/HookOverlayOptions.ts index 8404de96077..431652758c1 100644 --- a/packages/react/src/hooks/HookOverlayOptions.ts +++ b/packages/react/src/hooks/HookOverlayOptions.ts @@ -1,4 +1,4 @@ -import { OverlayEventDetail } from "@ionic/core"; +import { OverlayEventDetail } from '@ionic/core'; export interface HookOverlayOptions { onDidDismiss?: (event: CustomEvent) => void; diff --git a/packages/react/src/hooks/useController.ts b/packages/react/src/hooks/useController.ts index 35d56b649c9..59e9cb8d7bc 100644 --- a/packages/react/src/hooks/useController.ts +++ b/packages/react/src/hooks/useController.ts @@ -1,6 +1,8 @@ -import { useMemo, useRef } from "react"; -import { attachProps } from "../components/utils"; -import { OverlayEventDetail } from "@ionic/core"; +import { OverlayEventDetail } from '@ionic/core'; +import { useMemo, useRef } from 'react'; + +import { attachProps } from '../components/utils'; + import { HookOverlayOptions } from './HookOverlayOptions'; interface OverlayBase extends HTMLElement { diff --git a/packages/react/src/hooks/useIonActionSheet.ts b/packages/react/src/hooks/useIonActionSheet.ts index 358c11f0cba..18a00124e36 100644 --- a/packages/react/src/hooks/useIonActionSheet.ts +++ b/packages/react/src/hooks/useIonActionSheet.ts @@ -1,6 +1,7 @@ -import { ActionSheetOptions, actionSheetController, ActionSheetButton } from "@ionic/core"; -import { useController } from "./useController"; -import { HookOverlayOptions } from "./HookOverlayOptions"; +import { ActionSheetButton, ActionSheetOptions, actionSheetController } from '@ionic/core'; + +import { HookOverlayOptions } from './HookOverlayOptions'; +import { useController } from './useController'; /** * A hook for presenting/dismissing an IonActionSheet component diff --git a/packages/react/src/hooks/useIonAlert.ts b/packages/react/src/hooks/useIonAlert.ts index 2fbfa0ff8dc..1cf2e5da6dd 100644 --- a/packages/react/src/hooks/useIonAlert.ts +++ b/packages/react/src/hooks/useIonAlert.ts @@ -1,6 +1,7 @@ -import { AlertOptions, alertController, AlertButton } from "@ionic/core"; -import { useController } from "./useController"; -import { HookOverlayOptions } from "./HookOverlayOptions"; +import { AlertButton, AlertOptions, alertController } from '@ionic/core'; + +import { HookOverlayOptions } from './HookOverlayOptions'; +import { useController } from './useController'; /** * A hook for presenting/dismissing an IonAlert component diff --git a/packages/react/src/hooks/useIonLoading.tsx b/packages/react/src/hooks/useIonLoading.tsx index 09788991edc..5f67cba457d 100644 --- a/packages/react/src/hooks/useIonLoading.tsx +++ b/packages/react/src/hooks/useIonLoading.tsx @@ -1,6 +1,7 @@ -import { LoadingOptions, loadingController, SpinnerTypes } from "@ionic/core"; -import { useController } from "./useController"; -import { HookOverlayOptions } from "./HookOverlayOptions"; +import { LoadingOptions, SpinnerTypes, loadingController } from '@ionic/core'; + +import { HookOverlayOptions } from './HookOverlayOptions'; +import { useController } from './useController'; /** * A hook for presenting/dismissing an IonLoading component @@ -8,7 +9,7 @@ import { HookOverlayOptions } from "./HookOverlayOptions"; */ export function useIonLoading(): UseIonLoadingResult { const controller = useController( - "IonLoading", + 'IonLoading', loadingController ); @@ -19,15 +20,15 @@ export function useIonLoading(): UseIonLoadingResult { ): void; function present(options: LoadingOptions & HookOverlayOptions): void; function present( - messageOrOptions: string | (LoadingOptions & HookOverlayOptions) = "", + messageOrOptions: string | (LoadingOptions & HookOverlayOptions) = '', duration?: number, spinner?: SpinnerTypes ) { - if (typeof messageOrOptions === "string") { + if (typeof messageOrOptions === 'string') { controller.present({ message: messageOrOptions, duration, - spinner: spinner ?? "lines", + spinner: spinner ?? 'lines', }); } else { controller.present(messageOrOptions); diff --git a/packages/react/src/hooks/useIonModal.ts b/packages/react/src/hooks/useIonModal.ts index ee76bdd2f8b..a940a143336 100644 --- a/packages/react/src/hooks/useIonModal.ts +++ b/packages/react/src/hooks/useIonModal.ts @@ -1,6 +1,7 @@ -import { ModalOptions, modalController } from "@ionic/core"; -import { useOverlay, ReactComponentOrElement } from "./useOverlay"; +import { ModalOptions, modalController } from '@ionic/core'; + import { HookOverlayOptions } from './HookOverlayOptions'; +import { ReactComponentOrElement, useOverlay } from './useOverlay'; /** * A hook for presenting/dismissing an IonModal component @@ -27,13 +28,7 @@ export function useIonModal(component: ReactComponentOrElement, componentProps?: } type UseIonModalResult = [ - { - /** - * Presents the modal - * @param options - Optional - The options to pass to the IonModal - */ - (options?: Omit & HookOverlayOptions): void; - }, + (options?: Omit & HookOverlayOptions) => void, /** * Dismisses the modal */ diff --git a/packages/react/src/hooks/useIonPicker.tsx b/packages/react/src/hooks/useIonPicker.tsx index eda7f84ac25..8f920a0272e 100644 --- a/packages/react/src/hooks/useIonPicker.tsx +++ b/packages/react/src/hooks/useIonPicker.tsx @@ -1,11 +1,12 @@ import { - PickerOptions, - pickerController, PickerButton, PickerColumn, -} from "@ionic/core"; -import { useController } from "./useController"; -import { HookOverlayOptions } from "./HookOverlayOptions"; + PickerOptions, + pickerController, +} from '@ionic/core'; + +import { HookOverlayOptions } from './HookOverlayOptions'; +import { useController } from './useController'; /** * A hook for presenting/dismissing an IonPicker component @@ -13,7 +14,7 @@ import { HookOverlayOptions } from "./HookOverlayOptions"; */ export function useIonPicker(): UseIonPickerResult { const controller = useController( - "IonPicker", + 'IonPicker', pickerController ); @@ -26,7 +27,7 @@ export function useIonPicker(): UseIonPickerResult { if (Array.isArray(columnsOrOptions)) { controller.present({ columns: columnsOrOptions, - buttons: buttons ?? [{ text: "Ok" }], + buttons: buttons ?? [{ text: 'Ok' }], }); } else { controller.present(columnsOrOptions); diff --git a/packages/react/src/hooks/useIonPopover.ts b/packages/react/src/hooks/useIonPopover.ts index 9f859cdf5bd..0896d7afaa1 100644 --- a/packages/react/src/hooks/useIonPopover.ts +++ b/packages/react/src/hooks/useIonPopover.ts @@ -1,6 +1,7 @@ -import { PopoverOptions, popoverController } from "@ionic/core"; -import { useOverlay } from "./useOverlay"; +import { PopoverOptions, popoverController } from '@ionic/core'; + import { HookOverlayOptions } from './HookOverlayOptions'; +import { useOverlay } from './useOverlay'; /** * A hook for presenting/dismissing an IonPicker component @@ -27,13 +28,7 @@ export function useIonPopover(component: JSX.Element, componentProps?: any): Use } type UseIonPopoverResult = [ - { - /** - * Presents the popover - * @param options - Optional - The options to pass to the IonPopover - */ - (options?: Omit & HookOverlayOptions): void; - }, + (options?: Omit & HookOverlayOptions) => void, /** * Dismisses the popover */ diff --git a/packages/react/src/hooks/useIonToast.ts b/packages/react/src/hooks/useIonToast.ts index 087d2ce5269..7af134715c6 100644 --- a/packages/react/src/hooks/useIonToast.ts +++ b/packages/react/src/hooks/useIonToast.ts @@ -1,6 +1,7 @@ -import { ToastOptions, toastController } from "@ionic/core"; -import { useController } from "./useController"; -import { HookOverlayOptions } from "./HookOverlayOptions"; +import { ToastOptions, toastController } from '@ionic/core'; + +import { HookOverlayOptions } from './HookOverlayOptions'; +import { useController } from './useController'; /** * A hook for presenting/dismissing an IonToast component @@ -18,7 +19,7 @@ export function useIonToast(): UseIonToastResult { if (typeof messageOrOptions === 'string') { controller.present({ message: messageOrOptions, - duration: duration + duration }); } else { controller.present(messageOrOptions); diff --git a/packages/react/src/hooks/useOverlay.ts b/packages/react/src/hooks/useOverlay.ts index d07335cc5db..6365bc4829f 100644 --- a/packages/react/src/hooks/useOverlay.ts +++ b/packages/react/src/hooks/useOverlay.ts @@ -1,8 +1,9 @@ -import { useMemo, useRef, useEffect, useState } from "react"; -import { attachProps } from "../components/utils"; -import { OverlayEventDetail } from "@ionic/core"; +import { OverlayEventDetail } from '@ionic/core'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import ReactDOM from 'react-dom'; -import React from 'react'; + +import { attachProps } from '../components/utils'; + import { HookOverlayOptions } from './HookOverlayOptions'; export type ReactComponentOrElement = React.ComponentClass | React.FC | JSX.Element; From 03d71b8a3ca67514674d2e480c73620867c07ce4 Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Tue, 23 Feb 2021 08:59:25 -0700 Subject: [PATCH 03/12] removing dashes in comments --- packages/react/src/hooks/useIonActionSheet.ts | 8 ++++---- packages/react/src/hooks/useIonAlert.ts | 8 ++++---- packages/react/src/hooks/useIonLoading.tsx | 10 +++++----- packages/react/src/hooks/useIonModal.ts | 6 +++--- packages/react/src/hooks/useIonPicker.tsx | 8 ++++---- packages/react/src/hooks/useIonPopover.ts | 6 +++--- packages/react/src/hooks/useIonToast.ts | 8 ++++---- 7 files changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/react/src/hooks/useIonActionSheet.ts b/packages/react/src/hooks/useIonActionSheet.ts index 18a00124e36..a0c2d1cbf57 100644 --- a/packages/react/src/hooks/useIonActionSheet.ts +++ b/packages/react/src/hooks/useIonActionSheet.ts @@ -5,7 +5,7 @@ import { useController } from './useController'; /** * A hook for presenting/dismissing an IonActionSheet component - * @returns - Returns the present and dismiss methods in an array + * @returns Returns the present and dismiss methods in an array */ export function useIonActionSheet(): UseIonActionSheetResult { const controller = useController( @@ -36,13 +36,13 @@ type UseIonActionSheetResult = [ { /** * Presents the action sheet - * @param buttons - An array of buttons for the action sheet - * @param header - Optional - Title for the action sheet + * @param buttons An array of buttons for the action sheet + * @param header Optional - Title for the action sheet */ (buttons: ActionSheetButton[], header?: string | undefined): void; /** * Presents the action sheet - * @param options - The options to pass to the IonActionSheet + * @param options The options to pass to the IonActionSheet */ (options: ActionSheetOptions & HookOverlayOptions): void; }, diff --git a/packages/react/src/hooks/useIonAlert.ts b/packages/react/src/hooks/useIonAlert.ts index 1cf2e5da6dd..13d76831672 100644 --- a/packages/react/src/hooks/useIonAlert.ts +++ b/packages/react/src/hooks/useIonAlert.ts @@ -5,7 +5,7 @@ import { useController } from './useController'; /** * A hook for presenting/dismissing an IonAlert component - * @returns - Returns the present and dismiss methods in an array + * @returns Returns the present and dismiss methods in an array */ export function useIonAlert(): UseIonAlertResult { const controller = useController( @@ -36,13 +36,13 @@ type UseIonAlertResult = [ { /** * Presents the alert - * @param message - The main message to be displayed in the alert - * @param buttons - Optional - Array of buttons to be added to the alert + * @param message The main message to be displayed in the alert + * @param buttons Optional - Array of buttons to be added to the alert */ (message: string, buttons?: AlertButton[]): void; /** * Presents the alert - * @param options - The options to pass to the IonAlert + * @param options The options to pass to the IonAlert */ (options: AlertOptions & HookOverlayOptions): void; }, diff --git a/packages/react/src/hooks/useIonLoading.tsx b/packages/react/src/hooks/useIonLoading.tsx index 5f67cba457d..959f383d304 100644 --- a/packages/react/src/hooks/useIonLoading.tsx +++ b/packages/react/src/hooks/useIonLoading.tsx @@ -5,7 +5,7 @@ import { useController } from './useController'; /** * A hook for presenting/dismissing an IonLoading component - * @returns - Returns the present and dismiss methods in an array + * @returns Returns the present and dismiss methods in an array */ export function useIonLoading(): UseIonLoadingResult { const controller = useController( @@ -42,14 +42,14 @@ type UseIonLoadingResult = [ { /** * Presents the loading indicator - * @param message - Optional - Text content to display in the loading indicator, defaults to blank string - * @param duration - Optional - Number of milliseconds to wait before dismissing the loading indicator - * @param spinner - Optional - The name of the spinner to display, defaults to "lines" + * @param message Optional - Text content to display in the loading indicator, defaults to blank string + * @param duration Optional - Number of milliseconds to wait before dismissing the loading indicator + * @param spinner Optional - The name of the spinner to display, defaults to "lines" */ (message?: string, duration?: number, spinner?: SpinnerTypes): void; /** * Presents the loading indicator - * @param options - The options to pass to the IonLoading + * @param options The options to pass to the IonLoading */ (options: LoadingOptions & HookOverlayOptions): void; }, diff --git a/packages/react/src/hooks/useIonModal.ts b/packages/react/src/hooks/useIonModal.ts index a940a143336..99243b2282f 100644 --- a/packages/react/src/hooks/useIonModal.ts +++ b/packages/react/src/hooks/useIonModal.ts @@ -5,9 +5,9 @@ import { ReactComponentOrElement, useOverlay } from './useOverlay'; /** * 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 + * @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: ReactComponentOrElement, componentProps?: any): UseIonModalResult { const controller = useOverlay( diff --git a/packages/react/src/hooks/useIonPicker.tsx b/packages/react/src/hooks/useIonPicker.tsx index 8f920a0272e..8a32952cd34 100644 --- a/packages/react/src/hooks/useIonPicker.tsx +++ b/packages/react/src/hooks/useIonPicker.tsx @@ -10,7 +10,7 @@ import { useController } from './useController'; /** * A hook for presenting/dismissing an IonPicker component - * @returns - Returns the present and dismiss methods in an array + * @returns Returns the present and dismiss methods in an array */ export function useIonPicker(): UseIonPickerResult { const controller = useController( @@ -41,13 +41,13 @@ type UseIonPickerResult = [ { /** * Presents the picker - * @param columns - Array of columns to be displayed in the picker. - * @param buttons - Optional - Array of buttons to be displayed at the top of the picker. + * @param columns Array of columns to be displayed in the picker. + * @param buttons Optional - Array of buttons to be displayed at the top of the picker. */ (columns: PickerColumn[], buttons?: PickerButton[]): void; /** * Presents the picker - * @param options - The options to pass to the IonPicker + * @param options The options to pass to the IonPicker */ (options: PickerOptions & HookOverlayOptions): void; }, diff --git a/packages/react/src/hooks/useIonPopover.ts b/packages/react/src/hooks/useIonPopover.ts index 0896d7afaa1..ac73e10b11f 100644 --- a/packages/react/src/hooks/useIonPopover.ts +++ b/packages/react/src/hooks/useIonPopover.ts @@ -5,9 +5,9 @@ import { useOverlay } from './useOverlay'; /** * 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 + * @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 { const controller = useOverlay( diff --git a/packages/react/src/hooks/useIonToast.ts b/packages/react/src/hooks/useIonToast.ts index 7af134715c6..139064658d9 100644 --- a/packages/react/src/hooks/useIonToast.ts +++ b/packages/react/src/hooks/useIonToast.ts @@ -5,7 +5,7 @@ import { useController } from './useController'; /** * A hook for presenting/dismissing an IonToast component - * @returns - Returns the present and dismiss methods in an array + * @returns Returns the present and dismiss methods in an array */ export function useIonToast(): UseIonToastResult { const controller = useController( @@ -36,13 +36,13 @@ type UseIonToastResult = [ { /** * Presents the toast - * @param message - Message to be shown in the toast. - * @param duration - Optional - How many milliseconds to wait before hiding the toast. By default, it will show until dismissToast() is called. + * @param message Message to be shown in the toast. + * @param duration Optional - How many milliseconds to wait before hiding the toast. By default, it will show until dismissToast() is called. */ (message: string, duration?: number): void; /** * Presents the Toast - * @param options - The options to pass to the IonToast. + * @param options The options to pass to the IonToast. */ (options: ToastOptions & HookOverlayOptions): void; }, From 5130e775b8a92459d6a8e8a3b27892bfdcad5129 Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Tue, 23 Feb 2021 17:21:01 -0700 Subject: [PATCH 04/12] changing prop on useIonPopover --- packages/react/src/hooks/useIonPopover.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/hooks/useIonPopover.ts b/packages/react/src/hooks/useIonPopover.ts index ac73e10b11f..127c0f99235 100644 --- a/packages/react/src/hooks/useIonPopover.ts +++ b/packages/react/src/hooks/useIonPopover.ts @@ -1,7 +1,7 @@ import { PopoverOptions, popoverController } from '@ionic/core'; import { HookOverlayOptions } from './HookOverlayOptions'; -import { useOverlay } from './useOverlay'; +import { useOverlay, ReactComponentOrElement } from './useOverlay'; /** * A hook for presenting/dismissing an IonPicker component @@ -9,7 +9,7 @@ import { useOverlay } from './useOverlay'; * @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(component: ReactComponentOrElement, componentProps?: any): UseIonPopoverResult { const controller = useOverlay( 'IonPopover', popoverController, From 0b86efd7de79249c724c8196ed290ab35094bd66 Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Tue, 23 Feb 2021 17:21:15 -0700 Subject: [PATCH 05/12] updating usage docs --- .../components/action-sheet/usage/react.md | 52 ++++++++++++ core/src/components/alert/usage/react.md | 41 ++++++++++ core/src/components/loading/usage/react.md | 37 +++++++++ core/src/components/modal/usage/react.md | 64 +++++++++++++++ core/src/components/picker/usage/react.md | 82 +++++++++++++++++++ core/src/components/popover/usage/react.md | 51 ++++++++++++ core/src/components/toast/usage/react.md | 42 ++++++++++ 7 files changed, 369 insertions(+) create mode 100644 core/src/components/picker/usage/react.md diff --git a/core/src/components/action-sheet/usage/react.md b/core/src/components/action-sheet/usage/react.md index ed9cc8505cb..455cf232df9 100644 --- a/core/src/components/action-sheet/usage/react.md +++ b/core/src/components/action-sheet/usage/react.md @@ -1,3 +1,55 @@ +### Using with useIonActionSheet Hook + +```tsx +import React from 'react'; +import { + IonButton, + IonContent, + IonPage, + useIonActionSheet, +} from '@ionic/react'; + +const ActionSheetExample: React.FC = () => { + const [present, dismiss] = useIonActionSheet(); + + return ( + + + + present({ + buttons: [{ text: 'Ok' }, { text: 'Cancel' }], + header: 'Action Sheet' + }) + } + > + Show ActionSheet + + + present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet') + } + > + Show ActionSheet using params + + { + present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet'); + setTimeout(dismiss, 3000); + }} + > + Show ActionSheet, hide after 3 seconds + + + + ); +}; +``` +### Using with IonActionSheet Component + ```tsx import React, { useState } from 'react'; import { IonActionSheet, IonContent, IonButton } from '@ionic/react'; diff --git a/core/src/components/alert/usage/react.md b/core/src/components/alert/usage/react.md index 4776e11bb3e..b33866ab6a1 100644 --- a/core/src/components/alert/usage/react.md +++ b/core/src/components/alert/usage/react.md @@ -1,3 +1,44 @@ +### Using with useIonAlert Hook + +```tsx +import React from 'react'; +import { IonButton, IonContent, IonPage, useIonAlert } from '@ionic/react'; + +const AlertExample: React.FC = () => { + const [present] = useIonAlert(); + return ( + + + + present({ + cssClass: 'my-css', + header: 'Alert', + message: 'alert from hook', + buttons: [ + 'Cancel', + { text: 'Ok', handler: (d) => console.log('ok presses') }, + ], + onDidDismiss: (e) => console.log('did dismiss'), + }) + } + > + Show Alert + + present('hello with params', [{ text: 'Ok' }])} + > + Show Alert using params + + + + ); +}; +``` +### Using with IonAlert Component + ```tsx import React, { useState } from 'react'; import { IonAlert, IonButton, IonContent } from '@ionic/react'; diff --git a/core/src/components/loading/usage/react.md b/core/src/components/loading/usage/react.md index 102b5b730d2..885e66dc903 100644 --- a/core/src/components/loading/usage/react.md +++ b/core/src/components/loading/usage/react.md @@ -1,3 +1,40 @@ +### Use with useIonLoading Hook + +```tsx +import React from 'react'; +import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react'; + +interface LoadingProps {} + +const LoadingExample: React.FC = () => { + const [present] = useIonLoading(); + return ( + + + + present({ + duration: 3000, + }) + } + > + Show Loading + + present('Loading', 2000, 'dots')} + > + Show Loading using params + + + + ); +}; +``` + +### Use with IonLoading Component + ```tsx import React, { useState } from 'react'; import { IonLoading, IonButton, IonContent } from '@ionic/react'; diff --git a/core/src/components/modal/usage/react.md b/core/src/components/modal/usage/react.md index 71926dc6623..73dcbdbc25d 100644 --- a/core/src/components/modal/usage/react.md +++ b/core/src/components/modal/usage/react.md @@ -1,3 +1,67 @@ +### Using useIonModal Hook + +```tsx +import React, { useState } from 'react'; +import { IonButton, IonContent, IonPage, useIonModal } from '@ionic/react'; + +const Body: React.FC<{ + count: number; + onDismiss: () => void; + onIncrement: () => void; +}> = ({ count, onDismiss, onIncrement }) => ( +
+ count: {count} + onIncrement()}> + Increment Count + + onDismiss()}> + Close + +
+); + +const ModalExample: React.FC = () => { + const [count, setCount] = useState(0); + + const handleIncrement = () => { + setCount(count + 1); + }; + + const handleDismiss = () => { + dismiss(); + }; + + /** + * First parameter is the component to show, second is the props to pass + */ + const [present, dismiss] = useIonModal(Body, { + count, + onDismiss: handleDismiss, + onIncrement: handleIncrement, + }); + + return ( + + + { + present({ + cssClass: 'my-class', + }); + }} + > + Show Modal + +
Count: {count}
+ + + ); +}; +``` + +### Using IonModal Component + ```tsx import React, { useState } from 'react'; import { IonModal, IonButton, IonContent } from '@ionic/react'; diff --git a/core/src/components/picker/usage/react.md b/core/src/components/picker/usage/react.md new file mode 100644 index 00000000000..3de1f94b9e8 --- /dev/null +++ b/core/src/components/picker/usage/react.md @@ -0,0 +1,82 @@ +### Usage with useIonPicker Hook + +```tsx +import React, { useState } from 'react'; +import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react'; + +const PickerExample: React.FC = () => { + const [present] = useIonPicker(); + const [value, setValue] = useState(''); + return ( + + + + present({ + buttons: [ + { + text: 'Confirm', + handler: (selected) => { + setValue(selected.animal.value) + }, + }, + ], + columns: [ + { + name: 'animal', + options: [ + { text: 'Dog', value: 'dog' }, + { text: 'Cat', value: 'cat' }, + { text: 'Bird', value: 'bird' }, + ], + }, + ], + }) + } + > + Show Picker + + + present( + [ + { + name: 'animal', + options: [ + { text: 'Dog', value: 'dog' }, + { text: 'Cat', value: 'cat' }, + { text: 'Bird', value: 'bird' }, + ], + }, + { + name: 'vehicle', + options: [ + { text: 'Car', value: 'car' }, + { text: 'Truck', value: 'truck' }, + { text: 'Bike', value: 'bike' }, + ], + }, + ], + [ + { + text: 'Confirm', + handler: (selected) => { + setValue(`${selected.animal.value}, ${selected.vehicle.value}`) + }, + }, + ] + ) + } + > + Show Picker using params + + {value && ( +
Selected Value: {value}
+ )} + + + ); +}; +``` \ No newline at end of file diff --git a/core/src/components/popover/usage/react.md b/core/src/components/popover/usage/react.md index f55b109f524..1b7c0a1c693 100644 --- a/core/src/components/popover/usage/react.md +++ b/core/src/components/popover/usage/react.md @@ -1,3 +1,54 @@ +### Usage with useIonPopover Hook + +```tsx +import React from 'react'; +import { + IonButton, + IonContent, + IonItem, + IonList, + IonListHeader, + IonPage, + useIonPopover, +} from '@ionic/react'; + +const PopoverList: React.FC<{ + onHide: () => void; +}> = ({ onHide }) => ( + + Ionic + Learn Ionic + Documentation + Showcase + GitHub Repo + + Close + + +); + +const PopoverExample: React.FC = () => { + const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() }); + + return ( + + + + present({ + event: e.nativeEvent, + }) + } + > + Show Popover + + + + ); +}; +``` +### Usage with IonPopover Component ```tsx import React, { useState } from 'react'; import { IonPopover, IonButton } from '@ionic/react'; diff --git a/core/src/components/toast/usage/react.md b/core/src/components/toast/usage/react.md index 5aad0cf5dfc..7d576533c67 100644 --- a/core/src/components/toast/usage/react.md +++ b/core/src/components/toast/usage/react.md @@ -1,3 +1,45 @@ +### Using the useIonToast Hook + +```tsx +import React from 'react'; +import { IonButton, IonContent, IonPage, useIonToast } from '@ionic/react'; + +const ToastExample: React.FC = () => { + const [present, dismiss] = useIonToast(); + + return ( + + + + present({ + buttons: [{ text: 'hide', handler: () => dismiss() }], + message: 'toast from hook, click hide to dismiss', + onDidDismiss: () => console.log('dismissed'), + onWillDismiss: () => console.log('will dismiss'), + }) + } + > + Show Toast + + present('hello from hook', 3000)} + > + Show Toast using params, closes in 3 secs + + + Hide Toast + + + + ); +}; +``` + +### Using the IonToast Component + ```tsx import React, { useState } from 'react'; import { IonToast, IonContent, IonButton } from '@ionic/react'; From 4eaa5c97cf81d599aabe8dcd95628212f919f5aa Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Thu, 25 Feb 2021 13:23:11 -0700 Subject: [PATCH 06/12] update usage docs --- core/src/components/action-sheet/readme.md | 53 +++++++++++ .../components/action-sheet/usage/react.md | 7 +- core/src/components/alert/readme.md | 42 +++++++++ core/src/components/alert/usage/react.md | 7 +- core/src/components/loading/readme.md | 37 ++++++++ core/src/components/loading/usage/react.md | 8 +- core/src/components/modal/readme.md | 64 +++++++++++++ core/src/components/modal/usage/react.md | 8 +- core/src/components/picker/readme.md | 89 +++++++++++++++++++ core/src/components/picker/usage/react.md | 4 +- core/src/components/popover/readme.md | 53 +++++++++++ core/src/components/popover/usage/react.md | 8 +- core/src/components/toast/readme.md | 42 +++++++++ core/src/components/toast/usage/react.md | 8 +- 14 files changed, 407 insertions(+), 23 deletions(-) diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index 83690632c59..d43895b2773 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -155,6 +155,59 @@ async function presentActionSheet() { ### React ```tsx +/* Using with useIonActionSheet Hook */ + +import React from 'react'; +import { + IonButton, + IonContent, + IonPage, + useIonActionSheet, +} from '@ionic/react'; + +const ActionSheetExample: React.FC = () => { + const [present, dismiss] = useIonActionSheet(); + + return ( + + + + present({ + buttons: [{ text: 'Ok' }, { text: 'Cancel' }], + header: 'Action Sheet' + }) + } + > + Show ActionSheet + + + present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet') + } + > + Show ActionSheet using params + + { + present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet'); + setTimeout(dismiss, 3000); + }} + > + Show ActionSheet, hide after 3 seconds + + + + ); +}; +``` + +```tsx +/* Using with IonActionSheet Component */ + import React, { useState } from 'react'; import { IonActionSheet, IonContent, IonButton } from '@ionic/react'; import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons'; diff --git a/core/src/components/action-sheet/usage/react.md b/core/src/components/action-sheet/usage/react.md index 455cf232df9..7259fed3276 100644 --- a/core/src/components/action-sheet/usage/react.md +++ b/core/src/components/action-sheet/usage/react.md @@ -1,6 +1,6 @@ -### Using with useIonActionSheet Hook - ```tsx +/* Using with useIonActionSheet Hook */ + import React from 'react'; import { IonButton, @@ -48,9 +48,10 @@ const ActionSheetExample: React.FC = () => { ); }; ``` -### Using with IonActionSheet Component ```tsx +/* Using with IonActionSheet Component */ + import React, { useState } from 'react'; import { IonActionSheet, IonContent, IonButton } from '@ionic/react'; import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons'; diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index ab7fa95b9b8..bba52aa5635 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -588,6 +588,48 @@ function presentAlertCheckbox() { ### React ```tsx +/* Using with useIonAlert Hook */ + +import React from 'react'; +import { IonButton, IonContent, IonPage, useIonAlert } from '@ionic/react'; + +const AlertExample: React.FC = () => { + const [present] = useIonAlert(); + return ( + + + + present({ + cssClass: 'my-css', + header: 'Alert', + message: 'alert from hook', + buttons: [ + 'Cancel', + { text: 'Ok', handler: (d) => console.log('ok presses') }, + ], + onDidDismiss: (e) => console.log('did dismiss'), + }) + } + > + Show Alert + + present('hello with params', [{ text: 'Ok' }])} + > + Show Alert using params + + + + ); +}; +``` + +```tsx +/* Using with IonAlert Component */ + import React, { useState } from 'react'; import { IonAlert, IonButton, IonContent } from '@ionic/react'; diff --git a/core/src/components/alert/usage/react.md b/core/src/components/alert/usage/react.md index b33866ab6a1..28c1a607297 100644 --- a/core/src/components/alert/usage/react.md +++ b/core/src/components/alert/usage/react.md @@ -1,6 +1,6 @@ -### Using with useIonAlert Hook - ```tsx +/* Using with useIonAlert Hook */ + import React from 'react'; import { IonButton, IonContent, IonPage, useIonAlert } from '@ionic/react'; @@ -37,9 +37,10 @@ const AlertExample: React.FC = () => { ); }; ``` -### Using with IonAlert Component ```tsx +/* Using with IonAlert Component */ + import React, { useState } from 'react'; import { IonAlert, IonButton, IonContent } from '@ionic/react'; diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index 84f29b9a4d2..f84a8fcc848 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -131,6 +131,43 @@ async function presentLoadingWithOptions() { ### React ```tsx +/* Use with useIonLoading Hook */ + +import React from 'react'; +import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react'; + +interface LoadingProps {} + +const LoadingExample: React.FC = () => { + const [present] = useIonLoading(); + return ( + + + + present({ + duration: 3000, + }) + } + > + Show Loading + + present('Loading', 2000, 'dots')} + > + Show Loading using params + + + + ); +}; +``` + +```tsx +/* Use with IonLoading Component */ + import React, { useState } from 'react'; import { IonLoading, IonButton, IonContent } from '@ionic/react'; diff --git a/core/src/components/loading/usage/react.md b/core/src/components/loading/usage/react.md index 885e66dc903..c89b7297001 100644 --- a/core/src/components/loading/usage/react.md +++ b/core/src/components/loading/usage/react.md @@ -1,6 +1,6 @@ -### Use with useIonLoading Hook - ```tsx +/* Use with useIonLoading Hook */ + import React from 'react'; import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react'; @@ -33,9 +33,9 @@ const LoadingExample: React.FC = () => { }; ``` -### Use with IonLoading Component - ```tsx +/* Use with IonLoading Component */ + import React, { useState } from 'react'; import { IonLoading, IonButton, IonContent } from '@ionic/react'; diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 9961776372f..e8f0b7fdbea 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -332,6 +332,70 @@ modalElement.presentingElement = await modalController.getTop(); // Get the top- ### React ```tsx +/* Using useIonModal Hook */ + +import React, { useState } from 'react'; +import { IonButton, IonContent, IonPage, useIonModal } from '@ionic/react'; + +const Body: React.FC<{ + count: number; + onDismiss: () => void; + onIncrement: () => void; +}> = ({ count, onDismiss, onIncrement }) => ( +
+ count: {count} + onIncrement()}> + Increment Count + + onDismiss()}> + Close + +
+); + +const ModalExample: React.FC = () => { + const [count, setCount] = useState(0); + + const handleIncrement = () => { + setCount(count + 1); + }; + + const handleDismiss = () => { + dismiss(); + }; + + /** + * First parameter is the component to show, second is the props to pass + */ + const [present, dismiss] = useIonModal(Body, { + count, + onDismiss: handleDismiss, + onIncrement: handleIncrement, + }); + + return ( + + + { + present({ + cssClass: 'my-class', + }); + }} + > + Show Modal + +
Count: {count}
+ + + ); +}; +``` + +```tsx +/* Using IonModal Component */ + import React, { useState } from 'react'; import { IonModal, IonButton, IonContent } from '@ionic/react'; diff --git a/core/src/components/modal/usage/react.md b/core/src/components/modal/usage/react.md index 73dcbdbc25d..8bc8160e280 100644 --- a/core/src/components/modal/usage/react.md +++ b/core/src/components/modal/usage/react.md @@ -1,6 +1,6 @@ -### Using useIonModal Hook - ```tsx +/* Using useIonModal Hook */ + import React, { useState } from 'react'; import { IonButton, IonContent, IonPage, useIonModal } from '@ionic/react'; @@ -60,9 +60,9 @@ const ModalExample: React.FC = () => { }; ``` -### Using IonModal Component - ```tsx +/* Using IonModal Component */ + import React, { useState } from 'react'; import { IonModal, IonButton, IonContent } from '@ionic/react'; diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md index 0e7513a954f..18ce65d6d3c 100644 --- a/core/src/components/picker/readme.md +++ b/core/src/components/picker/readme.md @@ -7,6 +7,95 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a +## Usage + +### React + +```tsx +/* Usage with useIonPicker Hook */ + +import React, { useState } from 'react'; +import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react'; + +const PickerExample: React.FC = () => { + const [present] = useIonPicker(); + const [value, setValue] = useState(''); + return ( + + + + present({ + buttons: [ + { + text: 'Confirm', + handler: (selected) => { + setValue(selected.animal.value) + }, + }, + ], + columns: [ + { + name: 'animal', + options: [ + { text: 'Dog', value: 'dog' }, + { text: 'Cat', value: 'cat' }, + { text: 'Bird', value: 'bird' }, + ], + }, + ], + }) + } + > + Show Picker + + + present( + [ + { + name: 'animal', + options: [ + { text: 'Dog', value: 'dog' }, + { text: 'Cat', value: 'cat' }, + { text: 'Bird', value: 'bird' }, + ], + }, + { + name: 'vehicle', + options: [ + { text: 'Car', value: 'car' }, + { text: 'Truck', value: 'truck' }, + { text: 'Bike', value: 'bike' }, + ], + }, + ], + [ + { + text: 'Confirm', + handler: (selected) => { + setValue(`${selected.animal.value}, ${selected.vehicle.value}`) + }, + }, + ] + ) + } + > + Show Picker using params + + {value && ( +
Selected Value: {value}
+ )} + + + ); +}; +``` + + + ## Properties | Property | Attribute | Description | Type | Default | diff --git a/core/src/components/picker/usage/react.md b/core/src/components/picker/usage/react.md index 3de1f94b9e8..c95d48bd04e 100644 --- a/core/src/components/picker/usage/react.md +++ b/core/src/components/picker/usage/react.md @@ -1,6 +1,6 @@ -### Usage with useIonPicker Hook - ```tsx +/* Usage with useIonPicker Hook */ + import React, { useState } from 'react'; import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react'; diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index b8fbd9b1b1e..fc936d08ea9 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -114,6 +114,59 @@ function presentPopover(ev) { ### React ```tsx +/* Usage with useIonPopover Hook */ + +import React from 'react'; +import { + IonButton, + IonContent, + IonItem, + IonList, + IonListHeader, + IonPage, + useIonPopover, +} from '@ionic/react'; + +const PopoverList: React.FC<{ + onHide: () => void; +}> = ({ onHide }) => ( + + Ionic + Learn Ionic + Documentation + Showcase + GitHub Repo + + Close + + +); + +const PopoverExample: React.FC = () => { + const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() }); + + return ( + + + + present({ + event: e.nativeEvent, + }) + } + > + Show Popover + + + + ); +}; +``` + +```tsx +/* Usage with IonPopover Component */ + import React, { useState } from 'react'; import { IonPopover, IonButton } from '@ionic/react'; diff --git a/core/src/components/popover/usage/react.md b/core/src/components/popover/usage/react.md index 1b7c0a1c693..45a8545f748 100644 --- a/core/src/components/popover/usage/react.md +++ b/core/src/components/popover/usage/react.md @@ -1,6 +1,6 @@ -### Usage with useIonPopover Hook - ```tsx +/* Usage with useIonPopover Hook */ + import React from 'react'; import { IonButton, @@ -48,8 +48,10 @@ const PopoverExample: React.FC = () => { ); }; ``` -### Usage with IonPopover Component + ```tsx +/* Usage with IonPopover Component */ + import React, { useState } from 'react'; import { IonPopover, IonButton } from '@ionic/react'; diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index f29b1c03d86..9ca8a379388 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -111,6 +111,48 @@ async function presentToastWithOptions() { ### React ```tsx +/* Using the useIonToast Hook */ + +import React from 'react'; +import { IonButton, IonContent, IonPage, useIonToast } from '@ionic/react'; + +const ToastExample: React.FC = () => { + const [present, dismiss] = useIonToast(); + + return ( + + + + present({ + buttons: [{ text: 'hide', handler: () => dismiss() }], + message: 'toast from hook, click hide to dismiss', + onDidDismiss: () => console.log('dismissed'), + onWillDismiss: () => console.log('will dismiss'), + }) + } + > + Show Toast + + present('hello from hook', 3000)} + > + Show Toast using params, closes in 3 secs + + + Hide Toast + + + + ); +}; +``` + +```tsx +/* Using the IonToast Component */ + import React, { useState } from 'react'; import { IonToast, IonContent, IonButton } from '@ionic/react'; diff --git a/core/src/components/toast/usage/react.md b/core/src/components/toast/usage/react.md index 7d576533c67..82367cc525d 100644 --- a/core/src/components/toast/usage/react.md +++ b/core/src/components/toast/usage/react.md @@ -1,6 +1,6 @@ -### Using the useIonToast Hook - ```tsx +/* Using the useIonToast Hook */ + import React from 'react'; import { IonButton, IonContent, IonPage, useIonToast } from '@ionic/react'; @@ -38,9 +38,9 @@ const ToastExample: React.FC = () => { }; ``` -### Using the IonToast Component - ```tsx +/* Using the IonToast Component */ + import React, { useState } from 'react'; import { IonToast, IonContent, IonButton } from '@ionic/react'; From f7c25ad7f5d56700ee109798130a5ee07f4f11aa Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Thu, 25 Feb 2021 13:45:15 -0700 Subject: [PATCH 07/12] updating comments --- core/src/components/loading/usage/react.md | 4 ++-- core/src/components/modal/usage/react.md | 4 ++-- core/src/components/picker/usage/react.md | 2 +- core/src/components/popover/usage/react.md | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/core/src/components/loading/usage/react.md b/core/src/components/loading/usage/react.md index c89b7297001..b99e0d29514 100644 --- a/core/src/components/loading/usage/react.md +++ b/core/src/components/loading/usage/react.md @@ -1,5 +1,5 @@ ```tsx -/* Use with useIonLoading Hook */ +/* Using with useIonLoading Hook */ import React from 'react'; import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react'; @@ -34,7 +34,7 @@ const LoadingExample: React.FC = () => { ``` ```tsx -/* Use with IonLoading Component */ +/* Using with IonLoading Component */ import React, { useState } from 'react'; import { IonLoading, IonButton, IonContent } from '@ionic/react'; diff --git a/core/src/components/modal/usage/react.md b/core/src/components/modal/usage/react.md index 8bc8160e280..5dc0d651dbb 100644 --- a/core/src/components/modal/usage/react.md +++ b/core/src/components/modal/usage/react.md @@ -1,5 +1,5 @@ ```tsx -/* Using useIonModal Hook */ +/* Using with useIonModal Hook */ import React, { useState } from 'react'; import { IonButton, IonContent, IonPage, useIonModal } from '@ionic/react'; @@ -61,7 +61,7 @@ const ModalExample: React.FC = () => { ``` ```tsx -/* Using IonModal Component */ +/* Using with IonModal Component */ import React, { useState } from 'react'; import { IonModal, IonButton, IonContent } from '@ionic/react'; diff --git a/core/src/components/picker/usage/react.md b/core/src/components/picker/usage/react.md index c95d48bd04e..1d016decbaa 100644 --- a/core/src/components/picker/usage/react.md +++ b/core/src/components/picker/usage/react.md @@ -1,5 +1,5 @@ ```tsx -/* Usage with useIonPicker Hook */ +/* Using with useIonPicker Hook */ import React, { useState } from 'react'; import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react'; diff --git a/core/src/components/popover/usage/react.md b/core/src/components/popover/usage/react.md index 45a8545f748..e0d444e5dd2 100644 --- a/core/src/components/popover/usage/react.md +++ b/core/src/components/popover/usage/react.md @@ -1,5 +1,5 @@ ```tsx -/* Usage with useIonPopover Hook */ +/* Using with useIonPopover Hook */ import React from 'react'; import { @@ -50,7 +50,7 @@ const PopoverExample: React.FC = () => { ``` ```tsx -/* Usage with IonPopover Component */ +/* Using with IonPopover Component */ import React, { useState } from 'react'; import { IonPopover, IonButton } from '@ionic/react'; From 5db3eddbe0d8997c4e2eaf78661775696a5b8df0 Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Thu, 25 Feb 2021 14:14:20 -0700 Subject: [PATCH 08/12] chore: only export specific things --- packages/react/src/components/index.ts | 14 +++++++------- packages/react/src/hooks/useIonActionSheet.ts | 2 +- packages/react/src/hooks/useIonAlert.ts | 2 +- packages/react/src/hooks/useIonLoading.tsx | 2 +- packages/react/src/hooks/useIonModal.ts | 2 +- packages/react/src/hooks/useIonPicker.tsx | 2 +- packages/react/src/hooks/useIonPopover.ts | 2 +- packages/react/src/hooks/useIonToast.ts | 2 +- 8 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index f0ceb21f331..0395ab811a5 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -70,13 +70,13 @@ export * from './hrefprops'; export { CreateAnimation } from './CreateAnimation'; // Hooks -export * from '../hooks/useIonActionSheet'; -export * from '../hooks/useIonAlert'; -export * from '../hooks/useIonToast'; -export * from '../hooks/useIonModal'; -export * from '../hooks/useIonPopover'; -export * from '../hooks/useIonPicker'; -export * from '../hooks/useIonLoading'; +export { useIonActionSheet, UseIonActionSheetResult } from '../hooks/useIonActionSheet'; +export { useIonAlert, UseIonAlertResult } from '../hooks/useIonAlert'; +export { useIonToast, UseIonToastResult } from '../hooks/useIonToast'; +export { useIonModal, UseIonModalResult } from '../hooks/useIonModal'; +export { useIonPopover, UseIonPopoverResult } from '../hooks/useIonPopover'; +export { useIonPicker, UseIonPickerResult } from '../hooks/useIonPicker'; +export { useIonLoading, UseIonLoadingResult } from '../hooks/useIonLoading'; // Icons that are used by internal components addIcons({ diff --git a/packages/react/src/hooks/useIonActionSheet.ts b/packages/react/src/hooks/useIonActionSheet.ts index a0c2d1cbf57..cbd045f4ef5 100644 --- a/packages/react/src/hooks/useIonActionSheet.ts +++ b/packages/react/src/hooks/useIonActionSheet.ts @@ -32,7 +32,7 @@ export function useIonActionSheet(): UseIonActionSheetResult { ]; } -type UseIonActionSheetResult = [ +export type UseIonActionSheetResult = [ { /** * Presents the action sheet diff --git a/packages/react/src/hooks/useIonAlert.ts b/packages/react/src/hooks/useIonAlert.ts index 13d76831672..3f1f7cf7fc7 100644 --- a/packages/react/src/hooks/useIonAlert.ts +++ b/packages/react/src/hooks/useIonAlert.ts @@ -32,7 +32,7 @@ export function useIonAlert(): UseIonAlertResult { ]; } -type UseIonAlertResult = [ +export type UseIonAlertResult = [ { /** * Presents the alert diff --git a/packages/react/src/hooks/useIonLoading.tsx b/packages/react/src/hooks/useIonLoading.tsx index 959f383d304..779a413c18a 100644 --- a/packages/react/src/hooks/useIonLoading.tsx +++ b/packages/react/src/hooks/useIonLoading.tsx @@ -38,7 +38,7 @@ export function useIonLoading(): UseIonLoadingResult { return [present, controller.dismiss]; } -type UseIonLoadingResult = [ +export type UseIonLoadingResult = [ { /** * Presents the loading indicator diff --git a/packages/react/src/hooks/useIonModal.ts b/packages/react/src/hooks/useIonModal.ts index 99243b2282f..4a84969acae 100644 --- a/packages/react/src/hooks/useIonModal.ts +++ b/packages/react/src/hooks/useIonModal.ts @@ -27,7 +27,7 @@ export function useIonModal(component: ReactComponentOrElement, componentProps?: ]; } -type UseIonModalResult = [ +export type UseIonModalResult = [ (options?: Omit & HookOverlayOptions) => void, /** * Dismisses the modal diff --git a/packages/react/src/hooks/useIonPicker.tsx b/packages/react/src/hooks/useIonPicker.tsx index 8a32952cd34..36473862aa1 100644 --- a/packages/react/src/hooks/useIonPicker.tsx +++ b/packages/react/src/hooks/useIonPicker.tsx @@ -37,7 +37,7 @@ export function useIonPicker(): UseIonPickerResult { return [present, controller.dismiss]; } -type UseIonPickerResult = [ +export type UseIonPickerResult = [ { /** * Presents the picker diff --git a/packages/react/src/hooks/useIonPopover.ts b/packages/react/src/hooks/useIonPopover.ts index 127c0f99235..2a0a1b01419 100644 --- a/packages/react/src/hooks/useIonPopover.ts +++ b/packages/react/src/hooks/useIonPopover.ts @@ -27,7 +27,7 @@ export function useIonPopover(component: ReactComponentOrElement, componentProps ]; } -type UseIonPopoverResult = [ +export type UseIonPopoverResult = [ (options?: Omit & HookOverlayOptions) => void, /** * Dismisses the popover diff --git a/packages/react/src/hooks/useIonToast.ts b/packages/react/src/hooks/useIonToast.ts index 139064658d9..258d5b2bc8e 100644 --- a/packages/react/src/hooks/useIonToast.ts +++ b/packages/react/src/hooks/useIonToast.ts @@ -32,7 +32,7 @@ export function useIonToast(): UseIonToastResult { ]; } -type UseIonToastResult = [ +export type UseIonToastResult = [ { /** * Presents the toast From a168577f5ffda99d926e868e1bf6762168f7271d Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Thu, 25 Feb 2021 14:18:59 -0700 Subject: [PATCH 09/12] chore: use arrow function for better minification --- packages/react/src/hooks/useController.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react/src/hooks/useController.ts b/packages/react/src/hooks/useController.ts index 59e9cb8d7bc..97ed2aa9a19 100644 --- a/packages/react/src/hooks/useController.ts +++ b/packages/react/src/hooks/useController.ts @@ -47,6 +47,13 @@ export function useController< ...rest } = options; + const handleDismiss = (event: CustomEvent>) => { + if (onDidDismiss) { + onDidDismiss(event); + } + overlayRef.current = undefined; + } + overlayRef.current = await controller.create({ ...(rest as any), }); @@ -61,14 +68,7 @@ export function useController< onWillPresent && onWillPresent(e), }); - overlayRef.current.present(); - - function handleDismiss(event: CustomEvent>) { - if (onDidDismiss) { - onDidDismiss(event); - } - overlayRef.current = undefined; - } + overlayRef.current.present(); }; const dismiss = async () => { From 4fc07bb0f52cecc273e449b012c13a4e692c07fc Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Thu, 25 Feb 2021 14:25:07 -0700 Subject: [PATCH 10/12] fix lint --- packages/react/src/hooks/useController.ts | 2 +- packages/react/src/hooks/useIonPopover.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/hooks/useController.ts b/packages/react/src/hooks/useController.ts index 97ed2aa9a19..fa596f37044 100644 --- a/packages/react/src/hooks/useController.ts +++ b/packages/react/src/hooks/useController.ts @@ -68,7 +68,7 @@ export function useController< onWillPresent && onWillPresent(e), }); - overlayRef.current.present(); + overlayRef.current.present(); }; const dismiss = async () => { diff --git a/packages/react/src/hooks/useIonPopover.ts b/packages/react/src/hooks/useIonPopover.ts index 2a0a1b01419..42ecf6600cd 100644 --- a/packages/react/src/hooks/useIonPopover.ts +++ b/packages/react/src/hooks/useIonPopover.ts @@ -1,7 +1,7 @@ import { PopoverOptions, popoverController } from '@ionic/core'; import { HookOverlayOptions } from './HookOverlayOptions'; -import { useOverlay, ReactComponentOrElement } from './useOverlay'; +import { ReactComponentOrElement, useOverlay } from './useOverlay'; /** * A hook for presenting/dismissing an IonPicker component From 6cca12ff80b355c230d98e3fd2a40bb4a5c0067f Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Thu, 25 Feb 2021 15:24:19 -0700 Subject: [PATCH 11/12] generating docs --- core/src/components/loading/readme.md | 4 ++-- core/src/components/modal/readme.md | 4 ++-- core/src/components/picker/readme.md | 2 +- core/src/components/popover/readme.md | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index f84a8fcc848..0f2f7879c1b 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -131,7 +131,7 @@ async function presentLoadingWithOptions() { ### React ```tsx -/* Use with useIonLoading Hook */ +/* Using with useIonLoading Hook */ import React from 'react'; import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react'; @@ -166,7 +166,7 @@ const LoadingExample: React.FC = () => { ``` ```tsx -/* Use with IonLoading Component */ +/* Using with IonLoading Component */ import React, { useState } from 'react'; import { IonLoading, IonButton, IonContent } from '@ionic/react'; diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index e8f0b7fdbea..af3bee1008c 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -332,7 +332,7 @@ modalElement.presentingElement = await modalController.getTop(); // Get the top- ### React ```tsx -/* Using useIonModal Hook */ +/* Using with useIonModal Hook */ import React, { useState } from 'react'; import { IonButton, IonContent, IonPage, useIonModal } from '@ionic/react'; @@ -394,7 +394,7 @@ const ModalExample: React.FC = () => { ``` ```tsx -/* Using IonModal Component */ +/* Using with IonModal Component */ import React, { useState } from 'react'; import { IonModal, IonButton, IonContent } from '@ionic/react'; diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md index 18ce65d6d3c..bcae3a1a86c 100644 --- a/core/src/components/picker/readme.md +++ b/core/src/components/picker/readme.md @@ -12,7 +12,7 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a ### React ```tsx -/* Usage with useIonPicker Hook */ +/* Using with useIonPicker Hook */ import React, { useState } from 'react'; import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react'; diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index fc936d08ea9..b62156f9dbc 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -114,7 +114,7 @@ function presentPopover(ev) { ### React ```tsx -/* Usage with useIonPopover Hook */ +/* Using with useIonPopover Hook */ import React from 'react'; import { @@ -165,7 +165,7 @@ const PopoverExample: React.FC = () => { ``` ```tsx -/* Usage with IonPopover Component */ +/* Using with IonPopover Component */ import React, { useState } from 'react'; import { IonPopover, IonButton } from '@ionic/react'; From 8643b4552ba78f33bc2138ced95ce0fcad67ae8a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 1 Mar 2021 10:34:08 -0500 Subject: [PATCH 12/12] fix typo --- core/src/components/alert/readme.md | 2 +- core/src/components/alert/usage/react.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index bba52aa5635..28f0cd60894 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -607,7 +607,7 @@ const AlertExample: React.FC = () => { message: 'alert from hook', buttons: [ 'Cancel', - { text: 'Ok', handler: (d) => console.log('ok presses') }, + { text: 'Ok', handler: (d) => console.log('ok pressed') }, ], onDidDismiss: (e) => console.log('did dismiss'), }) diff --git a/core/src/components/alert/usage/react.md b/core/src/components/alert/usage/react.md index 28c1a607297..17a365d4341 100644 --- a/core/src/components/alert/usage/react.md +++ b/core/src/components/alert/usage/react.md @@ -18,7 +18,7 @@ const AlertExample: React.FC = () => { message: 'alert from hook', buttons: [ 'Cancel', - { text: 'Ok', handler: (d) => console.log('ok presses') }, + { text: 'Ok', handler: (d) => console.log('ok pressed') }, ], onDidDismiss: (e) => console.log('did dismiss'), })