forked from twobin/react-lazyload
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
408e375
commit 40676ad
Showing
22 changed files
with
311 additions
and
638 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,49 +1,7 @@ | ||
{ | ||
"parser": "babel-eslint", | ||
"ecmaFeatures": { | ||
"jsx": true | ||
}, | ||
"env": { | ||
"browser": true, | ||
"node": true, | ||
"es6": true | ||
}, | ||
"extends": "airbnb", | ||
"rules": { | ||
"strict": [0], | ||
"react/jsx-uses-vars": [2], | ||
"eol-last": [2], | ||
"no-mixed-requires": [1], | ||
"no-underscore-dangle": [0], | ||
"block-scoped-var": [1], | ||
"curly": [1], | ||
"eqeqeq": [1], | ||
"guard-for-in": [2], | ||
"no-labels": [1], | ||
"no-eval": [1], | ||
"no-extra-bind": [1], | ||
"no-implied-eval": [1], | ||
"no-labels": [2], | ||
"no-lone-blocks": [1], | ||
"no-multi-spaces": [0], | ||
"no-redeclare": [1], | ||
"no-unused-vars": [1], | ||
"no-unused-expressions": [0], | ||
"no-with": [2], | ||
"radix": [1], | ||
"dot-notation": [0], | ||
"new-parens": [1], | ||
"consistent-return": [1], | ||
"semi": [1], | ||
|
||
"camelcase": [1], | ||
"quotes": [2, "single"], | ||
"key-spacing": [1], | ||
"new-cap": [0], | ||
"no-mixed-spaces-and-tabs": [2], | ||
"no-space-before-semi": [1], | ||
"no-trailing-spaces": [1] | ||
}, | ||
"plugins": [ | ||
"eslint-plugin-react" | ||
] | ||
"comma-dangle": 0 | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,60 +1,29 @@ | ||
import React, {Component} from 'react'; | ||
import ReactDom from 'react-dom'; | ||
import LazyLoad from '../src/'; | ||
import Widget from './Widget'; | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import {Router, Route, hashHistory, Link} from 'react-router'; | ||
|
||
function uniqueId() { | ||
return (Math.random().toString(36) + '00000000000000000').slice(2, 10); | ||
} | ||
import Decorator from './pages/decorator'; | ||
import Normal from './pages/Normal'; | ||
import Scroll from './pages/Scroll'; | ||
import Overflow from './pages/Overflow'; | ||
|
||
class App extends Component { | ||
constructor() { | ||
super(); | ||
const Home = () => ( | ||
<ul> | ||
<li><Link to="/normal">normal</Link></li> | ||
<li><Link to="/decorator">using with <code>decorator</code></Link></li> | ||
<li><Link to="/scroll">using with <code>scrollTo</code></Link></li> | ||
<li><Link to="/overflow">using inside overflow container</Link></li> | ||
</ul> | ||
); | ||
|
||
const id = uniqueId(); | ||
this.state = { | ||
arr: [0, 1, 2, 3, 4, 5, 6, 7].map(index => { | ||
return { | ||
uniqueId: id, | ||
once: [6, 7].indexOf(index) > -1 | ||
}; | ||
}) | ||
}; | ||
} | ||
const routes = ( | ||
<Router history={hashHistory}> | ||
<Route path="/" component={Home} /> | ||
<Route path="/decorator" component={Decorator} /> | ||
<Route path="/normal" component={Normal} /> | ||
<Route path="/scroll" component={Scroll} /> | ||
<Route path="/overflow" component={Overflow} /> | ||
</Router> | ||
); | ||
|
||
handleClick() { | ||
const id = uniqueId(); | ||
|
||
this.setState({ | ||
arr: this.state.arr.map(el => { | ||
return { | ||
...el, | ||
uniqueId: id | ||
}; | ||
}) | ||
}); | ||
} | ||
|
||
render() { | ||
return ( | ||
<div className="wrapper"> | ||
<div className="op"> | ||
<a className="update-btn button-secondary pure-button" onClick={::this.handleClick}>Update</a> | ||
<p className="desc">Clicking this button will make all <code>Widgets</code> in <strong> visible area </strong>reload data from server.</p> | ||
<p className="desc">Pay attention to <code>props from parent</code> block in <code>Widget</code> to identify how LazyLoad works.</p> | ||
</div> | ||
<div className="widget-list"> | ||
{this.state.arr.map((el, index) => { | ||
return ( | ||
<LazyLoad once={el.once} key={index}> | ||
<Widget once={el.once} id={el.uniqueId} /> | ||
</LazyLoad> | ||
); | ||
})} | ||
</div> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
ReactDom.render(<App />, document.getElementById('container')); | ||
ReactDOM.render(routes, document.getElementById('app')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import React from 'react'; | ||
import {Link} from 'react-router'; | ||
|
||
export default ({ type, onClickUpdate }) => ( | ||
<div className="op"> | ||
<div className="top-link"> | ||
<a href={`https://github.com/jasonslyvia/react-lazyload/tree/master/examples/components/${type}.js`} | ||
target="_blank" title="Checkout source file in Github" | ||
> | ||
source | ||
</a> | ||
<Link to="/" title="Go back to menu">back</Link> | ||
</div> | ||
<a className="update-btn button-secondary pure-button" onClick={onClickUpdate}>Update</a> | ||
<p className="desc"> | ||
Clicking this button will make all <code>Widgets</code> in <strong> visible area </strong> | ||
reload data from server. | ||
</p> | ||
<p className="desc"> | ||
Pay attention to <code>props from parent</code> block in <code>Widget</code> | ||
to identify how LazyLoad works. | ||
</p> | ||
</div> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.