Merge branch 'master' into feat/useTitle

alibaba · Jul 6, 2020 · ca40243 · ca40243
2 parents a2c31a5 + 88b8a6d
commit ca40243
Show file tree

Hide file tree

Showing 15 changed files with 267 additions and 102 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
@@ -43,6 +43,7 @@ import useEventTarget from './useEventTarget';
 import useHistoryTravel from './useHistoryTravel';
 import useDebounceEffect from './useDebounceEffect';
 import useSetState from './useSetState';
+import useWhyDidYouUpdate from './useWhyDidYouUpdate';
 
 const useControlledValue: typeof useControllableValue = function (...args) {
   console.warn(
@@ -101,4 +102,5 @@ export {
   useHistoryTravel,
   useFusionTable,
   useSetState,
+  useWhyDidYouUpdate,
 };
diff --git a/packages/hooks/src/useCounter/demo/demo1.tsx b/packages/hooks/src/useCounter/demo/demo1.tsx
@@ -14,7 +14,7 @@ export default () => {
 
   return (
     <div>
-      <p>{current} [max: 10; min: 0;]</p>
+      <p>{current} [max: 10; min: 1;]</p>
       <div>
         <button
           type="button"

diff --git a/packages/hooks/src/useTextSelection/demo/demo1.tsx b/packages/hooks/src/useTextSelection/demo/demo1.tsx
@@ -1,19 +1,19 @@
 /**
- * title: Set 'dom'  target
- * desc: Specifies the text selection to listen for an dom
+ * title: Default usage
+ * desc: Tracking content of user text selection
  *
- * title.zh-CN: 指定监听 'dom' 元素
- * desc.zh-CN: 指定监听某个元素的文本选取。
+ * title.zh-CN: 默认用法
+ * desc.zh-CN: 实时获取页面上选择的文本
  */
 
 import React from 'react';
 import { useTextSelection } from 'ahooks';
 
 export default () => {
-  const { text } = useTextSelection(() => document.querySelector('#target-dom'));
+  const { text } = useTextSelection();
   return (
     <div>
-      <p id="target-dom">Only listen to the text selection of this paragraph.</p>
+      <p>You can select text all page.</p>
       <p>Result：{text}</p>
     </div>
   );

diff --git a/packages/hooks/src/useTextSelection/demo/demo2.tsx b/packages/hooks/src/useTextSelection/demo/demo2.tsx
@@ -42,7 +42,7 @@ export default () => {
 
   return (
     <div>
-      <p id="translate-dom">
+      <p id="translate-dom" style={{ padding: 20, border: '1px solid' }}>
         Translation of this paragraph;Translation of this paragraph;Translation of this paragraph;
       </p>
       <Popover

diff --git a/packages/hooks/src/useTextSelection/demo/demo3.tsx b/packages/hooks/src/useTextSelection/demo/demo3.tsx
@@ -1,9 +1,9 @@
 /**
- * title: Default usage
- * desc: Tracking content, size, position of user text selection
+ * title: Listen specified area
+ * desc: useTextSelection can receive dom or ref, for listen specified area.
  *
- * title.zh-CN: 默认用法
- * desc.zh-CN: 获取用户当前选择的文本内容、大小及其相对于视口的位置。
+ * title.zh-CN: 监听特定区域文本选择
+ * desc.zh-CN: useTextSelection 可以接收 dom 或 ref，指定监听区域。
  */
 
 import React, { useRef } from 'react';
@@ -14,7 +14,7 @@ export default () => {
   const selection = useTextSelection(ref);
   return (
     <div>
-      <div ref={ref}>
+      <div ref={ref} style={{ border: '1px solid', padding: 20 }}>
         <p>Please swipe your mouse to select any text on this paragraph.</p>
       </div>
       <p>Result：{JSON.stringify(selection)}</p>

diff --git a/packages/hooks/src/useTextSelection/index.en-US.md b/packages/hooks/src/useTextSelection/index.en-US.md
@@ -15,11 +15,11 @@ Tracking content, size, position of user text selection
 
 ## Examples
 
-### Set 'dom'  target
+### Default usage
 
 <code src="./demo/demo1.tsx" />
 
-### Use Ref
+### Listen specified area
 
 <code src="./demo/demo3.tsx" />
 

diff --git a/packages/hooks/src/useTextSelection/index.zh-CN.md b/packages/hooks/src/useTextSelection/index.zh-CN.md
@@ -15,11 +15,11 @@ legacy: /zh-CN/dom/use-text-selection
 
 ## 代码演示
 
-### 使用 Dom
+### 默认用法
 
 <code src="./demo/demo1.tsx" />
 
-### 使用 Ref
+### 监听特定区域文本选择
 
 <code src="./demo/demo3.tsx" />
 

diff --git a/packages/hooks/src/useVirtualList/__tests__/index.test.ts b/packages/hooks/src/useVirtualList/__tests__/index.test.ts
@@ -33,7 +33,7 @@ describe('useVirtualList', () => {
         };
         wrapperProps: {
           style: {
-            paddingTop: number;
+            marginTop: number;
             height: number;
           };
         };
@@ -95,8 +95,8 @@ describe('useVirtualList', () => {
       expect((hook.result.current.list[5] as { data: number }).data).toBe(25);
       expect((hook.result.current.list[5] as { index: number }).index).toBe(25);
 
-      expect(hook.result.current.wrapperProps.style.paddingTop).toBe(20 * averageHeight);
-      expect(hook.result.current.wrapperProps.style.height).toBe(99998 * averageHeight + 30);
+      expect(hook.result.current.wrapperProps.style.marginTop).toBe(20 * averageHeight);
+      expect(hook.result.current.wrapperProps.style.height).toBe((99998 - 20) * averageHeight + 30);
     });
   });
 });
diff --git a/packages/hooks/src/useVirtualList/index.ts b/packages/hooks/src/useVirtualList/index.ts
@@ -7,7 +7,7 @@ export interface OptionType {
 }
 
 export default <T = any>(list: T[], options: OptionType) => {
-  const containerRef = useRef<HTMLElement>();
+  const containerRef = useRef<HTMLElement | null>();
   const size = useSize(containerRef as MutableRefObject<HTMLElement>);
   // 暂时禁止 cache
   // const distanceCache = useRef<{ [key: number]: number }>({});
@@ -61,7 +61,10 @@ export default <T = any>(list: T[], options: OptionType) => {
 
       const from = offset - overscan;
       const to = offset + viewCapacity + overscan;
-      setState({ start: from < 0 ? 0 : from, end: to > list.length ? list.length : to });
+      setState({
+        start: from < 0 ? 0 : from,
+        end: to > list.length ? list.length : to,
+      });
     }
   };
 
@@ -102,6 +105,8 @@ export default <T = any>(list: T[], options: OptionType) => {
     }
   };
 
+  const offsetTop = useMemo(() => getDistanceTop(state.start), [state.start]);
+
   return {
     list: list.slice(state.start, state.end).map((ele, index) => ({
       data: ele,
@@ -110,8 +115,7 @@ export default <T = any>(list: T[], options: OptionType) => {
     scrollTo,
     containerProps: {
       ref: (ele: any) => {
-        // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065
-        (containerRef as MutableRefObject<HTMLElement>).current = ele;
+        containerRef.current = ele;
       },
       onScroll: (e: any) => {
         e.preventDefault();
@@ -120,7 +124,11 @@ export default <T = any>(list: T[], options: OptionType) => {
       style: { overflowY: 'auto' as const },
     },
     wrapperProps: {
-      style: { width: '100%', height: totalHeight, paddingTop: getDistanceTop(state.start) },
+      style: {
+        width: '100%',
+        height: totalHeight - offsetTop,
+        marginTop: offsetTop,
+      },
     },
   };
 };