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

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

import React, { useState } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Icon } from '@zohodesk/icons';
import { Container } from '@zohodesk/components/es/v1/Layout';
import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
import RippleEffect from '@zohodesk/components/es/v1/RippleEffect/RippleEffect';
import style from "../../IconButton/IconButton.module.css";
export default function IconButton(props) {
  let {
    palette,
    iconSize,
    iconName,
    className,
    iconClass,
    dataId,
    dataSelectorId,
    eleRef,
    isActive,
    tourId,
    isDisabled,
    children,
    hoverType,
    title,
    isBold,
    isNeedEffect,
    needButtonTag,
    a11y,
    dataIsHtml,
    customProps,
    onClick,
    onMouseOver,
    onMouseDown
  } = props;
  const [isPressed, setPressed] = useState(false);

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

      triggerMouseDown(e);
    }
  }

  function triggerClick(e) {
    !isDisabled ? (onClick && onClick(e), setPressed(true)) : null;
  }

  function triggerMouseOver(e) {
    !isDisabled ? (onMouseOver && onMouseOver(e), setPressed(true)) : null;
  }

  function triggerMouseDown(e) {
    !isDisabled ? (onMouseDown && onMouseDown(e), setPressed(true)) : null;
  }

  function onBlur(e) {
    !isDisabled ? setPressed(false) : null;
  }

  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.wrapper} ${className ? className : ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
    dataId: dataId,
    dataSelectorId: dataSelectorId,
    onClick: triggerClick,
    "data-title": title,
    "data-ishtml": dataIsHtml,
    eleRef: eleRef,
    onMouseDown: triggerMouseDown,
    onMouseEnter: triggerMouseOver,
    "aria-pressed": isPressed,
    onKeyDown: handleToggle,
    onFocus: triggerMouseOver,
    onBlur: onBlur,
    disabled: isDisabled,
    ...customProps
  }, iconName ? /*#__PURE__*/React.createElement(Icon, {
    isBold: isBold,
    size: iconSize,
    name: iconName,
    iconClass: iconClass
  }) : null, children ? children : null));
}
IconButton.propTypes = propTypes;
IconButton.defaultProps = defaultProps; // if (__DOCS__) {
//   IconButton.docs = {
//     componentGroup: 'Atom'
//   };
// }