All files / src/plugins/gravity-charts/renderer/withSplitPane useWithSplitPaneState.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
 
import {SplitLayout} from '../../../../components/SplitPane';
import type {SplitLayoutType} from '../../../../components/SplitPane';
import {IS_WINDOW_AVAILABLE} from '../../../../constants';
 
const CHART_SECTION_PERCENTAGE = 0.6;
export const RESIZER_HEIGHT = 24;
 
type WithSplitPaneState = {
    allowResize: boolean;
    tooltipHeight: number;
    setTooltipHeight: (value: number) => void;
    split: SplitLayoutType;
    setSplit: (value: SplitLayoutType) => void;
    size: number | string;
    setSize: (value: number | string) => void;
    maxSize?: number;
    minSize?: number;
};
 
function getInitialSplit(): SplitLayoutType {
    if (!IS_WINDOW_AVAILABLE) {
        return SplitLayout.HORIZONTAL;
    }
 
    return window.innerWidth > window.innerHeight ? SplitLayout.VERTICAL : SplitLayout.HORIZONTAL;
}
 
type UseWithSplitPaneProps = {
    containerHeight: number;
};
 
export function getVerticalSize() {
    return window.innerWidth * CHART_SECTION_PERCENTAGE;
}
 
function getInitialSize(split: SplitLayoutType, containerHeight: number) {
    const defaultSize = containerHeight - RESIZER_HEIGHT;
 
    if (!IS_WINDOW_AVAILABLE) {
        return defaultSize;
    }
 
    return split === SplitLayout.VERTICAL ? getVerticalSize() : defaultSize;
}
 
export function useWithSplitPaneState(props: UseWithSplitPaneProps): WithSplitPaneState {
    const {containerHeight} = props;
    const [tooltipHeight, setTooltipHeight] = React.useState(0);
    const [split, setSplit] = React.useState<SplitLayoutType>(getInitialSplit());
    const [size, setSize] = React.useState<number | string>(getInitialSize(split, containerHeight));
    const allowResize = split === SplitLayout.HORIZONTAL;
    let maxSize: number | undefined;
    let minSize: number | undefined;
 
    if (IS_WINDOW_AVAILABLE && split === SplitLayout.HORIZONTAL) {
        maxSize = containerHeight - RESIZER_HEIGHT - tooltipHeight;
        minSize = containerHeight / 3;
    }
 
    return {
        allowResize,
        maxSize,
        minSize,
        tooltipHeight,
        setTooltipHeight,
        split,
        setSplit,
        size,
        setSize,
    };
}