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

React component version of filerobot image editor (FIE).

import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","morePoppableOptionsPrepended","moreOptionsPopupComponentsObj","morePoppableOptionsAppended","annotation","updateAnnotation","hideFillOption","hidePositionField","className","overrideOptions"];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 Position from"@scaleflex/icons/position";import Shadow from"@scaleflex/icons/shadow";import Stroke from"@scaleflex/icons/stroke";import Transparency from"@scaleflex/icons/transparency";import{Label}from"@scaleflex/ui/core";import Menu from"@scaleflex/ui/core/menu";import{usePhoneScreen,useStore}from"../../../hooks";import{useCallback,useMemo,useState}from"react";import ColorInput from"../ColorInput";import{POPPABLE_OPTIONS}from"./AnnotationOptions.constants";import{StyledIconWrapper,StyledOptionPopupContent,StyledOptions,StyledOptionsWrapper}from"./AnnotationOptions.styled";import OpacityField from"./OpacityField";import PositionFields from"./PositionFields";import ShadowFields from"./ShadowFields";import StrokeFields from"./StrokeFields";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";var AnnotationOptions=function(a){var b=a.children,c=a.morePoppableOptionsPrepended,d=a.moreOptionsPopupComponentsObj,e=a.morePoppableOptionsAppended,f=a.annotation,g=a.updateAnnotation,h=a.hideFillOption,i=a.hidePositionField,j=a.className,k=a.overrideOptions,l=_objectWithoutProperties(a,_excluded),m=useState(null),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useState(null),r=_slicedToArray(q,2),s=r[0],u=r[1],v=useStore(),w=v.config.useCloudimage,x=v.t,t=usePhoneScreen(320),y=k||useMemo(function(){return[].concat(_toConsumableArray(c),[{titleKey:"opacity",name:POPPABLE_OPTIONS.OPACITY,Icon:Transparency}],_toConsumableArray(w?[]:[{titleKey:"stroke",name:POPPABLE_OPTIONS.STROKE,Icon:Stroke},{titleKey:"shadow",name:POPPABLE_OPTIONS.SHADOW,Icon:Shadow}]),[i?void 0:{titleKey:"position",name:POPPABLE_OPTIONS.POSITION,Icon:Position}])},[c]),z=useMemo(function(){return _objectSpread(_objectSpread({},d),{},_defineProperty(_defineProperty(_defineProperty(_defineProperty({},POPPABLE_OPTIONS.OPACITY,OpacityField),POPPABLE_OPTIONS.STROKE,StrokeFields),POPPABLE_OPTIONS.SHADOW,ShadowFields),POPPABLE_OPTIONS.POSITION,PositionFields),e)},[d]),A=useCallback(function(a,b){var c=null===a||void 0===a?void 0:a.currentTarget;p(c),u(b)},[]),B=useCallback(function(a){g({fill:a})},[g]),C=o&&s&&z[s];return _jsxs(StyledOptions,{className:"FIE_annotations-options".concat(j?" ".concat(j):""),isPhoneScreen:t,children:[!h&&_jsx(ColorInput,{color:f.fill,onChange:B,colorFor:"fill"}),b,_jsx(StyledOptionsWrapper,{children:y.map(function(a){return a&&_jsx(StyledIconWrapper,{className:"FIE_annotation-option-triggerer",title:x(a.titleKey),onClick:function onClick(b){return A(b,a.name)},active:s===a.name,children:_jsx(a.Icon,{size:20})},a.name)})}),C&&_jsx(Menu,{className:"FIE_annotation-option-popup",anchorEl:o,open:!!o,onClose:A,position:"top",children:_jsx(StyledOptionPopupContent,{children:s===POPPABLE_OPTIONS.POSITION?function renderPositionFields(){return _jsxs(_Fragment,{children:[_jsx(Label,{children:x("position")}),_jsx(StyledOptionPopupContent,{position:!0,children:_jsx(C,_objectSpread({annotation:f,updateAnnotation:g},l))})]})}():_jsx(C,_objectSpread({annotation:f,updateAnnotation:g},l))})})]})};AnnotationOptions.defaultProps={children:void 0,morePoppableOptionsPrepended:[],moreOptionsPopupComponentsObj:{},morePoppableOptionsAppended:[],hideFillOption:!1,hidePositionField:!1,className:void 0,overrideOptions:void 0};export default AnnotationOptions;