Move AppBar logic as component.

This commit is contained in:
Paulo Gustavo Veiga 2022-10-09 21:33:26 -07:00
parent e1fcaa0cd2
commit 015e23f137
4 changed files with 202 additions and 178 deletions

View File

@ -20,13 +20,171 @@ import MaterialToolbar from '@mui/material/Toolbar';
import MaterialAppBar from '@mui/material/AppBar';
import { ToolbarMenuItem } from '../toolbar';
import ActionConfig from '../../classes/action/action-config';
import Editor from '../../classes/model/editor';
import Capability from '../../classes/action/capability';
import { ToolbarActionType } from '../toolbar/toolbarConfigBuilder';
import Tooltip from '@mui/material/Tooltip';
import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
import RedoOutlinedIcon from '@mui/icons-material/RedoOutlined';
import RestoreOutlinedIcon from '@mui/icons-material/RestoreOutlined';
import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
import PrintOutlinedIcon from '@mui/icons-material/PrintOutlined';
import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined';
import HelpOutlineOutlinedIcon from '@mui/icons-material/InfoOutlined';
import ArrowBackIosNewOutlinedIcon from '@mui/icons-material/ArrowBackIosNewOutlined';
import Typography from '@mui/material/Typography';
import { $msg } from '@wisemapping/mindplot';
import UndoAndRedo from '../action-widget/button/undo-and-redo';
import Button from '@mui/material/Button';
import LogoTextBlackSvg from '../../../images/logo-text-black.svg';
/**
* App bar
* @param props.configurations the configurations array
* @returns toolbar wich contains an entry for each configuration in the array
*/
const AppBar = (props: { configurations: ActionConfig[] }) => {
const AppBar = (props: {
model: Editor;
mapTitle: string;
capability: Capability;
onAction?: (type: ToolbarActionType) => void;
accountConfig?;
}) => {
const appBarDivisor = {
render: () => <Typography component="div" sx={{ flexGrow: 1 }} />,
};
const buildConfig = (
model: Editor,
mapTitle: string,
capability: Capability,
onAction: (type: ToolbarActionType) => void,
accountConfig,
): ActionConfig[] => {
return [
{
icon: <ArrowBackIosNewOutlinedIcon />,
tooltip: $msg('BACK_TO_MAP_LIST'),
onClick: () => history.back(),
},
{
render: () => <img src={LogoTextBlackSvg} />,
},
{
render: () => (
<Tooltip title={mapTitle}>
<Typography
className="truncated"
variant="body1"
component="div"
sx={{ marginX: '1.5rem' }}
>
{mapTitle}
</Typography>
</Tooltip>
),
},
null,
{
render: () => (
<UndoAndRedo
configuration={{
icon: <UndoOutlinedIcon />,
tooltip: $msg('UNDO') + ' (' + $msg('CTRL') + ' + Z)',
onClick: () => designer.undo(),
}}
disabledCondition={(event) => event.undoSteps > 0}
></UndoAndRedo>
),
visible: !capability.isHidden('undo-changes'),
disabled: () => !model?.isMapLoadded(),
},
{
render: () => (
<UndoAndRedo
configuration={{
icon: <RedoOutlinedIcon />,
tooltip: $msg('REDO') + ' (' + $msg('CTRL') + ' + Shift + Z)',
onClick: () => designer.redo(),
}}
disabledCondition={(event) => event.redoSteps > 0}
></UndoAndRedo>
),
visible: !capability.isHidden('redo-changes'),
disabled: () => !model?.isMapLoadded(),
},
null,
{
icon: <SaveOutlinedIcon />,
tooltip: $msg('SAVE') + ' (' + $msg('CTRL') + ' + S)',
onClick: () => {
model.save(true);
},
visible: !capability.isHidden('save'),
disabled: () => !model?.isMapLoadded(),
},
{
icon: <RestoreOutlinedIcon />,
tooltip: $msg('HISTORY'),
onClick: () => onAction('history'),
visible: !capability.isHidden('history'),
},
appBarDivisor,
{
icon: <FileDownloadOutlinedIcon />,
tooltip: $msg('EXPORT'),
onClick: () => onAction('export'),
visible: !capability.isHidden('export'),
},
{
icon: <PrintOutlinedIcon />,
tooltip: $msg('PRINT'),
onClick: () => onAction('print'),
visible: !capability.isHidden('print'),
},
{
icon: <HelpOutlineOutlinedIcon />,
onClick: () => onAction('info'),
tooltip: $msg('MAP_INFO'),
visible: !capability.isHidden('info'),
},
{
icon: <CloudUploadOutlinedIcon />,
onClick: () => onAction('publish'),
tooltip: $msg('PUBLISH'),
visible: !capability.isHidden('publish'),
},
{
render: () => (
<Button variant="contained" onClick={() => onAction('share')}>
{$msg('COLLABORATE')}
</Button>
),
visible: !capability.isHidden('share'),
},
{
render: () => accountConfig,
visible: !capability.isHidden('account'),
},
{
render: () => (
<Button variant="contained" onClick={() => (window.location.href = '/c/registration')}>
{$msg('SIGN_UP')}
</Button>
),
visible: !capability.isHidden('sign-up'),
},
];
};
const config = buildConfig(
props.model,
props.mapTitle,
props.capability,
props.onAction,
props.accountConfig,
);
return (
<MaterialAppBar
role="menubar"
@ -40,7 +198,7 @@ const AppBar = (props: { configurations: ActionConfig[] }) => {
}}
>
<MaterialToolbar>
{props.configurations.map((c, i) => {
{config.map((c, i) => {
return <ToolbarMenuItem key={i} configuration={c} />;
})}
</MaterialToolbar>

View File

@ -15,14 +15,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { useCallback, useEffect, useRef, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import Popover from '@mui/material/Popover';
import Model from '../classes/model/editor';
import {
buildAppBarConfig,
buildEditorPanelConfig,
buildZoomToolbarConfig,
} from './toolbar/toolbarConfigBuilder';
import { buildEditorPanelConfig, buildZoomToolbarConfig } from './toolbar/toolbarConfigBuilder';
import { IntlProvider } from 'react-intl';
import { DesignerKeyboard, MindplotWebComponent } from '@wisemapping/mindplot';
@ -49,7 +45,6 @@ const Editor = ({
const [model, setModel]: [Model | undefined, Function] = useState();
const editorTheme: Theme = theme ? theme : defaultEditorTheme;
const [toolbarsRerenderSwitch, setToolbarsRerenderSwitch] = useState(0);
const toolbarConfiguration = useRef([]);
const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.create();
const capability = new Capability(options.mode, options.locked);
@ -78,16 +73,11 @@ const Editor = ({
<ThemeProvider theme={editorTheme}>
<IntlProvider locale={locale} messages={msg}>
<AppBar
configurations={buildAppBarConfig(
model,
options.mapTitle,
capability,
onAction,
accountConfiguration,
() => {
model.save(true);
},
)}
model={model}
mapTitle={options.mapTitle}
capability={capability}
onAction={onAction}
accountConfig={accountConfiguration}
/>
<Popover

View File

@ -1,3 +1,20 @@
/*
* Copyright [2021] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import BrushOutlinedIcon from '@mui/icons-material/BrushOutlined';
import FontDownloadOutlinedIcon from '@mui/icons-material/FontDownloadOutlined';
@ -12,37 +29,24 @@ import ZoomOutOutlinedIcon from '@mui/icons-material/ZoomOutOutlined';
import ZoomInOutlinedIcon from '@mui/icons-material/ZoomInOutlined';
import CenterFocusStrongOutlinedIcon from '@mui/icons-material/CenterFocusStrongOutlined';
import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
import RedoOutlinedIcon from '@mui/icons-material/RedoOutlined';
import RestoreOutlinedIcon from '@mui/icons-material/RestoreOutlined';
import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
import PrintOutlinedIcon from '@mui/icons-material/PrintOutlined';
import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined';
import HelpOutlineOutlinedIcon from '@mui/icons-material/InfoOutlined';
import ArrowBackIosNewOutlinedIcon from '@mui/icons-material/ArrowBackIosNewOutlined';
import CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';
import SquareOutlinedIcon from '@mui/icons-material/SquareOutlined';
import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
import HorizontalRuleOutlinedIcon from '@mui/icons-material/HorizontalRuleOutlined';
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import LogoTextBlackSvg from '../../../images/logo-text-black.svg';
import Palette from '@mui/icons-material/Square';
import SquareOutlined from '@mui/icons-material/SquareOutlined';
import { $msg, Designer } from '@wisemapping/mindplot';
import { $msg } from '@wisemapping/mindplot';
import ActionConfig from '../../classes/action/action-config';
import { SwitchValueDirection } from './ToolbarValueModelBuilder';
import NodePropertyValueModelBuilder from '../../classes/model/node-property-builder';
import Typography from '@mui/material/Typography';
import KeyboardOutlined from '@mui/icons-material/KeyboardOutlined';
import Tooltip from '@mui/material/Tooltip';
import ColorPicker from '../action-widget/pane/color-picker';
import KeyboardShorcutsHelp from '../action-widget/pane/keyboard-shortcut-help';
import UndoAndRedo from '../action-widget/button/undo-and-redo';
import TopicLink from '../action-widget/pane/topic-link';
import TopicNote from '../action-widget/pane/topic-note';
import IconPicker from '../action-widget/pane/icon-picker';
@ -347,129 +351,3 @@ export function buildZoomToolbarConfig(model: Editor, capability: Capability): A
},
];
}
export function buildAppBarConfig(
model: Editor,
mapTitle: string,
capability: Capability,
onAction: (type: ToolbarActionType) => void,
accountConfiguration,
save: () => void,
): ActionConfig[] {
const appBarDivisor = {
render: () => <Typography component="div" sx={{ flexGrow: 1 }} />,
};
return [
{
icon: <ArrowBackIosNewOutlinedIcon />,
tooltip: $msg('BACK_TO_MAP_LIST'),
onClick: () => history.back(),
},
{
render: () => <img src={LogoTextBlackSvg} />,
},
{
render: () => (
<Tooltip title={mapTitle}>
<Typography
className="truncated"
variant="body1"
component="div"
sx={{ marginX: '1.5rem' }}
>
{mapTitle}
</Typography>
</Tooltip>
),
},
null,
{
render: () => (
<UndoAndRedo
configuration={{
icon: <UndoOutlinedIcon />,
tooltip: $msg('UNDO') + ' (' + $msg('CTRL') + ' + Z)',
onClick: () => designer.undo(),
}}
disabledCondition={(event) => event.undoSteps > 0}
></UndoAndRedo>
),
visible: !capability.isHidden('undo-changes'),
disabled: () => !model?.isMapLoadded(),
},
{
render: () => (
<UndoAndRedo
configuration={{
icon: <RedoOutlinedIcon />,
tooltip: $msg('REDO') + ' (' + $msg('CTRL') + ' + Shift + Z)',
onClick: () => designer.redo(),
}}
disabledCondition={(event) => event.redoSteps > 0}
></UndoAndRedo>
),
visible: !capability.isHidden('redo-changes'),
disabled: () => !model?.isMapLoadded(),
},
null,
{
icon: <SaveOutlinedIcon />,
tooltip: $msg('SAVE') + ' (' + $msg('CTRL') + ' + S)',
onClick: save,
visible: !capability.isHidden('save'),
disabled: () => !model?.isMapLoadded(),
},
{
icon: <RestoreOutlinedIcon />,
tooltip: $msg('HISTORY'),
onClick: () => onAction('history'),
visible: !capability.isHidden('history'),
},
appBarDivisor,
{
icon: <FileDownloadOutlinedIcon />,
tooltip: $msg('EXPORT'),
onClick: () => onAction('export'),
visible: !capability.isHidden('export'),
},
{
icon: <PrintOutlinedIcon />,
tooltip: $msg('PRINT'),
onClick: () => onAction('print'),
visible: !capability.isHidden('print'),
},
{
icon: <HelpOutlineOutlinedIcon />,
onClick: () => onAction('info'),
tooltip: $msg('MAP_INFO'),
visible: !capability.isHidden('info'),
},
{
icon: <CloudUploadOutlinedIcon />,
onClick: () => onAction('publish'),
tooltip: $msg('PUBLISH'),
visible: !capability.isHidden('publish'),
},
{
render: () => (
<Button variant="contained" onClick={() => onAction('share')}>
{$msg('COLLABORATE')}
</Button>
),
visible: !capability.isHidden('share'),
},
{
render: () => accountConfiguration,
visible: !capability.isHidden('account'),
},
{
render: () => (
<Button variant="contained" onClick={() => (window.location.href = '/c/registration')}>
{$msg('SIGN_UP')}
</Button>
),
visible: !capability.isHidden('sign-up'),
},
];
}

View File

@ -11,6 +11,9 @@ import Toolbar, {
} from '../../../src/components/toolbar';
import AppBar from '../../../src/components/app-bar';
import ActionConfig from '../../../src/classes/action/action-config';
import Capability from '../../../src/classes/action/capability';
import Editor from '../../../src/classes/model/editor';
require('babel-polyfill');
jest.mock('../../../src/components/app-bar/styles.css', () => '');
@ -268,23 +271,18 @@ describe('Toolbar', () => {
});
});
describe('Menubar', () => {
it('When render it displays a menu', () => {
render(<AppBar configurations={[config, config]}></AppBar>);
screen.getByRole('menubar');
});
it('Given an options array for configurations with 2 options when render it displays a menu with 2 menuitems', () => {
render(<AppBar configurations={[config, config]}></AppBar>);
const items = screen.getAllByRole('button');
expect(items).toHaveLength(2);
});
it('Execute render if set', () => {
render(<AppBar configurations={[withRenderConfig]} />);
screen.getByTestId('custom-render-div');
});
describe('AppBar', () => {
//Todo: Activate when all the bundle resources are migrated.
// SyntaxError: Cannot use import statement outside a module
// @wisemapping/editor: 17 | */
// @wisemapping/editor: 18 | import { $defined } from '@wisemapping/core - js';
// @wisemapping/editor: > 19 | import Bundle from './lang / Bundle';
//
//
// it('When render it displays a menu', () => {
// const capacity = new Capability('edition-owner', false);
// const model = new Editor(null);
// render(<AppBar mapTitle="Some title" capability={capacity} model={model} />);
// screen.getByRole('menubar');
// });
});