@zergo0/react-filerobot-image-editor/lib/components/Topbar/index.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 from"react";import{usePhoneScreen,useStore}from"../../hooks";import{Menu}from"@scaleflex/icons";import CloseButton from"./CloseButton";import SaveButton from"./SaveButton";import ResetButton from"./ResetButton";import UndoButton from"./UndoButton";import RedoButton from"./RedoButton";import ImageDimensionsAndDisplayToggle from"./ImageDimensionsAndDisplayToggle";import{StyledTopbar,StyledFlexCenterAlignedContainer,StyledMainButtonsWrapper,StyledControlButtonsWrapper,StyledHistoryButtons,StyledMenuIconButton}from"./Topbar.styled";import BackButton from"./BackButton";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var Topbar=function(a){var b=a.toggleMainMenu,c=useStore(),d=c.config.showBackButton,e=usePhoneScreen(320);return _jsxs(StyledTopbar,{className:"FIE_topbar",isPhoneScreen:e,children:[_jsxs(StyledMainButtonsWrapper,{className:"FIE_topbar-buttons-wrapper",children:[_jsx(StyledMenuIconButton,{className:"FIE_tabs_toggle_btn",size:e?"sm":"lg",color:"basic",onClick:function onClick(){return b(!0)},children:function children(a){return _jsx(Menu,_objectSpread({},a))}}),d?_jsx(BackButton,{}):_jsx(SaveButton,{})]}),_jsx(StyledFlexCenterAlignedContainer,{className:"FIE_topbar-center-options",showBackButton:d,children:_jsx(ImageDimensionsAndDisplayToggle,{showBackButton:d,isPhoneScreen:e})}),_jsxs(StyledControlButtonsWrapper,{children:[_jsxs(StyledHistoryButtons,{className:"FIE_topbar-history-buttons",children:[_jsx(ResetButton,{margin:"0",showBackButton:d}),_jsx(UndoButton,{margin:"0",showBackButton:d}),_jsx(RedoButton,{margin:"0",showBackButton:d})]}),d?_jsx(SaveButton,{}):_jsx(CloseButton,{})]})]})};Topbar.defaultProps={toggleMainMenu:function toggleMainMenu(){}};export default Topbar;