rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-08 17:35:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: hideClose on DockviewDefaultTab

Browse Source
This commit is contained in:
mathuo 2023-08-22 20:31:47 +01:00
parent be0fea7104
commit 5ac2a9ffdb
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
5 changed files with 108 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

60
packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx Normal file
View File

@ -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<DockviewPanelApi>({});
const containerApi = fromPartial<DockviewApi>({});
const params = {};
render(
<DockviewDefaultTab
api={api}
containerApi={containerApi}
params={params}
/>
);
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<DockviewPanelApi>({});
const containerApi = fromPartial<DockviewApi>({});
const params = {};
render(
<DockviewDefaultTab
api={api}
containerApi={containerApi}
params={params}
hideClose={true}
/>
);
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<DockviewPanelApi>({});
const containerApi = fromPartial<DockviewApi>({});
const params = {};
render(
<DockviewDefaultTab
api={api}
containerApi={containerApi}
params={params}
hideClose={false}
/>
);
const element = await screen.getByTestId('dockview-default-tab');
expect(element.querySelector('.dv-react-tab-close-btn')).toBeTruthy();
});
});

4
packages/dockview/src/dockview/defaultTab.scss
View File

@ -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;
}
}

71
packages/dockview/src/dockview/defaultTab.tsx
View File

@ -3,40 +3,49 @@ import * as React from 'react';
import { CloseButton } from '../svg';
export type IDockviewDefaultTabProps = IDockviewPanelHeaderProps &
React.DOMAttributes<HTMLDivElement>;
React.DOMAttributes<HTMLDivElement> & { hideClose?: boolean };
export const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps> =
({ api, containerApi: _containerApi, params: _params, ...rest }) => {
const onClose = React.useCallback(
(event: React.MouseEvent<HTMLSpanElement>) => {
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<HTMLSpanElement>) => {
event.stopPropagation();
api.close();
},
[api]
);
const onClick = React.useCallback(
(event: React.MouseEvent<HTMLDivElement>) => {
api.setActive();
const onClick = React.useCallback(
(event: React.MouseEvent<HTMLDivElement>) => {
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 (
<div {...rest} onClick={onClick} className="dockview-react-tab">
<span className="dockview-react-tab-title">{api.title}</span>
<div className={iconClassname} onClick={onClose}>
return (
<div
data-testid="dockview-default-tab"
{...rest}
onClick={onClick}
className="dockview-react-tab"
>
<span className="dockview-react-tab-title">{api.title}</span>
{!hideClose && (
<div className="dv-react-tab-close-btn" onClick={onClose}>
<CloseButton />
</div>
</div>
);
};
)}
</div>
);
};

5
yarn.lock
View File

@ -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"