1import React, { useState, useEffect } from 'react'; 2import { Select } from '@grafana/ui'; 3import { SelectableValue } from '@grafana/data'; 4import { getBackendSrv } from '@grafana/runtime'; 5 6interface Props { 7 value: string; 8 onChange: (v: string) => void; 9} 10 11const IconSelector: React.FC<Props> = ({ value, onChange }) => { 12 const [icons, setIcons] = useState<SelectableValue[]>(value ? [{ value, label: value }] : []); 13 const [icon, setIcon] = useState<string>(); 14 const iconRoot = (window as any).__grafana_public_path__ + 'img/icons/unicons/'; 15 const onChangeIcon = (value: string) => { 16 onChange(value); 17 setIcon(value); 18 }; 19 useEffect(() => { 20 getBackendSrv() 21 .get(`${iconRoot}/index.json`) 22 .then((data) => { 23 setIcons( 24 data.files.map((icon: string) => ({ 25 value: icon, 26 label: icon, 27 })) 28 ); 29 }); 30 }, [iconRoot]); 31 return ( 32 <Select 33 menuShouldPortal 34 options={icons} 35 value={icon} 36 onChange={(selectedValue) => { 37 onChangeIcon(selectedValue.value!); 38 }} 39 /> 40 ); 41}; 42 43export default IconSelector; 44