react-filerobot-image-editor/lib/components/ToolsBar/index.js

React component version of filerobot image editor (FIE).

import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["toolsIds","tools","selectedToolId"];import React,{useCallback,useEffect,useMemo}from"react";import{SELECT_TOOL}from"../../actions";import{TABS_TOOLS,TOOLS_ITEMS}from"../tools/tools.constants";import{TABS_IDS}from"../../utils/constants";import{usePhoneScreen,useStore}from"../../hooks";import Carousel from"../common/Carousel";import{StyledToolsBar,StyledToolsBarItems}from"./ToolsBar.styled";import ToolsBarItemOptionsWrapper from"./ToolsBarItemOptionsWrapper";var style={maxWidth:"100%",width:"100%"},ToolsBar=function(a){var b,c=a.toolsIds,d=a.tools,e=a.selectedToolId,f=_objectWithoutProperties(a,_excluded),g=usePhoneScreen(),h=useStore(),i=h.t,j=h.dispatch,k=h.tabId,l=h.toolId,m=h.annotations,n=h.selectionsIds,o=void 0===n?[]:n,p=h.config,q=p.defaultTabId,r=p.defaultToolId,s=p.useCloudimage,t=p.tabsToolsIds,u=void 0===t?TABS_TOOLS:t,v=p.tools,w=void 0===v?TOOLS_ITEMS:v,x=k||q,y=e||l||r||(null===(b=u[x])||void 0===b?void 0:b[0]),z=useMemo(function(){return c||u[x]||[]},[c,u,x]),A=d||w,B=useCallback(function(a){j({type:SELECT_TOOL,payload:{toolId:a}})},[]),C=useMemo(function(){return z.map(function(a){var b=(null===A||void 0===A?void 0:A[a])||{},c=b.Item,d=b.hideFn;return c&&(!d||!d({useCloudimage:s}))&&("function"==typeof c?React.createElement(c,{key:a,selectTool:B,t:i,isSelected:y===a}):c)})},[z,y]),D=useMemo(function(){var a,b,c;if(!y)return!1;if(x===TABS_IDS.ANNOTATE){var d=o.length;if(1===d){var e,f=m[o[0]];return null===(e=A[null===f||void 0===f?void 0:f.name])||void 0===e?void 0:e.ItemOptions}if(1<d)return null}return x&&y&&z.includes(y)&&(!(null!==(a=A[l])&&void 0!==a&&a.hideFn)||!(null!==(b=A[l])&&void 0!==b&&b.hideFn({useCloudimage:s})))&&(null===(c=A[l])||void 0===c?void 0:c.ItemOptions)},[A,z,x,y,m,o]);return useEffect(function(){!l&&y&&j({type:SELECT_TOOL,payload:{toolId:y}})},[]),React.createElement(StyledToolsBar,_extends({className:"FIE_tools-bar-wrapper","data-testid":"FIE-tools-bar-wrapper"},f),React.createElement(ToolsBarItemOptionsWrapper,{isPhoneScreen:g},D&&React.createElement(D,{t:i})),C&&React.createElement(StyledToolsBarItems,{className:"FIE_tools-bar","data-testid":"FIE-tools-bar-items",isPhoneScreen:g},x===TABS_IDS.WATERMARK?C:React.createElement(Carousel,{className:"FIE_tools",style:style},C)))};export default ToolsBar;