Skip to content

Instantly share code, notes, and snippets.

@ThisIsMissEm

ThisIsMissEm/index.html

Forked from anonymous/index.html
Created January 21, 2016 06:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThisIsMissEm/50460fb0d5922c26d716 to your computer and use it in GitHub Desktop.
Save ThisIsMissEm/50460fb0d5922c26d716 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kuyiri
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-0.14.3.js"></script>
<script src="http://fb.me/react-dom-0.14.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.item, .item-selected {
background: blue;
color: white;
margin: 5px 0;
padding: 3px;
}
.item-selected {
background: red;
}
</style>
</head>
<body>
<div id="root" />
<script id="jsbin-javascript">
var items = [];
for(var i=100; i>0; i--) {
items.push("Item #" + i);
}
function scrollIntoView(node) {
var offsetTop = node.offsetTop;
var offsetHeight = node.offsetHeight;
var scrollTop = document.body.scrollTop;
// console.log(scrollTop, offsetTop)
if (offsetTop + offsetHeight > scrollTop) {
document.body.scrollTop = offsetTop;
}
if (offsetTop - offsetHeight < scrollTop) {
document.body.scrollTop = offsetTop;
}
}
var Item = React.createClass({displayName: 'Item',
getDefaultProps: function() {
return { direction: 'down', selected: false };
},
componentDidUpdate: function(prevProps) {
if (!prevProps.selected && this.props.selected) {
scrollIntoView(this.refs.node)
//.scrollIntoView(this.props.direction === 'down');
}
},
render: function() {
var className = this.props.selected ? 'item-selected' : 'item';
return (
React.createElement("div", {ref: "node", className: className}, "Item ", this.props.index)
)
}
})
var Container = React.createClass({displayName: 'Container',
getInitialState: function() {
return { selected: 0 };
},
componentDidMount: function() {
document.addEventListener("keydown", this.handleKeyDown);
},
componentWillUnmount: function(){
document.removeEventListener("keydown", this.handleKeyDown)
},
handleKeyDown: function(ev) {
var current = this.state.selected;
var next = current;
if (ev.keyCode === 40) {
ev.preventDefault();
next++;
} else if (ev.keyCode === 38) {
ev.preventDefault();
next--;
}
if (next >= items.length) {
next = 0;
}
if (next < 0) {
next = items.length - 1;
}
var direction = next > current ? "down" : "up";
this.setState({
selected: next,
direction: direction
});
},
render: function() {
var selected = this.state.selected;
var direction = this.state.direction;
return (
React.createElement("div", null,
React.createElement("input", {type: "text"}),
items.map(function(item, index) {
return (
React.createElement(Item, {
selected: selected === index,
direction: direction,
index: index,
key: index}
)
);
})
)
);
}
});
var component = React.createElement(Container, null);
ReactDOM.render(component, document.getElementById('root'));
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.14.3.js"><\/script>
<script src="//fb.me/react-dom-0.14.3.js"><\/script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="root" />
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.item, .item-selected {
background: blue;
color: white;
margin: 5px 0;
padding: 3px;
}
.item-selected {
background: red;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var items = [];
for(var i=100; i>0; i--) {
items.push("Item #" + i);
}
function scrollIntoView(node) {
var offsetTop = node.offsetTop;
var offsetHeight = node.offsetHeight;
var scrollTop = document.body.scrollTop;
// console.log(scrollTop, offsetTop)
if (offsetTop + offsetHeight > scrollTop) {
document.body.scrollTop = offsetTop;
}
if (offsetTop - offsetHeight < scrollTop) {
document.body.scrollTop = offsetTop;
}
}
var Item = React.createClass({
getDefaultProps: function() {
return { direction: 'down', selected: false };
},
componentDidUpdate: function(prevProps) {
if (!prevProps.selected && this.props.selected) {
scrollIntoView(this.refs.node)
//.scrollIntoView(this.props.direction === 'down');
}
},
render: function() {
var className = this.props.selected ? 'item-selected' : 'item';
return (
<div ref="node" className={className}>Item {this.props.index}</div>
)
}
})
var Container = React.createClass({
getInitialState: function() {
return { selected: 0 };
},
componentDidMount: function() {
document.addEventListener("keydown", this.handleKeyDown);
},
componentWillUnmount: function(){
document.removeEventListener("keydown", this.handleKeyDown)
},
handleKeyDown: function(ev) {
var current = this.state.selected;
var next = current;
if (ev.keyCode === 40) {
ev.preventDefault();
next++;
} else if (ev.keyCode === 38) {
ev.preventDefault();
next--;
}
if (next >= items.length) {
next = 0;
}
if (next < 0) {
next = items.length - 1;
}
var direction = next > current ? "down" : "up";
this.setState({
selected: next,
direction: direction
});
},
render: function() {
var selected = this.state.selected;
var direction = this.state.direction;
return (
<div>
<input type="text" />
{items.map(function(item, index) {
return (
<Item
selected={selected === index}
direction={direction}
index={index}
key={index}
/>
);
})}
</div>
);
}
});
var component = <Container />;
ReactDOM.render(component, document.getElementById('root'));
</script></body>
</html>
Raw
jsbin.kuyiri.css
.item, .item-selected {
background: blue;
color: white;
margin: 5px 0;
padding: 3px;
}
.item-selected {
background: red;
}
Raw
jsbin.kuyiri.js
var items = [];
for(var i=100; i>0; i--) {
items.push("Item #" + i);
}
function scrollIntoView(node) {
var offsetTop = node.offsetTop;
var offsetHeight = node.offsetHeight;
var scrollTop = document.body.scrollTop;
// console.log(scrollTop, offsetTop)
if (offsetTop + offsetHeight > scrollTop) {
document.body.scrollTop = offsetTop;
}
if (offsetTop - offsetHeight < scrollTop) {
document.body.scrollTop = offsetTop;
}
}
var Item = React.createClass({displayName: 'Item',
getDefaultProps: function() {
return { direction: 'down', selected: false };
},
componentDidUpdate: function(prevProps) {
if (!prevProps.selected && this.props.selected) {
scrollIntoView(this.refs.node)
//.scrollIntoView(this.props.direction === 'down');
}
},
render: function() {
var className = this.props.selected ? 'item-selected' : 'item';
return (
React.createElement("div", {ref: "node", className: className}, "Item ", this.props.index)
)
}
})
var Container = React.createClass({displayName: 'Container',
getInitialState: function() {
return { selected: 0 };
},
componentDidMount: function() {
document.addEventListener("keydown", this.handleKeyDown);
},
componentWillUnmount: function(){
document.removeEventListener("keydown", this.handleKeyDown)
},
handleKeyDown: function(ev) {
var current = this.state.selected;
var next = current;
if (ev.keyCode === 40) {
ev.preventDefault();
next++;
} else if (ev.keyCode === 38) {
ev.preventDefault();
next--;
}
if (next >= items.length) {
next = 0;
}
if (next < 0) {
next = items.length - 1;
}
var direction = next > current ? "down" : "up";
this.setState({
selected: next,
direction: direction
});
},
render: function() {
var selected = this.state.selected;
var direction = this.state.direction;
return (
React.createElement("div", null,
React.createElement("input", {type: "text"}),
items.map(function(item, index) {
return (
React.createElement(Item, {
selected: selected === index,
direction: direction,
index: index,
key: index}
)
);
})
)
);
}
});
var component = React.createElement(Container, null);
ReactDOM.render(component, document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment