Merge pull request #1 from Runjuu/master

init project

Author: runjuu

.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/dist
+/.idea

.npmignore

@@ -0,0 +1,6 @@
+/node_modules
+/.idea
+/src
+tsconfig.json
+tslint.json
+yarn.lock

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "react-resize-context",
+  "version": "1.0.0",
+  "description": "A high performance React component for responding to resize event",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "rm -rf ./dist && tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LeetCode-OpenSource/react-resize-context.git"
+  },
+  "keywords": [
+    "react",
+    "resize",
+    "detector"
+  ],
+  "bugs": {
+    "url": "https://github.com/LeetCode-OpenSource/react-resize-context/issues"
+  },
+  "homepage": "https://github.com/LeetCode-OpenSource/react-resize-context#readme",
+  "author": "LeetCode front-end team",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/element-resize-detector": "^1.1.0",
+    "@types/lodash": "^4.14.115",
+    "@types/prop-types": "^15.5.4",
+    "@types/react": "^16.4.7",
+    "@types/shallowequal": "^0.2.3",
+    "tslib": "^1.9.3",
+    "tslint": "^5.11.0",
+    "tslint-eslint-rules": "^5.3.1",
+    "tslint-react": "^3.6.0",
+    "tslint-sonarts": "^1.7.0",
+    "typescript": "^2.9.2"
+  },
+  "dependencies": {
+    "element-resize-detector": "^1.1.14",
+    "lodash": "^4.17.10",
+    "shallowequal": "^1.1.0"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.6.2",
+    "react": "^16.3.0"
+  }
+}

src/Listener.ts

@@ -0,0 +1,64 @@
+import * as elementResizeDetectorMaker from 'element-resize-detector';
+import * as shallowequal from 'shallowequal';
+import { once } from 'lodash';
+
+import { getSize } from './methods';
+
+import { OnResizeCallBack, Size } from './types';
+
+const getSharedListener = once(() => new Listener());
+
+export default class Listener {
+  public static get shared(): Listener {
+    return getSharedListener();
+  }
+
+  private resizeDetector = elementResizeDetectorMaker({ strategy: 'scroll' });
+
+  private callbacks = new Map<HTMLElement, Set<OnResizeCallBack>>();
+
+  private prevSize?: Size;
+
+  public startListenTo(element: HTMLElement, func: OnResizeCallBack) {
+    if (element instanceof Element && typeof func === 'function') {
+      const currentElementCallbacks = this.callbacks.get(element);
+
+      if (currentElementCallbacks) {
+        currentElementCallbacks.add(func);
+      } else {
+        this.callbacks.set(element, new Set<OnResizeCallBack>([func]));
+      }
+
+      func(getSize(element));
+    }
+  }
+
+  public stopListenTo(element: HTMLElement, func: OnResizeCallBack) {
+    const currentElementCallbacks = this.callbacks.get(element);
+
+    if (currentElementCallbacks) {
+      currentElementCallbacks.delete(func);
+    }
+  }
+
+  public startListen(element: HTMLElement) {
+    this.resizeDetector.listenTo(element, this.onSizeChanged);
+  }
+
+  public stopListen(element: HTMLElement) {
+    this.resizeDetector.uninstall(element);
+  }
+
+  private onSizeChanged = (element: HTMLElement) => {
+    const callbacks = this.callbacks.get(element);
+
+    if (callbacks) {
+      const size = getSize(element);
+
+      if (!shallowequal(this.prevSize, size)) {
+        this.prevSize = size;
+        callbacks.forEach((func) => func(size));
+      }
+    }
+  };
+}

src/ResizeConsumer.tsx

@@ -0,0 +1,125 @@
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
+import { omit } from 'lodash';
+
+import { HTMLAttributes, RefObject } from 'react';
+
+import { Consumer, ContextValue } from './context';
+import Listener from './Listener';
+import { isRefObject, updateElementDataAttributes } from './methods';
+
+import { Size } from './types';
+
+interface ForwardRefProps extends HTMLAttributes<HTMLDivElement> {
+  onSizeChanged?: (size: Size) => void;
+  updateDatasetBySize?: (size: Size) => DOMStringMap;
+}
+
+interface Props extends ForwardRefProps {
+  context: ContextValue;
+  forwardedRef: RefObject<HTMLDivElement>;
+}
+
+class ResizeConsumer extends React.PureComponent<Props> {
+  private currentListenElement: HTMLElement | null = null;
+
+  private get divProps() {
+    return omit(this.props, [
+      'context',
+      'forwardedRef',
+      'onSizeChanged',
+      'updateDatasetBySize',
+    ]);
+  }
+
+  public componentDidMount() {
+    this.updateListener();
+  }
+
+  public componentDidUpdate() {
+    this.updateListener();
+  }
+
+  public componentWillUnmount() {
+    this.stopListen();
+  }
+
+  public render() {
+    return (
+      <div {...this.divProps} ref={this.props.forwardedRef}>
+        {this.props.children}
+      </div>
+    );
+  }
+
+  private updateAttribute = (size: Size) => {
+    const element = this.props.forwardedRef.current;
+    if (element && typeof this.props.updateDatasetBySize === 'function') {
+      const newDataAttributes = this.props.updateDatasetBySize(size);
+      updateElementDataAttributes(element, newDataAttributes);
+    }
+  };
+
+  private onSizeChanged = (size: Size) => {
+    if (typeof this.props.onSizeChanged === 'function') {
+      this.props.onSizeChanged(size);
+    }
+    this.updateAttribute(size);
+  };
+
+  private updateListener(
+    nextListenElement: HTMLElement | null = this.props.context.listenElement,
+  ) {
+    if (this.currentListenElement !== nextListenElement) {
+      this.startListenTo(nextListenElement);
+    }
+  }
+
+  private startListenTo(element: HTMLElement | null) {
+    this.stopListen();
+
+    if (element) {
+      Listener.shared.startListenTo(element, this.onSizeChanged);
+      this.currentListenElement = element;
+    }
+  }
+
+  private stopListen() {
+    if (this.currentListenElement) {
+      Listener.shared.stopListenTo(
+        this.currentListenElement,
+        this.onSizeChanged,
+      );
+    }
+  }
+}
+
+const ForwardRef = React.forwardRef<HTMLDivElement, ForwardRefProps>(
+  (props, ref) => (
+    <Consumer>
+      {(context) => (
+        <ResizeConsumer
+          {...props}
+          context={context}
+          forwardedRef={
+            isRefObject(ref)
+              ? (ref as RefObject<HTMLDivElement>)
+              : React.createRef()
+          }
+        />
+      )}
+    </Consumer>
+  ),
+);
+
+ForwardRef.propTypes = {
+  onSizeChanged: PropTypes.func,
+  updateDatasetBySize: PropTypes.func,
+};
+
+ForwardRef.defaultProps = {
+  onSizeChanged: undefined,
+  updateDatasetBySize: undefined,
+};
+
+export default ForwardRef;

src/ResizeProvider.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+import { Provider } from './context';
+import Listener from './Listener';
+import { getElement, makeSureChildrenHasRef } from './methods';
+
+import { ResizeChildren } from './types';
+import { ReactNode } from 'react';
+
+interface Props {
+  children?: ReactNode;
+}
+
+interface State {
+  children: ResizeChildren | null;
+  element: HTMLElement | null;
+}
+
+export default class ResizeProvider extends React.PureComponent<Props, State> {
+  public static getDerivedStateFromProps(props: Props) {
+    return {
+      children: makeSureChildrenHasRef(props.children),
+    };
+  }
+
+  public state: State = {
+    children: null,
+    element: null,
+  };
+
+  public componentDidMount() {
+    this.updateListenElement();
+  }
+
+  public componentDidUpdate() {
+    this.updateListenElement();
+  }
+
+  public componentWillUnmount() {
+    this.removeListenElement();
+  }
+
+  public render() {
+    return (
+      <Provider value={{ listenElement: this.state.element }}>
+        {this.state.children}
+      </Provider>
+    );
+  }
+
+  private updateListenElement() {
+    const element = getElement(this.state.children);
+
+    if (element !== this.state.element) {
+      this.removeListenElement();
+
+      if (element) {
+        Listener.shared.startListen(element);
+      }
+
+      this.setState({ element });
+    }
+  }
+
+  private removeListenElement() {
+    if (this.state.element) {
+      Listener.shared.stopListen(this.state.element);
+    }
+  }
+}

src/context.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface ContextValue {
+  listenElement: HTMLElement | null;
+}
+
+export const { Provider, Consumer } = React.createContext<ContextValue>({
+  listenElement: null,
+});

src/index.ts

@@ -0,0 +1,2 @@
+export { default as ResizeProvider } from './ResizeProvider';
+export { default as ResizeConsumer } from './ResizeConsumer';