diff --git a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx index 46e49184d..e6e757efa 100644 --- a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx +++ b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx @@ -40,6 +40,58 @@ describe('defaultTab', () => { expect(element.querySelector('.dv-react-tab-close-btn')).toBeNull(); }); + test('that settings closeActionOverride skips api.close()', async () => { + const api = fromPartial({ + close: jest.fn(), + }); + const containerApi = fromPartial({}); + const params = {}; + + const closeActionOverride = jest.fn(); + + render( + + ); + + const element = await screen.getByTestId('dockview-default-tab'); + const btn = element.querySelector( + '.dv-react-tab-close-btn' + ) as HTMLElement; + fireEvent.click(btn); + + expect(closeActionOverride).toBeCalledTimes(1); + expect(api.close).toBeCalledTimes(0); + }); + + test('that clicking close calls api.close()', async () => { + const api = fromPartial({ + close: jest.fn(), + }); + const containerApi = fromPartial({}); + const params = {}; + + render( + + ); + + const element = await screen.getByTestId('dockview-default-tab'); + const btn = element.querySelector( + '.dv-react-tab-close-btn' + ) as HTMLElement; + fireEvent.click(btn); + + expect(api.close).toBeCalledTimes(1); + }); + test('has close button when hideClose=false', async () => { const api = fromPartial({}); const containerApi = fromPartial({}); diff --git a/packages/dockview/src/dockview/defaultTab.tsx b/packages/dockview/src/dockview/defaultTab.tsx index 280ebd7ed..5032cfb03 100644 --- a/packages/dockview/src/dockview/defaultTab.tsx +++ b/packages/dockview/src/dockview/defaultTab.tsx @@ -3,7 +3,10 @@ import * as React from 'react'; import { CloseButton } from '../svg'; export type IDockviewDefaultTabProps = IDockviewPanelHeaderProps & - React.DOMAttributes & { hideClose?: boolean }; + React.DOMAttributes & { + hideClose?: boolean; + closeActionOverride?: () => void; + }; export const DockviewDefaultTab: React.FunctionComponent< IDockviewDefaultTabProps @@ -12,14 +15,20 @@ export const DockviewDefaultTab: React.FunctionComponent< containerApi: _containerApi, params: _params, hideClose, + closeActionOverride, ...rest }) => { const onClose = React.useCallback( (event: React.MouseEvent) => { event.preventDefault(); - api.close(); + + if (closeActionOverride) { + closeActionOverride(); + } else { + api.close(); + } }, - [api] + [api, closeActionOverride] ); const onMouseDown = React.useCallback((e: React.MouseEvent) => {