Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
}),
h('div', {
class: `emojis-wrapper ${visible}`
}, h('div', {
class: 'header'
}, h('input', {
type: 'search',
oninput: this.onSearch(this),
class: 'emoji-search'
}), h('sk-spinner', {
class: spinnerClass,
type: 'rect',
color: '#aaa',
style: 'width: 30px; height: 30px;'
})),
h('div', {
class: `emojis-content`,
onclick: this.onEmojiClick(this)
}, h('ul', {
class: `emoji-data ${contentVisible}`
}, ...emojiContent), h('div', {
class: `emoji-search-results ${isSearching}`
}, searchResults)), h('div', {
class: `categories ${contentVisible}`
}, categoriesContent))
];
}
createCategory(emojis, categoryName) {
const content = emojis.map(e => {
return h('i', e);
});
return h('li', {
class: 'emoji-category-content',
'data-category': categoryName
}, h('div', {
class: 'emoji-category-header'
}, categoryName), h('div', {
class: 'emojis'
}, ...content));
}
createCategory(emojis, categoryName) {
const content = emojis.map(e => {
return h('i', e);
});
return h('li', {
class: 'emoji-category-content',
'data-category': categoryName
}, h('div', {
class: 'emoji-category-header'
}, categoryName), h('div', {
class: 'emojis'
}, ...content));
}
createCategory(emojis, categoryName) {
const content = emojis.map(e => {
return h('i', e);
});
return h('li', {
class: 'emoji-category-content',
'data-category': categoryName
}, h('div', {
class: 'emoji-category-header'
}, categoryName), h('div', {
class: 'emojis'
}, ...content));
}
const content = emojis.map(e => {
return h('i', e);
});
styles: styles({
textarea: {
height: '30px',
'font-size': '16px',
padding: '10px'
}
})
}),
h('img', {
class: 'toggle',
src: icons.people,
onclick: this.toggle.bind(this)
}),
h('div', {
class: `emojis-wrapper ${visible}`
}, h('div', {
class: 'header'
}, h('input', {
type: 'search',
oninput: this.onSearch(this),
class: 'emoji-search'
}), h('sk-spinner', {
class: spinnerClass,
type: 'rect',
color: '#aaa',
style: 'width: 30px; height: 30px;'
})),
h('div', {
class: `emojis-content`,
onclick: this.onEmojiClick(this)
}, h('ul', {
class: `emoji-data ${contentVisible}`
}, h('div', {
class: 'header'
}, h('input', {
type: 'search',
oninput: this.onSearch(this),
class: 'emoji-search'
}), h('sk-spinner', {
class: spinnerClass,
type: 'rect',
color: '#aaa',
style: 'width: 30px; height: 30px;'
})),
h('div', {
class: `emojis-content`,
onclick: this.onEmojiClick(this)
}, h('ul', {
class: `emoji-data ${contentVisible}`
}, ...emojiContent), h('div', {
class: `emoji-search-results ${isSearching}`
}, searchResults)), h('div', {
class: `categories ${contentVisible}`
}, categoriesContent))
];
}
const categoriesContent = categories.map(c => {
const active = this.activeCategory === c ? 'active' : '';
return h('div', {
style: `background-image: url(${icons[c]})`,
class: `cat ${active}`,
onclick: this.goToCategory(c)
});
});
const searchResults = this.createCategory(this.searchResults, 'Search results');
renderCallback() {
const width = this.widthValue;
const height = this.heightValue;
const progress = Math.min(width, (this.value * width) / 100);
const progressValue = this.showPercentage ? h('span', {class: 'percentage'}, `${Math.min(100, this.value)}%`) : null;
const mergedStyles = styles + `:host {--color: ${this.color};}`;
const animated = this.animated ? 'animated' : '';
return [
h('style', mergedStyles),
h('div', {
class: `wrapper ${animated}`
}, h('div', {
class: 'progress',
style: {
transform: `translateX(${progress}px)`
}
}), progressValue)
];
}
})
}),
h('img', {
class: 'toggle',
src: icons.people,
onclick: this.toggle.bind(this)
}),
h('div', {
class: `emojis-wrapper ${visible}`
}, h('div', {
class: 'header'
}, h('input', {
type: 'search',
oninput: this.onSearch(this),
class: 'emoji-search'
}), h('sk-spinner', {
class: spinnerClass,
type: 'rect',
color: '#aaa',
style: 'width: 30px; height: 30px;'
})),
h('div', {
class: `emojis-content`,
onclick: this.onEmojiClick(this)
}, h('ul', {
class: `emoji-data ${contentVisible}`
}, ...emojiContent), h('div', {
class: `emoji-search-results ${isSearching}`
}, searchResults)), h('div', {
class: `categories ${contentVisible}`
}, categoriesContent))
];