diff --git a/package.json b/package.json index 114afaa58..c2fb363e7 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "devDependencies": { "@testing-library/dom": "^8.20.0", "@testing-library/jest-dom": "^5.16.5", + "@total-typescript/shoehorn": "^0.1.1", "@types/jest": "^29.4.0", "@typescript-eslint/eslint-plugin": "^5.52.0", "@typescript-eslint/parser": "^5.52.0", diff --git a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx new file mode 100644 index 000000000..4d52dd18f --- /dev/null +++ b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx @@ -0,0 +1,60 @@ +import { render, screen } from '@testing-library/react'; +import { DockviewDefaultTab } from '../../dockview/defaultTab'; +import * as React from 'react'; +import { fromPartial } from '@total-typescript/shoehorn'; +import { DockviewApi, DockviewPanelApi } from 'dockview-core'; + +describe('defaultTab', () => { + test('has close button by default', async () => { + const api = fromPartial({}); + const containerApi = fromPartial({}); + const params = {}; + + render( + + ); + + const element = await screen.getByTestId('dockview-default-tab'); + expect(element.querySelector('.dv-react-tab-close-btn')).toBeTruthy(); + }); + + test('has no close button when hideClose=true', async () => { + const api = fromPartial({}); + const containerApi = fromPartial({}); + const params = {}; + + render( + + ); + + const element = await screen.getByTestId('dockview-default-tab'); + expect(element.querySelector('.dv-react-tab-close-btn')).toBeNull(); + }); + + test('has close button when hideClose=false', async () => { + const api = fromPartial({}); + const containerApi = fromPartial({}); + const params = {}; + + render( + + ); + + const element = await screen.getByTestId('dockview-default-tab'); + expect(element.querySelector('.dv-react-tab-close-btn')).toBeTruthy(); + }); +}); diff --git a/packages/dockview/src/dockview/defaultTab.scss b/packages/dockview/src/dockview/defaultTab.scss index b40356490..3e3a89085 100644 --- a/packages/dockview/src/dockview/defaultTab.scss +++ b/packages/dockview/src/dockview/defaultTab.scss @@ -10,7 +10,7 @@ flex-grow: 1; } - .dockview-react-tab-action { + .dv-react-tab-close-btn { padding: 4px; display: flex; align-items: center; @@ -25,7 +25,7 @@ } &.inactive-tab:not(:hover) { - .dockview-react-tab-action { + .dv-react-tab-close-btn { visibility: hidden; } } diff --git a/packages/dockview/src/dockview/defaultTab.tsx b/packages/dockview/src/dockview/defaultTab.tsx index 9a35feea0..1faee461c 100644 --- a/packages/dockview/src/dockview/defaultTab.tsx +++ b/packages/dockview/src/dockview/defaultTab.tsx @@ -3,40 +3,49 @@ import * as React from 'react'; import { CloseButton } from '../svg'; export type IDockviewDefaultTabProps = IDockviewPanelHeaderProps & - React.DOMAttributes; + React.DOMAttributes & { hideClose?: boolean }; -export const DockviewDefaultTab: React.FunctionComponent = - ({ api, containerApi: _containerApi, params: _params, ...rest }) => { - const onClose = React.useCallback( - (event: React.MouseEvent) => { - event.stopPropagation(); - api.close(); - }, - [api] - ); +export const DockviewDefaultTab: React.FunctionComponent< + IDockviewDefaultTabProps +> = ({ + api, + containerApi: _containerApi, + params: _params, + hideClose, + ...rest +}) => { + const onClose = React.useCallback( + (event: React.MouseEvent) => { + event.stopPropagation(); + api.close(); + }, + [api] + ); - const onClick = React.useCallback( - (event: React.MouseEvent) => { - api.setActive(); + const onClick = React.useCallback( + (event: React.MouseEvent) => { + api.setActive(); - if (rest.onClick) { - rest.onClick(event); - } - }, - [api, rest.onClick] - ); + if (rest.onClick) { + rest.onClick(event); + } + }, + [api, rest.onClick] + ); - const iconClassname = React.useMemo(() => { - const cn = ['dockview-react-tab-action']; - return cn.join(','); - }, []); - - return ( -
- {api.title} -
+ return ( +
+ {api.title} + {!hideClose && ( +
-
- ); - }; + )} +
+ ); +}; diff --git a/yarn.lock b/yarn.lock index 9863d207e..70562dff6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2961,6 +2961,11 @@ resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf" integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A== +"@total-typescript/shoehorn@^0.1.1": + version "0.1.1" + resolved "https://registry.yarnpkg.com/@total-typescript/shoehorn/-/shoehorn-0.1.1.tgz#72d3ba9364faa4f6b8e66c57b7a9094457e3652b" + integrity sha512-XSPcazQsC2Cr7eCiAI+M2bTmMziBvFWYTYMgUDKLbU6i+7m3I2BF5gXF5vKDO8577fONs9CvmTvVa7+nMHMfxg== + "@trysound/sax@0.2.0": version "0.2.0" resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"