mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-10 17:33:24 +01:00
More classes refactor.
This commit is contained in:
parent
2cdc59b9da
commit
66b68a7f04
@ -1,17 +1,17 @@
|
||||
import React from 'react';
|
||||
import ActionConfig from '../../classes/action-config';
|
||||
import MaterialToolbar from '@mui/material/Toolbar';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import { ToolbarMenuItem } from './Toolbar';
|
||||
import MaterialAppBar from '@mui/material/AppBar';
|
||||
import { ToolbarMenuItem } from '../toolbar/Toolbar';
|
||||
|
||||
/**
|
||||
* App bar
|
||||
* @param props.configurations the configurations array
|
||||
* @returns toolbar wich contains an entry for each configuration in the array
|
||||
*/
|
||||
const Menubar = (props: { configurations: ActionConfig[] }) => {
|
||||
const AppBar = (props: { configurations: ActionConfig[] }) => {
|
||||
return (
|
||||
<AppBar
|
||||
<MaterialAppBar
|
||||
role="menubar"
|
||||
position="absolute"
|
||||
color="default"
|
||||
@ -27,8 +27,8 @@ const Menubar = (props: { configurations: ActionConfig[] }) => {
|
||||
return <ToolbarMenuItem key={i} configuration={c} />;
|
||||
})}
|
||||
</MaterialToolbar>
|
||||
</AppBar>
|
||||
</MaterialAppBar>
|
||||
);
|
||||
};
|
||||
|
||||
export default Menubar;
|
||||
export default AppBar;
|
@ -4,7 +4,7 @@ import Divider from '@mui/material/Divider';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Popover, { PopoverOrigin } from '@mui/material/Popover';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import './appbar-buttons.css';
|
||||
import '../app-bar/styles.css';
|
||||
import Box from '@mui/material/Box';
|
||||
import ActionConfig from '../../classes/action-config';
|
||||
import ToolbarPosition, { defaultPosition } from './ToolbarPositionInterface';
|
||||
|
@ -1,6 +1,6 @@
|
||||
import Box from '@mui/material/Box';
|
||||
import React from 'react';
|
||||
import { NodePropertyValueModel } from '../../ToolbarValueModelBuilder';
|
||||
import { NodePropertyValueModel } from '../ToolbarValueModelBuilder';
|
||||
import { CirclePicker as ReactColorPicker } from 'react-color';
|
||||
import colors from './colors.json';
|
||||
|
@ -1,6 +1,6 @@
|
||||
import Toolbar from './Toolbar';
|
||||
import { horizontalPosition } from './ToolbarPositionInterface';
|
||||
import Appbar from './AppBar';
|
||||
import Header from '../app-bar';
|
||||
import {
|
||||
buildEditorAppBarConfiguration,
|
||||
buildToolbarCongiruation,
|
||||
@ -8,11 +8,12 @@ import {
|
||||
} from './toolbarConfigurationBuilder';
|
||||
|
||||
export default Toolbar;
|
||||
|
||||
export const configurationBuilder = {
|
||||
buildEditorAppBarConfiguration,
|
||||
buildToolbarCongiruation,
|
||||
buildZoomToolbarConfiguration,
|
||||
};
|
||||
export { horizontalPosition, Appbar };
|
||||
export { horizontalPosition, Header };
|
||||
|
||||
export type ToolbarActionType = 'export' | 'publish' | 'history' | 'print' | 'share' | 'info';
|
||||
|
@ -43,13 +43,13 @@ import KeyboardOutlined from '@mui/icons-material/KeyboardOutlined';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import UrlForm from './component/link-form';
|
||||
import NoteForm from './component/note-form';
|
||||
import ColorPicker from './component/color-picker';
|
||||
import { KeyboardShorcutsHelp } from './component/keyboard-shortcut-help';
|
||||
import ColorPicker from './color-picker';
|
||||
import { KeyboardShorcutsHelp } from '../footer/keyboard-shortcut-help';
|
||||
|
||||
/**
|
||||
*
|
||||
* @param designer designer to aply changes
|
||||
* @returns configuration for @wisemapping/editor primary toolbar
|
||||
* @returns configuration for @wisemapping/editor priAppbarmary toolbar
|
||||
*/
|
||||
export function buildToolbarCongiruation(designer: Designer): ActionConfig[] {
|
||||
if (!designer) return [];
|
||||
|
@ -1,5 +1,4 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { ToolbarActionType } from './components/toolbar';
|
||||
import Popover from '@mui/material/Popover';
|
||||
|
||||
import { IntlProvider } from 'react-intl';
|
||||
@ -24,13 +23,18 @@ import {
|
||||
} from '@wisemapping/mindplot';
|
||||
import './global-styled.css';
|
||||
import I18nMsg from './classes/i18n-msg';
|
||||
import Toolbar, { horizontalPosition, Appbar, configurationBuilder } from './components/toolbar';
|
||||
import Toolbar, {
|
||||
horizontalPosition,
|
||||
configurationBuilder,
|
||||
ToolbarActionType,
|
||||
} from './components/toolbar';
|
||||
import { theme as defaultEditorTheme } from './theme';
|
||||
import ThemeProvider from '@mui/material/styles/ThemeProvider';
|
||||
import { Theme } from '@mui/material/styles';
|
||||
import { Notifier } from './components/footer/styled';
|
||||
import Footer from './components/footer';
|
||||
import DefaultWidgetManager from './classes/default-widget-manager';
|
||||
import AppBar from './components/app-bar';
|
||||
|
||||
declare global {
|
||||
// used in mindplot
|
||||
@ -230,7 +234,7 @@ const Editor = ({
|
||||
return (
|
||||
<ThemeProvider theme={editorTheme}>
|
||||
<IntlProvider locale={locale} messages={msg}>
|
||||
<Appbar configurations={menubarConfiguration} />
|
||||
<AppBar configurations={menubarConfiguration} />
|
||||
<Popover
|
||||
id="popover"
|
||||
open={popoverOpen}
|
||||
|
@ -10,9 +10,9 @@ import Toolbar, {
|
||||
ToolbarSubmenu,
|
||||
} from '../../../src/components/toolbar/Toolbar';
|
||||
import ActionConfig from '../../../src/classes/action-config';
|
||||
import Menubar from '../../../src/components/toolbar/AppBar';
|
||||
import AppBar from '../../../src/components/app-bar';
|
||||
require('babel-polyfill');
|
||||
jest.mock('../../../src/components/toolbar/appbar-buttons.css', () => '');
|
||||
jest.mock('../../../src/components/app-bar/styles.css', () => '');
|
||||
|
||||
const config: ActionConfig = {
|
||||
icon: <ThreeDRotation></ThreeDRotation>,
|
||||
@ -270,20 +270,20 @@ describe('Toolbar', () => {
|
||||
|
||||
describe('Menubar', () => {
|
||||
it('When render it displays a menu', () => {
|
||||
render(<Menubar configurations={[config, config]}></Menubar>);
|
||||
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(<Menubar configurations={[config, config]}></Menubar>);
|
||||
render(<AppBar configurations={[config, config]}></AppBar>);
|
||||
const items = screen.getAllByRole('button');
|
||||
|
||||
expect(items).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('Execute render if set', () => {
|
||||
render(<Menubar configurations={[withRenderConfig]} />);
|
||||
render(<AppBar configurations={[withRenderConfig]} />);
|
||||
|
||||
screen.getByTestId('custom-render-div');
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user