react-filerobot-video-editor/lib/components/tools/Rotate/RotateOptions.js

React component version of filerobot video editor (FVE).

import React from"react";import RotationLeft from"@scaleflex/icons/rotation-left";import RotationRight from"@scaleflex/icons/rotation-right";import{Rotate90}from"@scaleflex/icons";import{useDebouncedCallback,usePhoneScreen,useStore}from"../../../hooks";import{CHANGE_ROTATION,SET_RESIZE}from"../../../actions";import restrictNumber from"../../../utils/restrictNumber";import getSizeAfterRotation from"../../../utils/getSizeAfterRotation";import{TOOLS_IDS}from"../../../utils/constants";import ToolsBarItemButton from"../../ToolsBar/ToolsBarItemButton";import{StyledRotationOptions,StyledRotationSlider,StyledRotateButton}from"./Rotate.styled";var RotateOptions=function(){var a=useStore(),b=a.dispatch,c=a.adjustments.rotation,d=void 0===c?0:c,e=a.resize,f=void 0===e?{}:e,g=a.config,h=g[TOOLS_IDS.ROTATE],i=usePhoneScreen(),j=useDebouncedCallback(function(a,c){var d=restrictNumber(c,-180,180);if(b({type:CHANGE_ROTATION,payload:{rotation:d}}),f.width&&f.height){var e=getSizeAfterRotation(f.width,f.height,d);b({type:SET_RESIZE,payload:{width:e.width,height:e.height}})}},20);return"buttons"===h.componentType?React.createElement(React.Fragment,null,React.createElement(ToolsBarItemButton,{className:"FIE_rotate_button_left",id:TOOLS_IDS.IMAGE,label:"-".concat(h.angle,"\xB0"),Icon:RotationLeft,onClick:function(a){var b=d-h.angle;j(a,b)}}),React.createElement(ToolsBarItemButton,{className:"FIE_rotate_button_right",id:TOOLS_IDS.IMAGE,label:"+".concat(h.angle,"\xB0"),Icon:RotationRight,onClick:function(a){var b=d+h.angle;j(a,b)}})):React.createElement(StyledRotationOptions,null,React.createElement(StyledRotateButton,{"data-testid":"FIE-rotate-reset-button-left",size:"sm",color:"basic",onClick:function(a){return j(a,d-90)}},React.createElement(Rotate90,{width:15})),React.createElement(StyledRotationSlider,{className:"FIE_rotate-slider","data-testid":"FIE-rotate-slider",showCurrentMarkText:!0,min:-180,max:180,step:i?h.angle/3:1,value:d,angle:h.angle||90,onChange:j}),React.createElement(StyledRotateButton,{"data-testid":"FIE-rotate-reset-button-right",size:"sm",color:"basic",onClick:function(a){return j(a,d+90)}},React.createElement(Rotate90,{width:15,style:{transform:"scaleX(-1)"}})))};export default RotateOptions;