IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Select: Show icon in the grafana/ui Select component (#63827)

Browse Source
This commit is contained in:
Ryan McKinley 2023-03-01 07:41:41 -08:00 committed by GitHub
parent 9d6ab92e39
commit 763b0fa4d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
packages/grafana-ui/src/components/Select/SingleValue.tsx
View File

@ -2,50 +2,51 @@ import { css, cx } from '@emotion/css';
import React from 'react';
import { components, GroupBase, SingleValueProps } from 'react-select';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { GrafanaTheme2, SelectableValue, toIconName } from '@grafana/data';
import { useStyles2 } from '../../themes';
import { useDelayedSwitch } from '../../utils/useDelayedSwitch';
import { Icon } from '../Icon/Icon';
import { Spinner } from '../Spinner/Spinner';
import { FadeTransition } from '../transitions/FadeTransition';
import { SlideOutTransition } from '../transitions/SlideOutTransition';
const getStyles = (theme: GrafanaTheme2) => {
const singleValue = css`
label: singleValue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
max-width: 100%;
grid-area: 1 / 1 / 2 / 3;
`;
const spinnerWrapper = css`
width: 16px;
height: 16px;
display: inline-block;
margin-right: 10px;
position: relative;
vertical-align: middle;
overflow: hidden;
`;
const spinnerIcon = css`
width: 100%;
height: 100%;
position: absolute;
`;
const disabled = css`
color: ${theme.colors.text.disabled};
`;
const isOpen = css`
color: ${theme.colors.text.disabled};
`;
return { singleValue, spinnerWrapper, spinnerIcon, disabled, isOpen };
return {
singleValue: css`
label: singleValue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
max-width: 100%;
grid-area: 1 / 1 / 2 / 3;
`,
spinnerWrapper: css`
width: 16px;
height: 16px;
display: inline-block;
margin-right: 10px;
position: relative;
vertical-align: middle;
overflow: hidden;
`,
spinnerIcon: css`
width: 100%;
height: 100%;
position: absolute;
`,
optionIcon: css`
margin-right: ${theme.spacing(1)};
color: ${theme.colors.text.secondary};
`,
disabled: css`
color: ${theme.colors.text.disabled};
`,
isOpen: css`
color: ${theme.colors.text.disabled};
`,
};
};
type StylesType = ReturnType<typeof getStyles>;
@ -56,6 +57,7 @@ export const SingleValue = <T extends unknown>(props: Props<T>) => {
const { children, data, isDisabled } = props;
const styles = useStyles2(getStyles);
const loading = useDelayedSwitch(data.loading || false, { delay: 250, duration: 750 });
const icon = data.icon ? toIconName(data.icon) : undefined;
return (
<components.SingleValue
@ -70,12 +72,16 @@ export const SingleValue = <T extends unknown>(props: Props<T>) => {
alt={(data.label ?? data.value) as string}
/>
) : (
<SlideOutTransition horizontal size={16} visible={loading} duration={150}>
<div className={styles.spinnerWrapper}>
<Spinner className={styles.spinnerIcon} inline />
</div>
</SlideOutTransition>
<>
<SlideOutTransition horizontal size={16} visible={loading} duration={150}>
<div className={styles.spinnerWrapper}>
<Spinner className={styles.spinnerIcon} inline />
</div>
</SlideOutTransition>
{icon && <Icon name={icon} role="img" className={styles.optionIcon} />}
</>
)}
{!data.hideText && children}
</components.SingleValue>
);