sp-image-editor/lib/components/ToolsBar/index.js

React component version of filerobot image editor (FIE).

import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import React,{useCallback,useEffect,useMemo}from"react";import{SELECT_TOOL}from"../../actions";import{TABS_TOOLS,TOOLS_ITEMS}from"../tools/tools.constants";import{TABS_IDS,TOOLS_IDS}from"../../utils/constants";import{useStore}from"../../hooks";import Carousel from"../common/Carousel";import{DEFAULT_CROP_PRESETS}from"../tools/Crop/Crop.constants";import{StyledToolsBar,StyledToolsBarItems}from"./ToolsBar.styled";import ToolsBarItemOptionsWrapper from"./ToolsBarItemOptionsWrapper";import CustomCropButtons from"../tools/Crop/CustomCropButtons";var style={maxWidth:"100%",width:"100%"},ToolsBar=function(a){var b,c=a.isPhoneScreen,d=a.dynamicButtons,e=a.upperToolbar,f=useStore(),g=f.t,h=f.dispatch,i=f.tabId,j=f.toolId,k=f.annotations,l=f.selectionsIds,m=void 0===l?[]:l,n=f.config,o=n.defaultTabId,p=n.defaultToolId,q=n.useCloudimage,r=n.Crop,s=void 0===r?{}:r,t=f.dynamicCropToolId,u=i||o,v=j||p||(null===(b=TABS_TOOLS[u])||void 0===b?void 0:b[0]),w=useMemo(function(){var a=TABS_TOOLS[u]||[],b=d?[TOOLS_IDS.CROP]:[];return a.filter(function(a){return!b.includes(a)})},[u,d]),x=useCallback(function(a){h({type:SELECT_TOOL,payload:{toolId:a,dynamicButtons:s.dynamicButtons,dynamicCropToolId:""}})},[s.dynamicButtons]),y=useMemo(function(){var a=s.presetsItems,b=void 0===a?[]:a,c=s.presetsFolders,e=void 0===c?[]:c,f=s.lockCropAreaAt,g=f?DEFAULT_CROP_PRESETS.filter(function(a){var b;return!(null!==(b=a.hide)&&void 0!==b&&b.call(a,{lockCropAreaAt:f}))}):DEFAULT_CROP_PRESETS;return d?_toConsumableArray(b):[].concat(_toConsumableArray(e),_toConsumableArray(g),_toConsumableArray(b))},[s,d]),z=useMemo(function(){if(e){return y.map(function(a){return React.createElement(CustomCropButtons,{customKey:"custom-crop-".concat(a.titleKey),key:"".concat(a.titleKey,"-").concat(a.id),isSelected:t===a.titleKey,item:a,t:g})})}return w.map(function(a){var b=TOOLS_ITEMS[a],c=b.Item,d=b.hideFn;return c&&(!d||!d({useCloudimage:q}))&&React.createElement(c,{key:a,selectTool:x,t:g,isSelected:v===a})})},[w,v,t]),A=useMemo(function(){var a,b,c;if(!v)return!1;if(u===TABS_IDS.ANNOTATE){var d=m.length;if(1===d){var e,f=k[m[0]];return null===(e=TOOLS_ITEMS[f.name])||void 0===e?void 0:e.ItemOptions}if(1<d)return null}return u&&v&&TABS_TOOLS[u].includes(v)&&(!(null!==(a=TOOLS_ITEMS[j])&&void 0!==a&&a.hideFn)||!(null!==(b=TOOLS_ITEMS[j])&&void 0!==b&&b.hideFn({useCloudimage:q})))&&(null===(c=TOOLS_ITEMS[j])||void 0===c?void 0:c.ItemOptions)},[u,v,k,m]);return useEffect(function(){!j&&v&&h({type:SELECT_TOOL,payload:{toolId:v}})},[]),React.createElement(StyledToolsBar,{className:"FIE_tools-bar-wrapper"},!e&&React.createElement(ToolsBarItemOptionsWrapper,{isPhoneScreen:c},A&&React.createElement(A,{t:g})),z&&React.createElement(StyledToolsBarItems,{className:"FIE_tools-bar",isPhoneScreen:c},u===TABS_IDS.WATERMARK?z:React.createElement(Carousel,{className:"FIE_tools",style:style},z)))};ToolsBar.defaultProps={isPhoneScreen:!1,dynamicButtons:!1,upperToolbar:!1};export default ToolsBar;