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

feature(react): rc2 release

Browse Source 
* fix(): add a page with class ion-page back to ionrouteroutlet - fixes #19146

* wip

* fix(react): attributes show up in dom

* chore(): adding ion-page to core wip

* wip

* fix destroy method

* wrap dom writes in raf

* Add comments

* fix(react): IonPage work

* chore(): ionpage rc3 changelog text

* fix(): syncing ion-page in a new way to get rid of timeout loop

* chore(): ViewStacks refactor out of router

* fix(): remove unused method in router

* wip - before setActiveView rework

* fix(): react router ion page work

* chore(): cleanup and dev release

* fix(): remove need to name tabs

* chore(): adding dev mode helpers

* fix(): adding className prop to back button fixes #19251

* fix(): routerDirection changes

* chore(): rc2 release

* fix(): fix react version in package

* chores(): build kickoff
This commit is contained in:
Ely Lucas
2019-09-12 14:25:37 -06:00
committed by GitHub
parent aec2936725
commit 73dd70d756
32 changed files with 822 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
packages/react-router/src/ReactRouter/View.tsx
View File

@ -1,48 +1,44 @@
import React from 'react';
import { IonLifeCycleContext } from '@ionic/react';
import { IonLifeCycleContext, NavContext } from '@ionic/react';
import { ViewItem } from './ViewItem';
import { Route, Redirect } from 'react-router-dom';
import { isDevMode } from '../utils';
type Props = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
interface InternalProps extends React.HTMLAttributes<HTMLElement> {
forwardedRef?: React.RefObject<HTMLElement>,
interface ViewProps extends React.HTMLAttributes<HTMLElement> {
onViewSync: (page: HTMLElement, viewId: string) => void;
onHideView: (viewId: string) => void;
view: ViewItem;
};
type ExternalProps = Props & {
ref?: React.RefObject<HTMLElement>
};
interface StackViewState { }
interface StackViewState {
ref: any;
}
class ViewInternal extends React.Component<InternalProps, StackViewState> {
/**
* The View component helps manage the IonPage's lifecycle and registration
*/
export class View extends React.Component<ViewProps, StackViewState> {
context!: React.ContextType<typeof IonLifeCycleContext>;
constructor(props: InternalProps) {
super(props);
this.state = {
ref: null
}
}
ionPage?: HTMLElement;
componentDidMount() {
const { forwardedRef } = this.props;
this.setState({ ref: forwardedRef });
if (forwardedRef && forwardedRef.current) {
forwardedRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
forwardedRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
forwardedRef.current.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
forwardedRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
/**
* If we can tell if view is a redirect, hide it so it will work again in future
*/
const { view } = this.props;
if (view.route.type === Redirect) {
this.props.onHideView(view.id);
} else if (view.route.type === Route && view.route.props.render) {
if (view.route.props.render().type === Redirect) {
this.props.onHideView(view.id);
}
}
}
componentWillUnmount() {
const { forwardedRef } = this.props;
if (forwardedRef && forwardedRef.current) {
forwardedRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
forwardedRef.current.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
forwardedRef.current.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
forwardedRef.current.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
if (this.ionPage) {
this.ionPage.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
this.ionPage.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
this.ionPage.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
this.ionPage.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
}
}
@ -62,28 +58,39 @@ class ViewInternal extends React.Component<InternalProps, StackViewState> {
this.context.ionViewDidLeave();
}
registerIonPage(page: HTMLElement) {
this.ionPage = page;
this.ionPage.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
this.ionPage.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
this.ionPage.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
this.ionPage.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
this.ionPage.classList.add('ion-page-invisible');
if(isDevMode()) {
this.ionPage.setAttribute('data-view-id', this.props.view.id);
}
this.props.onViewSync(page, this.props.view.id);
}
render() {
const { className, children, forwardedRef, ...rest } = this.props;
const { ref } = this.state;
return (
<div
className={className ? `ion-page ${className}` : 'ion-page'}
ref={forwardedRef as any}
{...rest}
>
{ref && children}
</div>
)
<NavContext.Consumer>
{value => {
const newProvider = {
...value,
registerIonPage: this.registerIonPage.bind(this)
}
return (
<NavContext.Provider value={newProvider}>
{this.props.children}
</NavContext.Provider>
);
}}
</NavContext.Consumer>
);
}
static get contextType() {
return IonLifeCycleContext;
}
}
function forwardRef(props: InternalProps, ref: React.RefObject<HTMLElement>) {
return <ViewInternal forwardedRef={ref} {...props} />;
}
forwardRef.displayName = 'View';
export const View = /*@__PURE__*/React.forwardRef<HTMLElement, ExternalProps>(forwardRef as any);