vanilla-recycler-view
Version:
high performance UI rendering library for web browser
138 lines • 6.33 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/restrict-plus-operands */
var engine_1 = require("./engine");
require("./styles.scss");
var root1 = document.getElementById('root1');
/**
* create 50,000 data
*/
function createData(count) {
var result = [];
for (var i = 0; i < count; i++) {
result.push({
name: Math.random().toString(36).substring(7),
age: Math.floor(Math.random() * Math.floor(30)),
hobbies: Array.from(new Array(Math.floor(Math.random() * Math.floor(5)))).map(function () { return Math.random().toString(36).substring(7); }),
});
}
return result;
}
if (root1) {
root1.style.height = '400px';
root1.style.width = '100%';
var data = createData(10);
/**
* use option interface
*/
var options = {
direction: engine_1.DIRECTION.VERTICAL,
data: data,
preload: 200,
/**
* Dynamic row size
*/
size: function (params) {
return 85 + params.data.hobbies.length * 25;
},
renderer: /** @class */ (function () {
function class_1() {
}
class_1.prototype.initialize = function (params) {
this.$layout = document.createElement('div');
this.$layout.style.width = '100%';
this.$layout.innerHTML = "\n <table>\n <tr>\n <td>\n index : \n </td>\n <td class=\"index\">\n " + (params.index + 1) + "\n </td>\n </tr>\n <tr>\n <td>\n name : \n </td>\n <td>\n <input class=\"name\" value=\"" + params.data.name + "\">\n </td>\n </tr>\n <tr>\n <td>\n age :\n </td>\n <td>\n <input class=\"age\" value=\"" + params.data.age + "\">\n </td>\n </tr>\n <tr>\n <td colspan=\"2\" class=\"hobbies\">\n " + params.data.hobbies
.map(function (hobby, index) { return "\n <div>hobby " + (index + 1) + ": " + hobby + "</div>\n "; })
.join('') + "\n </td>\n </tr>\n </table>\n ";
// allocate dom object
this.$index = this.$layout.querySelector('.index');
this.$name = this.$layout.querySelector('.name');
this.$age = this.$layout.querySelector('.age');
this.$hobbies = this.$layout.querySelector('.hobbies');
// create event listener
this.$nameListener = function (e) {
return (params.data.name = e.target.value);
};
this.$ageListener = function (e) {
return (params.data.age = parseInt(e.target.value));
};
// bind event listener
this.$name.addEventListener('input', this.$nameListener);
this.$age.addEventListener('input', this.$ageListener);
};
class_1.prototype.getLayout = function () {
return this.$layout;
};
class_1.prototype.onMount = function (params) {
/* replace dom content */
this.$index.innerHTML = "" + params.index;
this.$name.value = params.data.name;
this.$age.value = "" + params.data.age;
this.$hobbies.innerHTML = params.data.hobbies
.map(function (hobby, index) { return "\n <div>hobby " + (index + 1) + ": " + hobby + "</div>\n "; })
.join('');
// create new event listener
this.$nameListener = function (e) {
return (params.data.name = e.target.value);
};
this.$ageListener = function (e) {
return (params.data.age = parseInt(e.target.value));
};
// bind new event listener
this.$name.addEventListener('input', this.$nameListener);
this.$age.addEventListener('input', this.$ageListener);
return true;
};
class_1.prototype.onUnmount = function () {
// unbind old event listener
this.$name.removeEventListener('input', this.$nameListener);
this.$age.removeEventListener('input', this.$ageListener);
// blur input
this.$name.blur();
this.$age.blur();
};
return class_1;
}()),
};
/**
* initialize RecyclerView
*/
var instance_1 = new engine_1.VanillaRecyclerView(root1, options);
root1.addEventListener('scroll', function () {
if (root1.scrollTop + root1.clientHeight > root1.scrollHeight - 100) {
var data_1 = createData(1);
instance_1.push.apply(instance_1, data_1);
console.log('added');
}
});
}
// const root2 = document.getElementById('root2') as HTMLDivElement;
// if (root2) {
// root2.style.height = '500px';
// root2.style.width = '100%';
// const rowNumberToCreate = Math.floor(Math.random() * 100000);
// const options: VanillaRecyclerViewOptions<D> = {
// preload: 200,
// direction: DIRECTION.HORIZONTAL,
// data: Array.from(new Array(rowNumberToCreate)).map((a, index) => ({
// a: Math.random(),
// b: Math.random(),
// index: index,
// someValue: '',
// })),
// size: (params) => (params.data.a ? params.data.a * 100 : 100),
// renderer: class implements VanillaRecyclerViewRenderer<D> {
// public layout?: HTMLElement;
// initialize(params: InitializeParams<D>) {
// this.layout = document.createElement('div');
// this.layout.innerHTML = `${params.index}`;
// }
// getLayout() {
// return this.layout as HTMLElement;
// }
// },
// };
// new VanillaRecyclerView(root2, options);
// }
//# sourceMappingURL=dev.js.map