mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-25 15:47:55 +01:00
Move AppBar logic as component.
This commit is contained in:
Paulo Gustavo Veiga
parent
e1fcaa0cd2
commit
015e23f137
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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'),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@ -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');
|
||||
// });
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user