@zohodesk/dot/es/IconButton/IconButton.js

In this Library, we Provide Some Basic Components to Build Your Application

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Icon } from '@zohodesk/icons';
import { Container } from '@zohodesk/components/lib/Layout';
import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
import style from "./IconButton.module.css";
export default class IconButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isPressed: false
    };
    this.handleToggle = this.handleToggle.bind(this);
    this.triggerClick = this.triggerClick.bind(this);
    this.triggerMouseDown = this.triggerMouseDown.bind(this);
    this.triggerMouseOver = this.triggerMouseOver.bind(this);
    this.onBlur = this.onBlur.bind(this);
  }

  handleToggle(e) {
    if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
      e.preventDefault(); // this.triggerClick(e);

      this.triggerMouseDown(e);
    }
  }

  triggerClick(e) {
    let {
      onClick,
      isDisabled
    } = this.props;
    !isDisabled ? (onClick && onClick(e), this.setState({
      isPressed: true
    })) : null;
  }

  triggerMouseOver(e) {
    let {
      onMouseOver,
      isDisabled
    } = this.props;
    !isDisabled ? (onMouseOver && onMouseOver(e), this.setState({
      isPressed: true
    })) : null;
  }

  triggerMouseDown(e) {
    let {
      onMouseDown,
      isDisabled
    } = this.props;
    !isDisabled ? (onMouseDown && onMouseDown(e), this.setState({
      isPressed: true
    })) : null;
  }

  onBlur(e) {
    let {
      isDisabled
    } = this.props;
    !isDisabled ? this.setState({
      isPressed: false
    }) : null;
  }

  render() {
    let {
      palette,
      iconSize,
      size,
      iconName,
      className,
      iconClass,
      dataId,
      dataSelectorId,
      eleRef,
      isActive,
      tourId,
      isDisabled,
      children,
      hoverType,
      title,
      isBold,
      isNeedEffect,
      needButtonTag,
      a11y,
      dataIsHtml,
      customProps
    } = this.props;
    let {
      isPressed
    } = this.state;
    let {
      ariaHaspopup,
      ariaExpanded,
      ariaLabel,
      ariaControls,
      ariaLabelledby
    } = a11y;
    return /*#__PURE__*/React.createElement(RippleEffect, {
      palette: palette,
      isActive: isActive,
      hoverType: hoverType,
      isDisabled: isDisabled,
      isNeedEffect: isNeedEffect
    }, /*#__PURE__*/React.createElement(Container, {
      "aria-label": ariaLabel,
      "aria-haspopup": ariaHaspopup,
      "aria-expanded": ariaExpanded,
      "aria-controls": ariaControls,
      "aria-labelledby": ariaLabelledby,
      tagName: needButtonTag ? 'button' : 'div',
      isInline: true,
      tourId: tourId,
      align: "both",
      isCover: false,
      className: `${needButtonTag ? btnStyle.buttonReset : ''} ${style[size]} ${style.wrapper} ${className || ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
      dataId: dataId,
      dataSelectorId: dataSelectorId,
      onClick: this.triggerClick,
      "data-title": title,
      "data-ishtml": dataIsHtml,
      eleRef: eleRef,
      onMouseDown: this.triggerMouseDown,
      onMouseEnter: this.triggerMouseOver,
      "aria-pressed": isPressed,
      onKeyDown: this.handleToggle,
      onFocus: this.triggerMouseOver,
      onBlur: this.onBlur,
      disabled: isDisabled,
      ...customProps
    }, iconName ? /*#__PURE__*/React.createElement(Icon, {
      isBold: isBold,
      size: iconSize,
      name: iconName,
      iconClass: `${iconClass} ${style.icon_button_center}`
    }) : null, children ? children : null));
  }

}
IconButton.propTypes = propTypes;
IconButton.defaultProps = defaultProps; // if (__DOCS__) {
//   IconButton.docs = {
//     componentGroup: 'Atom'
//   };
// }