Added simple extra popover to keep other controls out of display (#2880)
* Added simple extra popover to keep other controls out of display * Removed extra change * Fixed part of tests * Added extra comments * Updated version & changelogmain
Boris Sekachev
5 years ago
committed by
GitHub
parent
5bd61a43a4
commit
55b20e197d
@ -0,0 +1,114 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
/// <reference types="resize-observer-browser" />
|
||||||
|
|
||||||
|
import { SmallDashOutlined } from '@ant-design/icons';
|
||||||
|
import Popover from 'antd/lib/popover';
|
||||||
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
|
const extraControlsContentClassName = 'cvat-extra-controls-control-content';
|
||||||
|
|
||||||
|
let onUpdateChildren: Function | null = null;
|
||||||
|
export function ExtraControlsControl(): JSX.Element {
|
||||||
|
const [hasChildren, setHasChildren] = useState(false);
|
||||||
|
const [initialized, setInitialized] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!initialized) {
|
||||||
|
setInitialized(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
onUpdateChildren = () => {
|
||||||
|
const contentElement = window.document.getElementsByClassName(extraControlsContentClassName)[0];
|
||||||
|
if (contentElement) {
|
||||||
|
setHasChildren(contentElement.children.length > 0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover
|
||||||
|
defaultVisible // we must render it at least one between using
|
||||||
|
trigger={initialized ? 'hover' : 'click'} // trigger='hover' allows to close the popover by body click
|
||||||
|
placement='right'
|
||||||
|
overlayStyle={{ display: initialized ? '' : 'none' }}
|
||||||
|
content={<div className={extraControlsContentClassName} />}
|
||||||
|
>
|
||||||
|
<SmallDashOutlined
|
||||||
|
style={{ visibility: hasChildren ? 'visible' : 'hidden' }}
|
||||||
|
className='cvat-extra-controls-control'
|
||||||
|
/>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ControlVisibilityObserver<P = {}>(
|
||||||
|
ControlComponent: React.FunctionComponent<P>,
|
||||||
|
): React.FunctionComponent<P> {
|
||||||
|
let visibilityHeightThreshold = 0; // minimum value of height when element can be pushed to main panel
|
||||||
|
|
||||||
|
return (props: P): JSX.Element | null => {
|
||||||
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
const [visible, setVisible] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (ref && ref.current) {
|
||||||
|
const wrapper = ref.current;
|
||||||
|
const parentElement = ref.current.parentElement as HTMLElement;
|
||||||
|
|
||||||
|
const reservedHeight = 45; // for itself
|
||||||
|
const observer = new ResizeObserver(() => {
|
||||||
|
// when parent size was changed, check again can we put the control
|
||||||
|
// into the side panel or not
|
||||||
|
const availableHeight = parentElement.offsetHeight;
|
||||||
|
setVisible(availableHeight - reservedHeight >= visibilityHeightThreshold);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (ref && ref.current) {
|
||||||
|
const availableHeight = parentElement.offsetHeight;
|
||||||
|
// when first mount, remember bottom coordinate which equal to minimum parent width
|
||||||
|
// to put the control into side panel
|
||||||
|
visibilityHeightThreshold = wrapper.offsetTop + wrapper.offsetHeight;
|
||||||
|
// start observing parent size
|
||||||
|
observer.observe(ref.current.parentElement as HTMLElement);
|
||||||
|
// then put it to extra controls if parent height is not enought
|
||||||
|
setVisible(availableHeight - reservedHeight >= visibilityHeightThreshold);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
observer.disconnect();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// when visibility changed, we notify extra content element because now its children changed
|
||||||
|
if (onUpdateChildren) {
|
||||||
|
onUpdateChildren();
|
||||||
|
}
|
||||||
|
}, [visible]);
|
||||||
|
|
||||||
|
if (!visible) {
|
||||||
|
const extraControlsContent = window.document.getElementsByClassName(extraControlsContentClassName)[0];
|
||||||
|
if (extraControlsContent) {
|
||||||
|
return ReactDOM.createPortal(<ControlComponent {...props} />, extraControlsContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// first mount always to side panel
|
||||||
|
return (
|
||||||
|
<div ref={ref}>
|
||||||
|
<ControlComponent {...props} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue