From e60ed49478035ba4a2e81b431062d92ec9811d7c Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Wed, 2 Nov 2022 19:56:37 -0700 Subject: [PATCH] Fix type problems. --- packages/editor/src/@types/index.d.ts | 1 + .../src/classes/action/action-config/index.ts | 2 +- .../classes/default-widget-manager/index.ts | 20 +++----- .../react-component.tsx | 10 +++- packages/editor/src/classes/events/index.ts | 10 +++- .../editor/src/classes/model/editor/index.ts | 11 +++-- .../model/node-property-builder/index.ts | 46 +++++++++---------- .../src/classes/model/node-property/index.ts | 6 +-- .../button/font-family-selector/index.tsx | 4 +- .../button/undo-and-redo/index.tsx | 6 +-- .../action-widget/pane/color-picker/index.tsx | 5 +- .../pane/icon-picker/image-icon-tab/index.tsx | 8 ++-- .../action-widget/pane/icon-picker/index.tsx | 2 +- .../pane/save-and-delete/index.tsx | 2 +- .../action-widget/pane/topic-link/index.tsx | 7 ++- .../action-widget/pane/topic-note/index.tsx | 7 ++- .../editor/src/components/app-bar/index.tsx | 2 +- .../editor-toolbar/configBuilder.tsx | 12 ++--- .../src/components/editor-toolbar/index.tsx | 4 +- packages/editor/src/components/index.tsx | 8 ++-- .../src/components/zoom-panel/index.tsx | 17 ++++--- 21 files changed, 109 insertions(+), 81 deletions(-) diff --git a/packages/editor/src/@types/index.d.ts b/packages/editor/src/@types/index.d.ts index 091d25e2..d32670ed 100644 --- a/packages/editor/src/@types/index.d.ts +++ b/packages/editor/src/@types/index.d.ts @@ -1,4 +1,5 @@ declare module '*.svg' { + // eslint-disable-next-line @typescript-eslint/no-explicit-any const content: any; export default content; } diff --git a/packages/editor/src/classes/action/action-config/index.ts b/packages/editor/src/classes/action/action-config/index.ts index 4510122e..a2bf1e22 100644 --- a/packages/editor/src/classes/action/action-config/index.ts +++ b/packages/editor/src/classes/action/action-config/index.ts @@ -34,7 +34,7 @@ interface ActionConfig { /** * the event handler for a common button */ - onClick?: (event: object) => void; + onClick?: (event) => void; /** * custom element for a menu entry */ diff --git a/packages/editor/src/classes/default-widget-manager/index.ts b/packages/editor/src/classes/default-widget-manager/index.ts index f398be27..5ae0159f 100644 --- a/packages/editor/src/classes/default-widget-manager/index.ts +++ b/packages/editor/src/classes/default-widget-manager/index.ts @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/rules-of-hooks */ /* * Copyright [2021] [wisemapping] * @@ -16,14 +17,7 @@ * limitations under the License. */ import React, { useRef, useState } from 'react'; -import { - WidgetManager, - Topic, - LinkModel, - LinkIcon, - NoteModel, - NoteIcon, -} from '@wisemapping/mindplot'; +import { WidgetManager, Topic } from '@wisemapping/mindplot'; import { linkContent, noteContent } from './react-component'; export class DefaultWidgetManager extends WidgetManager { @@ -41,8 +35,8 @@ export class DefaultWidgetManager extends WidgetManager { this.setPopoverTarget = setPopoverTarget; } - showEditorForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon): void { - const model: any = { + showEditorForLink(topic: Topic): void { + const model = { getValue: () => topic.getLinkValue(), setValue: (value: string) => topic.setLinkValue(value), }; @@ -60,13 +54,13 @@ export class DefaultWidgetManager extends WidgetManager { return this.editorContent; } - handleClose: (event: {}, reason: 'backdropClick' | 'escapeKeyDown') => void = () => { + handleClose: (event, reason: 'backdropClick' | 'escapeKeyDown') => void = () => { this.setPopoverOpen(false); this.editorContent = undefined; this.setPopoverTarget(undefined); }; - showEditorForNote(topic: Topic, noteModel: NoteModel, noteIcon: NoteIcon) { + showEditorForNote(topic: Topic): void { const model = { getValue(): string { return topic.getNoteValue(); @@ -82,7 +76,7 @@ export class DefaultWidgetManager extends WidgetManager { topic.closeEditors(); } - static create(): [boolean, Element | undefined, DefaultWidgetManager] { + static useCreate(): [boolean, Element | undefined, DefaultWidgetManager] { const [popoverOpen, setPopoverOpen] = useState(false); const [popoverTarget, setPopoverTarget] = useState(undefined); const widgetManager = useRef(new DefaultWidgetManager(setPopoverOpen, setPopoverTarget)); diff --git a/packages/editor/src/classes/default-widget-manager/react-component.tsx b/packages/editor/src/classes/default-widget-manager/react-component.tsx index 30f08c6f..e008f0fd 100644 --- a/packages/editor/src/classes/default-widget-manager/react-component.tsx +++ b/packages/editor/src/classes/default-widget-manager/react-component.tsx @@ -20,11 +20,17 @@ import TopicLink from '../../components/action-widget/pane/topic-link'; import TopicNote from '../../components/action-widget/pane/topic-note'; import NodeProperty from '../model/node-property'; -const linkContent = (linkModel: NodeProperty, closeModal: () => void): React.ReactElement => { +const linkContent = ( + linkModel: NodeProperty, + closeModal: () => void, +): React.ReactElement => { return ; }; -const noteContent = (noteModel: NodeProperty, closeModal: () => void): React.ReactElement => { +const noteContent = ( + noteModel: NodeProperty, + closeModal: () => void, +): React.ReactElement => { return ; }; diff --git a/packages/editor/src/classes/events/index.ts b/packages/editor/src/classes/events/index.ts index e75b8726..08cd4fcc 100644 --- a/packages/editor/src/classes/events/index.ts +++ b/packages/editor/src/classes/events/index.ts @@ -27,7 +27,7 @@ class Events { return string.replace(/^on([A-Z])/, (_full, first) => first.toLowerCase()); } - addEvent(typeName: string, fn: any, internal?: boolean): Events { + addEvent(typeName: string, fn: () => void, internal?: boolean): Events { const type = Events._normalizeEventName(typeName); // Add function had not been added yet @@ -38,10 +38,13 @@ class Events { } // Mark reference ... + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore fn.internal = Boolean(internal); return this; } + // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types fireEvent(typeName: string, eventArgs?): Events { const type = Events._normalizeEventName(typeName); const events = this._handlerByType[type]; @@ -54,9 +57,12 @@ class Events { return this; } - removeEvent(typeName: string, fn?): Events { + removeEvent(typeName: string, fn?: () => void): Events { const type = Events._normalizeEventName(typeName); const events = this._handlerByType[type]; + + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore if (events && !fn.internal) { const index = events.indexOf(fn); if (index !== -1) events.splice(index, 1); diff --git a/packages/editor/src/classes/model/editor/index.ts b/packages/editor/src/classes/model/editor/index.ts index 96ab0ae4..bd455b4d 100644 --- a/packages/editor/src/classes/model/editor/index.ts +++ b/packages/editor/src/classes/model/editor/index.ts @@ -20,6 +20,7 @@ import { MindplotWebComponent, PersistenceManager, DesignerModel, + WidgetManager, } from '@wisemapping/mindplot'; import Capability from '../../action/capability'; @@ -34,7 +35,7 @@ class Editor { return this.component?.getDesigner()?.getMindmap() != null; } - save(minor: boolean) { + save(minor: boolean): void { if (!this.component) { throw new Error('Designer object has not been initialized.'); } @@ -52,12 +53,16 @@ class Editor { return this.getDesigner().getModel(); } - loadMindmap(mapId: string, persistenceManager: PersistenceManager, widgetManager): void { + loadMindmap( + mapId: string, + persistenceManager: PersistenceManager, + widgetManager: WidgetManager, + ): void { this.component.buildDesigner(persistenceManager, widgetManager); this.component.loadMap(mapId); } - registerEvents(canvasUpdate: (timestamp: number) => void, capability: Capability) { + registerEvents(canvasUpdate: (timestamp: number) => void, capability: Capability): void { const designer = this.component.getDesigner(); const onNodeBlurHandler = () => { if (!designer.getModel().selectedTopic()) { diff --git a/packages/editor/src/classes/model/node-property-builder/index.ts b/packages/editor/src/classes/model/node-property-builder/index.ts index b86962a9..d1599517 100644 --- a/packages/editor/src/classes/model/node-property-builder/index.ts +++ b/packages/editor/src/classes/model/node-property-builder/index.ts @@ -11,16 +11,16 @@ import { class NodePropertyBuilder { designer: Designer; - fontSizeModel: NodeProperty; - selectedTopicColorModel: NodeProperty; - fontFamilyModel: NodeProperty; - fontStyleModel: NodeProperty; - borderColorModel: NodeProperty; - fontColorModel: NodeProperty; - topicShapeModel: NodeProperty; - topicIconModel: NodeProperty; - noteModel: NodeProperty; - linkModel: NodeProperty; + fontSizeModel: NodeProperty; + selectedTopicColorModel: NodeProperty; + fontFamilyModel: NodeProperty; + fontStyleModel: NodeProperty; + borderColorModel: NodeProperty; + fontColorModel: NodeProperty; + topicShapeModel: NodeProperty; + topicIconModel: NodeProperty; + noteModel: NodeProperty; + linkModel: NodeProperty; constructor(designer: Designer) { this.designer = designer; @@ -34,7 +34,7 @@ class NodePropertyBuilder { return this.designer.getModel().selectedTopic()?.getFontSize(); } - private uniqueOrNull(propertyGetter: (Topic: Topic) => any | null) { + private uniqueOrNull(propertyGetter: (Topic: Topic) => string | number | null) { const nodes = this.designer.getModel().filterSelectedTopics(); return getTheUniqueValueOrNull(nodes, propertyGetter); } @@ -43,9 +43,9 @@ class NodePropertyBuilder { * * @returns model to and switch font weigth */ - fontWeigthModel(): NodeProperty { + fontWeigthModel(): NodeProperty { return { - getValue: () => this.designer.getModel().selectedTopic()?.getFontWeight(), + getValue: () => String(this.designer.getModel().selectedTopic()?.getFontWeight()), switchValue: () => this.designer.changeFontWeight(), }; } @@ -54,7 +54,7 @@ class NodePropertyBuilder { * * @returns model to and switch font size in both directions. Font sizes used to iterate: [6, 8, 10, 15] */ - getFontSizeModel(): NodeProperty { + getFontSizeModel(): NodeProperty { if (!this.fontSizeModel) this.fontSizeModel = { getValue: () => this.getFontSize(), @@ -76,7 +76,7 @@ class NodePropertyBuilder { * * @returns model to get and set topic color */ - getSelectedTopicColorModel(): NodeProperty { + getSelectedTopicColorModel(): NodeProperty { if (!this.selectedTopicColorModel) this.selectedTopicColorModel = { getValue: () => this.designer.getModel().selectedTopic()?.getBackgroundColor(), @@ -90,7 +90,7 @@ class NodePropertyBuilder { * * @returns model to get and set the node link */ - getLinkModel(): NodeProperty { + getLinkModel(): NodeProperty { // const selected = this.selectedTopic(); if (!this.linkModel) this.linkModel = { @@ -110,7 +110,7 @@ class NodePropertyBuilder { * * @returns model to get and set topic border color */ - getColorBorderModel(): NodeProperty { + getColorBorderModel(): NodeProperty { if (!this.borderColorModel) this.borderColorModel = { getValue: () => this.uniqueOrNull((node) => node.getBorderColor()), @@ -123,7 +123,7 @@ class NodePropertyBuilder { * * @returns model to get and set topic font color */ - getFontColorModel(): NodeProperty { + getFontColorModel(): NodeProperty { if (!this.fontColorModel) this.fontColorModel = { getValue: () => this.uniqueOrNull((node) => node.getFontColor()), @@ -136,7 +136,7 @@ class NodePropertyBuilder { * * @returns model to get and set topic icon */ - getTopicIconModel(): NodeProperty { + getTopicIconModel(): NodeProperty { if (!this.topicIconModel) this.topicIconModel = { getValue: () => null, @@ -152,7 +152,7 @@ class NodePropertyBuilder { * * @returns model to get and set topic note */ - getNoteModel(): NodeProperty { + getNoteModel(): NodeProperty { if (!this.noteModel) this.noteModel = { getValue: (): string => this.selectedTopic()?.getNoteValue(), @@ -168,7 +168,7 @@ class NodePropertyBuilder { * * @returns model to get and set topic font family */ - getFontFamilyModel(): NodeProperty { + getFontFamilyModel(): NodeProperty { if (!this.fontFamilyModel) this.fontFamilyModel = { getValue: () => this.uniqueOrNull((node) => node.getFontFamily()), @@ -181,7 +181,7 @@ class NodePropertyBuilder { * * @returns model to get and switch topic style */ - getFontStyleModel(): NodeProperty { + getFontStyleModel(): NodeProperty { if (!this.fontStyleModel) this.fontStyleModel = { getValue: () => this.selectedTopic()?.getFontStyle(), @@ -194,7 +194,7 @@ class NodePropertyBuilder { * * @returns model to get and set topic shape */ - getTopicShapeModel(): NodeProperty { + getTopicShapeModel(): NodeProperty { if (!this.topicShapeModel) this.topicShapeModel = { getValue: () => this.uniqueOrNull((node) => node.getShapeType()), diff --git a/packages/editor/src/classes/model/node-property/index.ts b/packages/editor/src/classes/model/node-property/index.ts index 45cf6627..8fa15268 100644 --- a/packages/editor/src/classes/model/node-property/index.ts +++ b/packages/editor/src/classes/model/node-property/index.ts @@ -4,15 +4,15 @@ import { SwitchValueDirection } from '../../../components/toolbar/ToolbarValueMo * Interface to get and set a property of the mindplot selected node */ -interface NodeProperty { +interface NodeProperty { /** * get the property value */ - getValue: () => any; + getValue: () => Type; /** * set the property value */ - setValue?: (value: any) => void; + setValue?: (value: Type) => void; /** * toogle boolean values or change for next/previous in reduced lists of values */ diff --git a/packages/editor/src/components/action-widget/button/font-family-selector/index.tsx b/packages/editor/src/components/action-widget/button/font-family-selector/index.tsx index 9a75449a..30dc5a0b 100644 --- a/packages/editor/src/components/action-widget/button/font-family-selector/index.tsx +++ b/packages/editor/src/components/action-widget/button/font-family-selector/index.tsx @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import React, { ReactElement } from 'react'; import Box from '@mui/material/Box'; import FormControl from '@mui/material/FormControl'; import MenuItem from '@mui/material/MenuItem'; @@ -27,7 +27,7 @@ import NodeProperty from '../../../../classes/model/node-property'; /** * Font family selector for editor toolbar */ -const FontFamilySelect = (props: { fontFamilyModel: NodeProperty }) => { +const FontFamilySelect = (props: { fontFamilyModel: NodeProperty }): ReactElement => { const [font, setFont] = React.useState(props.fontFamilyModel.getValue()); const handleChange = (event: SelectChangeEvent) => { diff --git a/packages/editor/src/components/action-widget/button/undo-and-redo/index.tsx b/packages/editor/src/components/action-widget/button/undo-and-redo/index.tsx index f66454c3..2b8094d7 100644 --- a/packages/editor/src/components/action-widget/button/undo-and-redo/index.tsx +++ b/packages/editor/src/components/action-widget/button/undo-and-redo/index.tsx @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useEffect, useState } from 'react'; +import React, { ReactElement, useEffect, useState } from 'react'; import ActionConfig from '../../../../classes/action/action-config'; import Editor from '../../../../classes/model/editor'; import { ToolbarMenuItem } from '../../../toolbar'; @@ -26,12 +26,12 @@ type UndoAndRedo = { model: Editor; }; -const UndoAndRedo = ({ configuration, disabledCondition, model }: UndoAndRedo) => { +const UndoAndRedo = ({ configuration, disabledCondition, model }: UndoAndRedo): ReactElement => { const [disabled, setDisabled] = useState(true); useEffect(() => { if (model?.isMapLoadded()) { - const handleUpdate: any = (event) => { + const handleUpdate = (event) => { const isDisabled = disabledCondition(event); setDisabled(!isDisabled); diff --git a/packages/editor/src/components/action-widget/pane/color-picker/index.tsx b/packages/editor/src/components/action-widget/pane/color-picker/index.tsx index 9152ce1e..7b189ed2 100644 --- a/packages/editor/src/components/action-widget/pane/color-picker/index.tsx +++ b/packages/editor/src/components/action-widget/pane/color-picker/index.tsx @@ -24,7 +24,10 @@ import colors from './colors.json'; /** * Color picker for toolbar */ -const ColorPicker = (props: { closeModal: () => void; colorModel: NodeProperty }): ReactElement => { +const ColorPicker = (props: { + closeModal: () => void; + colorModel: NodeProperty; +}): ReactElement => { return ( ; triggerClose: () => void; }; const IconImageTab = ({ iconModel, triggerClose }: IconImageTab): ReactElement => { return ( - {iconGroups.map((family) => ( - - {family.icons.map((icon) => ( + {iconGroups.map((family, i) => ( + + {family.icons.map((icon: string) => ( void; - iconModel: NodeProperty; + iconModel: NodeProperty; }; const IconPicker = ({ triggerClose, iconModel }: IconPickerProp): ReactElement => { diff --git a/packages/editor/src/components/action-widget/pane/save-and-delete/index.tsx b/packages/editor/src/components/action-widget/pane/save-and-delete/index.tsx index c92a7a38..19bce58c 100644 --- a/packages/editor/src/components/action-widget/pane/save-and-delete/index.tsx +++ b/packages/editor/src/components/action-widget/pane/save-and-delete/index.tsx @@ -24,7 +24,7 @@ import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined import { FormattedMessage } from 'react-intl'; const SaveAndDelete = (props: { - model: NodeProperty; + model: NodeProperty; closeModal: () => void; submitHandler: () => void; }): ReactElement => { diff --git a/packages/editor/src/components/action-widget/pane/topic-link/index.tsx b/packages/editor/src/components/action-widget/pane/topic-link/index.tsx index 5cfc9723..6d571d1b 100644 --- a/packages/editor/src/components/action-widget/pane/topic-link/index.tsx +++ b/packages/editor/src/components/action-widget/pane/topic-link/index.tsx @@ -29,8 +29,11 @@ import { useIntl } from 'react-intl'; /** * Url form for toolbar and node contextual editor */ -const TopicLink = (props: { closeModal: () => void; urlModel: NodeProperty }): ReactElement => { - const [url, setUrl] = useState(props.urlModel.getValue()); +const TopicLink = (props: { + closeModal: () => void; + urlModel: NodeProperty; +}): ReactElement => { + const [url, setUrl] = useState(props.urlModel.getValue()); const intl = useIntl(); const submitHandler = () => { diff --git a/packages/editor/src/components/action-widget/pane/topic-note/index.tsx b/packages/editor/src/components/action-widget/pane/topic-note/index.tsx index 7a2a1148..6ca0f69d 100644 --- a/packages/editor/src/components/action-widget/pane/topic-note/index.tsx +++ b/packages/editor/src/components/action-widget/pane/topic-note/index.tsx @@ -16,7 +16,7 @@ * limitations under the License. */ import Box from '@mui/material/Box'; -import React, { useState } from 'react'; +import React, { ReactElement, useState } from 'react'; import NodeProperty from '../../../../classes/model/node-property'; import Input from '../../input'; import SaveAndDelete from '../save-and-delete'; @@ -25,7 +25,10 @@ import { useIntl } from 'react-intl'; /** * Note form for toolbar and node contextual editor */ -const TopicNote = (props: { closeModal: () => void; noteModel: NodeProperty | null }) => { +const TopicNote = (props: { + closeModal: () => void; + noteModel: NodeProperty | null; +}): ReactElement => { const [note, setNote] = useState(props.noteModel.getValue()); const intl = useIntl(); diff --git a/packages/editor/src/components/app-bar/index.tsx b/packages/editor/src/components/app-bar/index.tsx index 59304032..e70b89c1 100644 --- a/packages/editor/src/components/app-bar/index.tsx +++ b/packages/editor/src/components/app-bar/index.tsx @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ReactElement, ReactElement, useEffect, useState } from 'react'; +import React, { ReactElement, useEffect, useState } from 'react'; import MaterialToolbar from '@mui/material/Toolbar'; import MaterialAppBar from '@mui/material/AppBar'; import { ToolbarMenuItem } from '../toolbar'; diff --git a/packages/editor/src/components/editor-toolbar/configBuilder.tsx b/packages/editor/src/components/editor-toolbar/configBuilder.tsx index 31ae32a9..e7ebf755 100644 --- a/packages/editor/src/components/editor-toolbar/configBuilder.tsx +++ b/packages/editor/src/components/editor-toolbar/configBuilder.tsx @@ -44,16 +44,16 @@ import TopicNote from '../action-widget/pane/topic-note'; import IconPicker from '../action-widget/pane/icon-picker'; import FontFamilySelector from '../action-widget/button/font-family-selector'; import Editor from '../../classes/model/editor'; -import { useIntl } from 'react-intl'; +import { IntlShape } from 'react-intl'; const keyTooltip = (msg: string, key: string): string => { const isMac = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0; return `${msg} (${isMac ? '⌘' : 'Ctrl'} + ${key})`; }; -export function buildEditorPanelConfig(model: Editor): ActionConfig[] { +export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionConfig[] { const toolbarValueModelBuilder = new NodePropertyValueModelBuilder(model.getDesigner()); - const intl = useIntl(); + // eslint-disable-next-line react-hooks/rules-of-hooks const colorAndShapeToolbarConfiguration: ActionConfig = { icon: , tooltip: intl.formatMessage({ @@ -102,7 +102,7 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] { { icon: () => ( ), tooltip: intl.formatMessage({ @@ -125,7 +125,7 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] { { icon: () => ( ), tooltip: intl.formatMessage({ @@ -210,7 +210,7 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] { }, { icon: () => ( - + ), tooltip: intl.formatMessage({ id: 'editor-panel.tooltip-topic-font-color', diff --git a/packages/editor/src/components/editor-toolbar/index.tsx b/packages/editor/src/components/editor-toolbar/index.tsx index 6cb80aaa..675aec70 100644 --- a/packages/editor/src/components/editor-toolbar/index.tsx +++ b/packages/editor/src/components/editor-toolbar/index.tsx @@ -16,6 +16,7 @@ * limitations under the License. */ import React, { ReactElement } from 'react'; +import { useIntl } from 'react-intl'; import ActionConfig from '../../classes/action/action-config'; import Capability from '../../classes/action/capability'; import Model from '../../classes/model/editor'; @@ -29,9 +30,10 @@ type EditorToolbarProps = { const EditorToolbar = ({ model, capability }: EditorToolbarProps): ReactElement => { let config: ActionConfig[] | undefined; + const intl = useIntl(); if (!capability.isHidden('edition-toolbar') && model?.isMapLoadded()) { - config = buildEditorPanelConfig(model); + config = buildEditorPanelConfig(model, intl); } return {config ? : <>}; diff --git a/packages/editor/src/components/index.tsx b/packages/editor/src/components/index.tsx index 63d9a474..81d086c1 100644 --- a/packages/editor/src/components/index.tsx +++ b/packages/editor/src/components/index.tsx @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useCallback, useEffect, useState } from 'react'; +import React, { ReactElement, useCallback, useEffect, useState } from 'react'; import Popover from '@mui/material/Popover'; import Model from '../classes/model/editor'; @@ -30,6 +30,7 @@ import { import I18nMsg from '../classes/i18n-msg'; import { theme as defaultEditorTheme } from '../theme'; +// eslint-disable-next-line no-restricted-imports import ThemeProvider from '@mui/material/styles/ThemeProvider'; import { Theme } from '@mui/material/styles'; import { Notifier } from './warning-dialog/styled'; @@ -65,13 +66,14 @@ const Editor = ({ onAction, theme, accountConfiguration, -}: EditorProps) => { +}: EditorProps): ReactElement => { const [model, setModel] = useState(); // This is required to redraw in case of chansges in the canvas... + // eslint-disable-next-line @typescript-eslint/no-unused-vars const [canvasUpdate, setCanvasUpdate] = useState(); const editorTheme: Theme = theme ? theme : defaultEditorTheme; - const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.create(); + const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.useCreate(); const capability = new Capability(options.mode, mapInfo.isLocked()); const mindplotRef = useCallback((component: MindplotWebComponent) => { diff --git a/packages/editor/src/components/zoom-panel/index.tsx b/packages/editor/src/components/zoom-panel/index.tsx index cd35fba3..6881ad44 100644 --- a/packages/editor/src/components/zoom-panel/index.tsx +++ b/packages/editor/src/components/zoom-panel/index.tsx @@ -17,8 +17,8 @@ */ import KeyboardOutlined from '@mui/icons-material/KeyboardOutlined'; import Typography from '@mui/material/Typography'; -import React from 'react'; -import { useIntl } from 'react-intl'; +import React, { ReactElement } from 'react'; +import { IntlShape, useIntl } from 'react-intl'; import ActionConfig from '../../classes/action/action-config'; import Capability from '../../classes/action/capability'; import Editor from '../../classes/model/editor'; @@ -30,9 +30,11 @@ import ZoomInOutlinedIcon from '@mui/icons-material/ZoomInOutlined'; import CenterFocusStrongOutlinedIcon from '@mui/icons-material/CenterFocusStrongOutlined'; import Box from '@mui/material/Box'; -export function buildZoomToolbarConfig(model: Editor, capability: Capability): ActionConfig[] { - const intl = useIntl(); - +export function buildZoomToolbarConfig( + model: Editor, + capability: Capability, + intl: IntlShape, +): ActionConfig[] { return [ { icon: , @@ -99,8 +101,9 @@ type ZoomPanelProps = { capability: Capability; }; -const ZoomPanel = ({ model, capability }: ZoomPanelProps) => { - const config = buildZoomToolbarConfig(model, capability); +const ZoomPanel = ({ model, capability }: ZoomPanelProps): ReactElement => { + const intl = useIntl(); + const config = buildZoomToolbarConfig(model, capability, intl); return (