Skip to content

R
react-live-route
Commit fa187af3 by Wee
Options

chore: fix dependency

parent e7091381
Showing with 6 additions and 380 deletions
example/README.md deleted 100644 → 0
# example demo
demo based on create-react-app
run:
```bash
npm install
npm start
```
example/package-lock.json deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
example/package.json deleted 100755 → 0
{
"name": "react-live-route-demo",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.js",
"dependencies": {
"react": "16.4.1",
"react-dom": "16.4.1",
"react-live-route": "../",
"react-router-dom": "4.3.1",
"react-scripts": "1.1.4"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
example/public/index.html deleted 100755 → 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
\ No newline at end of file
example/src/about.js deleted 100755 → 0
import React from 'react'
class ListPage extends React.Component {
state = { count: 0 }
componentDidMount() {
window.scrollTo(0, 0)
setInterval(() => {
this.setState({
count: this.state.count + 1
})
}, 200)
}
render() {
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.</p>
</div>
)
const placeholder = Array(60)
.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.
</p>
)
})
return (
<div className="about">
{timer}
{desc}
{placeholder}
</div>
)
}
}
export default ListPage
example/src/bar.js deleted 100755 → 0
import React from 'react'
import { Link } from 'react-router-dom'
import './styles.css'
const Bar = props => {
return (
<div className="bar">
<Link to="/">Home</Link>
<Link to="/items">Items</Link>
<Link to="/about">About</Link>
</div>
)
}
export default Bar
example/src/detail.js deleted 100755 → 0
import React from 'react'
import { Link } from 'react-router-dom'
const List = props => {
return (
<div>
<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, 10) - 1}`}>
Prev item
</Link>
<Link className="pagination" to={`/item/${Number.parseInt(props.match.params.id, 10) + 1}`}>
Next item
</Link>
</div>
)
}
export default List
example/src/home.js deleted 100755 → 0
import React from 'react'
import { Link } from 'react-router-dom'
const Home = props => {
return (
<div>
<a
className="detailContent"
href="https://github.com/fi3ework/react-live-route"
target="_blank"
rel="noopener noreferrer"
>
<h1>react-live-route</h1>
</a>
<Link to="/items">
<div className="entry">into items</div>
</Link>
</div>
)
}
export default Home
example/src/index.js deleted 100755 → 0
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'
function App() {
return (
<div className="App">
<Route exact path="/" component={Home} />
<LiveRoute
path="/items"
component={List}
livePath="/item/:id"
name="items"
onHide={routeState => {
console.log('[on hide]')
console.log(routeState)
}}
onReappear={routeState => {
console.log('[on reappear]')
console.log(routeState)
}}
/>
<Route path="/item/:id" component={Detail} />
<LiveRoute path="/about" alwaysLive={true} component={About} name="about" />
<Bar />
</div>
)
}
const rootElement = document.getElementById('root')
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
rootElement
)
if ('scrollRestoration' in window.history) {
// 默认值为 'auto'
// window.history.scrollRestoration = 'manual'
}
document.addEventListener('scrollTo', () => {
console.log('document scrolled')
})
example/src/list.js deleted 100755 → 0
import React from 'react'
import { Link } from 'react-router-dom'
class ListPage extends React.Component {
state = { count: 0 }
componentWillUnmount() {
console.log('##### items will unmount #####')
}
componentDidMount() {
console.log('##### items did mount #####')
window.scrollTo(0, 0)
setInterval(() => {
this.setState({
count: this.state.count + 1
})
}, 200)
}
render() {
const list = Array(200)
.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 desc = (
<div className="desc">
<p>
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.
</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.
</p>
<p>Feel free to try it.</p>
</div>
)
return (
<div className="list">
{timer}
{desc}
{list}
</div>
)
}
}
export default ListPage
example/src/styles.css deleted 100755 → 0
.App {
font-family: sans-serif;
text-align: center;
}
a {
text-decoration: none;
color: #666;
}
.bar {
position: fixed;
display: flex;
width: 100%;
justify-content: space-around;
padding: 10px 0;
left: 0;
bottom: 0;
background-color: #aaa;
border-top: 2px solid #888;
}
.bar a {
color: #fff;
}
.item {
display: block;
color: #666;
width: 100px;
padding: 5px 0;
border-radius: 4px;
margin: 5px auto;
background-color: #f1f1f1;
}
.count {
color: #333;
}
.desc {
color: #666;
margin: 0 auto;
text-align: left;
}
.detailContent {
margin: 50px 0;
}
.pagination {
display: inline-block;
margin: 0 20px;
padding: 0 10px;
color: #fff;
background-color: #777;
border-radius: 4px;
}
code {
background-color: #eee;
padding: 2px 4px;
border-radius: 2px;
color: darkcyan;
}
.about,
.list {
width: 80%;
margin: 0 auto;
}
.entry {
padding: 20px 0;
width: 80%;
margin: 0 auto;
transition: all 0.2s ease-in;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.entry:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.placeholder-text {
color: #999;
}
package.json
...@@ -17,20 +17,21 @@ ...@@ -17,20 +17,21 @@
"test:watch": "jest --watch" "test:watch": "jest --watch"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=15" "react": ">=15",
"react-router-dom": ">=4 < 4.4"
}, },
"dependencies": { "dependencies": {
"history": "^4.9.0", "history": "^4.9.0",
"invariant": "^2.2.4", "invariant": "^2.2.4",
"prop-types": "^15.6.1", "prop-types": "^15.6.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-is": "^16.7.0", "react-is": "^16.7.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"warning": "^4.0.1" "warning": "^4.0.1"
}, },
"devDependencies": { "devDependencies": {
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"@types/jest": "^24.0.9", "@types/jest": "^24.0.9",
"@types/react": "^16.7.18", "@types/react": "^16.7.18",
"@types/react-dom": "^16.0.11", "@types/react-dom": "^16.0.11",
......
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