update ResizeDetector to element-resize-detector's scroll strategy

Author: dramoturg

package.json

@@ -99,7 +99,8 @@
     "@types/react-dom": "^15.5.1",
     "classnames": "^2.2.5",
     "date-fns": "^1.28.5",
-    "dx-util": "~0.11.5",
+    "dx-util": "~0.11.7",
+    "element-resize-detector": "^1.1.12",
     "moment": "^2.15.0",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",

src/components/ResizeDetector/ResizeDetector.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import {storiesOf, action} from '@kadira/storybook';
-import ResizeDetector from './ResizeDetector';
+import {ResizeDetector} from './ResizeDetector';
 import Demo from '../../demo/Demo';
 
 storiesOf('ResizeDetector', module).add('default', () => (
 	<Demo>
+		<div>Resize current window to log events in Action Logger below</div>
 		<ResizeDetector onResize={action('resized')}/>
 	</Demo>
 ));

src/components/ResizeDetector/ResizeDetector.jsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { PURE } from 'dx-util/lib/react/pure';
+import { themr } from 'react-css-themr';
+import { ComponentClass } from 'react';
+import { ObjectClean } from 'typelevel-ts/lib';
+import { PartialKeys } from 'dx-util/lib/object/object';
+
+import * as detectorFactory from 'element-resize-detector';
+import { raf } from 'dx-util/lib/function/raf';
+
+const NativeResizeDetector = detectorFactory({
+	strategy: 'scroll'
+});
+
+export const RESIZE_DETECTOR = Symbol('ResizeDetector');
+
+export type TFullResizeDetectorProps = {
+	theme: {
+		container?: string
+	},
+	onResize: (element: Element) => any
+};
+
+@PURE
+class RawResizeDetector extends React.Component<TFullResizeDetectorProps> {
+	private element: HTMLDivElement | null;
+
+	componentDidMount() {
+		if (this.element) {
+			NativeResizeDetector.listenTo(this.element, this.onResize);
+		}
+	}
+
+	componentWillUnmount() {
+		if (this.element) {
+			NativeResizeDetector.uninstall(this.element);
+		}
+	}
+
+	render() {
+		const { theme } = this.props;
+		return (
+			<div className={theme.container} ref={el => this.element = el}></div>
+		);
+	}
+
+	onResize = raf((element: Element) => {
+		this.props.onResize(element);
+	});
+}
+
+export type TResizeDetectorProps = ObjectClean<PartialKeys<TFullResizeDetectorProps, 'theme'>>;
+export const ResizeDetector: ComponentClass<TResizeDetectorProps> = themr(RESIZE_DETECTOR)(RawResizeDetector);

src/components/ResizeDetector/ResizeDetector.page.jsx

@@ -10,7 +10,7 @@ import {
 } from './Scrollable.const';
 
 import {SCROLLBAR_TYPE} from '../Scrollbar/Scrollbar';
-import ResizeDetector from '../ResizeDetector/ResizeDetector.jsx';
+import {ResizeDetector} from '../ResizeDetector/ResizeDetector';
 import HorizontalScrollbar from '../Scrollbar/HorizontalScrollbar.jsx';
 import VerticalScrollbar from '../Scrollbar/VerticalScrollbar.jsx';
 

src/components/ResizeDetector/ResizeDetector.tsx

@@ -0,0 +1,30 @@
+declare module 'element-resize-detector' {
+	type TDetectoryFactoryOptions = {
+		strategy?: 'scroll'
+	};
+	type THandler = (element: Element) => any;
+	//tslint:disable max-line-length
+	type TDetector = {
+		/**
+		 * Listens to the element for resize events and calls the listener function with the element as argument on resize events.
+		 */
+		listenTo: (element: Element, handler: THandler) => void,
+
+		/**
+		 * Removes the listener from the elemens.
+		 */
+		removeListener: (element: Element, handler: THandler) => void,
+		/**
+		 * Removes all listeners from the element, but does not completely remove the detector. Use this function if you may add listeners later and don't want the detector to have to initialize again.
+		 */
+		removeAllListeners: (element: Element) => void,
+		/**
+		 *
+		 */
+		uninstall: (element: Element) => void
+	};
+	//tslint:enable max-line-length
+
+	const detectorFactory: (options: TDetectoryFactoryOptions) => TDetector;
+	export = detectorFactory;
+}