mirror of
https://github.com/mathuo/dockview
synced 2025-02-13 20:05:46 +00:00
feat: override close option
This commit is contained in:
parent
63ca9053a5
commit
4aa707132f
@ -40,6 +40,58 @@ describe('defaultTab', () => {
|
|||||||
expect(element.querySelector('.dv-react-tab-close-btn')).toBeNull();
|
expect(element.querySelector('.dv-react-tab-close-btn')).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('that settings closeActionOverride skips api.close()', async () => {
|
||||||
|
const api = fromPartial<DockviewPanelApi>({
|
||||||
|
close: jest.fn(),
|
||||||
|
});
|
||||||
|
const containerApi = fromPartial<DockviewApi>({});
|
||||||
|
const params = {};
|
||||||
|
|
||||||
|
const closeActionOverride = jest.fn();
|
||||||
|
|
||||||
|
render(
|
||||||
|
<DockviewDefaultTab
|
||||||
|
api={api}
|
||||||
|
containerApi={containerApi}
|
||||||
|
params={params}
|
||||||
|
closeActionOverride={closeActionOverride}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
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<DockviewPanelApi>({
|
||||||
|
close: jest.fn(),
|
||||||
|
});
|
||||||
|
const containerApi = fromPartial<DockviewApi>({});
|
||||||
|
const params = {};
|
||||||
|
|
||||||
|
render(
|
||||||
|
<DockviewDefaultTab
|
||||||
|
api={api}
|
||||||
|
containerApi={containerApi}
|
||||||
|
params={params}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
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 () => {
|
test('has close button when hideClose=false', async () => {
|
||||||
const api = fromPartial<DockviewPanelApi>({});
|
const api = fromPartial<DockviewPanelApi>({});
|
||||||
const containerApi = fromPartial<DockviewApi>({});
|
const containerApi = fromPartial<DockviewApi>({});
|
||||||
|
@ -3,7 +3,10 @@ import * as React from 'react';
|
|||||||
import { CloseButton } from '../svg';
|
import { CloseButton } from '../svg';
|
||||||
|
|
||||||
export type IDockviewDefaultTabProps = IDockviewPanelHeaderProps &
|
export type IDockviewDefaultTabProps = IDockviewPanelHeaderProps &
|
||||||
React.DOMAttributes<HTMLDivElement> & { hideClose?: boolean };
|
React.DOMAttributes<HTMLDivElement> & {
|
||||||
|
hideClose?: boolean;
|
||||||
|
closeActionOverride?: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
export const DockviewDefaultTab: React.FunctionComponent<
|
export const DockviewDefaultTab: React.FunctionComponent<
|
||||||
IDockviewDefaultTabProps
|
IDockviewDefaultTabProps
|
||||||
@ -12,14 +15,20 @@ export const DockviewDefaultTab: React.FunctionComponent<
|
|||||||
containerApi: _containerApi,
|
containerApi: _containerApi,
|
||||||
params: _params,
|
params: _params,
|
||||||
hideClose,
|
hideClose,
|
||||||
|
closeActionOverride,
|
||||||
...rest
|
...rest
|
||||||
}) => {
|
}) => {
|
||||||
const onClose = React.useCallback(
|
const onClose = React.useCallback(
|
||||||
(event: React.MouseEvent<HTMLSpanElement>) => {
|
(event: React.MouseEvent<HTMLSpanElement>) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
api.close();
|
|
||||||
|
if (closeActionOverride) {
|
||||||
|
closeActionOverride();
|
||||||
|
} else {
|
||||||
|
api.close();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
[api]
|
[api, closeActionOverride]
|
||||||
);
|
);
|
||||||
|
|
||||||
const onMouseDown = React.useCallback((e: React.MouseEvent) => {
|
const onMouseDown = React.useCallback((e: React.MouseEvent) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user