@zohodesk/dot/es/v1/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/v1/Popup/Popup';
import { Icon } from '@zohodesk/icons';
import Button from '@zohodesk/components/es/v1/Button/Button';
import { Container, Box } from '@zohodesk/components/es/v1/Layout';
import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
import style from "../../ActionButton/ActionButton.module.css";

function ActionButton(props) {
  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,
    togglePopup,
    defaultPosition,
    openPopupOnly,
    isAbsolutePositioningNeeded,
    isRestrictScroll,
    positionsOffset,
    targetOffset
  } = props;

  const handleTogglePopup = e => {
    togglePopup(e, defaultPosition);
  };

  const handlePopupOpen = e => {
    openPopupOnly(e, defaultPosition);
  };

  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 ? handleTogglePopup : undefined,
    onMouseEnter: !onClick ? onHover && handleTogglePopup : undefined,
    onMouseLeave: !onClick ? onHover && 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 ? handleTogglePopup : handlePopupOpen,
    onMouseEnter: onClick ? onHover && handleTogglePopup : undefined,
    onMouseLeave: onClick ? onHover && 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: 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 = defaultProps;
ActionButtonComponent.propTypes = propTypes; // ActionButton.docs = {
//   componentGroup: 'Atom'
// };

export default ActionButtonComponent;