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