irisrad-ui
Version:
UI elements developered for IRIS R&D Group Inc
126 lines (118 loc) • 2.69 kB
JavaScript
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),
};