@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 *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-deprecated-groups--docs\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":["Orientation"],"mappings":"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"}