@eeacms/volto-resize-helper - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

CHANGELOG.md

		@@ -7,6 +7,12 @@ ### Changelog

		#### [0.2.5](https://github.com/eea/volto-resize-helper/compare/0.2.4...0.2.5)

		- Added with-scrollbar class to <body> [`c319cab`](https://github.com/eea/volto-resize-helper/commit/c319cab3dd2c545d22c2972d789f99c4b50ab360)

		#### [0.2.4](https://github.com/eea/volto-resize-helper/compare/0.2.3...0.2.4)

		- Small fix [`dd8486b`](https://github.com/eea/volto-resize-helper/commit/dd8486b46caad957b0b3a83db043b4100004e3d1)
		> 24 June 2021

		- Small fix [`#5`](https://github.com/eea/volto-resize-helper/pull/5)

		#### [0.2.3](https://github.com/eea/volto-resize-helper/compare/0.2.2...0.2.3)
		@@ -13,0 +19,0 @@

package.json

		{
		"name": "@eeacms/volto-resize-helper",
		"version": "0.2.4",
		"version": "0.2.5",
		"description": "@eeacms/volto-resize-helper: Volto add-on",
		@@ -5,0 +5,0 @@ "main": "src/index.js",

src/ScreenSize/ScreenSize.jsx

		/* eslint-disable no-extend-native */
		import React from 'react';
		import { connect } from 'react-redux';
		import { compose } from 'redux';
		import cs from 'classnames';
		import config from '@plone/volto/registry';
		import { BodyClass } from '@plone/volto/helpers';
		import { updateScreen } from '../actions';
		@@ -21,7 +21,12 @@ import { detectTouchScreen } from '../utils';

		const ScreenSize = (props) => {
		const mounted = React.useRef(false);
		const { content = {} } = props;
		class ScreenSize extends React.Component {
		constructor(props) {
		super(props);
		this.updateScreen = this.updateScreen.bind(this);
		this.state = {
		withScrollbar: false,
		};
		}

		const updateScreen = (initialState = {}) => {
		updateScreen(initialState = {}) {
		const screen = {
		@@ -47,36 +52,47 @@ height: window.screen.availHeight \|\| 0,

		props.updateScreen(newScreen);
		};
		if (
		document.body.scrollHeight > document.body.clientHeight &&
		!this.state.withScrollbar
		) {
		this.setState({ withScrollbar: true });
		} else if (
		document.body.scrollHeight <= document.body.clientHeight &&
		this.state.withScrollbar
		) {
		this.setState({ withScrollbar: false });
		}

		React.useEffect(() => {
		if (__CLIENT__) {
		if (!mounted.current) {
		updateScreen({
		hasTouchScreen: detectTouchScreen(),
		browserToolbarHeight: window.outerHeight - window.innerHeight,
		});
		window.addEventListener('resize', debounce(updateScreen));
		}
		updateScreen();
		this.props.dispatch(updateScreen(newScreen));
		}

		componentDidMount() {
		if (__SERVER__) return;
		this.updateScreen({
		hasTouchScreen: detectTouchScreen(),
		browserToolbarHeight: window.outerHeight - window.innerHeight,
		});
		window.addEventListener('resize', debounce(this.updateScreen));
		}

		componentWillUnmount() {
		if (__SERVER__) return;
		window.removeEventListener('resize', debounce(this.updateScreen));
		}

		componentDidUpdate(prevProps) {
		if (__SERVER__) return;
		if (this.props.content?.['@id'] !== prevProps.content?.['@id']) {
		this.updateScreen();
		}
		mounted.current = true;
		return () => {
		if (__CLIENT__) {
		window.removeEventListener('resize', debounce(updateScreen));
		}
		mounted.current = false;
		};
		/* eslint-disable-next-line */
		}, [content?.['@id']]);
		}

		return '';
		};
		render() {
		return (
		<BodyClass
		className={cs({ 'with-scrollbar': this.state.withScrollbar })}
		/>
		);
		}
		}

		export default compose(
		connect(
		(state) => ({
		screen: state.screen,
		}),
		{ updateScreen },
		),
		)(ScreenSize);
		export default ScreenSize;

Jenkinsfile

Sorry, the diff of this file is not supported yet

@eeacms/volto-resize-helper - npm Package Compare versions

Improved metrics