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;
+ 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;
+
+const PARENT_SIZE_STYLES = { width: '100%', height: '100%' };
+
+export default class ParentSize extends React.Component<
+ ParentSizeProps & JSX.IntrinsicElements['div'],
+ ParentSizeState
+> {
+ static defaultProps = {
+ debounceTime: 300,
+ };
+ 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, ...restProps } = this.props;
+ return (
+ <div style={PARENT_SIZE_STYLES} 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>
+ );
+}