fix(client): cannot read properties of null (reading 'removeEventListener')

at http://localhost:13000/p. index.f739617tasyncis:118:3551
This commit is contained in:
chenos 2024-01-20 14:48:17 +08:00
parent 1fa4d48869
commit 1260934d2b

View File

@ -5,11 +5,11 @@ import { Space } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import React, { FC, useEffect, useMemo, useRef } from 'react'; import React, { FC, useEffect, useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { SchemaToolbarProvider, useSchemaInitializerRender, useSchemaSettingsRender } from '../application';
import { DragHandler, useCompile, useDesignable, useGridContext, useGridRowContext } from '../schema-component'; import { DragHandler, useCompile, useDesignable, useGridContext, useGridRowContext } from '../schema-component';
import { gridRowColWrap } from '../schema-initializer/utils'; import { gridRowColWrap } from '../schema-initializer/utils';
import { SchemaSettingsDropdown } from './SchemaSettings'; import { SchemaSettingsDropdown } from './SchemaSettings';
import { useGetAriaLabelOfDesigner } from './hooks/useGetAriaLabelOfDesigner'; import { useGetAriaLabelOfDesigner } from './hooks/useGetAriaLabelOfDesigner';
import { SchemaToolbarProvider, useSchemaInitializerRender, useSchemaSettingsRender } from '../application';
import { useStyles } from './styles'; import { useStyles } from './styles';
const titleCss = css` const titleCss = css`
@ -160,7 +160,7 @@ export interface SchemaToolbarProps {
showBackground?: boolean; showBackground?: boolean;
} }
export const SchemaToolbar: FC<SchemaToolbarProps> = (props) => { const InternalSchemaToolbar: FC<SchemaToolbarProps> = (props) => {
const { title, initializer, settings, showBackground, showBorder = true, draggable = true } = props; const { title, initializer, settings, showBackground, showBorder = true, draggable = true } = props;
const { designable } = useDesignable(); const { designable } = useDesignable();
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
@ -242,13 +242,13 @@ export const SchemaToolbar: FC<SchemaToolbarProps> = (props) => {
} }
} }
if (toolbarElement) { if (toolbarElement?.parentElement) {
toolbarElement.parentElement.addEventListener('mouseenter', show); toolbarElement.parentElement.addEventListener('mouseenter', show);
toolbarElement.parentElement.addEventListener('mouseleave', hide); toolbarElement.parentElement.addEventListener('mouseleave', hide);
} }
return () => { return () => {
if (toolbarElement) { if (toolbarElement?.parentElement) {
toolbarElement.parentElement.removeEventListener('mouseenter', show); toolbarElement.parentElement.removeEventListener('mouseenter', show);
toolbarElement.parentElement.removeEventListener('mouseleave', hide); toolbarElement.parentElement.removeEventListener('mouseleave', hide);
} }
@ -286,3 +286,13 @@ export const SchemaToolbar: FC<SchemaToolbarProps> = (props) => {
</div> </div>
); );
}; };
export const SchemaToolbar: FC<SchemaToolbarProps> = (props) => {
const { designable } = useDesignable();
if (!designable) {
return null;
}
return <InternalSchemaToolbar {...props} />;
};