react-filerobot-image-editor/lib/components/tools/Text/TextOptions/TextSpacingsFields.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{StyledSpacedOptionFields}from"../../../common/AnnotationOptions/AnnotationOptions.styled";import Slider from"../../../common/Slider";import{useStore}from"../../../../hooks";var MIN_VALUE=0,MAX_VALUE=1e3,SLIDER_STEP=1,TextSpacingsFields=function(a){var b=a.annotation,c=a.updateAnnotation,d=a.t,e=useStore(),f=e.originalSource,g=b.letterSpacing,h=b.lineHeight,i=b.baselineShift,j=b.fontSize,k=function(a,b){var d=2<arguments.length&&arguments[2]!==void 0?arguments[2]:{},e=d.min,f=void 0===e?MIN_VALUE:e,g=d.max,h=void 0===g?MAX_VALUE:g;c(_defineProperty({},a,restrictNumber(b,f,h)))},l=(null===f||void 0===f?void 0:f.width)||MAX_VALUE,m=(null===f||void 0===f?void 0:f.height)||MAX_VALUE;return React.createElement(StyledSpacedOptionFields,{preventFlex:!0},React.createElement(Label,null,d("letterSpacing")),React.createElement(Slider,{annotation:"em",isActive:!!g,onChange:function(a){return k("letterSpacing",a,{max:l})},value:g,step:.01,max:Math.min(j,20)}),React.createElement(Label,null,d("lineHeight")),React.createElement(Slider,{isActive:!!i,onChange:function(a){return k("lineHeight",a)},value:h,step:SLIDER_STEP}),React.createElement(Label,null,d("baselineShift")),React.createElement(Slider,{isActive:!!i,onChange:function(a){return k("baselineShift",a,{min:-m,max:m})},value:null!==i&&void 0!==i?i:0,min:-m,max:m,step:SLIDER_STEP,hideTrack:!0}))};export default TextSpacingsFields;