vanilla-recycler-view
Version:
high performance UI rendering library for web browser
163 lines • 5.72 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 */
const engine_1 = require("./engine");
require("./styles.scss");
const root1 = document.getElementById('root1');
/**
* create 50,000 data
*/
function createData(count) {
const result = [];
for (let 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(() => Math.random().toString(36).substring(7)),
});
}
return result;
}
if (root1) {
root1.style.height = '400px';
root1.style.width = '100%';
const data = createData(10);
/**
* use option interface
*/
const options = {
direction: engine_1.DIRECTION.VERTICAL,
data: data,
preload: 200,
/**
* Dynamic row size
*/
size: (params) => {
return 85 + params.data.hobbies.length * 25;
},
renderer: class {
initialize(params) {
this.$layout = document.createElement('div');
this.$layout.style.width = '100%';
this.$layout.innerHTML = `
<table>
<tr>
<td>
index :
</td>
<td class="index">
${params.index + 1}
</td>
</tr>
<tr>
<td>
name :
</td>
<td>
<input class="name" value="${params.data.name}">
</td>
</tr>
<tr>
<td>
age :
</td>
<td>
<input class="age" value="${params.data.age}">
</td>
</tr>
<tr>
<td colspan="2" class="hobbies">
${params.data.hobbies
.map((hobby, index) => `
<div>hobby ${index + 1}: ${hobby}</div>
`)
.join('')}
</td>
</tr>
</table>
`;
// 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 = (e) => (params.data.name = e.target.value);
this.$ageListener = (e) => (params.data.age = parseInt(e.target.value));
// bind event listener
this.$name.addEventListener('input', this.$nameListener);
this.$age.addEventListener('input', this.$ageListener);
}
getLayout() {
return this.$layout;
}
onMount(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((hobby, index) => `
<div>hobby ${index + 1}: ${hobby}</div>
`)
.join('');
// create new event listener
this.$nameListener = (e) => (params.data.name = e.target.value);
this.$ageListener = (e) => (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;
}
onUnmount() {
// unbind old event listener
this.$name.removeEventListener('input', this.$nameListener);
this.$age.removeEventListener('input', this.$ageListener);
// blur input
this.$name.blur();
this.$age.blur();
}
},
};
/**
* initialize RecyclerView
*/
const instance = new engine_1.VanillaRecyclerView(root1, options);
root1.addEventListener('scroll', () => {
if (root1.scrollTop + root1.clientHeight > root1.scrollHeight - 100) {
const data = createData(1);
instance.push(...data);
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