@zergo0/react-filerobot-image-editor/lib/components/tools/Rotate/RotateOptions.js

React component version of filerobot image editor (FIE).

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";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";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?_jsxs(_Fragment,{children:[_jsx(ToolsBarItemButton,{className:"FIE_rotate_button_left",id:TOOLS_IDS.IMAGE,label:"-".concat(h.angle,"\xB0"),Icon:RotationLeft,onClick:function changeRotationButtonNegative(a){var b=d-h.angle;j(a,b)}}),_jsx(ToolsBarItemButton,{className:"FIE_rotate_button_right",id:TOOLS_IDS.IMAGE,label:"+".concat(h.angle,"\xB0"),Icon:RotationRight,onClick:function changeRotationButtonPositive(a){var b=d+h.angle;j(a,b)}})]}):_jsxs(StyledRotationOptions,{children:[_jsx(StyledRotateButton,{size:"sm",color:"basic",onClick:function onClick(a){return j(a,d-90)},children:_jsx(Rotate90,{width:15})}),_jsx(StyledRotationSlider,{className:"FIE_rotate-slider",showCurrentMarkText:!0,min:-180,max:180,step:i?h.angle/3:1,value:d,angle:h.angle||90,onChange:j}),_jsx(StyledRotateButton,{size:"sm",color:"basic",onClick:function onClick(a){return j(a,d+90)},children:_jsx(Rotate90,{width:15,style:{transform:"scaleX(-1)"}})})]})};export default RotateOptions;