More classes refactor.

This commit is contained in:
Paulo Gustavo Veiga 2022-10-06 22:30:46 -07:00
parent 2cdc59b9da
commit 66b68a7f04
10 changed files with 26 additions and 21 deletions

View File

@ -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;

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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 [];

View File

@ -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}

View File

@ -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');
});