Merge pull request alibaba#12 from alibaba/feat/dom_ts

fix: dom ts

packages/hooks/src/useClickAway/index.ts

@@ -1,15 +1,14 @@
-import { useEffect, useCallback, MutableRefObject } from 'react';
-import { getTargetElement } from '../utils/dom';
+import { useEffect, useCallback } from 'react';
+import { getTargetElement, BasicTarget } from '../utils/dom';
 
 // 鼠标点击事件，click 不会监听右键
 const defaultEvent = 'click';
 
 type EventType = MouseEvent | TouchEvent;
-type Target = (() => HTMLElement) | HTMLElement | MutableRefObject<HTMLElement>;
 
 export default function useClickAway(
   onClickAway: (event: EventType) => void,
-  target: Target,
+  target: BasicTarget,
   eventName: string = defaultEvent,
 ) {
   const handler = useCallback(

packages/hooks/src/useEventListener/index.ts

@@ -1,14 +1,11 @@
-import { useEffect, useRef } from 'react';
-import { getTargetElement } from '../utils/dom';
+import { useEffect, useRef, MutableRefObject } from 'react';
+import { getTargetElement, BasicTarget } from '../utils/dom';
 
-type Target = (() => HTMLElement) | HTMLElement | React.MutableRefObject<HTMLElement> | Window;
-type Options = { target?: Target; capture?: boolean; once?: boolean; passive?: boolean; }
+export type Target = BasicTarget<HTMLElement | Window>;
 
-function useEventListener(
-  eventName: string,
-  handler: Function,
-  options?: Options,
-) {
+type Options = { target?: Target; capture?: boolean; once?: boolean; passive?: boolean };
+
+function useEventListener(eventName: string, handler: Function, options?: Options) {
   const savedHandler = useRef<Function>();
 
   useEffect(() => {
@@ -29,7 +26,7 @@ function useEventListener(
     targetElement.addEventListener(eventName, eventListener, {
       capture: options?.capture,
       once: options?.once,
-      passive: options?.passive
+      passive: options?.passive,
     });
 
     return () => {

packages/hooks/src/useFullscreen/index.ts

@@ -3,9 +3,7 @@
 import { useLayoutEffect, useRef, MutableRefObject } from 'react';
 import screenfull from 'screenfull';
 import useBoolean from '../useBoolean';
-import { getTargetElement } from '../utils/dom';
-
-type Target = HTMLElement | (() => HTMLElement) | MutableRefObject<HTMLElement>;
+import { getTargetElement, BasicTarget } from '../utils/dom';
 
 export interface Options {
   onExitFull?: () => void;
@@ -21,7 +19,7 @@ interface Callback {
 type Value = boolean;
 type Result = [Value, Callback];
 
-export default (target: Target, options?: Options): Result => {
+export default (target: BasicTarget, options?: Options): Result => {
   const { onExitFull, onFull } = options || {};
 
   const onExitFullRef = useRef(onExitFull);

packages/hooks/src/useHover/index.ts

@@ -1,14 +1,14 @@
 import { useEffect, useRef } from 'react';
 import useBoolean from '../useBoolean';
-import { getTargetElement } from '../utils/dom';
+import { getTargetElement, BasicTarget } from '../utils/dom';
 
 export interface Options {
   onEnter?: () => void;
   onLeave?: () => void;
 }
 
 export default (
-  target: (() => HTMLElement) | HTMLElement | React.MutableRefObject<HTMLElement>,
+  target: BasicTarget,
   options?: Options,
 ): boolean => {
   const { onEnter, onLeave } = options || {};
@@ -19,7 +19,7 @@ export default (
   const onLeaveRef = useRef(onLeave);
   onLeaveRef.current = onLeave;
 
-  const [ state, { setTrue, setFalse }] = useBoolean(false);
+  const [state, { setTrue, setFalse }] = useBoolean(false);
 
   useEffect(() => {
     const onMouseEnter = () => {

packages/hooks/src/useInViewport/index.ts

@@ -1,9 +1,8 @@
 
-import { useEffect, useState, MutableRefObject } from 'react';
+import { useEffect, useState } from 'react';
 import 'intersection-observer';
-import { getTargetElement } from '../utils/dom';
+import { getTargetElement, BasicTarget } from '../utils/dom';
 
-type Target = HTMLElement | (() => HTMLElement) | MutableRefObject<HTMLElement>;
 type InViewport = boolean | undefined;
 
 function isInViewPort(el: HTMLElement): boolean {
@@ -25,7 +24,7 @@ function isInViewPort(el: HTMLElement): boolean {
   return false;
 }
 
-function useInViewport(target: Target): InViewport {
+function useInViewport(target: BasicTarget): InViewport {
   const [inViewPort, setInViewport] = useState<InViewport>(() => {
     const el = getTargetElement(target)
 
@@ -35,7 +34,7 @@ function useInViewport(target: Target): InViewport {
   useEffect(() => {
     const el = getTargetElement(target);
     if (!el) {
-      return () => {};
+      return () => { };
     }
 
     const observer = new IntersectionObserver(entries => {

packages/hooks/src/useKeyPress/index.ts

@@ -1,15 +1,17 @@
-import { useEffect, useCallback, useRef, MutableRefObject } from 'react';
-import { getTargetElement } from '../utils/dom';
+import { useEffect, useCallback, useRef } from 'react';
+import { getTargetElement, BasicTarget } from '../utils/dom';
 
 export type KeyPredicate = (event: KeyboardEvent) => boolean;
 export type keyType = KeyboardEvent['keyCode'] | KeyboardEvent['key'];
 export type KeyFilter = keyType | Array<keyType> | ((event: KeyboardEvent) => boolean);
 export type EventHandler = (event: KeyboardEvent) => void;
 export type keyEvent = 'keydown' | 'keyup';
 
+export type Target = BasicTarget<HTMLElement | Document | Window>;
+
 export type EventOption = {
   events?: Array<keyEvent>;
-  target?: (() => HTMLElement) | HTMLElement | MutableRefObject<HTMLElement> | Document | Window
+  target?: Target;
 };
 
 // 键盘事件 keyCode 别名
@@ -138,7 +140,7 @@ function useKeyPress(
   callbackRef.current = eventHandler;
 
   const callbackHandler = useCallback(
-    event => {
+    (event) => {
       const genGuard: KeyPredicate = genKeyFormater(keyFilter);
       if (genGuard(event)) {
         return callbackRef.current(event);

packages/hooks/src/useScroll/index.ts

@@ -1,12 +1,12 @@
 import { useEffect, useState, MutableRefObject } from 'react';
-import { getTargetElement } from '../utils/dom'
+import { getTargetElement, BasicTarget } from '../utils/dom';
 
 interface Position {
   left: number;
   top: number;
 }
 
-type Target = HTMLElement | (() => HTMLElement) | Document | MutableRefObject<HTMLElement>;
+export type Target = BasicTarget<HTMLElement | Document>;
 
 function useScroll(target?: Target): Position {
   const [position, setPosition] = useState<Position>({

packages/hooks/src/useSize/index.ts

@@ -1,12 +1,10 @@
-import { useState, useLayoutEffect, MutableRefObject } from 'react';
+import { useState, useLayoutEffect } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
-import { getTargetElement } from '../utils/dom';
-
-type Target = HTMLElement | (() => HTMLElement) | MutableRefObject<HTMLElement>;
+import { getTargetElement, BasicTarget } from '../utils/dom';
 
 type Size = { width?: number; height?: number };
 
-function useSize(target: Target): Size {
+function useSize(target: BasicTarget): Size {
   const [state, setState] = useState<Size>(() => {
     const el = getTargetElement(target);
     return {

packages/hooks/src/useTextSelection/index.ts

@@ -1,5 +1,5 @@
-import { useState, useEffect, useRef, MutableRefObject } from 'react';
-import { getTargetElement } from '../utils/dom';
+import { useState, useEffect, useRef } from 'react';
+import { getTargetElement, BasicTarget } from '../utils/dom';
 
 interface IRect {
   top: number;
@@ -13,8 +13,6 @@ export interface IState extends IRect {
   text: string;
 }
 
-type Target = HTMLElement | (() => HTMLElement) | MutableRefObject<HTMLElement>;
-
 const initRect: IRect = {
   top: NaN,
   left: NaN,
@@ -59,7 +57,7 @@ function getRectFromSelection(selection: Selection | null): IRect {
 /**
  * 获取用户选取的文本或当前光标插入的位置
  * */
-function useTextSelection(target?: Target): IState {
+function useTextSelection(target?: BasicTarget): IState {
   const [state, setState] = useState(initState);
 
   const stateRef = useRef(state);

packages/hooks/src/utils/dom.ts

@@ -1,9 +1,17 @@
 import { MutableRefObject } from 'react';
 
+export type BasicTarget<T = HTMLElement> =
+  | (() => T | null)
+  | T
+  | null
+  | MutableRefObject<T | undefined>;
+
 type TargetElement = HTMLElement | Document | Window;
-type TargetParams = (() => HTMLElement) | MutableRefObject<HTMLElement> | TargetElement;
 
-export function getTargetElement(target?: TargetParams, defaultElement?: TargetElement): TargetElement | undefined {
+export function getTargetElement(
+  target?: BasicTarget<TargetElement>,
+  defaultElement?: TargetElement,
+): TargetElement | undefined {
   if (!target) {
     return defaultElement;
   }