@zergo0/react-filerobot-image-editor/lib/components/tools/HSV/HSVOptions.js

React component version of filerobot image editor (FIE).

import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React from"react";import Konva from"konva";import{useFinetune,usePhoneScreen}from"../../../hooks";import Slider from"../../common/Slider";import{StyledHSVOptions,StyledSliderContainer,StyledSliderLabel,StyledSliderInput,StyledSliderWrapper}from"../tools.styled";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_VALUE={hue:0,saturation:0,value:0},MAX_VALUE={hue:259,saturation:10,value:2},sliderStyle={padding:0,margin:0},isPhoneScreen=usePhoneScreen(),HSVOptions=function(a){var b,c,d,e,f,g,h=a.t,i=useFinetune(Konva.Filters.HSV,DEFAULT_VALUE),j=_slicedToArray(i,2),k=j[0],l=j[1],m=function(a,b){l(_defineProperty({},a,b>MAX_VALUE[a]?MAX_VALUE[a]:+b))};return _jsxs(StyledHSVOptions,{isPhoneScreen:isPhoneScreen,children:[_jsxs(StyledSliderContainer,{className:"FIE_hue-option-wrapper",children:[_jsx(StyledSliderLabel,{className:"FIE_hue-option-label",children:h("hue")}),_jsxs(StyledSliderWrapper,{children:[_jsx(Slider,{className:"FIE_hue-option",min:0,step:1,max:259,value:null!==(b=k.hue)&&void 0!==b?b:DEFAULT_VALUE.hue,onChange:function onChange(a){return m("hue",a)},style:sliderStyle}),_jsx(StyledSliderInput,{value:null!==(c=k.hue)&&void 0!==c?c:DEFAULT_VALUE.hue,onChange:function onChange(a){var b=a.target.value;return m("hue",b)}})]})]}),_jsxs(StyledSliderContainer,{className:"FIE_saturation-option-wrapper",children:[_jsx(StyledSliderLabel,{className:"FIE_saturation-option-label",children:h("saturation")}),_jsxs(StyledSliderWrapper,{children:[_jsx(Slider,{className:"FIE_saturation-option",min:-2,step:.5,max:10,value:null!==(d=k.saturation)&&void 0!==d?d:DEFAULT_VALUE.saturation,onChange:function onChange(a){return m("saturation",a)},style:sliderStyle}),_jsx(StyledSliderInput,{value:null!==(e=k.saturation)&&void 0!==e?e:DEFAULT_VALUE.saturation,onChange:function onChange(a){var b=a.target.value;return m("saturation",b)}})]})]}),_jsxs(StyledSliderContainer,{className:"FIE_value-option-wrapper",children:[_jsx(StyledSliderLabel,{className:"FIE_value-option-label",children:h("value")}),_jsxs(StyledSliderWrapper,{children:[_jsx(Slider,{className:"FIE_value-option",min:-2,step:.1,max:2,value:null!==(f=k.value)&&void 0!==f?f:DEFAULT_VALUE.value,onChange:function onChange(a){return m("value",a)},style:sliderStyle}),_jsx(StyledSliderInput,{value:null!==(g=k.value)&&void 0!==g?g:DEFAULT_VALUE.value,onChange:function onChange(a){var b=a.target.value;return m("value",b)}})]})]})]})};export default HSVOptions;