@grafana/ui/dist/esm/components/Layout/Layout.mjs.map

Grafana Components Library

{"version":3,"file":"Layout.mjs","sources":["../../../../src/components/Layout/Layout.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { HTMLProps } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nenum Orientation {\n  Horizontal,\n  Vertical,\n}\ntype Spacing = 'none' | 'xs' | 'sm' | 'md' | 'lg';\ntype Justify = 'flex-start' | 'flex-end' | 'space-between' | 'center';\ntype Align = 'normal' | 'flex-start' | 'flex-end' | 'center';\n\nexport interface LayoutProps extends Omit<HTMLProps<HTMLDivElement>, 'align' | 'children' | 'wrap'> {\n  children: React.ReactNode[] | React.ReactNode;\n  orientation?: Orientation;\n  spacing?: Spacing;\n  justify?: Justify;\n  align?: Align;\n  width?: string;\n  wrap?: boolean;\n}\n\nexport interface ContainerProps {\n  padding?: Spacing;\n  margin?: Spacing;\n  grow?: number;\n  shrink?: number;\n}\n\n/**\n * @deprecated use Stack component instead\n */\nexport const Layout = ({\n  children,\n  orientation = Orientation.Horizontal,\n  spacing = 'sm',\n  justify = 'flex-start',\n  align = 'normal',\n  wrap = false,\n  width = '100%',\n  height = '100%',\n  ...rest\n}: LayoutProps) => {\n  const styles = useStyles2(getStyles, orientation, spacing, justify, align, wrap);\n\n  return (\n    <div className={styles.layout} style={{ width, height }} {...rest}>\n      {React.Children.toArray(children)\n        .filter(Boolean)\n        .map((child, index) => {\n          return (\n            <div className={styles.childWrapper} key={index}>\n              {child}\n            </div>\n          );\n        })}\n    </div>\n  );\n};\n\n/**\n * @deprecated use Stack component instead\n */\nexport const HorizontalGroup = ({\n  children,\n  spacing,\n  justify,\n  align = 'center',\n  wrap,\n  width,\n  height,\n}: Omit<LayoutProps, 'orientation'>) => (\n  <Layout\n    spacing={spacing}\n    justify={justify}\n    orientation={Orientation.Horizontal}\n    align={align}\n    width={width}\n    height={height}\n    wrap={wrap}\n  >\n    {children}\n  </Layout>\n);\n\n/**\n * @deprecated use Stack component with the \"column\" direction instead\n */\nexport const VerticalGroup = ({\n  children,\n  spacing,\n  justify,\n  align,\n  width,\n  height,\n}: Omit<LayoutProps, 'orientation' | 'wrap'>) => (\n  <Layout\n    spacing={spacing}\n    justify={justify}\n    orientation={Orientation.Vertical}\n    align={align}\n    width={width}\n    height={height}\n  >\n    {children}\n  </Layout>\n);\n\nexport const Container = ({ children, padding, margin, grow, shrink }: React.PropsWithChildren<ContainerProps>) => {\n  const styles = useStyles2(getContainerStyles, padding, margin);\n\n  return (\n    <div\n      className={cx(\n        styles.wrapper,\n        grow !== undefined && css({ flexGrow: grow }),\n        shrink !== undefined && css({ flexShrink: shrink })\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst getStyles = (\n  theme: GrafanaTheme2,\n  orientation: Orientation,\n  spacing: Spacing,\n  justify: Justify,\n  align: Align,\n  wrap: boolean\n) => {\n  const finalSpacing = spacing !== 'none' ? theme.spacing(spacingToNumber[spacing]) : 0;\n\n  // compensate for last row margin when wrapped, horizontal layout\n  const marginCompensation =\n    (orientation === Orientation.Horizontal && !wrap) || orientation === Orientation.Vertical ? 0 : `-${finalSpacing}`;\n\n  const label = orientation === Orientation.Vertical ? 'vertical-group' : 'horizontal-group';\n\n  return {\n    layout: css({\n      label: label,\n      display: 'flex',\n      flexDirection: orientation === Orientation.Vertical ? 'column' : 'row',\n      flexWrap: wrap ? 'wrap' : 'nowrap',\n      justifyContent: justify,\n      alignItems: align,\n      height: '100%',\n      maxWidth: '100%',\n      // compensate for last row margin when wrapped, horizontal layout\n      marginBottom: marginCompensation,\n    }),\n    childWrapper: css({\n      label: 'layoutChildrenWrapper',\n      marginBottom: orientation === Orientation.Horizontal && !wrap ? 0 : finalSpacing,\n      marginRight: orientation === Orientation.Horizontal ? finalSpacing : 0,\n      display: 'flex',\n      alignItems: align,\n\n      '&:last-child': {\n        marginBottom: orientation === Orientation.Vertical ? 0 : undefined,\n        marginRight: orientation === Orientation.Horizontal ? 0 : undefined,\n      },\n    }),\n  };\n};\n\nconst spacingToNumber: Record<Spacing, number> = {\n  none: 0,\n  xs: 0.5,\n  sm: 1,\n  md: 2,\n  lg: 3,\n};\n\nconst getContainerStyles = (theme: GrafanaTheme2, padding?: Spacing, margin?: Spacing) => {\n  const paddingSize = (padding && padding !== 'none' && theme.spacing(spacingToNumber[padding])) || 0;\n  const marginSize = (margin && margin !== 'none' && theme.spacing(spacingToNumber[margin])) || 0;\n  return {\n    wrapper: css({\n      label: 'container',\n      margin: marginSize,\n      padding: paddingSize,\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}