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";var DEFAULT_VALUE={hue:0,saturation:0,value:0},MAX_VALUE={hue:259,saturation:10,value:2},sliderStyle={padding:0,margin:0},HSVOptions=function(a){var b,c,d,e,f,g,h=a.t,i=usePhoneScreen(),j=useFinetune(Konva.Filters.HSV,DEFAULT_VALUE),k=_slicedToArray(j,2),l=k[0],m=k[1],n=function(a,b){m(_defineProperty({},a,b>MAX_VALUE[a]?MAX_VALUE[a]:+b))};return React.createElement(StyledHSVOptions,{isPhoneScreen:i},React.createElement(StyledSliderContainer,{className:"FIE_hue-option-wrapper"},React.createElement(StyledSliderLabel,{className:"FIE_hue-option-label"},h("hue")),React.createElement(StyledSliderWrapper,null,React.createElement(Slider,{className:"FIE_hue-option","data-testid":"FIE-hue-option",min:0,step:1,max:259,value:null!==(b=l.hue)&&void 0!==b?b:DEFAULT_VALUE.hue,onChange:function(a){return n("hue",a)},style:sliderStyle}),React.createElement(StyledSliderInput,{value:null!==(c=l.hue)&&void 0!==c?c:DEFAULT_VALUE.hue,onChange:function(a){var b=a.target.value;return n("hue",b)},"data-testid":"FIE-hue-option-input"}))),React.createElement(StyledSliderContainer,{className:"FIE_saturation-option-wrapper"},React.createElement(StyledSliderLabel,{className:"FIE_saturation-option-label"},h("saturation")),React.createElement(StyledSliderWrapper,null,React.createElement(Slider,{className:"FIE_saturation-option","data-testid":"FIE-saturation-option",min:-2,step:.5,max:10,value:null!==(d=l.saturation)&&void 0!==d?d:DEFAULT_VALUE.saturation,onChange:function(a){return n("saturation",a)},style:sliderStyle}),React.createElement(StyledSliderInput,{"data-testid":"FIE-saturation-option-input",value:null!==(e=l.saturation)&&void 0!==e?e:DEFAULT_VALUE.saturation,onChange:function(a){var b=a.target.value;return n("saturation",b)}}))),React.createElement(StyledSliderContainer,{className:"FIE_value-option-wrapper"},React.createElement(StyledSliderLabel,{className:"FIE_value-option-label"},h("value")),React.createElement(StyledSliderWrapper,null,React.createElement(Slider,{className:"FIE_value-option","data-testid":"FIE-value-option",min:-2,step:.1,max:2,value:null!==(f=l.value)&&void 0!==f?f:DEFAULT_VALUE.value,onChange:function(a){return n("value",a)},style:sliderStyle}),React.createElement(StyledSliderInput,{"data-testid":"FIE-value-option-input",value:null!==(g=l.value)&&void 0!==g?g:DEFAULT_VALUE.value,onChange:function(a){var b=a.target.value;return n("value",b)}}))))};export default HSVOptions;