irisrad-ui/src/components/irisGrid/IrisGrid.js

UI elements developered for IRIS R&D Group Inc

import React from "react";
import PropTypes from "prop-types";
import "../../style/styles.css";

// constants
const GRID_CONTAINER_CLASS = "iris-grid-container";
const GRID_CONTAINER_ITEM_CLASS = "iris-grid-item";

const SIZES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const JUSTIFY_CONTENT_STYLES = [
  "flex-start",
  "flex-end",
  "center",
  "space-between",
  "space-around",
  "space-evenly",
];

const ALIGN_ITEMS_STYLES = [
  "flex-start",
  "center",
  "flex-end",
  "stretch",
  "baseline",
];
const getItemClass = (
  container,
  item,
  justifyContent,
  alignItems,
  spacing,
  xs,
  sm,
  md,
  lg,
  xl
) => {
  const styles = [];
  if (container) {
    styles.push(GRID_CONTAINER_CLASS);
  }
  if (item) {
    styles.push(GRID_CONTAINER_ITEM_CLASS);
  }

  if (JUSTIFY_CONTENT_STYLES.includes(justifyContent)) {
    styles.push(
      `${GRID_CONTAINER_ITEM_CLASS}-justify-content-${justifyContent}`
    );
  }
  if (ALIGN_ITEMS_STYLES.includes(alignItems)) {
    styles.push(`${GRID_CONTAINER_ITEM_CLASS}-align-items-${alignItems}`);
  }

  if (spacing > 0 && spacing <= 10) {
    styles.push(`${GRID_CONTAINER_CLASS}-spacing-${spacing}`);
  }
  if (xs >= 0 && xs <= 12) {
    styles.push(`${GRID_CONTAINER_ITEM_CLASS}-xs-${xs}`);
  }
  if (sm >= 0 && sm <= 12) {
    styles.push(`${GRID_CONTAINER_ITEM_CLASS}-sm-${sm}`);
  }
  if (md >= 0 && md <= 12) {
    styles.push(`${GRID_CONTAINER_ITEM_CLASS}-md-${md}`);
  }
  if (lg >= 0 && lg <= 12) {
    styles.push(`${GRID_CONTAINER_ITEM_CLASS}-lg-${lg}`);
  }
  if (xl >= 0 && xl <= 12) {
    styles.push(`${GRID_CONTAINER_ITEM_CLASS}-xl-${xl}`);
  }
  return styles.join(" ");
};

export function IrisGrid({
  container,
  item,
  justifyContent,
  alignItems,
  spacing,
  xs,
  sm,
  md,
  lg,
  xl,
  children,
  className = "",
  ...props
}) {
  let itemClass = getItemClass(
    container,
    item,
    justifyContent,
    alignItems,
    spacing,
    xs,
    sm,
    md,
    lg,
    xl
  );
  if (className && className !== "") {
    itemClass += " " + className;
  }
  return (
    <div className={itemClass} {...props}>
      {children}
    </div>
  );
}

IrisGrid.propTypes = {
  className: PropTypes.string,
  container: PropTypes.bool,
  item: PropTypes.bool,
  justifyContent: PropTypes.oneOf(JUSTIFY_CONTENT_STYLES),
  alignItems: PropTypes.oneOf(ALIGN_ITEMS_STYLES),
  spacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]),
  xs: PropTypes.oneOf(SIZES),
  sm: PropTypes.oneOf(SIZES),
  md: PropTypes.oneOf(SIZES),
  lg: PropTypes.oneOf(SIZES),
  xl: PropTypes.oneOf(SIZES),
};