Space.tsx 856 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. import { css, cx } from '@emotion/css';
  2. import React from 'react';
  3. import { GrafanaTheme2 } from '@grafana/data';
  4. import { stylesFactory, useTheme2 } from '@grafana/ui';
  5. export interface SpaceProps {
  6. v?: number;
  7. h?: number;
  8. layout?: 'block' | 'inline';
  9. }
  10. export const Space = (props: SpaceProps) => {
  11. const theme = useTheme2();
  12. const styles = getStyles(theme, props);
  13. return <span className={cx(styles.wrapper)} />;
  14. };
  15. Space.defaultProps = {
  16. v: 0,
  17. h: 0,
  18. layout: 'block',
  19. };
  20. const getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({
  21. wrapper: css([
  22. {
  23. paddingRight: theme.spacing(props.h ?? 0),
  24. paddingBottom: theme.spacing(props.v ?? 0),
  25. },
  26. props.layout === 'inline' && {
  27. display: 'inline-block',
  28. },
  29. props.layout === 'block' && {
  30. display: 'block',
  31. },
  32. ]),
  33. }));