@shakthillc/components/src/Button/Button.js

React generic components for shakthi products

import React from "react";
import PropTypes from "prop-types";
import style from "./Button.module.css";
import user_profile from "../icons/user_profile.svg";
import Icon from "@material-ui/core/Icon";

export default class Button extends React.Component {
  handleClick() {
    var { onClick } = this.props;
    onClick && onClick();
    //console.log(this.props.onClick)
  }
  render() {
    let {
      text,
      size,
      onClick,
      type,
      dataId,
      icon: iconName,
      disabled,
      icon_position,
      id="defaultButtonId"
    } = this.props;
    let icon =
      size === "medium"
        ? "icon" + icon_position
        : "icon-" + size + "-" + icon_position;
    var opacity = disabled === true ? "0.3" : "1";
    //icon_position = icon_position.toLowerCase() === "right" ? "left": "right"
    var icon_style =
      icon_position.toLowerCase() === "left" ? "icon_left" : "icon_right";
    if (disabled) {
      type =
        iconName !== undefined ? "disabled_icon_" + type : "disabled_" + type;
    } else if (iconName !== undefined) {
      type = type + "icon";
    }

    return (
      <div
        onClick={this.handleClick.bind(this)}
        className={style["input-icons"]}
        style={{pointerEvents:disabled?"none":""}}
      >
        <button
          className={`${style[type.toLowerCase()]} ${
            style[size.toLowerCase()]
          }`}
          type="button"
          disabled={disabled}
          data-id={id}
        >
          {icon_position === "right" ? <span data-id={'text'+id}>{text}</span> : ""}
          {iconName && (
            <i style={{ opacity: opacity }} className={style[icon_style]}>
              <Icon style={{ fontSize: 16 }}>{iconName}</Icon>
            </i>
          )}
          {icon_position === "left" ? <span data-id={'text'+id}>{text}</span> : ""}
        </button>
      </div>
    );
  }
}

Button.defaultProps = {
  size: "medium",
  text: "Button",
  dataId: "buttonComp",
  type: "primary",
  disabled: false,
  icon_position: "left",
  onClick: function () {
    console.log("Default click");
  },
};
Button.propTypes = {
  dataId: PropTypes.string,
  onClick: PropTypes.func,
  type: PropTypes.oneOf(["primary", "secondary", "disabled"]),
  size: PropTypes.oneOf(["small", "medium", "large"]),
  text: PropTypes.string,
};