mirror of https://github.com/grafana/grafana
GrafanaUI: Add new `EmptyState` component (#84891)
* add empty search state component * extract translations * nicer prop spreading * actually expose component in grafana-ui * use requestAnimationFrame * add rollup-plugin-svg-import * move to a single EmptyState component with variants * update docs * remove CTA * add some more prop documentation * just use 1 svgpull/85004/head
Ashley Harrison
1 year ago
committed by
GitHub
parent
f47916253c
commit
a0bcc44b63
@ -0,0 +1,43 @@ |
||||
import { ArgTypes } from '@storybook/blocks'; |
||||
import { EmptyState } from './EmptyState'; |
||||
|
||||
# EmptyState |
||||
|
||||
Use an empty state to communicate to the user that there is no data to display, or that a search query returned no results. |
||||
|
||||
## variant="search" |
||||
|
||||
### When to use |
||||
|
||||
Use in place of a results table or list when a search query or filter returns no results. |
||||
|
||||
There are sensible defaults for the image and message, so in most cases you can use it without any additional props. |
||||
|
||||
```jsx |
||||
import { EmptyState } from '@grafana/ui'; |
||||
|
||||
<EmptyState variant="search" />; |
||||
``` |
||||
|
||||
### Providing custom overrides |
||||
|
||||
You can optionally override the message or image, and add additional information or a button (e.g. to clear the search query) |
||||
|
||||
```jsx |
||||
import { Button, EmptyState } from '@grafana/ui'; |
||||
|
||||
<EmptyState |
||||
button={<Button variant="secondary" onClick={clearSearchQuery} />} |
||||
image={<AnyReactNode />} |
||||
message="No playlists found" |
||||
> |
||||
Optionally provide some additional information here. Maybe even a link to{' '} |
||||
<TextLink href="<externalDocsLink>" external> |
||||
documentation. |
||||
</TextLink> |
||||
</EmptyState>; |
||||
``` |
||||
|
||||
## Props |
||||
|
||||
<ArgTypes of={EmptyState} /> |
||||
@ -0,0 +1,33 @@ |
||||
import { Meta, StoryFn } from '@storybook/react'; |
||||
import React from 'react'; |
||||
|
||||
import { EmptyState } from './EmptyState'; |
||||
import mdx from './EmptyState.mdx'; |
||||
|
||||
const meta: Meta<typeof EmptyState> = { |
||||
title: 'General/EmptyState', |
||||
component: EmptyState, |
||||
parameters: { |
||||
docs: { |
||||
page: mdx, |
||||
}, |
||||
controls: { |
||||
exclude: ['button', 'image', 'variant'], |
||||
}, |
||||
}, |
||||
argTypes: { |
||||
children: { |
||||
type: 'string', |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
export const Basic: StoryFn<typeof EmptyState> = (args) => { |
||||
return <EmptyState {...args} />; |
||||
}; |
||||
|
||||
Basic.args = { |
||||
children: 'Use this space to add any additional information', |
||||
}; |
||||
|
||||
export default meta; |
||||
@ -0,0 +1,47 @@ |
||||
import React, { ReactNode } from 'react'; |
||||
|
||||
import { t } from '../../utils/i18n'; |
||||
import { Box } from '../Layout/Box/Box'; |
||||
import { Stack } from '../Layout/Stack/Stack'; |
||||
import { Text } from '../Text/Text'; |
||||
|
||||
import { GrotNotFound } from './GrotNotFound/GrotNotFound'; |
||||
|
||||
interface Props { |
||||
/** |
||||
* Provide a button to render below the message |
||||
*/ |
||||
button?: ReactNode; |
||||
hideImage?: boolean; |
||||
/** |
||||
* Override the default image for the variant |
||||
*/ |
||||
image?: ReactNode; |
||||
/** |
||||
* Message to display to the user |
||||
*/ |
||||
message?: string; |
||||
/** |
||||
* Empty state variant. Possible values are 'search'. |
||||
*/ |
||||
variant: 'search'; |
||||
} |
||||
|
||||
export const EmptyState = ({ |
||||
button, |
||||
children, |
||||
image = <GrotNotFound width={300} />, |
||||
message = t('grafana-ui.empty-state.search-message', 'No results found'), |
||||
hideImage = false, |
||||
}: React.PropsWithChildren<Props>) => { |
||||
return ( |
||||
<Box paddingY={4} gap={4} display="flex" direction="column" alignItems="center"> |
||||
{!hideImage && image} |
||||
<Stack direction="column" alignItems="center"> |
||||
<Text variant="h4">{message}</Text> |
||||
{children && <Text color="secondary">{children}</Text>} |
||||
</Stack> |
||||
{button} |
||||
</Box> |
||||
); |
||||
}; |
||||
@ -0,0 +1,72 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React, { SVGProps, useEffect, useRef } from 'react'; |
||||
import SVG from 'react-inlinesvg'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
|
||||
import { useStyles2 } from '../../../themes'; |
||||
|
||||
import notFoundSvg from './grot-not-found.svg'; |
||||
|
||||
const MIN_ARM_ROTATION = -20; |
||||
const MAX_ARM_ROTATION = 5; |
||||
const MIN_ARM_TRANSLATION = -5; |
||||
const MAX_ARM_TRANSLATION = 5; |
||||
|
||||
export interface Props { |
||||
width?: SVGProps<SVGElement>['width']; |
||||
height?: SVGProps<SVGElement>['height']; |
||||
} |
||||
|
||||
export const GrotNotFound = ({ width = 'auto', height }: Props) => { |
||||
const svgRef = useRef<SVGElement>(null); |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
useEffect(() => { |
||||
const handleMouseMove = (event: MouseEvent) => { |
||||
const grotArm = svgRef.current?.querySelector('#grot-not-found-arm'); |
||||
const grotMagnifier = svgRef.current?.querySelector('#grot-not-found-magnifier'); |
||||
|
||||
const { clientX, clientY } = event; |
||||
const { innerWidth, innerHeight } = window; |
||||
const heightRatio = clientY / innerHeight; |
||||
const widthRatio = clientX / innerWidth; |
||||
const rotation = getIntermediateValue(heightRatio, MIN_ARM_ROTATION, MAX_ARM_ROTATION); |
||||
const translation = getIntermediateValue(widthRatio, MIN_ARM_TRANSLATION, MAX_ARM_TRANSLATION); |
||||
|
||||
window.requestAnimationFrame(() => { |
||||
grotArm?.setAttribute('style', `transform: rotate(${rotation}deg) translateX(${translation}%)`); |
||||
grotMagnifier?.setAttribute('style', `transform: rotate(${rotation}deg) translateX(${translation}%)`); |
||||
}); |
||||
}; |
||||
|
||||
window.addEventListener('mousemove', handleMouseMove); |
||||
|
||||
return () => { |
||||
window.removeEventListener('mousemove', handleMouseMove); |
||||
}; |
||||
}, []); |
||||
|
||||
return <SVG innerRef={svgRef} src={notFoundSvg} className={styles.svg} height={height} width={width} />; |
||||
}; |
||||
|
||||
GrotNotFound.displayName = 'GrotNotFound'; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => { |
||||
return { |
||||
svg: css({ |
||||
'#grot-not-found-arm, #grot-not-found-magnifier': { |
||||
transformOrigin: 'center', |
||||
}, |
||||
}), |
||||
}; |
||||
}; |
||||
|
||||
/** |
||||
* Given a start value, end value, and a ratio, return the intermediate value |
||||
* Works with negative and inverted start/end values |
||||
*/ |
||||
const getIntermediateValue = (ratio: number, start: number, end: number) => { |
||||
const value = ratio * (end - start) + start; |
||||
return value; |
||||
}; |
||||
|
After Width: | Height: | Size: 16 KiB |
Loading…
Reference in new issue