package.src.layouts.Grid.GridItem.tsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of react-core Show documentation
This library provides a set of common React components for use with the PatternFly reference implementation.
The newest version!
import * as React from 'react';
import styles from '@patternfly/react-styles/css/layouts/Grid/grid';
import { css } from '@patternfly/react-styles';
import { DeviceSizes } from '../../styles/sizes';
import * as gridToken from '@patternfly/react-tokens/dist/esm/l_grid_item_Order';

import { setBreakpointCssVars } from '../../helpers/util';

export type gridSpans = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

export interface GridItemProps extends React.HTMLProps {
  /** content rendered inside the Grid Layout Item */
  children?: React.ReactNode;
  /** additional classes added to the Grid Layout Item */
  className?: string;
  /** the number of columns the grid item spans. Value should be a number 1-12   */
  span?: gridSpans;
  /** the number of rows the grid item spans. Value should be a number 1-12   */
  rowSpan?: gridSpans;
  /** the number of columns a grid item is offset */
  offset?: gridSpans;
  /** the number of columns the grid item spans on small device. Value should be a number 1-12   */
  sm?: gridSpans;
  /** the number of rows the grid item spans on medium device. Value should be a number 1-12   */
  smRowSpan?: gridSpans;
  /** the number of columns the grid item is offset on small device. Value should be a number 1-12   */
  smOffset?: gridSpans;
  /** the number of columns the grid item spans on medium device. Value should be a number 1-12   */
  md?: gridSpans;
  /** the number of rows the grid item spans on medium device. Value should be a number 1-12   */
  mdRowSpan?: gridSpans;
  /** the number of columns the grid item is offset on medium device. Value should be a number 1-12   */
  mdOffset?: gridSpans;
  /** the number of columns the grid item spans on large device. Value should be a number 1-12   */
  lg?: gridSpans;
  /** the number of rows the grid item spans on large device. Value should be a number 1-12   */
  lgRowSpan?: gridSpans;
  /** the number of columns the grid item is offset on large device. Value should be a number 1-12   */
  lgOffset?: gridSpans;
  /** the number of columns the grid item spans on xLarge device. Value should be a number 1-12   */
  xl?: gridSpans;
  /** the number of rows the grid item spans on large device. Value should be a number 1-12   */
  xlRowSpan?: gridSpans;
  /** the number of columns the grid item is offset on xLarge device. Value should be a number 1-12   */
  xlOffset?: gridSpans;
  /** the number of columns the grid item spans on 2xLarge device. Value should be a number 1-12   */
  xl2?: gridSpans;
  /** the number of rows the grid item spans on 2xLarge device. Value should be a number 1-12   */
  xl2RowSpan?: gridSpans;
  /** the number of columns the grid item is offset on 2xLarge device. Value should be a number 1-12   */
  xl2Offset?: gridSpans;
  /** Modifies the flex layout element order property */
  order?: {
    default?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
  };
  /** Sets the base component to render. defaults to div */
  component?: React.ElementType | React.ComponentType;
}

export const GridItem: React.FunctionComponent = ({
  children = null,
  className = '',
  component = 'div',
  span = null,
  rowSpan = null,
  offset = null,
  order,
  style,
  ...props
}: GridItemProps) => {
  const classes = [
    styles.gridItem,
    span && styles.modifiers[`${span}Col` as keyof typeof styles.modifiers],
    rowSpan && styles.modifiers[`${rowSpan}Row` as keyof typeof styles.modifiers],
    offset && styles.modifiers[`offset_${offset}Col` as keyof typeof styles.modifiers]
  ];
  const Component: any = component;

  Object.entries(DeviceSizes).forEach(([propKey, classModifier]) => {
    const key = propKey as keyof typeof DeviceSizes;
    const rowSpanKey = `${key}RowSpan` as 'smRowSpan' | 'mdRowSpan' | 'lgRowSpan' | 'xlRowSpan' | 'xl2RowSpan';
    const offsetKey = `${key}Offset` as 'smOffset' | 'mdOffset' | 'lgOffset' | 'xlOffset' | 'xl2Offset';

    const spanValue = props[key] as gridSpans;
    const rowSpanValue = props[rowSpanKey] as gridSpans;
    const offsetValue = props[offsetKey] as gridSpans;

    if (spanValue) {
      classes.push(styles.modifiers[`${spanValue}ColOn${classModifier}` as keyof typeof styles.modifiers]);
    }
    if (rowSpanValue) {
      classes.push(styles.modifiers[`${rowSpanValue}RowOn${classModifier}` as keyof typeof styles.modifiers]);
    }
    if (offsetValue) {
      classes.push(styles.modifiers[`offset_${offsetValue}ColOn${classModifier}` as keyof typeof styles.modifiers]);
    }

    delete props[key];
    delete props[rowSpanKey];
    delete props[offsetKey];
  });

  return (
    
      {children}
    
  );
};
GridItem.displayName = 'GridItem';