[Canvas] Refactor fullscreen component (#104554)
This commit is contained in:
parent
d1b58d8d63
commit
9da40305e7
|
@ -1,59 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
||||||
* or more contributor license agreements. Licensed under the Elastic License
|
|
||||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
|
||||||
* 2.0.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { debounce } from 'lodash';
|
|
||||||
import { getWindow } from '../../lib/get_window';
|
|
||||||
|
|
||||||
export class Fullscreen extends React.Component {
|
|
||||||
static propTypes = {
|
|
||||||
isFullscreen: PropTypes.bool,
|
|
||||||
children: PropTypes.func,
|
|
||||||
};
|
|
||||||
|
|
||||||
state = {
|
|
||||||
width: 0,
|
|
||||||
height: 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
UNSAFE_componentWillMount() {
|
|
||||||
this.win = getWindow();
|
|
||||||
this.setState({
|
|
||||||
width: this.win.innerWidth,
|
|
||||||
height: this.win.innerHeight,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.win.addEventListener('resize', this.onWindowResize);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
this.win.removeEventListener('resize', this.onWindowResize);
|
|
||||||
}
|
|
||||||
|
|
||||||
getWindowSize = () => ({
|
|
||||||
width: this.win.innerWidth,
|
|
||||||
height: this.win.innerHeight,
|
|
||||||
});
|
|
||||||
|
|
||||||
onWindowResize = debounce(() => {
|
|
||||||
const { width, height } = this.getWindowSize();
|
|
||||||
this.setState({ width, height });
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { isFullscreen, children } = this.props;
|
|
||||||
const windowSize = {
|
|
||||||
width: this.state.width,
|
|
||||||
height: this.state.height,
|
|
||||||
};
|
|
||||||
|
|
||||||
return children({ isFullscreen, windowSize });
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -0,0 +1,43 @@
|
||||||
|
/*
|
||||||
|
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||||
|
* or more contributor license agreements. Licensed under the Elastic License
|
||||||
|
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||||
|
* 2.0.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { FC, useEffect, useState } from 'react';
|
||||||
|
import { debounce } from 'lodash';
|
||||||
|
import { getWindow } from '../../lib/get_window';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
isFullscreen?: boolean;
|
||||||
|
children: (props: {
|
||||||
|
isFullscreen: boolean;
|
||||||
|
windowSize: { width: number; height: number };
|
||||||
|
}) => JSX.Element;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Fullscreen: FC<Props> = ({ isFullscreen = false, children }) => {
|
||||||
|
const [width, setWidth] = useState(getWindow().innerWidth);
|
||||||
|
const [height, setHeight] = useState(getWindow().innerHeight);
|
||||||
|
|
||||||
|
const onWindowResize = debounce(({ target }) => {
|
||||||
|
const { innerWidth, innerHeight } = target as Window;
|
||||||
|
setWidth(innerWidth);
|
||||||
|
setHeight(innerHeight);
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const window = getWindow();
|
||||||
|
window.addEventListener('resize', onWindowResize);
|
||||||
|
|
||||||
|
return () => window.removeEventListener('resize', onWindowResize);
|
||||||
|
});
|
||||||
|
|
||||||
|
const windowSize = {
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
};
|
||||||
|
|
||||||
|
return children({ isFullscreen, windowSize });
|
||||||
|
};
|
|
@ -6,12 +6,18 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { FC, useContext } from 'react';
|
import React, { FC, useContext } from 'react';
|
||||||
// @ts-expect-error
|
|
||||||
import { Fullscreen as Component } from './fullscreen';
|
import { Fullscreen as Component } from './fullscreen';
|
||||||
|
|
||||||
import { WorkpadRoutingContext } from '../../routes/workpad';
|
import { WorkpadRoutingContext } from '../../routes/workpad';
|
||||||
|
|
||||||
export const Fullscreen: FC = ({ children }) => {
|
interface Props {
|
||||||
|
children: (props: {
|
||||||
|
isFullscreen: boolean;
|
||||||
|
windowSize: { width: number; height: number };
|
||||||
|
}) => JSX.Element;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Fullscreen: FC<Props> = ({ children }) => {
|
||||||
const { isFullscreen } = useContext(WorkpadRoutingContext);
|
const { isFullscreen } = useContext(WorkpadRoutingContext);
|
||||||
|
|
||||||
return <Component isFullscreen={isFullscreen} children={children} />;
|
return <Component isFullscreen={isFullscreen} children={children} />;
|
||||||
|
|
|
@ -10,14 +10,12 @@ const windowObj = {
|
||||||
location: null,
|
location: null,
|
||||||
localStorage: {} as Window['localStorage'],
|
localStorage: {} as Window['localStorage'],
|
||||||
sessionStorage: {} as Window['sessionStorage'],
|
sessionStorage: {} as Window['sessionStorage'],
|
||||||
|
innerWidth: 0,
|
||||||
|
innerHeight: 0,
|
||||||
|
addEventListener: () => {},
|
||||||
|
removeEventListener: () => {},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getWindow = ():
|
export const getWindow = (): Window | typeof windowObj => {
|
||||||
| Window
|
|
||||||
| {
|
|
||||||
location: Location | null;
|
|
||||||
localStorage: Window['localStorage'];
|
|
||||||
sessionStorage: Window['sessionStorage'];
|
|
||||||
} => {
|
|
||||||
return typeof window === 'undefined' ? windowObj : window;
|
return typeof window === 'undefined' ? windowObj : window;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue