@zohodesk/dot/es/ActionButton/ActionButton.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 Popup from '@zohodesk/components/es/Popup/Popup';
import { Icon } from '@zohodesk/icons';
import Button from '@zohodesk/components/es/Button/Button';
import { Container, Box } from '@zohodesk/components/es/Layout';
import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
import style from "./ActionButton.module.css";
import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
export class ActionButton extends React.Component {
  constructor(props) {
    super(props);
    this.handleTogglePopup = this.handleTogglePopup.bind(this);
    this.handlePopupOpen = this.handlePopupOpen.bind(this);
  }

  handlePopupOpen(e) {
    let {
      openPopupOnly,
      defaultPosition
    } = this.props;
    openPopupOnly(e, defaultPosition);
  }

  handleTogglePopup(e) {
    let {
      togglePopup,
      defaultPosition
    } = this.props;
    togglePopup(e, defaultPosition);
  }

  render() {
    let {
      isLoading,
      onClick,
      size,
      dataId,
      dataSelectorId,
      isArrow,
      text,
      subText,
      arrowBoxSize,
      palette,
      onHover,
      position,
      className,
      iconName,
      iconSize,
      dataTitle,
      isDisabled,
      isPopupOpen,
      removeClose,
      children,
      dropBoxClass,
      isBoxPaddingNeed,
      getContainerRef,
      getTargetRef,
      removeChildrenTooltip,
      innerClassName,
      popupGroup,
      isAbsolutePositioningNeeded,
      isRestrictScroll,
      positionsOffset,
      targetOffset
    } = this.props;
    return /*#__PURE__*/React.createElement(Container, {
      alignBox: "row",
      isCover: false,
      className: ` ${style.container} ${style[palette + 'Box']} ${style[size]} ${className} ${isDisabled ? CssProvider('isDisabled') : ''} ${!onClick ? style.wholeDiv : ''} `,
      onClick: onHover ? removeClose : !onClick ? this.handleTogglePopup : undefined,
      onMouseEnter: !onClick ? onHover && this.handleTogglePopup : undefined,
      onMouseLeave: !onClick ? onHover && this.handleTogglePopup : undefined,
      eleRef: getTargetRef,
      dataSelectorId: dataSelectorId,
      dataId: `${dataId}_actionButton`
    }, isLoading ? /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }, /*#__PURE__*/React.createElement(Button, {
      status: "loading",
      palette: palette,
      size: "medium",
      customClass: {
        customButton: style.btn
      },
      text: text
    })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
      flexible: true,
      onClick: onClick,
      dataId: dataId,
      className: `${btnStyle.buttonReset} ${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} ${innerClassName} `,
      "data-title": dataTitle,
      tagName: "button",
      tabIndex: "0"
    }, /*#__PURE__*/React.createElement(Container, {
      align: "both"
    }, /*#__PURE__*/React.createElement(Box, {
      className: style.contentwrapper
    }, /*#__PURE__*/React.createElement(Container, {
      isCover: false,
      alignBox: "row",
      align: "vertical"
    }, iconName ? /*#__PURE__*/React.createElement(Icon, {
      name: iconName,
      size: iconSize,
      iconClass: `${style.iconClr} ${text ? style.iconMrgn : ''}`
    }) : null, text ? /*#__PURE__*/React.createElement(Box, {
      shrink: true,
      className: style.txt,
      "data-title": removeChildrenTooltip ? null : text
    }, text) : null)), subText ? /*#__PURE__*/React.createElement(Box, {
      "data-title": removeChildrenTooltip ? null : subText,
      className: style.subTxt
    }, subText) : null)), children ? /*#__PURE__*/React.createElement(Box, {
      onClick: onClick && !onHover ? this.handleTogglePopup : this.handlePopupOpen,
      onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
      onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
      className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
      dataId: `${dataId}_arrowButton`,
      tabIndex: "0",
      tagName: "button",
      dataSelectorId: `${dataSelectorId}_arrowButton`
    }, /*#__PURE__*/React.createElement(Container, {
      align: "both"
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-down",
      size: "6",
      iconClass: style.arrow
    })), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
      size: "small",
      isActive: isPopupOpen,
      boxPosition: position,
      isAnimate: true,
      isArrow: isArrow,
      customClass: {
        customDropBoxWrap: dropBoxClass
      },
      isBoxPaddingNeed: isBoxPaddingNeed,
      getRef: getContainerRef,
      popupGroup: popupGroup,
      needFocusScope: true,
      onClose: this.handleTogglePopup,
      dataId: `${dataId}_dropbox`,
      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
      isRestrictScroll: isRestrictScroll,
      positionsOffset: positionsOffset,
      targetOffset: targetOffset
    }, /*#__PURE__*/React.createElement(Box, {
      flexible: true,
      shrink: true,
      scroll: "vertical"
    }, children)) : null) : null));
  }

}
ActionButton.defaultProps = defaultProps;
ActionButton.propTypes = propTypes;
const ActionButtonComponent = Popup(ActionButton);
ActionButtonComponent.defaultProps = ActionButton.defaultProps;
ActionButtonComponent.propTypes = ActionButton.propTypes; // ActionButton.docs = {
//   componentGroup: 'Atom'
// };

export default ActionButtonComponent;