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/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 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([]); }) + }) }); 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'; 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/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/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); 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');