@zergo0/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}from"./ButtonWithMenu.styled";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";var ButtonWithMenu=function(a){var b=a.onClick,c=a.title,d=a.label,e=a.color,f=a.menuFromBtn,g=a.menuItems,h=a.menuPosition,i=void 0===h?"bottom":h,j=a.disabled,k=void 0!==j&&j,l=a.className,m=a.menuStyle,n=a.wrapperStyle,o=a.buttonRef,p=a.noMargin,q=useStore(),r=q.t,s=useRef(!0),t=useState(null),u=_slicedToArray(t,2),v=u[0],w=u[1],x="sm",y=g.filter(Boolean),z=1<y.length,A=function(a){s.current&&w(a.currentTarget)},B=function(){s.current&&w(null)},C=function(a){"function"==typeof a&&a(),B()};return useEffect(function(){return s.current=!0,function(){s.current=!1}},[]),_jsxs(_Fragment,{children:[_jsx(StyledButtonWrapper,{className:"".concat(l,"-wrapper"),style:n,ref:o,noMargin:p,children:_jsx(StyledMainButton,{className:"".concat(l,"-button"),color:e,size:x,title:c,onClick:k?void 0:function handleButtonClick(a){var c;return f&&z?void A(a):void("function"==typeof b?b():null!==(c=y[0])&&void 0!==c&&c.onClick&&y[0].onClick())},disabled:k,children:d||r("saveAs")})}),z&&_jsx(StyledMenu,{className:"".concat(l,"-menu"),anchorEl:v,onClose:B,open:!!v,style:m,position:i,children:g.map(function(a){return a&&_jsxs(StyledMenuItem,{className:"".concat(l,"-menu-item"),active:a.isActive,onClick:function(){return C(a.onClick)},size:x,children:[a.icon&&_jsx(StyledMenuIcon,{size:x,children:"string"==typeof a.icon?_jsx("span",{dangerouslySetInnerHTML:{__html:a.icon}}):_jsx(a.icon,{})}),_jsx(MenuItemLabel,{children:a.label})]},a.key)})})]})};ButtonWithMenu.defaultProps={title:"",label:"",color:"primary",menuFromBtn:!1,noMargin:!1,menuPosition:"bottom",onClick:void 0,disabled:!1,menuStyle:void 0,wrapperStyle:void 0,buttonRef:void 0};export default ButtonWithMenu;