Skip to content

Instantly share code, notes, and snippets.

@hirofumi2012

hirofumi2012/index.html

Created March 27, 2021 06:53
Show Gist options
  • Save hirofumi2012/d129cb388cb054207c300eb4a5addff2 to your computer and use it in GitHub Desktop.
Save hirofumi2012/d129cb388cb054207c300eb4a5addff2 to your computer and use it in GitHub Desktop.
Download ZIP
Users // source https://jsbin.com/sulalen
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Users</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
</head>
<body>
<div id="app"></div>
<script id="jsbin-javascript">
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Users = (function (_React$Component) {
_inherits(Users, _React$Component);
function Users(props) {
_classCallCheck(this, Users);
_get(Object.getPrototypeOf(Users.prototype), 'constructor', this).call(this, props);
this.state = {
data: [{
id: 1,
name: 'Eladio Schroeder Sr.',
email: '[email protected]'
}, {
id: 2,
name: 'Liliana Mayert',
email: '[email protected]'
}],
active: 0
};
this.handleKeyDown = this.handleKeyDown.bind(this);
}
_createClass(Users, [{
key: 'handleClick',
value: function handleClick(i) {
this.setState({ active: i });
}
}, {
key: 'handleKeyDown',
value: function handleKeyDown(e) {
var length = this.state.data.length;
var move = {
ArrowLeft: length - 1,
ArrowUp: length - 1,
ArrowRight: 1,
ArrowDown: 1,
Left: length - 1,
Up: length - 1,
Right: 1,
Down: 1
};
if (e.key in move) {
e.preventDefault();
this.setState(function (state) {
return { active: (state.active + move[e.key]) % length };
});
}
}
}, {
key: 'render',
value: function render() {
var idPrefix = 'use-';
var users = [];
for (var i = 0; i < this.state.data.length; i++) {
var user = this.state.data[i];
var selected = i === this.state.active;
users = [].concat(_toConsumableArray(users), [React.createElement(
'tr',
{ role: 'option', id: idPrefix + user.id, key: user.id, className: selected ? 'active' : '', 'aria-selected': selected, onClick: this.handleClick.bind(this, i) },
React.createElement(
'td',
null,
user.id
),
React.createElement(
'td',
null,
user.name
),
React.createElement(
'td',
null,
user.email
)
)]);
}
var activeUser = this.state.data[this.state.active];
return React.createElement(
'table',
{ className: 'table table-hover' },
React.createElement(
'caption',
null,
'Users'
),
React.createElement(
'thead',
null,
React.createElement(
'tr',
null,
React.createElement(
'th',
null,
'ID'
),
React.createElement(
'th',
null,
'Name'
),
React.createElement(
'th',
null,
'Email'
)
)
),
React.createElement(
'tbody',
{ role: 'listbox', tabIndex: '0', 'aria-activedescendant': idPrefix + activeUser.id, onKeyDown: this.handleKeyDown },
users
)
);
}
}]);
return Users;
})(React.Component);
var element = React.createElement(
'div',
{ 'class': 'container' },
React.createElement(
'div',
{ 'class': 'row justify-content-center' },
React.createElement(
'div',
{ 'class': 'col-md-8' },
React.createElement(Users, null)
)
)
);
ReactDOM.render(element, document.getElementById('app'));
</script>
<script id="jsbin-source-javascript" type="text/javascript">class Users extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{
id: 1,
name: 'Eladio Schroeder Sr.',
email: '[email protected]',
},
{
id: 2,
name: 'Liliana Mayert',
email: '[email protected]',
},
],
active: 0,
};
this.handleKeyDown = this.handleKeyDown.bind(this);
}
handleClick(i) {
this.setState({active: i});
}
handleKeyDown(e) {
const length = this.state.data.length;
const move = {
ArrowLeft: length - 1,
ArrowUp: length - 1,
ArrowRight: 1,
ArrowDown: 1,
Left: length - 1,
Up: length - 1,
Right: 1,
Down: 1,
};
if (e.key in move) {
e.preventDefault();
this.setState(
state => ({active: (state.active + move[e.key]) % length})
);
}
}
render() {
const idPrefix = 'use-';
let users = [];
for(let i = 0; i < this.state.data.length; i++) {
const user = this.state.data[i];
const selected = i === this.state.active;
users = [
...users,
<tr role="option" id={idPrefix + user.id} key={user.id} className={selected ? 'active' : ''} aria-selected={selected} onClick={this.handleClick.bind(this, i)}>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.email}</td>
</tr>
];
}
const activeUser = this.state.data[this.state.active];
return (
<table className="table table-hover">
<caption>Users</caption>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody role="listbox" tabIndex="0" aria-activedescendant={idPrefix + activeUser.id} onKeyDown={this.handleKeyDown}>{users}</tbody>
</table>
);
}
}
const element = (
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<Users />
</div>
</div>
</div>
);
ReactDOM.render(element, document.getElementById('app'));</script></body>
</html>
Raw
jsbin.sulalen.js
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Users = (function (_React$Component) {
_inherits(Users, _React$Component);
function Users(props) {
_classCallCheck(this, Users);
_get(Object.getPrototypeOf(Users.prototype), 'constructor', this).call(this, props);
this.state = {
data: [{
id: 1,
name: 'Eladio Schroeder Sr.',
email: '[email protected]'
}, {
id: 2,
name: 'Liliana Mayert',
email: '[email protected]'
}],
active: 0
};
this.handleKeyDown = this.handleKeyDown.bind(this);
}
_createClass(Users, [{
key: 'handleClick',
value: function handleClick(i) {
this.setState({ active: i });
}
}, {
key: 'handleKeyDown',
value: function handleKeyDown(e) {
var length = this.state.data.length;
var move = {
ArrowLeft: length - 1,
ArrowUp: length - 1,
ArrowRight: 1,
ArrowDown: 1,
Left: length - 1,
Up: length - 1,
Right: 1,
Down: 1
};
if (e.key in move) {
e.preventDefault();
this.setState(function (state) {
return { active: (state.active + move[e.key]) % length };
});
}
}
}, {
key: 'render',
value: function render() {
var idPrefix = 'use-';
var users = [];
for (var i = 0; i < this.state.data.length; i++) {
var user = this.state.data[i];
var selected = i === this.state.active;
users = [].concat(_toConsumableArray(users), [React.createElement(
'tr',
{ role: 'option', id: idPrefix + user.id, key: user.id, className: selected ? 'active' : '', 'aria-selected': selected, onClick: this.handleClick.bind(this, i) },
React.createElement(
'td',
null,
user.id
),
React.createElement(
'td',
null,
user.name
),
React.createElement(
'td',
null,
user.email
)
)]);
}
var activeUser = this.state.data[this.state.active];
return React.createElement(
'table',
{ className: 'table table-hover' },
React.createElement(
'caption',
null,
'Users'
),
React.createElement(
'thead',
null,
React.createElement(
'tr',
null,
React.createElement(
'th',
null,
'ID'
),
React.createElement(
'th',
null,
'Name'
),
React.createElement(
'th',
null,
'Email'
)
)
),
React.createElement(
'tbody',
{ role: 'listbox', tabIndex: '0', 'aria-activedescendant': idPrefix + activeUser.id, onKeyDown: this.handleKeyDown },
users
)
);
}
}]);
return Users;
})(React.Component);
var element = React.createElement(
'div',
{ 'class': 'container' },
React.createElement(
'div',
{ 'class': 'row justify-content-center' },
React.createElement(
'div',
{ 'class': 'col-md-8' },
React.createElement(Users, null)
)
)
);
ReactDOM.render(element, document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment