Skip to content

R
react-live-route
Commit 9e6b616f by Wee
Options

temp: before eject

parent 68375a1c
Showing with 117 additions and 126 deletions
dist/LiveRoute.js
......@@ -30,10 +30,13 @@ import ReactDOM from 'react-dom';
import { matchPath } from 'react-router';
import { isValidElementType } from 'react-is';
var isEmptyChildren = function (children) { return React.Children.count(children) === 0; };
var NORMAL_RENDER_MATCHED = 'normal matched render';
var NORMAL_RENDER_UNMATCHED = 'normal unmatched render (unmount)';
var NORMAL_RENDER_ON_INIT = 'normal render (matched or unmatched)';
var HIDE_RENDER = 'hide route when livePath matched';
var LiveState;
(function (LiveState) {
LiveState["NORMAL_RENDER_MATCHED"] = "normal matched render";
LiveState["NORMAL_RENDER_UNMATCHED"] = "normal unmatched render (unmount)";
LiveState["NORMAL_RENDER_ON_INIT"] = "normal render (matched or unmatched)";
LiveState["HIDE_RENDER"] = "hide route when livePath matched";
})(LiveState || (LiveState = {}));
/**
* The public API for matching a single path and rendering.
*/
......@@ -45,7 +48,7 @@ var LiveRoute = /** @class */ (function (_super) {
_this.state = {
match: _this.computeMatch(_this.props, _this.context.router)
};
_this.liveState = NORMAL_RENDER_ON_INIT;
_this.liveState = LiveState.NORMAL_RENDER_ON_INIT;
_this.scrollPosBackup = null;
_this.previousDisplayStyle = null;
return _this;
......@@ -90,7 +93,7 @@ var LiveRoute = /** @class */ (function (_super) {
}
// restore display when matched normally
console.log(this.liveState);
if (this.liveState === NORMAL_RENDER_MATCHED) {
if (this.liveState === LiveState.NORMAL_RENDER_MATCHED) {
this.showRoute();
this.restoreScrollPosition();
this.clearScroll();
......@@ -130,7 +133,7 @@ var LiveRoute = /** @class */ (function (_super) {
if (match) {
// normal matched render
console.log('--- NORMAL MATCH FLAG ---');
this.liveState = NORMAL_RENDER_MATCHED;
this.liveState = LiveState.NORMAL_RENDER_MATCHED;
return match;
}
else if ((livePathMatch || props.alwaysLive) && this.routeDom) {
......@@ -140,7 +143,7 @@ var LiveRoute = /** @class */ (function (_super) {
}
// hide render
console.log('--- HIDE FLAG ---');
this.liveState = HIDE_RENDER;
this.liveState = LiveState.HIDE_RENDER;
this.saveScrollPosition();
this.hideRoute();
return prevMatch;
......@@ -148,7 +151,7 @@ var LiveRoute = /** @class */ (function (_super) {
else {
// normal unmatched unmount
console.log('--- NORMAL UNMATCH FLAG ---');
this.liveState = NORMAL_RENDER_UNMATCHED;
this.liveState = LiveState.NORMAL_RENDER_UNMATCHED;
this.clearScroll();
this.clearDomData();
}
......@@ -252,13 +255,13 @@ var LiveRoute = /** @class */ (function (_super) {
var props = { match: match, location: location, history: history, staticContext: staticContext };
if ((livePath || alwaysLive) && (component || render)) {
console.log('=== RENDER FLAG: ' + this.liveState + ' ===');
if (this.liveState === NORMAL_RENDER_MATCHED ||
this.liveState === NORMAL_RENDER_UNMATCHED ||
this.liveState === NORMAL_RENDER_ON_INIT) {
if (this.liveState === LiveState.NORMAL_RENDER_MATCHED ||
this.liveState === LiveState.NORMAL_RENDER_UNMATCHED ||
this.liveState === LiveState.NORMAL_RENDER_ON_INIT) {
// normal render
return this.renderRoute(component, render, props, match);
}
else if (this.liveState === HIDE_RENDER) {
else if (this.liveState === LiveState.HIDE_RENDER) {
// hide render
var prevRouter = this._latestMatchedRouter;
// load properties from prevRouter and fake props of latest normal render
......
example/README.md 0 → 100644
# example demo
demo based on create-react-app
run:
```bash
npm install
npm start
```
example/package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
example/src/about.js
import React from "react";
import React from 'react'
class ListPage extends React.Component {
state = { count: 0 };
state = { count: 0 }
componentDidMount() {
window.scrollTo(0, 0);
window.scrollTo(0, 0)
setInterval(() => {
this.setState({
count: this.state.count + 1
});
}, 200);
})
}, 200)
}
render() {
const timer = <h2 className="count">count: {this.state.count}</h2>;
const timer = <h2 className="count">count: {this.state.count}</h2>
const desc = (
<div className="desc">
<p>
This page of route is using <code>LiveRoute</code> with{" "}
<code>alwaysLive</code>.
</p>
<p>
It will not unmount after mounted and that means it will only mount
once.
This page of route is using <code>LiveRoute</code> with <code>alwaysLive</code>.
</p>
<p>It will not unmount after mounted and that means it will only mount once.</p>
</div>
);
)
const placeholder = Array(60)
.fill("")
.fill('')
.map((item, index) => {
return (
<p className="placeholder-text" key={index}>
{index} - You can scroll the screen to test if react-live-route can
restore scroll position.
{index} - You can scroll the screen to test if react-live-route can restore scroll position.
</p>
);
});
)
})
return (
<div className="about">
{timer}
{desc}
{placeholder}
</div>
);
)
}
}
export default ListPage;
export default ListPage
example/src/bar.js
import React from "react";
import { Link } from "react-router-dom";
import "./styles.css";
import React from 'react'
import { Link } from 'react-router-dom'
import './styles.css'
const Bar = props => {
return (
......@@ -9,7 +9,7 @@ const Bar = props => {
<Link to="/items">Items</Link>
<Link to="/about">About</Link>
</div>
);
};
)
}
export default Bar;
export default Bar
example/src/detail.js
import React from "react";
import { Link } from "react-router-dom";
import React from 'react'
import { Link } from 'react-router-dom'
const List = props => {
return (
......@@ -7,23 +7,15 @@ const List = props => {
<Link to="/items">
<div>&gt;&gt; back to List</div>
</Link>
<div className="detailContent">{`hello, I'm item - ${
props.match.params.id
}`}</div>
<Link
className="pagination"
to={`/item/${Number.parseInt(props.match.params.id) - 1}`}
>
<div className="detailContent">{`hello, I'm item - ${props.match.params.id}`}</div>
<Link className="pagination" to={`/item/${Number.parseInt(props.match.params.id) - 1}`}>
Prev item
</Link>
<Link
className="pagination"
to={`/item/${Number.parseInt(props.match.params.id) + 1}`}
>
<Link className="pagination" to={`/item/${Number.parseInt(props.match.params.id) + 1}`}>
Next item
</Link>
</div>
);
};
)
}
export default List;
export default List
example/src/home.js
import React from "react";
import { Link } from "react-router-dom";
import React from 'react'
import { Link } from 'react-router-dom'
const Home = props => {
return (
......@@ -16,7 +16,7 @@ const Home = props => {
<div className="entry">into items</div>
</Link>
</div>
);
};
)
}
export default Home;
export default Home
example/src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { Route, BrowserRouter } from "react-router-dom";
import LiveRoute from "react-live-route";
import List from "./list";
import Detail from "./detail";
import Bar from "./bar";
import About from "./about";
import Home from "./home";
import "./styles.css";
import React from 'react'
import ReactDOM from 'react-dom'
import { Route, BrowserRouter } from 'react-router-dom'
import LiveRoute from '../../dist/index'
import List from './list'
import Detail from './detail'
import Bar from './bar'
import About from './about'
import Home from './home'
import './styles.css'
function App() {
return (
<div className="App">
<Route exact path="/" component={Home} />
<LiveRoute
path="/items"
component={List}
livePath="/item/:id"
name="items"
/>
<LiveRoute path="/items" component={List} livePath="/item/:id" name="items" />
<Route path="/item/:id" component={Detail} />
<LiveRoute
path="/about"
alwaysLive={true}
component={About}
name="about"
/>
<LiveRoute path="/about" alwaysLive={true} component={About} name="about" />
<Bar />
</div>
);
)
}
const rootElement = document.getElementById("root");
const rootElement = document.getElementById('root')
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
rootElement
);
)
if ("scrollRestoration" in window.history) {
// 默认值为'auto'
if ('scrollRestoration' in window.history) {
// 默认值为 'auto'
// window.history.scrollRestoration = 'manual'
}
document.addEventListener("scrollTo", () => {
console.log("233");
});
document.addEventListener('scrollTo', () => {
console.log('233')
})
example/src/list.js
import React from "react";
import { Link } from "react-router-dom";
import React from 'react'
import { Link } from 'react-router-dom'
class ListPage extends React.Component {
state = { count: 0 };
state = { count: 0 }
componentWillUnmount() {
console.log("##### items will unmount #####");
console.log('##### items will unmount #####')
}
componentDidMount() {
console.log("##### items did mount #####");
window.scrollTo(0, 0);
console.log('##### items did mount #####')
window.scrollTo(0, 0)
setInterval(() => {
this.setState({
count: this.state.count + 1
});
}, 200);
})
}, 200)
}
render() {
const list = Array(200)
.fill("")
.fill('')
.map((item, index) => {
return (
<Link className="item" to={`/item/${index}`} key={index}>
<div>Item - {index}</div>
</Link>
);
});
)
})
const timer = <h2 className="count">count: {this.state.count}</h2>;
const timer = <h2 className="count">count: {this.state.count}</h2>
const desc = (
<div className="desc">
<p>
This page of route is using <code>LiveRoute</code> with{" "}
<code>livePath</code>.
This page of route is using <code>LiveRoute</code> with <code>livePath</code>.
</p>
<p>
In this page, the list page will not be unmounted on item detail page
and will be unmounted when enter into other pages such as home page.
In this page, the list page will not be unmounted on item detail page and will be unmounted when enter into
other pages such as home page.
</p>
<p>
The count number above is a sign of component live state. It will be
reset to 0 when the component of Route unmounted. You can scroll the
page and it will be restored when backing from item detail page.
The count number above is a sign of component live state. It will be reset to 0 when the component of Route
unmounted. You can scroll the page and it will be restored when backing from item detail page.
</p>
<p>Feel free to try it.</p>
</div>
);
)
return (
<div className="list">
{timer}
{desc}
{list}
</div>
);
)
}
}
export default ListPage;
export default ListPage
package.json
......@@ -14,7 +14,7 @@
"sideEffects": false,
"scripts": {
"build": "rm -fr dist && tsc",
"watch": "tsc -b -w --pretty",
"dev": "tsc -b -w --pretty",
"prepare": "npm run build",
"lint": "eslint modules",
"test": "jest"
......
src/LiveRoute.tsx
......@@ -7,10 +7,13 @@ import { matchPath } from 'react-router'
import { isValidElementType } from 'react-is'
const isEmptyChildren = children => React.Children.count(children) === 0
const NORMAL_RENDER_MATCHED = 'normal matched render'
const NORMAL_RENDER_UNMATCHED = 'normal unmatched render (unmount)'
const NORMAL_RENDER_ON_INIT = 'normal render (matched or unmatched)'
const HIDE_RENDER = 'hide route when livePath matched'
enum LiveState {
NORMAL_RENDER_MATCHED = 'normal matched render',
NORMAL_RENDER_UNMATCHED = 'normal unmatched render (unmount)',
NORMAL_RENDER_ON_INIT = 'normal render (matched or unmatched)',
HIDE_RENDER = 'hide route when livePath matched'
}
type CacheDom = HTMLElement | null
......@@ -86,7 +89,7 @@ class LiveRoute extends React.Component<IProps, any> {
match: this.computeMatch(this.props as any, this.context.router)
}
liveState = NORMAL_RENDER_ON_INIT
liveState: LiveState = LiveState.NORMAL_RENDER_ON_INIT
scrollPosBackup: { left: number; top: number } | null = null
previousDisplayStyle: string | null = null
......@@ -147,7 +150,7 @@ class LiveRoute extends React.Component<IProps, any> {
// restore display when matched normally
console.log(this.liveState)
if (this.liveState === NORMAL_RENDER_MATCHED) {
if (this.liveState === LiveState.NORMAL_RENDER_MATCHED) {
this.showRoute()
this.restoreScrollPosition()
this.clearScroll()
......@@ -191,7 +194,7 @@ class LiveRoute extends React.Component<IProps, any> {
if (match) {
// normal matched render
console.log('--- NORMAL MATCH FLAG ---')
this.liveState = NORMAL_RENDER_MATCHED
this.liveState = LiveState.NORMAL_RENDER_MATCHED
return match
} else if ((livePathMatch || props.alwaysLive) && this.routeDom) {
// backup router when from normal match render to hide render
......@@ -200,14 +203,14 @@ class LiveRoute extends React.Component<IProps, any> {
}
// hide render
console.log('--- HIDE FLAG ---')
this.liveState = HIDE_RENDER
this.liveState = LiveState.HIDE_RENDER
this.saveScrollPosition()
this.hideRoute()
return prevMatch
} else {
// normal unmatched unmount
console.log('--- NORMAL UNMATCH FLAG ---')
this.liveState = NORMAL_RENDER_UNMATCHED
this.liveState = LiveState.NORMAL_RENDER_UNMATCHED
this.clearScroll()
this.clearDomData()
}
......@@ -320,13 +323,13 @@ class LiveRoute extends React.Component<IProps, any> {
if ((livePath || alwaysLive) && (component || render)) {
console.log('=== RENDER FLAG: ' + this.liveState + ' ===')
if (
this.liveState === NORMAL_RENDER_MATCHED ||
this.liveState === NORMAL_RENDER_UNMATCHED ||
this.liveState === NORMAL_RENDER_ON_INIT
this.liveState === LiveState.NORMAL_RENDER_MATCHED ||
this.liveState === LiveState.NORMAL_RENDER_UNMATCHED ||
this.liveState === LiveState.NORMAL_RENDER_ON_INIT
) {
// normal render
return this.renderRoute(component, render, props, match)
} else if (this.liveState === HIDE_RENDER) {
} else if (this.liveState === LiveState.HIDE_RENDER) {
// hide render
const prevRouter = this._latestMatchedRouter
// load properties from prevRouter and fake props of latest normal render
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment