react-filerobot-image-editor/lib/components/common/ButtonWithMenu/index.js

React component version of filerobot image editor (FIE).

import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React,{useEffect,useState,useRef}from"react";import{MenuItemLabel}from"@scaleflex/ui/core/menu-item";import{useStore}from"../../../hooks";import{StyledMainButton,StyledButtonWrapper,StyledMenu,StyledMenuItem,StyledMenuIcon,StyledArrow}from"./ButtonWithMenu.styled";var ButtonWithMenu=function(a){var b=a.onClick,c=a.title,d=a.label,e=a.color,f=void 0===e?"primary":e,g=a.menuFromBtn,h=a.menuItems,i=a.menuPosition,j=void 0===i?"bottom":i,k=a.disabled,l=void 0!==k&&k,m=a.className,n=a.menuStyle,o=a.wrapperStyle,p=a.buttonRef,q=a.noMargin,r=a.buttonSize,s=void 0===r?"sm":r,u=a.dataTestId,v=useStore(),w=v.t,t=useRef(!0),x=useState(null),y=_slicedToArray(x,2),z=y[0],A=y[1],B=h.filter(Boolean),C=1<B.length,D=function(a){t.current&&A(a.currentTarget)},E=function(){t.current&&A(null)},F=function(a){"function"==typeof a&&a(),E()};return useEffect(function(){return t.current=!0,function(){t.current=!1}},[]),React.createElement(React.Fragment,null,React.createElement(StyledButtonWrapper,{className:"".concat(m,"-wrapper"),"data-testid":"FIE-button-with-menu-wrapper",style:o,ref:p,noMargin:q},React.createElement(StyledMainButton,{className:"".concat(m,"-button"),"data-testid":u||"FIE-button-with-menu-button",color:f,size:s,title:c,onClick:l?void 0:function(a){var c;return void 0!==g&&g&&C?void D(a):void("function"==typeof b?b():null!==(c=B[0])&&void 0!==c&&c.onClick&&B[0].onClick())},disabled:l,endIcon:0<h.length&&React.createElement(StyledArrow,{"data-testid":"FIE-button-with-menu-arrow",open:!!z,$buttonSize:s,size:"md"===s?13:10})},d||w("saveAs"))),C&&React.createElement(StyledMenu,{className:"".concat(m,"-menu"),"data-testid":"FIE-button-with-menu-menu",anchorEl:z,onClose:E,open:!!z,style:n,position:j},h.map(function(a){return a&&React.createElement(StyledMenuItem,{className:"".concat(m,"-menu-item"),"data-testid":"FIE-button-with-menu-menu-item-".concat(a.label),key:a.key,active:a.isActive,onClick:function(){return F(a.onClick)},size:s},a.icon&&React.createElement(StyledMenuIcon,{size:s},"string"==typeof a.icon?React.createElement("span",{dangerouslySetInnerHTML:{__html:a.icon}}):React.createElement(a.icon,null)),React.createElement(MenuItemLabel,null,a.label))})))};export default ButtonWithMenu;