react-filerobot-image-editor/lib/components/tools/Text/TextOptions/TextControls.js

React component version of filerobot image editor (FIE).

import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React,{useCallback}from"react";import MenuItem from"@scaleflex/ui/core/menu-item";import FontBold from"@scaleflex/icons/font-bold";import FontItalic from"@scaleflex/icons/font-italic";import{TOOLS_IDS}from"../../../../utils/constants";import AnnotationOptions from"../../../common/AnnotationOptions";import{StyledIconWrapper}from"../../../common/AnnotationOptions/AnnotationOptions.styled";import{useStore,useTextAnnotationEditing}from"../../../../hooks";import{StyledFontFamilySelect,StyledFontSizeInput,StyledToolsWrapper}from"./TextOptions.styled";import{textOptionsPopupComponents,TEXT_POPPABLE_OPTIONS}from"./TextOptions.constants";var TextControls=function(a){var b,c=a.text,d=a.saveText,e=a.children,f=useStore(),g=f.designLayer,h=f.t,i=f.config,j=useTextAnnotationEditing(!0),k=j.updateTextFormats,l=j.currentTextAnnotation,m=_objectSpread(_objectSpread({},c),l),n=i.useCloudimage,o=i[TOOLS_IDS.TEXT],p=o.fonts,q=void 0===p?[]:p,r=o.onFontChange,s=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{};return null!==l&&void 0!==l&&l.id?void k(a):void d(function(b){return _objectSpread({id:b.id},a)})},t=useCallback(function(a){if(s({fontFamily:a}),m.fontFamily!==a&&"function"==typeof r){var b=g.draw.bind(g);r(a,b)}},[m,g]);return React.createElement(AnnotationOptions,{className:"FIE_text-tool-options","data-testid":"FIE-text-tool-options",annotation:m,updateAnnotation:s,morePoppableOptionsPrepended:n?[]:TEXT_POPPABLE_OPTIONS,moreOptionsPopupComponentsObj:n?{}:textOptionsPopupComponents,t:h,showTransparentColor:!1},Array.isArray(q)&&1<q.length&&React.createElement(StyledFontFamilySelect,{className:"FIE_text-font-family-option","data-testid":"FIE-text-font-family-option",onChange:t,value:null===(b=m.fontFamily)||void 0===b?void 0:b.toLowerCase(),placeholder:h("fontFamily"),size:"sm"},q.map(function(){var a,b,c,d,e=0<arguments.length&&arguments[0]!==void 0?arguments[0]:"";return React.createElement(MenuItem,{className:"FIE_text-font-family-item",key:null!==(a=e.value)&&void 0!==a?a:e,value:null===(b=null!==(c=e.value)&&void 0!==c?c:e)||void 0===b?void 0:b.toLowerCase()},null!==(d=e.label)&&void 0!==d?d:e)})),React.createElement(StyledFontSizeInput,{className:"FIE_text-size-option","data-testid":"FIE-text-size-option",value:m.fontSize||"",name:"fontSize",onChange:function(a){return s({fontSize:parseFloat(a.target.value)})},inputMode:"numeric",type:"number",size:"sm",placeholder:h("size")}),React.createElement(StyledToolsWrapper,null,!n&&React.createElement(React.Fragment,null,React.createElement(StyledIconWrapper,{className:"FIE_text-bold-option","data-testid":"FIE-text-bold-option",active:"bold"===m.fontWeight,onClick:function(){return s({fontWeight:"bold"===m.fontWeight?"normal":"bold"})},watermarkTool:!0},React.createElement(FontBold,{size:20})),React.createElement(StyledIconWrapper,{className:"FIE_text-italic-option","data-testid":"FIE-text-italic-option",active:"italic"===m.fontStyle,onClick:function(){return s({fontStyle:"italic"===m.fontStyle?"normal":"italic"})},watermarkTool:!0},React.createElement(FontItalic,{size:20}))),e))};export default TextControls;