Merge remote-tracking branch 'origin/support/0.7.x' into support/0.7.x

Author: dramoturg

package.json

@@ -29,6 +29,7 @@
     "autoprefixer": "^6.3.6",
     "babel-core": "^6.10.4",
     "babel-eslint": "^6.0.5",
+    "element-resize-detector": "^1.1.12",
     "babel-jest": "^13.2.2",
     "babel-loader": "^6.2.4",
     "babel-plugin-check-es2015-constants": "^6.8.0",

src/components/ResizeDetector/ResizeDetector.jsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { PURE } from 'dx-util/src/react/pure';
+import { themr } from 'react-css-themr';
+import { ComponentClass } from 'react';
+
+import * as detectorFactory from 'element-resize-detector';
+import { raf } from '../../util/func/raf';
+
+const NativeResizeDetector = detectorFactory({
+	strategy: 'scroll'
+});
+
+export const RESIZE_DETECTOR = Symbol('ResizeDetector');
+
+type TResizeDetectorOwnProps = {
+	onResize: (element: Element) => any
+};
+
+type TResizeDetectorInjectedProps = {
+	theme: {
+		container?: string
+	},
+
+};
+
+type TResizeDetectorFullProps = TResizeDetectorOwnProps & TResizeDetectorInjectedProps;
+
+@PURE
+class RawResizeDetector extends React.Component<TResizeDetectorFullProps, any> {
+	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} />
+		);
+	}
+
+	onResize = raf((element: Element) => {
+		this.props.onResize(element);
+	});
+}
+
+export type TResizeDetectorProps = TResizeDetectorOwnProps & Partial<TResizeDetectorInjectedProps>;
+export default themr(RESIZE_DETECTOR)(RawResizeDetector) as ComponentClass<TResizeDetectorProps>;

src/components/ResizeDetector/ResizeDetector.tsx

@@ -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.tsx';
 import HorizontalScrollbar from '../Scrollbar/HorizontalScrollbar.jsx';
 import VerticalScrollbar from '../Scrollbar/VerticalScrollbar.jsx';
 

src/components/Scrollable/Scrollable.jsx

@@ -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;
+}

src/typings/element-resize-detector/index.d.ts

@@ -0,0 +1,24 @@
+// @TODO remove after update dx-util 0.11.7 version or more. use /src/function/raf.ts instead dx-util
+export const raf = <F extends Function>(cb: F): F & { cancel: () => void } => {
+	let id: number | undefined;
+
+	const invoke = (ctx: any, args: any[]) => () => {
+		id = undefined;
+		cb.apply(ctx, args);
+	};
+
+	//use function to save original context
+	function synced(this: any, ...args: any[]) {
+		if (typeof id === 'undefined') {
+			id = requestAnimationFrame(invoke(this, args));
+		}
+	}
+
+	synced['cancel'] = () => {
+		if (id) {
+			cancelAnimationFrame(id);
+		}
+	};
+
+	return synced as any;
+};