From f290025d735cea2a80be8be774cf209e6dc8ec22 Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Mon, 14 Oct 2019 09:26:44 -0600 Subject: [PATCH 1/7] chore(): bumping timeout --- angular/test/test-app/e2e/protractor.conf.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular/test/test-app/e2e/protractor.conf.js b/angular/test/test-app/e2e/protractor.conf.js index afc1ec00d6..c063d7510f 100644 --- a/angular/test/test-app/e2e/protractor.conf.js +++ b/angular/test/test-app/e2e/protractor.conf.js @@ -1,4 +1,4 @@ -// @ts-check + // @ts-check // Protractor configuration file, see link for more information // https://github.com/angular/protractor/blob/master/lib/config.ts From 4bc3dc73c1df57e44c34585af9e9171ce5863b06 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 18 Oct 2019 08:56:53 -0400 Subject: [PATCH 2/7] fix(menu): clamp out of bounds swipe value (#19684) fixes #18927 --- core/src/utils/animation/test/animation.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/core/src/utils/animation/test/animation.spec.ts b/core/src/utils/animation/test/animation.spec.ts index 21c885af55..ce68a539ee 100644 --- a/core/src/utils/animation/test/animation.spec.ts +++ b/core/src/utils/animation/test/animation.spec.ts @@ -397,6 +397,7 @@ describe('cubic-bezier conversion', () => { expect(getTimeGivenProgression(...equation, 1.32)).toEqual([]); expect(getTimeGivenProgression(...equation, -0.32)).toEqual([]); }) + }) }); From 432887b410b1e209e7fcdf93f4ff9d661b2c21a9 Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Tue, 17 Dec 2019 10:42:15 -0700 Subject: [PATCH 3/7] fix(react): fixing type of icon in ToastOptions, ActionSheetOptions, fixes #20100 --- core/src/components/toast/readme.md | 3 ++- .../react/src/components/IonActionSheet.tsx | 19 ++++++++++++++++++- packages/react/src/components/IonToast.tsx | 19 ++++++++++++++++++- 3 files changed, 38 insertions(+), 3 deletions(-) diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index 857980d95d..ca6fd572d2 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -117,6 +117,7 @@ async function presentToastWithOptions() { ```tsx import React, { useState } from 'react'; import { IonToast, IonContent, IonButton } from '@ionic/react'; +import { star } from 'ionicons/icons'; export const ToastExample: React.FC = () => { const [showToast1, setShowToast1] = useState(false); @@ -141,7 +142,7 @@ export const ToastExample: React.FC = () => { buttons={[ { side: 'start', - icon: 'star', + icon: star, text: 'Favorite', handler: () => { console.log('Favorite clicked'); diff --git a/packages/react/src/components/IonActionSheet.tsx b/packages/react/src/components/IonActionSheet.tsx index 6a2e489f27..00635f6739 100644 --- a/packages/react/src/components/IonActionSheet.tsx +++ b/packages/react/src/components/IonActionSheet.tsx @@ -1,5 +1,22 @@ -import { ActionSheetOptions, actionSheetController } from '@ionic/core'; +import { ActionSheetButton as ActionSheetButtonCore, ActionSheetOptions as ActionSheetOptionsCore, actionSheetController as actionSheetControllerCore } from '@ionic/core'; import { createOverlayComponent } from './createOverlayComponent'; +export interface ActionSheetButton extends Omit { + icon?: { + ios: string; + md: string; + }; +} + +export interface ActionSheetOptions extends Omit { + buttons?: (ActionSheetButton | string)[]; +} + +const actionSheetController = { + create: (options: ActionSheetOptions) => actionSheetControllerCore.create(options as any), + dismiss: (data?: any, role?: string | undefined, id?: string | undefined) => actionSheetControllerCore.dismiss(data, role, id), + getTop: () => actionSheetControllerCore.getTop() +}; + export const IonActionSheet = /*@__PURE__*/createOverlayComponent('IonActionSheet', actionSheetController); diff --git a/packages/react/src/components/IonToast.tsx b/packages/react/src/components/IonToast.tsx index 6c0b572b7f..82486edf55 100644 --- a/packages/react/src/components/IonToast.tsx +++ b/packages/react/src/components/IonToast.tsx @@ -1,5 +1,22 @@ -import { ToastOptions, toastController } from '@ionic/core'; +import { ToastButton as ToastButtonCore, ToastOptions as ToastOptionsCore, toastController as toastControllerCore } from '@ionic/core'; import { createControllerComponent } from './createControllerComponent'; +export interface ToastButton extends Omit { + icon?: { + ios: string; + md: string; + }; +} + +export interface ToastOptions extends Omit { + buttons?: (ToastButton | string)[]; +} + +const toastController = { + create: (options: ToastOptions) => toastControllerCore.create(options as any), + dismiss: (data?: any, role?: string | undefined, id?: string | undefined) => toastControllerCore.dismiss(data, role, id), + getTop: () => toastControllerCore.getTop() +}; + export const IonToast = /*@__PURE__*/createControllerComponent('IonToast', toastController); From f8773a4e04d136b6388875c3839c5429bdc0faa4 Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Tue, 17 Dec 2019 10:52:58 -0700 Subject: [PATCH 4/7] chore(docs): updating ActionSheet React sample --- core/src/components/action-sheet/readme.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index fcfb07a4e4..2d1e82d4de 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -127,6 +127,7 @@ async function presentActionSheet() { ```typescript import React, { useState } from 'react' import { IonActionSheet, IonContent, IonButton } from '@ionic/react'; +import { trash, share, close, arrowDroprightCircle, heart } from 'ionicons/icons'; export const ActionSheetExample: React.FC = () => { @@ -141,31 +142,31 @@ export const ActionSheetExample: React.FC = () => { buttons={[{ text: 'Delete', role: 'destructive', - icon: 'trash', + icon: trash, handler: () => { console.log('Delete clicked'); } }, { text: 'Share', - icon: 'share', + icon: share, handler: () => { console.log('Share clicked'); } }, { text: 'Play (open modal)', - icon: 'arrow-dropright-circle', + icon: arrowDroprightCircle, handler: () => { console.log('Play clicked'); } }, { text: 'Favorite', - icon: 'heart', + icon: heart, handler: () => { console.log('Favorite clicked'); } }, { text: 'Cancel', - icon: 'close', + icon: close, role: 'cancel', handler: () => { console.log('Cancel clicked'); From d294e67f521712a6ec60bca0f5778b64b03ac04d Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Wed, 8 Jan 2020 16:13:52 -0700 Subject: [PATCH 5/7] fix(react): supporting ios and md props on icons (#20170) --- packages/react/src/components/IonIcon.tsx | 83 +++++++++++++++++++ packages/react/src/components/index.ts | 1 + .../react/src/components/inner-proxies.ts | 4 + packages/react/src/components/proxies.ts | 4 - 4 files changed, 88 insertions(+), 4 deletions(-) create mode 100644 packages/react/src/components/IonIcon.tsx diff --git a/packages/react/src/components/IonIcon.tsx b/packages/react/src/components/IonIcon.tsx new file mode 100644 index 0000000000..6d9db46664 --- /dev/null +++ b/packages/react/src/components/IonIcon.tsx @@ -0,0 +1,83 @@ +import React from 'react'; + +import { NavContext } from '../contexts/NavContext'; + +import { IonicReactProps } from './IonicReactProps'; +import { IonIconInner } from './inner-proxies'; +import { createForwardRef, isPlatform } from './utils'; +import { deprecationWarning } from './utils/dev'; + +interface IonIconProps { + ariaLabel?: string; + color?: string; + flipRtl?: boolean; + icon?: { ios: string; md: string; }; + ios?: { ios: string; md: string; }; + lazy?: boolean; + md?: { ios: string; md: string; }; + mode?: 'ios' | 'md'; + name?: string; + size?: string; + src?: string; +} + +type InternalProps = IonIconProps & { + forwardedRef?: React.RefObject; +}; + +class IonIconContainer extends React.PureComponent { + + constructor(props: InternalProps) { + super(props); + if (this.props.name) { + deprecationWarning('icon-name', 'In Ionic React, you import icons from "ionicons/icons" and set the icon you imported to the "icon" property. Setting the "name" property has no effect.'); + } + } + + setIcon() { + const { icon, ios, md } = this.props; + if (ios || md) { + if (isPlatform('ios')) { + this.setState({ + icon: ios ?? md ?? icon + }); + } else if (isPlatform('android')) { + this.setState({ + icon: md ?? ios ?? icon + }); + } + } else { + this.setState({ + icon + }); + } + } + + render() { + const { icon, ios, md, ...rest } = this.props; + + let iconToUse: typeof icon; + + if (ios || md) { + if (isPlatform('ios')) { + iconToUse = ios ?? md ?? icon; + } else if (isPlatform('android')) { + iconToUse = md ?? ios ?? icon; + } + } else { + iconToUse = icon; + } + + return ( + + {this.props.children} + + ); + } + + static get contextType() { + return NavContext; + } +} + +export const IonIcon = createForwardRef(IonIconContainer, 'IonIcon'); diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 3d32047cd3..6c5d09f275 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -22,6 +22,7 @@ export { IonTabs } from './navigation/IonTabs'; export { IonTabBar } from './navigation/IonTabBar'; export { IonBackButton } from './navigation/IonBackButton'; export { IonRouterOutlet } from './IonRouterOutlet'; +export { IonIcon } from './IonIcon'; // Utils export { isPlatform, getPlatforms, getConfig } from './utils'; diff --git a/packages/react/src/components/inner-proxies.ts b/packages/react/src/components/inner-proxies.ts index 375a709cc1..cf353ee38f 100644 --- a/packages/react/src/components/inner-proxies.ts +++ b/packages/react/src/components/inner-proxies.ts @@ -1,7 +1,11 @@ import { JSX } from '@ionic/core'; +import { JSX as IoniconsJSX } from 'ionicons'; import { /*@__PURE__*/ createReactComponent } from './createComponent'; export const IonTabBarInner = /*@__PURE__*/createReactComponent('ion-tab-bar'); export const IonBackButtonInner = /*@__PURE__*/createReactComponent, HTMLIonBackButtonElement>('ion-back-button'); export const IonRouterOutletInner = /*@__PURE__*/createReactComponent('ion-router-outlet'); + +// ionicons +export const IonIconInner = /*@__PURE__*/createReactComponent('ion-icon'); diff --git a/packages/react/src/components/proxies.ts b/packages/react/src/components/proxies.ts index 685b24a485..3718649359 100644 --- a/packages/react/src/components/proxies.ts +++ b/packages/react/src/components/proxies.ts @@ -1,12 +1,8 @@ import { JSX } from '@ionic/core'; -import { JSX as IoniconsJSX } from 'ionicons'; import { createReactComponent } from './createComponent'; import { HrefProps } from './hrefprops'; -// ionicons -export const IonIcon = /*@__PURE__*/createReactComponent('ion-icon'); - // ionic/core export const IonApp = /*@__PURE__*/createReactComponent('ion-app'); export const IonTab = /*@__PURE__*/createReactComponent('ion-tab'); From 57eec1cb0a45490fed2d2bca91daf24194de2cfb Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Mon, 13 Jan 2020 09:08:34 -0700 Subject: [PATCH 6/7] fix(react): add missing react memory router --- .../src/ReactRouter/IonReactMemoryRouter.tsx | 21 +++++++++++++++++++ .../react-router/src/ReactRouter/Router.tsx | 2 +- .../react-router/src/ReactRouter/index.ts | 1 + 3 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx diff --git a/packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx b/packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx new file mode 100644 index 0000000000..4367569e2d --- /dev/null +++ b/packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx @@ -0,0 +1,21 @@ +import { MemoryHistory } from 'history'; +import React from 'react'; +import { MemoryRouter, MemoryRouterProps, matchPath } from 'react-router'; + +import { RouteManager } from './Router'; + +interface IonReactMemoryRouterProps extends MemoryRouterProps { + history: MemoryHistory; +} + +export class IonReactMemoryRouter extends React.Component { + render() { + const { children, history, ...props } = this.props; + const match = matchPath(history.location.pathname, this.props); + return ( + + {children} + + ); + } +} diff --git a/packages/react-router/src/ReactRouter/Router.tsx b/packages/react-router/src/ReactRouter/Router.tsx index 164165a389..318a1b9ab8 100644 --- a/packages/react-router/src/ReactRouter/Router.tsx +++ b/packages/react-router/src/ReactRouter/Router.tsx @@ -19,7 +19,7 @@ interface RouteManagerState extends RouteManagerContextState { action?: IonRouteAction; } -class RouteManager extends React.Component { +export class RouteManager extends React.Component { listenUnregisterCallback: UnregisterCallback | undefined; activeIonPageId?: string; currentIonRouteAction?: IonRouteAction; diff --git a/packages/react-router/src/ReactRouter/index.ts b/packages/react-router/src/ReactRouter/index.ts index 6e8cbe6211..e462884c14 100644 --- a/packages/react-router/src/ReactRouter/index.ts +++ b/packages/react-router/src/ReactRouter/index.ts @@ -1,2 +1,3 @@ export { IonReactRouter } from './IonReactRouter'; export { IonReactHashRouter } from './IonReactHashRouter'; +export { IonReactMemoryRouter } from './IonReactMemoryRouter'; From a1c5a068125563ffea93e7b1d7142045829d4723 Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Mon, 13 Jan 2020 09:52:21 -0700 Subject: [PATCH 7/7] 4.11.8 --- CHANGELOG.md | 7 +++++++ core/src/components/action-sheet/readme.md | 11 +++++------ core/src/components/toast/readme.md | 3 +-- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 685e001355..7a3336a088 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## [4.11.8](https://github.com/ionic-team/ionic/compare/v4.11.7...v4.11.8) (2020-01-13) + +* **react:** add missing react memory router ([8a5aba2](https://github.com/ionic-team/ionic/commit/8a5aba206865ce2af7f8bb85f4e7cd8dec37831d)) +* **react:** fixing type of icon in ToastOptions, ActionSheetOptions, fixes [#20100](https://github.com/ionic-team/ionic/issues/20100) ([857bab6](https://github.com/ionic-team/ionic/commit/857bab66419a851c6d189cd1456cd67c1c2d934c)) +* **react:** supporting ios and md props on icons ([#20170](https://github.com/ionic-team/ionic/issues/20170)) ([676cc19](https://github.com/ionic-team/ionic/commit/676cc19b89cd6374346aaac9cc3292872c7148fa)) + + # [5.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v5.0.0-beta.3...v5.0.0-beta.4) (2020-01-06) diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index 2d1e82d4de..fcfb07a4e4 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -127,7 +127,6 @@ async function presentActionSheet() { ```typescript import React, { useState } from 'react' import { IonActionSheet, IonContent, IonButton } from '@ionic/react'; -import { trash, share, close, arrowDroprightCircle, heart } from 'ionicons/icons'; export const ActionSheetExample: React.FC = () => { @@ -142,31 +141,31 @@ export const ActionSheetExample: React.FC = () => { buttons={[{ text: 'Delete', role: 'destructive', - icon: trash, + icon: 'trash', handler: () => { console.log('Delete clicked'); } }, { text: 'Share', - icon: share, + icon: 'share', handler: () => { console.log('Share clicked'); } }, { text: 'Play (open modal)', - icon: arrowDroprightCircle, + icon: 'arrow-dropright-circle', handler: () => { console.log('Play clicked'); } }, { text: 'Favorite', - icon: heart, + icon: 'heart', handler: () => { console.log('Favorite clicked'); } }, { text: 'Cancel', - icon: close, + icon: 'close', role: 'cancel', handler: () => { console.log('Cancel clicked'); diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index ca6fd572d2..857980d95d 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -117,7 +117,6 @@ async function presentToastWithOptions() { ```tsx import React, { useState } from 'react'; import { IonToast, IonContent, IonButton } from '@ionic/react'; -import { star } from 'ionicons/icons'; export const ToastExample: React.FC = () => { const [showToast1, setShowToast1] = useState(false); @@ -142,7 +141,7 @@ export const ToastExample: React.FC = () => { buttons={[ { side: 'start', - icon: star, + icon: 'star', text: 'Favorite', handler: () => { console.log('Favorite clicked');