@zergo0/react-filerobot-image-editor/lib/components/tools/Watermark/WatermarkPadding.js

React component version of filerobot image editor (FIE).

import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React,{useState}from"react";import Menu from"@scaleflex/ui/core/menu";import Padding from"@scaleflex/icons/padding";import restrictNumber from"../../../utils/restrictNumber";import{StyledSpacedOptionFields,StyledIconWrapper,StyledOptionPopupContent,StyledIconLabel}from"../../common/AnnotationOptions/AnnotationOptions.styled";import Slider from"../../common/Slider";import{Label}from"@scaleflex/ui/core";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";var WatermarkPadding=function(a){var b=a.watermark,c=a.saveWatermark,d=a.t,e=useState(null),f=_slicedToArray(e,2),g=f[0],h=f[1],i=b.padding||0;return _jsxs(_Fragment,{children:[_jsx(StyledIconWrapper,{className:"FIE_watermark-padding-triggerer",title:d("padding"),onClick:function openOptionPopup(a){h(a.currentTarget)},active:g,children:_jsx(Padding,{size:20})}),_jsx(Menu,{className:"FIE_watermark-padding-popup",anchorEl:g,open:!!g,onClose:function closeOptionPopup(){h(null)},position:"top",children:_jsxs(StyledOptionPopupContent,{children:[_jsx(Label,{children:d("padding")}),_jsxs(StyledSpacedOptionFields,{children:[_jsx(Slider,{annotation:"px",onChange:function updatePadding(a){c({padding:restrictNumber(a,0,100)})},value:i,noMargin:!0}),_jsx(StyledIconLabel,{children:"".concat(i,"px")})]})]})})]})};export default WatermarkPadding;