/
field_icon.tsx
42 lines (34 loc) · 1.35 KB
/
field_icon.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import { ICON_TYPES, palettes, EuiIcon } from '@elastic/eui';
import classNames from 'classnames';
import { DataType } from '../types';
function stringToNum(s: string) {
return Array.from(s).reduce((acc, ch) => acc + ch.charCodeAt(0), 1);
}
function getIconForDataType(dataType: string) {
const icons: Partial<Record<string, UnwrapArray<typeof ICON_TYPES>>> = {
boolean: 'invert',
date: 'calendar',
};
return icons[dataType] || ICON_TYPES.find(t => t === dataType) || 'empty';
}
export function getColorForDataType(type: string) {
const iconType = getIconForDataType(type);
const { colors } = palettes.euiPaletteColorBlind;
const colorIndex = stringToNum(iconType) % colors.length;
return colors[colorIndex];
}
export type UnwrapArray<T> = T extends Array<infer P> ? P : T;
export function FieldIcon({ type }: { type: DataType }) {
const iconType = getIconForDataType(type);
const classes = classNames(
'lnsFieldListPanel__fieldIcon',
`lnsFieldListPanel__fieldIcon--${type}`
);
return <EuiIcon type={iconType} color={getColorForDataType(type)} className={classes} />;
}