typescript(vx-responsive): re-write package in TypeScript

packages/vx-responsive/package.json

@@ -5,6 +5,7 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "types": "lib/index.d.ts",
   "files": [
     "lib",
     "esm"
@@ -30,9 +31,10 @@
   },
   "homepage": "https://github.com/hshoff/vx#readme",
   "dependencies": {
+    "@types/react": "*",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
-    "resize-observer-polyfill": "1.5.0"
+    "resize-observer-polyfill": "1.5.1"
   },
   "peerDependencies": {
     "react": "^15.0.0-0 || ^16.0.0-0"

packages/vx-responsive/src/components/ParentSize.tsx

@@ -0,0 +1,87 @@
+import debounce from 'lodash/debounce';
+import React from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export type ParentSizeProps = {
+  className?: string;
+  debounceTime?: number;
+  parentSizeStyles?: React.CSSProperties;
+  children: (
+    args: {
+      ref: HTMLDivElement | null;
+      resize: (state: ParentSizeState) => void;
+    } & ParentSizeState,
+  ) => React.ReactNode;
+};
+
+type ParentSizeState = {
+  width: number;
+  height: number;
+  top: number;
+  left: number;
+};
+
+export type ParentSizeProvidedProps = ParentSizeState;
+
+export default class ParentSize extends React.Component<
+  ParentSizeProps & JSX.IntrinsicElements['div'],
+  ParentSizeState
+> {
+  static defaultProps = {
+    debounceTime: 300,
+    parentSizeStyles: { width: '100%', height: '100%' },
+  };
+  animationFrameID: number | null;
+  resizeObserver: ResizeObserver | undefined;
+  target: HTMLDivElement | null = null;
+
+  constructor(props: ParentSizeProps) {
+    super(props);
+    this.state = {
+      width: 0,
+      height: 0,
+      top: 0,
+      left: 0,
+    };
+    this.resize = debounce(this.resize, props.debounceTime);
+    this.animationFrameID = null;
+  }
+
+  componentDidMount() {
+    this.resizeObserver = new ResizeObserver((entries = [] /** , observer */) => {
+      entries.forEach(entry => {
+        const { left, top, width, height } = entry.contentRect;
+        this.animationFrameID = window.requestAnimationFrame(() => {
+          this.resize({ width, height, top, left });
+        });
+      });
+    });
+    if (this.target) this.resizeObserver.observe(this.target);
+  }
+
+  componentWillUnmount() {
+    if (this.animationFrameID) window.cancelAnimationFrame(this.animationFrameID);
+    if (this.resizeObserver) this.resizeObserver.disconnect();
+  }
+
+  resize = ({ width, height, top, left }: ParentSizeState) => {
+    this.setState(() => ({ width, height, top, left }));
+  };
+
+  setTarget = (ref: HTMLDivElement | null) => {
+    this.target = ref;
+  };
+
+  render() {
+    const { className, children, debounceTime, parentSizeStyles, ...restProps } = this.props;
+    return (
+      <div style={parentSizeStyles} ref={this.setTarget} className={className} {...restProps}>
+        {children({
+          ...this.state,
+          ref: this.target,
+          resize: this.resize,
+        })}
+      </div>
+    );
+  }
+}

packages/vx-responsive/src/components/ScaleSVG.jsx → packages/vx-responsive/src/components/ScaleSVG.tsx

@@ -1,42 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-ResponsiveSVG.propTypes = {
-  children: PropTypes.any,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  xOrigin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  yOrigin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  preserveAspectRatio: PropTypes.string,
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-};
-
-export default function ResponsiveSVG({
-  children,
-  width,
-  height,
-  xOrigin = 0,
-  yOrigin = 0,
-  preserveAspectRatio = 'xMinYMin meet',
-  innerRef,
-}) {
-  return (
-    <div
-      style={{
-        display: 'inline-block',
-        position: 'relative',
-        width: '100%',
-        verticalAlign: 'top',
-        overflow: 'hidden',
-      }}
-    >
-      <svg
-        preserveAspectRatio={preserveAspectRatio}
-        viewBox={`${xOrigin} ${yOrigin} ${width} ${height}`}
-        ref={innerRef}
-      >
-        {children}
-      </svg>
-    </div>
-  );
-}
+import React from 'react';
+
+export type ScaleSVGProps = {
+  children?: React.ReactNode;
+  width?: number | string;
+  height?: number | string;
+  xOrigin?: number | string;
+  yOrigin?: number | string;
+  preserveAspectRatio?: string;
+  innerRef?: React.Ref<SVGSVGElement>;
+};
+
+export default function ResponsiveSVG({
+  children,
+  width,
+  height,
+  xOrigin = 0,
+  yOrigin = 0,
+  preserveAspectRatio = 'xMinYMin meet',
+  innerRef,
+}: ScaleSVGProps) {
+  return (
+    <div
+      style={{
+        display: 'inline-block',
+        position: 'relative',
+        width: '100%',
+        verticalAlign: 'top',
+        overflow: 'hidden',
+      }}
+    >
+      <svg
+        preserveAspectRatio={preserveAspectRatio}
+        viewBox={`${xOrigin} ${yOrigin} ${width} ${height}`}
+        ref={innerRef}
+      >
+        {children}
+      </svg>
+    </div>
+  );
+}