@grafana/ui
Version:
Grafana Components Library
1 lines • 5.65 kB
Source Map (JSON)
{"version":3,"file":"Spinner.mjs","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { cx, css } from '@emotion/css';\nimport * as React from 'react';\nimport SVG from 'react-inlinesvg';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconSize, isIconSize } from '../../types/icon';\nimport { spin } from '../../utils/keyframes';\nimport { Icon } from '../Icon/Icon';\nimport { getIconRoot, getIconSubDir } from '../Icon/utils';\n\nexport interface Props {\n className?: string;\n style?: React.CSSProperties;\n iconClassName?: string;\n inline?: boolean;\n size?: IconSize;\n}\n\n/**\n * @deprecated\n * use a predefined size, e.g. 'md' or 'lg' instead\n */\ninterface PropsWithDeprecatedSize extends Omit<Props, 'size'> {\n size?: number | string;\n}\n\n/**\n * @public\n *\n * Spinner is `fa-spinner` icon animated. It is used to alert a user to wait for an activity to complete.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-spinner--docs\n */\nexport const Spinner = ({\n className,\n inline = false,\n iconClassName,\n style,\n size = 'md',\n}: Props | PropsWithDeprecatedSize) => {\n const styles = useStyles2(getStyles);\n\n const deprecatedStyles = useStyles2(getDeprecatedStyles, size);\n const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n const iconName = prefersReducedMotion ? 'hourglass' : 'spinner';\n\n // this entire if statement is handling the deprecated size prop\n // TODO remove once we fully remove the deprecated type\n if (typeof size !== 'string' || !isIconSize(size)) {\n const iconRoot = getIconRoot();\n const subDir = getIconSubDir(iconName, 'default');\n const svgPath = `${iconRoot}${subDir}/${iconName}.svg`;\n return (\n <div\n data-testid=\"Spinner\"\n style={style}\n className={cx(\n {\n [styles.inline]: inline,\n },\n deprecatedStyles.wrapper,\n className\n )}\n >\n <SVG\n src={svgPath}\n width={size}\n height={size}\n className={cx(styles.spin, deprecatedStyles.icon, className)}\n style={style}\n />\n </div>\n );\n }\n\n return (\n <div\n data-testid=\"Spinner\"\n style={style}\n className={cx(\n {\n [styles.inline]: inline,\n },\n className\n )}\n >\n <Icon\n className={cx(styles.spin, iconClassName)}\n name={iconName}\n size={size}\n aria-label={t('grafana-ui.spinner.aria-label', 'Loading')}\n />\n </div>\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n inline: css({\n display: 'inline-block',\n lineHeight: 0,\n }),\n spin: css({\n [theme.transitions.handleMotion('no-preference')]: {\n animation: `${spin} 2s infinite linear`,\n },\n }),\n});\n\n// TODO remove once we fully remove the deprecated type\nconst getDeprecatedStyles = (theme: GrafanaTheme2, size: number | string) => ({\n wrapper: css({\n fontSize: typeof size === 'string' ? size : `${size}px`,\n }),\n icon: css({\n display: 'inline-block',\n fill: 'currentColor',\n flexShrink: 0,\n label: 'Icon',\n // line-height: 0; is needed for correct icon alignment in Safari\n lineHeight: 0,\n verticalAlign: 'middle',\n }),\n});\n"],"names":[],"mappings":"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"}