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

React component version of filerobot video editor (FVE).

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