icon-picker-react
Version:
Componente de seleção de ícones dinamicamente
29 lines (28 loc) • 2.34 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { createElement, useState } from "react";
import { iconFaList } from "../../utils/FaIconsList";
import Icon from "../Icon";
import { Blank, BtnSelecionar, ContainerIcons, Content, ContentFilter, ContentIconSelect, ContentLoading, Description, FindIcon, IconSelect, Item, LabelItem, Ops, } from "./styles";
const IconPicker = ({ onChange }) => {
const [iconsFa, setIconsFa] = useState(iconFaList);
const [loadingIcons, setLoadingIcons] = useState(false);
const [iconSelected, setIconSelected] = useState();
let timer;
function handleChangeIcon() {
if (iconSelected) {
onChange(iconSelected === null || iconSelected === void 0 ? void 0 : iconSelected.label);
}
}
function handleFindIcon(value) {
setLoadingIcons(true);
clearTimeout(timer);
const newTimer = setTimeout(() => {
const listFilterIcons = iconFaList.filter((icon) => icon.label.toUpperCase().indexOf(value.toUpperCase()) > -1);
setIconsFa(listFilterIcons);
setLoadingIcons(false);
}, 500);
timer = newTimer;
}
return (_jsxs(Content, { children: [_jsxs(ContentFilter, { children: [_jsx(ContentIconSelect, { children: iconSelected && (_jsxs(_Fragment, { children: [_jsxs(IconSelect, { children: [createElement(iconSelected.icon), " ", _jsx("strong", { children: iconSelected.label })] }), _jsx(BtnSelecionar, { onClick: handleChangeIcon, children: "Selecionar" })] })) }), _jsx(FindIcon, { placeholder: "Buscar \u00CDcones", onChange: (event) => handleFindIcon(event.target.value) })] }), _jsxs(ContainerIcons, { children: [loadingIcons ? (_jsx(ContentLoading, { children: _jsx(Icon, { icon: "FaSyncAlt", size: 2 }) })) : (_jsx(_Fragment, { children: iconsFa.map((icon) => (_jsxs(Item, { onClick: () => setIconSelected(icon), children: [_jsx("span", { children: createElement(icon.icon) }), _jsx(LabelItem, { children: icon.label })] }, icon.label))) })), iconsFa.length <= 0 && (_jsxs(Blank, { children: [_jsx(Icon, { icon: "FaGhost", size: 4 }), _jsx(Ops, { children: "Ops, nada encontrado por aqui!" }), _jsx(Description, { children: "Verifique os filtro utilizados, ou utilize outras palavras chave." })] }))] })] }));
};
export default IconPicker;