UNPKG

irisrad-ui

Version:

UI elements developered for IRIS R&D Group Inc

126 lines (118 loc) 2.69 kB
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), };