You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
|
|
import {
|
|
Icon,
|
|
Layout,
|
|
} from 'antd';
|
|
|
|
interface Props {
|
|
onSidebarFoldUnfold(): void;
|
|
}
|
|
|
|
interface State {
|
|
collapsed: boolean;
|
|
}
|
|
|
|
export default class StandardWorkspaceComponent extends React.PureComponent<Props, State> {
|
|
public constructor(props: any) {
|
|
super(props);
|
|
this.state = {
|
|
collapsed: true,
|
|
};
|
|
}
|
|
|
|
public render(): JSX.Element {
|
|
const { collapsed } = this.state;
|
|
const { onSidebarFoldUnfold } = this.props;
|
|
|
|
return (
|
|
<Layout.Sider
|
|
className='cvat-annotation-page-objects-sidebar'
|
|
theme='light'
|
|
width={300}
|
|
collapsedWidth={0}
|
|
reverseArrow
|
|
collapsible
|
|
trigger={null}
|
|
collapsed={collapsed}
|
|
>
|
|
{/* eslint-disable-next-line */}
|
|
<span
|
|
className={`cvat-annotation-page-objects-sidebar
|
|
ant-layout-sider-zero-width-trigger
|
|
ant-layout-sider-zero-width-trigger-left`}
|
|
onClick={(): void => {
|
|
this.setState(
|
|
(prevState: State): State => ({
|
|
collapsed: !prevState.collapsed,
|
|
}),
|
|
);
|
|
|
|
const [sidebar] = window.document
|
|
.getElementsByClassName('cvat-annotation-page-objects-sidebar');
|
|
sidebar.addEventListener('transitionend', () => {
|
|
onSidebarFoldUnfold();
|
|
}, { once: true });
|
|
}}
|
|
>
|
|
{collapsed ? <Icon type='menu-fold' title='Show' />
|
|
: <Icon type='menu-unfold' title='Hide' />}
|
|
</span>
|
|
|
|
Right sidebar
|
|
</Layout.Sider>
|
|
);
|
|
}
|
|
}
|