icon-picker-react
Version:
Componente de seleção de ícones dinamicamente
31 lines (30 loc) • 2.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const FaIconsList_1 = require("../../utils/FaIconsList");
const Icon_1 = require("../Icon");
const styles_1 = require("./styles");
const IconPicker = ({ onChange }) => {
const [iconsFa, setIconsFa] = (0, react_1.useState)(FaIconsList_1.iconFaList);
const [loadingIcons, setLoadingIcons] = (0, react_1.useState)(false);
const [iconSelected, setIconSelected] = (0, react_1.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 = FaIconsList_1.iconFaList.filter((icon) => icon.label.toUpperCase().indexOf(value.toUpperCase()) > -1);
setIconsFa(listFilterIcons);
setLoadingIcons(false);
}, 500);
timer = newTimer;
}
return ((0, jsx_runtime_1.jsxs)(styles_1.Content, { children: [(0, jsx_runtime_1.jsxs)(styles_1.ContentFilter, { children: [(0, jsx_runtime_1.jsx)(styles_1.ContentIconSelect, { children: iconSelected && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.IconSelect, { children: [(0, react_1.createElement)(iconSelected.icon), " ", (0, jsx_runtime_1.jsx)("strong", { children: iconSelected.label })] }), (0, jsx_runtime_1.jsx)(styles_1.BtnSelecionar, { onClick: handleChangeIcon, children: "Selecionar" })] })) }), (0, jsx_runtime_1.jsx)(styles_1.FindIcon, { placeholder: "Buscar \u00CDcones", onChange: (event) => handleFindIcon(event.target.value) })] }), (0, jsx_runtime_1.jsxs)(styles_1.ContainerIcons, { children: [loadingIcons ? ((0, jsx_runtime_1.jsx)(styles_1.ContentLoading, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: "FaSyncAlt", size: 2 }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iconsFa.map((icon) => ((0, jsx_runtime_1.jsxs)(styles_1.Item, { onClick: () => setIconSelected(icon), children: [(0, jsx_runtime_1.jsx)("span", { children: (0, react_1.createElement)(icon.icon) }), (0, jsx_runtime_1.jsx)(styles_1.LabelItem, { children: icon.label })] }, icon.label))) })), iconsFa.length <= 0 && ((0, jsx_runtime_1.jsxs)(styles_1.Blank, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { icon: "FaGhost", size: 4 }), (0, jsx_runtime_1.jsx)(styles_1.Ops, { children: "Ops, nada encontrado por aqui!" }), (0, jsx_runtime_1.jsx)(styles_1.Description, { children: "Verifique os filtro utilizados, ou utilize outras palavras chave." })] }))] })] }));
};
exports.default = IconPicker;