@mantine/core/cjs/components/Grid/GridCol/GridColVariables.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"GridColVariables.cjs","names":["useMantineTheme","useGridContext","getBaseValue","filterProps","keys","getSortedBreakpoints","InlineStyles"],"sources":["../../../../src/components/Grid/GridCol/GridColVariables.tsx"],"sourcesContent":["import {\n  filterProps,\n  getBaseValue,\n  getSortedBreakpoints,\n  InlineStyles,\n  keys,\n  useMantineTheme,\n} from '../../../core';\nimport { GridBreakpoints, useGridContext } from '../Grid.context';\nimport type { ColSpan, GridColProps } from './GridCol';\n\ninterface GridColVariablesProps {\n  selector: string;\n  span: GridColProps['span'] | undefined;\n  order?: GridColProps['order'] | undefined;\n  offset?: GridColProps['offset'] | undefined;\n  align?: GridColProps['align'] | undefined;\n}\n\nconst getColumnFlexBasis = (colSpan: ColSpan | undefined, columns: number) => {\n  if (colSpan === 'content') {\n    return 'auto';\n  }\n\n  if (colSpan === 'auto') {\n    return '0rem';\n  }\n\n  if (!colSpan) {\n    return undefined;\n  }\n\n  if (colSpan === columns) {\n    return '100%';\n  }\n\n  const percentage = (100 * colSpan) / columns;\n  const gapFactor = (columns - colSpan) / columns;\n  return `calc(${percentage}% - ${gapFactor} * var(--grid-column-gap))`;\n};\n\nconst getColumnMaxWidth = (\n  colSpan: ColSpan | undefined,\n  columns: number,\n  grow: boolean | undefined\n) => {\n  if (grow || colSpan === 'auto') {\n    return '100%';\n  }\n\n  if (colSpan === 'content') {\n    return 'unset';\n  }\n\n  return getColumnFlexBasis(colSpan, columns);\n};\n\nconst getColumnFlexGrow = (colSpan: ColSpan | undefined, grow: boolean | undefined) => {\n  if (!colSpan) {\n    return undefined;\n  }\n\n  return colSpan === 'auto' || grow ? '1' : 'auto';\n};\n\nconst getColumnOffset = (offset: number | undefined, columns: number) => {\n  if (offset === 0) {\n    return '0';\n  }\n\n  if (!offset) {\n    return undefined;\n  }\n\n  const percentage = (100 * offset) / columns;\n  const gapFactor = offset / columns;\n  return `calc(${percentage}% + ${gapFactor} * var(--grid-column-gap))`;\n};\n\nexport function GridColVariables({ span, order, offset, align, selector }: GridColVariablesProps) {\n  const theme = useMantineTheme();\n  const ctx = useGridContext();\n  const _breakpoints = ctx.breakpoints || theme.breakpoints;\n\n  const baseValue = getBaseValue(span);\n  const baseSpan = baseValue === undefined ? 12 : baseValue;\n\n  const baseStyles: Record<string, string | undefined> = filterProps({\n    '--col-order': getBaseValue(order)?.toString(),\n    '--col-flex-grow': getColumnFlexGrow(baseSpan, ctx.grow),\n    '--col-flex-basis': getColumnFlexBasis(baseSpan, ctx.columns),\n    '--col-width': baseSpan === 'content' ? 'auto' : undefined,\n    '--col-max-width': getColumnMaxWidth(baseSpan, ctx.columns, ctx.grow),\n    '--col-offset': getColumnOffset(getBaseValue(offset), ctx.columns),\n    '--col-align-self': getBaseValue(align),\n  });\n\n  const queries = keys(_breakpoints).reduce<Record<string, Record<string, any>>>(\n    (acc, breakpoint) => {\n      if (!acc[breakpoint]) {\n        acc[breakpoint] = {};\n      }\n\n      if (typeof order === 'object' && order[breakpoint] !== undefined) {\n        acc[breakpoint]['--col-order'] = order[breakpoint]?.toString();\n      }\n\n      if (typeof span === 'object' && span[breakpoint] !== undefined) {\n        acc[breakpoint]['--col-flex-grow'] = getColumnFlexGrow(span[breakpoint], ctx.grow);\n        acc[breakpoint]['--col-flex-basis'] = getColumnFlexBasis(span[breakpoint], ctx.columns);\n        acc[breakpoint]['--col-width'] = span[breakpoint] === 'content' ? 'auto' : undefined;\n        acc[breakpoint]['--col-max-width'] = getColumnMaxWidth(\n          span[breakpoint],\n          ctx.columns,\n          ctx.grow\n        );\n      }\n\n      if (typeof offset === 'object' && offset[breakpoint] !== undefined) {\n        acc[breakpoint]['--col-offset'] = getColumnOffset(offset[breakpoint], ctx.columns);\n      }\n\n      if (typeof align === 'object' && align[breakpoint] !== undefined) {\n        acc[breakpoint]['--col-align-self'] = align[breakpoint];\n      }\n\n      return acc;\n    },\n    {}\n  );\n\n  const sortedBreakpoints = getSortedBreakpoints(keys(queries), _breakpoints).filter(\n    (breakpoint) => keys(queries[breakpoint.value]).length > 0\n  );\n\n  const values = sortedBreakpoints.map((breakpoint) => ({\n    query:\n      ctx.type === 'container'\n        ? `mantine-grid (min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`\n        : `(min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`,\n    styles: queries[breakpoint.value],\n  }));\n\n  return (\n    <InlineStyles\n      styles={baseStyles}\n      media={ctx.type === 'container' ? undefined : values}\n      container={ctx.type === 'container' ? values : undefined}\n      selector={selector}\n    />\n  );\n}\n"],"mappings":"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"}