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

React component version of filerobot image editor (FIE).

import React from"react";import restrictNumber from"../../../utils/restrictNumber";import{Label}from"@scaleflex/ui/core";import{StyledSpacedOptionFields,StyledIconLabel,StyledOptionPopupContent}from"./AnnotationOptions.styled";import Slider from"../Slider";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var MIN_PERCENTANGE=0,MAX_PERCENTANGE=1,OpacityField=function(a){var b=a.annotation,c=a.updateAnnotation,d=a.t,e=b.opacity,f=Math.round(100*e);return _jsxs(StyledOptionPopupContent,{disablePadding:!0,children:[_jsx(Label,{children:d("transparency")}),_jsxs(StyledSpacedOptionFields,{children:[_jsx(Slider,{annotation:"%",onChange:function changeOpacity(a){c({opacity:restrictNumber(a/100,MIN_PERCENTANGE,MAX_PERCENTANGE)})},value:f,noMargin:!0}),_jsx(StyledIconLabel,{children:"".concat(f,"%")})]})]})};export default OpacityField;