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

chore(react): migrate to eslint, add prettier (#26633)

Browse Source
This commit is contained in:
Liam DeBeasi
2023-01-18 16:49:25 -05:00
committed by GitHub
parent 2dca54a457
commit b02190d71f
70 changed files with 4508 additions and 1002 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/src/hooks/HookOverlayOptions.ts
View File

@ -1,4 +1,4 @@
import { OverlayEventDetail } from '@ionic/core/components';
import type { OverlayEventDetail } from '@ionic/core/components';
export interface HookOverlayOptions {
onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;

4
packages/react/src/hooks/__tests__/hooks.spec.tsx
View File

@ -5,8 +5,8 @@ describe('test', () => {
it('should pass', () => {
// This is to get CI to pass!
// We need to figure out an ESM solution for tests
})
})
});
});
/*import { alertController, modalController } from '@ionic/core';

4
packages/react/src/hooks/useController.ts
View File

@ -1,9 +1,9 @@
import { OverlayEventDetail } from '@ionic/core/components';
import type { OverlayEventDetail } from '@ionic/core/components';
import { useCallback, useMemo, useRef } from 'react';
import { attachProps } from '../components/react-component-lib/utils';
import { HookOverlayOptions } from './HookOverlayOptions';
import type { HookOverlayOptions } from './HookOverlayOptions';
interface OverlayBase extends HTMLElement {
present: () => Promise<void>;

10
packages/react/src/hooks/useIonActionSheet.ts
View File

@ -1,8 +1,9 @@
import { ActionSheetButton, ActionSheetOptions, actionSheetController } from '@ionic/core/components';
import type { ActionSheetButton, ActionSheetOptions } from '@ionic/core/components';
import { actionSheetController } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-action-sheet.js';
import { useCallback } from 'react';
import { HookOverlayOptions } from './HookOverlayOptions';
import type { HookOverlayOptions } from './HookOverlayOptions';
import { useController } from './useController';
/**
@ -17,10 +18,7 @@ export function useIonActionSheet(): UseIonActionSheetResult {
);
const present = useCallback(
(
buttonsOrOptions: ActionSheetButton[] | (ActionSheetOptions & HookOverlayOptions),
header?: string
) => {
(buttonsOrOptions: ActionSheetButton[] | (ActionSheetOptions & HookOverlayOptions), header?: string) => {
if (Array.isArray(buttonsOrOptions)) {
return controller.present({
buttons: buttonsOrOptions,

5
packages/react/src/hooks/useIonAlert.ts
View File

@ -1,8 +1,9 @@
import { AlertButton, AlertOptions, alertController } from '@ionic/core/components';
import type { AlertButton, AlertOptions } from '@ionic/core/components';
import { alertController } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-alert.js';
import { useCallback } from 'react';
import { HookOverlayOptions } from './HookOverlayOptions';
import type { HookOverlayOptions } from './HookOverlayOptions';
import { useController } from './useController';
/**

5
packages/react/src/hooks/useIonLoading.tsx
View File

@ -1,8 +1,9 @@
import { LoadingOptions, SpinnerTypes, loadingController } from '@ionic/core/components';
import type { LoadingOptions, SpinnerTypes } from '@ionic/core/components';
import { loadingController } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-loading.js';
import { useCallback } from 'react';
import { HookOverlayOptions } from './HookOverlayOptions';
import type { HookOverlayOptions } from './HookOverlayOptions';
import { useController } from './useController';
/**

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

@ -1,10 +1,11 @@
import { ModalOptions, modalController } from '@ionic/core/components';
import type { ModalOptions } from '@ionic/core/components';
import { modalController } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-modal.js';
import { useCallback } from 'react';
import { ReactComponentOrElement } from '../models/ReactComponentOrElement';
import type { ReactComponentOrElement } from '../models/ReactComponentOrElement';
import { HookOverlayOptions } from './HookOverlayOptions';
import type { HookOverlayOptions } from './HookOverlayOptions';
import { useOverlay } from './useOverlay';
// TODO(FW-2959): types
@ -15,10 +16,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 useIonModal(
component: ReactComponentOrElement,
componentProps?: any
): UseIonModalResult {
export function useIonModal(component: ReactComponentOrElement, componentProps?: any): UseIonModalResult {
const controller = useOverlay<ModalOptions, HTMLIonModalElement>(
'IonModal',
modalController,

36
packages/react/src/hooks/useIonPicker.tsx
View File

@ -1,13 +1,9 @@
import {
PickerButton,
PickerColumn,
PickerOptions,
pickerController,
} from '@ionic/core/components';
import type { PickerButton, PickerColumn, PickerOptions } from '@ionic/core/components';
import { pickerController } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-picker.js';
import { useCallback } from 'react';
import { HookOverlayOptions } from './HookOverlayOptions';
import type { HookOverlayOptions } from './HookOverlayOptions';
import { useController } from './useController';
/**
@ -21,19 +17,19 @@ export function useIonPicker(): UseIonPickerResult {
defineCustomElement
);
const present = useCallback((
columnsOrOptions: PickerColumn[] | (PickerOptions & HookOverlayOptions),
buttons?: PickerButton[]
) => {
if (Array.isArray(columnsOrOptions)) {
return controller.present({
columns: columnsOrOptions,
buttons: buttons ?? [{ text: 'Ok' }],
});
} else {
return controller.present(columnsOrOptions);
}
}, [controller.present]);
const present = useCallback(
(columnsOrOptions: PickerColumn[] | (PickerOptions & HookOverlayOptions), buttons?: PickerButton[]) => {
if (Array.isArray(columnsOrOptions)) {
return controller.present({
columns: columnsOrOptions,
buttons: buttons ?? [{ text: 'Ok' }],
});
} else {
return controller.present(columnsOrOptions);
}
},
[controller.present]
);
return [present, controller.dismiss];
}

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

@ -1,10 +1,11 @@
import { PopoverOptions, popoverController } from '@ionic/core/components';
import type { PopoverOptions } from '@ionic/core/components';
import { popoverController } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-popover.js';
import { useCallback } from 'react';
import { ReactComponentOrElement } from '../models/ReactComponentOrElement';
import type { ReactComponentOrElement } from '../models/ReactComponentOrElement';
import { HookOverlayOptions } from './HookOverlayOptions';
import type { HookOverlayOptions } from './HookOverlayOptions';
import { useOverlay } from './useOverlay';
// TODO(FW-2959): types
@ -24,14 +25,14 @@ export function useIonPopover(component: ReactComponentOrElement, componentProps
componentProps
);
const present = useCallback((options: Omit<PopoverOptions, 'component' | 'componentProps'> & HookOverlayOptions = {}) => {
controller.present(options as any);
}, [controller.present]);
const present = useCallback(
(options: Omit<PopoverOptions, 'component' | 'componentProps'> & HookOverlayOptions = {}) => {
controller.present(options as any);
},
[controller.present]
);
return [
present,
controller.dismiss
];
return [present, controller.dismiss];
}
export type UseIonPopoverResult = [

39
packages/react/src/hooks/useIonToast.ts
View File

@ -1,8 +1,9 @@
import { ToastOptions, toastController } from '@ionic/core/components';
import type { ToastOptions } from '@ionic/core/components';
import { toastController } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-toast.js';
import { useCallback } from 'react';
import { HookOverlayOptions } from './HookOverlayOptions';
import type { HookOverlayOptions } from './HookOverlayOptions';
import { useController } from './useController';
/**
@ -10,27 +11,23 @@ import { useController } from './useController';
* @returns Returns the present and dismiss methods in an array
*/
export function useIonToast(): UseIonToastResult {
const controller = useController<ToastOptions, HTMLIonToastElement>(
'IonToast',
toastController,
defineCustomElement
const controller = useController<ToastOptions, HTMLIonToastElement>('IonToast', toastController, defineCustomElement);
const present = useCallback(
(messageOrOptions: string | (ToastOptions & HookOverlayOptions), duration?: number) => {
if (typeof messageOrOptions === 'string') {
return controller.present({
message: messageOrOptions,
duration,
});
} else {
return controller.present(messageOrOptions);
}
},
[controller.present]
);
const present = useCallback((messageOrOptions: string | ToastOptions & HookOverlayOptions, duration?: number) => {
if (typeof messageOrOptions === 'string') {
return controller.present({
message: messageOrOptions,
duration
});
} else {
return controller.present(messageOrOptions);
}
}, [controller.present]);
return [
present,
controller.dismiss
];
return [present, controller.dismiss];
}
export type UseIonToastResult = [

6
packages/react/src/hooks/useOverlay.ts
View File

@ -1,12 +1,12 @@
import { OverlayEventDetail } from '@ionic/core/components';
import type { OverlayEventDetail } from '@ionic/core/components';
import React, { createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { attachProps } from '../components/react-component-lib/utils';
import { IonContext } from '../contexts/IonContext';
import { ReactComponentOrElement } from '../models/ReactComponentOrElement';
import type { ReactComponentOrElement } from '../models/ReactComponentOrElement';
import { generateId } from '../utils/generateId';
import { HookOverlayOptions } from './HookOverlayOptions';
import type { HookOverlayOptions } from './HookOverlayOptions';
// TODO(FW-2959): types