48 lines
1.3 KiB
React
48 lines
1.3 KiB
React
|
import { useSelector, useDispatch } from 'react-redux'
|
||
|
import iconData from './icons.json'
|
||
|
import { useEffect, useRef, useState } from 'react';
|
||
|
|
||
|
export const IconList = function () {
|
||
|
const [icons, setIcons] = useState(Object.keys(iconData))
|
||
|
const query = useSelector(state => state.search.query)
|
||
|
const showName = useSelector(state => state.display.showName)
|
||
|
|
||
|
useEffect(() => {
|
||
|
if (query == '') {
|
||
|
setIcons(Object.keys(iconData))
|
||
|
return
|
||
|
}
|
||
|
|
||
|
const keywords = query.toLowerCase().split(' ').filter(word => (word))
|
||
|
let filtered = [];
|
||
|
for (const filename in iconData) {
|
||
|
const matched = iconData[filename].filter(tag => {
|
||
|
for (const keyword of keywords) {
|
||
|
if (tag.indexOf(keyword.toLowerCase()) != -1) return true
|
||
|
}
|
||
|
return false
|
||
|
})
|
||
|
|
||
|
if (matched.length) filtered.push(filename)
|
||
|
}
|
||
|
console.log(filtered)
|
||
|
|
||
|
setIcons(filtered)
|
||
|
}, [query])
|
||
|
|
||
|
function launchDownload (filename) {
|
||
|
window.open(`download.php?icon=${filename}`)
|
||
|
}
|
||
|
|
||
|
return (
|
||
|
<ul className={ `icon-list ${ showName ? 'show-name' : ''}` }>
|
||
|
{ icons.map( (filename, index) => (
|
||
|
<li key={ index } onClick={ e => launchDownload(filename) }>
|
||
|
<img className='icon' src={ `/icons/${filename}` } />
|
||
|
<div className='name'>{ showName ? filename.replace('.svg', '') : '' }</div>
|
||
|
</li>
|
||
|
) ) }
|
||
|
</ul>
|
||
|
)
|
||
|
};
|