UNPKG

irisrad-ui

Version:

UI elements developered for IRIS R&D Group Inc

87 lines (78 loc) 2.14 kB
import React from "react"; import "../../style/styles.css"; import PropTypes from "prop-types"; const SMALL = "small"; const MEDIUM = "medium"; const LARGE = "large"; const SIZES = [SMALL, MEDIUM, LARGE]; const IRIS_HAMBERGER_ANIMATED_BTN = "iris-hamberger-animated-btn"; const IrisMenuIcon = ({ size, ...props }) => { return ( <div id={IRIS_HAMBERGER_ANIMATED_BTN} className={`${IRIS_HAMBERGER_ANIMATED_BTN}__${size}`} onClick={() => { document .getElementById(IRIS_HAMBERGER_ANIMATED_BTN) .classList.toggle("open"); if (props.onClick) { props.onClick(); } }} > <span></span> <span></span> <span></span> <span></span> </div> ); }; const IrisIconButton = ({ size, children, ...props }) => { const ICON_BUTTON_BASIC_STYLE = "iris-icon-button"; let iconSize; switch (size) { case SMALL: iconSize = "1x"; break; case LARGE: iconSize = "3x"; break; default: iconSize = "2x"; } const getButtonStyle = () => { const styles = [ICON_BUTTON_BASIC_STYLE]; const index = SIZES.indexOf(size); // basic size if (index >= 0) { styles.push(`${ICON_BUTTON_BASIC_STYLE}--${size}`); } else { styles.push(`${ICON_BUTTON_BASIC_STYLE}--${SMALL}`); } // make button round if there is no children passed in if (!children) { styles.push(`${ICON_BUTTON_BASIC_STYLE}--round`); } return styles.join(" "); }; return ( <button // className={[ // ICON_BUTTON_BASIC_STYLE, // children ? "" : `${ICON_BUTTON_BASIC_STYLE}--round`, // ].join(" ")} className={getButtonStyle()} {...props} > <i className={`fa fa-${iconSize} fa-user-circle`}> {children && ( <span className={`${ICON_BUTTON_BASIC_STYLE}__span`}>{children}</span> )} </i> </button> ); }; IrisIconButton.propTypes = { size: PropTypes.oneOf(SIZES), }; export { IrisMenuIcon, IrisIconButton };