irisrad-ui/src/components/irisButton/IrisButton.js

UI elements developered for IRIS R&D Group Inc

import React from "react";
import "../../style/styles.css";
import PropTypes from "prop-types";
import { IrisMUIcon } from "../irisMUIcon";

export const IrisButton = React.forwardRef((p, ref) => {
  const {
    color = "primary",
    disabled,
    size = "medium",
    children,
    iconProps,
    className = "",
    fullWidth = false,
    active = false,
    ...props
  } = p;
  const sizeStyle = typeof size === "string" ? `iris-button--${size}` : "";
  const colorStyle = typeof color === "string" ? `iris-button--${color}` : "";

  const wrapperClasses = ["iris-button"];
  if (typeof className === "string" && className !== "") {
    wrapperClasses.push(className);
  }
  if (sizeStyle !== "") {
    wrapperClasses.push(sizeStyle);
  }
  if (colorStyle !== "") {
    wrapperClasses.push(colorStyle);
  }
  // no children, make button circle
  if (children === undefined) {
    wrapperClasses.push(["circle"]);
  }
  if (fullWidth) {
    wrapperClasses.push("full-width");
  }
  if (active) {
    wrapperClasses.push("active");
  }
  return (
    <button
      ref={ref}
      type="button"
      className={wrapperClasses.join(" ")}
      disabled={disabled}
      {...props}
    >
      {iconProps && (
        <IrisMUIcon
          variant={iconProps.variant}
          size={iconProps.size}
          iconTitle={iconProps.iconTitle}
        />
      )}
      {children}
    </button>
  );
});

IrisButton.propTypes = {
  color: PropTypes.oneOf(["primary", "secondary"]),
  className: PropTypes.string,
  disabled: PropTypes.bool,
  fullWidth: PropTypes.bool,
  size: PropTypes.oneOf(["small", "medium", "large"]),
  iconProps: PropTypes.shape({
    variant: PropTypes.string,
    size: PropTypes.string,
    iconTitle: PropTypes.string.isRequired,
  }),
};