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