react-filerobot-image-editor/lib/components/MainCanvas/MainCanvasWrapper.js

React component version of filerobot image editor (FIE).

import _extends from"@babel/runtime/helpers/extends";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["onPluginRootResize","pluginRootRef","source","previewBgColor","previewBgImage","resetOnSourceChange","children"];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,useEffect,useMemo,useRef}from"react";import{AppProviderOverriddenValue}from"../../context";import{SET_CANVAS_SIZE}from"../../actions";import{useResizeObserver,useStore,useLoadMainSource}from"../../hooks";import FeedbackPopup from"../FeedbackPopup";import Spinner from"../common/Spinner";import CanvasNode from"./CanvasNode";import{CanvasContainer,StyledOriginalImage}from"./MainCanvas.styled";var MainCanvasWrapper=function(a){var b=a.onPluginRootResize,c=a.pluginRootRef,d=a.source,e=a.previewBgColor,f=a.previewBgImage,g=a.resetOnSourceChange,h=a.children,i=_objectWithoutProperties(a,_excluded),j=useResizeObserver(),k=_slicedToArray(j,2),l=k[0],m=k[1],n=useStore(),o=useRef(null);useLoadMainSource({sourceToLoad:d,resetOnSourceChange:g,onPluginRootResize:b,pluginRootRef:c});var p=useMemo(function(){return _objectSpread(_objectSpread({},n),{},{previewBgColor:e||n.previewBgColor,previewBgImage:f||n.previewBgImage})},[n,e,f]),q=useCallback(function(a){var b=a.width,c=a.height;b&&c&&p.dispatch({type:SET_CANVAS_SIZE,payload:{canvasWidth:b,canvasHeight:c}})},[]);useEffect(function(){return p.originalSource&&l(o.current,q),function(){o.current&&m(o.current)}},[p.originalSource]);var r=0===p.feedback.duration;return React.createElement(React.Fragment,null,React.createElement(Spinner,{loadingData:p.loadingData,theme:p.theme,t:p.t}),React.createElement(CanvasContainer,_extends({className:"FIE_canvas-container","data-testid":"FIE-canvas-container",ref:o},i),!r&&!!p.originalSource&&function(){var a;return React.createElement(React.Fragment,null,p.isShowOriginalImage&&(null===(a=p.originalSource)||void 0===a?void 0:a.src)&&React.createElement(StyledOriginalImage,{className:"FIE_original-image-compare",src:p.originalSource.src}),React.createElement(CanvasNode,null,React.createElement(AppProviderOverriddenValue,{overridingValue:p},h)))}()),React.createElement(FeedbackPopup,null))};export default MainCanvasWrapper;