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