@zergo0/react-filerobot-image-editor/lib/components/common/AnnotationOptions/ShadowFields.js

React component version of filerobot image editor (FIE).

import _defineProperty from"@babel/runtime/helpers/defineProperty";import React from"react";import Label from"@scaleflex/ui/core/label";import restrictNumber from"../../../utils/restrictNumber";import ColorInput from"../ColorInput";import{StyledTwoColumnsContainer,StyledColumn,StyledSpacedOptionFields}from"./AnnotationOptions.styled";import Slider from"../Slider";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var ShadowFields=function(a){var b=a.annotation,c=a.updateAnnotation,d=a.t,e=b.shadowOffsetX,f=b.shadowOffsetY,g=b.shadowBlur,h=b.shadowColor,i=b.shadowOpacity,j=function(a,b){var d=2<arguments.length&&arguments[2]!==void 0?arguments[2]:0,e=3<arguments.length&&arguments[3]!==void 0?arguments[3]:100;c(_defineProperty({},a,restrictNumber(b,d,e)))};return _jsxs(StyledSpacedOptionFields,{preventFlex:!0,children:[_jsx(Label,{children:d("shadow")}),_jsxs(StyledTwoColumnsContainer,{children:[_jsxs(StyledColumn,{children:[_jsx(Label,{children:d("horizontal")}),_jsx(Slider,{annotation:"px",min:-100,max:100,onChange:function onChange(a){return j("shadowOffsetX",a,-100,100)},value:e||0,hideTrack:!0})]}),_jsxs(StyledColumn,{children:[_jsx(Label,{children:d("vertical")}),_jsx(Slider,{annotation:"px",min:-100,max:100,onChange:function onChange(a){return j("shadowOffsetY",a,-100,100)},value:f||0,hideTrack:!0})]})]}),_jsxs(StyledTwoColumnsContainer,{children:[_jsxs(StyledColumn,{children:[_jsx(Label,{children:d("blur")}),_jsx(Slider,{annotation:"%",onChange:function onChange(a){return j("shadowBlur",a)},value:g})]}),_jsxs(StyledColumn,{children:[_jsx(Label,{children:d("opacity")}),_jsx(Slider,{annotation:"%",onChange:function onChange(a){return j("shadowOpacity",a/100,0,1)},value:Math.round(100*i)})]})]}),_jsx(ColorInput,{color:h,onChange:function changeShadowColor(a){c({shadowColor:a})},colorFor:"shadow"})]})};export default ShadowFields;