react-filerobot-video-editor/lib/components/tools/Flip/FlipX.js

React component version of filerobot video editor (FVE).

import React,{useCallback,useMemo}from"react";import{FlipX as FlipXIcon}from"@scaleflex/icons/flip-x";import ToolsBarItemButton from"../../ToolsBar/ToolsBarItemButton";import{FLIP_DIRECTIONS,TOOLS_IDS}from"../../../utils/constants";import{TOGGLE_FLIP}from"../../../actions";import{usePhoneScreen,useStore}from"../../../hooks";var xFlipReverseSideStyle={transform:"scaleX(-1)"},FlipX=function(a){var b=a.selectTool,c=a.isSelected,d=a.t,e=useStore(),f=e.dispatch,g=e.adjustments.isFlippedX,h=usePhoneScreen(320),i=useCallback(function(){return React.createElement(FlipXIcon,{size:h?20:16,style:g?xFlipReverseSideStyle:void 0})},[g,h]),j=useMemo(function(){return{reverseLabelOfCurrXFlipDir:g?d("unFlipX"):d("flipX"),reverseIconOfCurrXFlipDir:i}},[g,i]),k=j.reverseLabelOfCurrXFlipDir,l=j.reverseIconOfCurrXFlipDir,m=useCallback(function(){f({type:TOGGLE_FLIP,payload:{direction:FLIP_DIRECTIONS.X}})},[]),n=useCallback(function(a){b(a),m()},[]);return React.createElement(ToolsBarItemButton,{className:"FIE_flip-x-tool-button",id:TOOLS_IDS.FLIP_X,label:k,Icon:l,onClick:n,isSelected:void 0!==c&&c})};export default FlipX;