Skip to content

Commit

Permalink
refactor: a better demo
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonslyvia committed Apr 7, 2016
1 parent 408e375 commit 40676ad
Show file tree
Hide file tree
Showing 22 changed files with 311 additions and 638 deletions.
48 changes: 3 additions & 45 deletions .eslintrc
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
}
}
81 changes: 25 additions & 56 deletions examples/app.js
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'));
24 changes: 24 additions & 0 deletions examples/components/Operation.js
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>
);
6 changes: 3 additions & 3 deletions examples/Widget.js → examples/components/Widget.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ class Widget extends Component {

this.state = {
isReady: (props.once && props.visible) || false,
count: 0
count: props.once ? 1 : 0
};
}

Expand All @@ -32,15 +32,15 @@ class Widget extends Component {
<div className="widget-text once">
<code>
&lt;LazyLoad once&gt;<br />
&lt;Widget /&gt;<br />
&nbsp;&nbsp;&lt;Widget /&gt;<br />
&lt;/LazyLoad&gt;
</code>
</div>
) : (
<div className="widget-text">
<code>
&lt;LazyLoad&gt;<br />
&lt;Widget /&gt;<br />
&nbsp;&nbsp;&lt;Widget /&gt;<br />
&lt;/LazyLoad&gt;
</code>
</div>
Expand Down
91 changes: 0 additions & 91 deletions examples/decorator.html

This file was deleted.

65 changes: 0 additions & 65 deletions examples/decorator.js

This file was deleted.

Loading

0 comments on commit 40676ad

Please sign in to comment.