irisrad-ui/src/components/irisIconButtons/IrisIconButtons.js

UI elements developered for IRIS R&D Group Inc

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 };