fix(ui): use dPrefix instead of d-

Author: xiejay97

packages/ui/src/components/_popup/Popup.tsx

@@ -96,18 +96,18 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
   const targetEl = useElement(dTarget);
   const handleContainer = useCallback(() => {
     if (isUndefined(dContainer)) {
-      let el = document.getElementById('d-popup-root');
+      let el = document.getElementById(`${dPrefix}popup-root`);
       if (!el) {
         el = document.createElement('div');
-        el.id = 'd-popup-root';
+        el.id = `${dPrefix}popup-root`;
         document.body.appendChild(el);
       }
       return el;
     } else if (dContainer === false) {
       return targetEl.current?.parentElement ?? null;
     }
     return null;
-  }, [dContainer, targetEl]);
+  }, [dContainer, dPrefix, targetEl]);
   const containerEl = useElement(dContainer, handleContainer);
   //#endregion
 

packages/ui/src/components/drawer/Drawer.tsx

@@ -77,18 +77,18 @@ export const DDrawer = React.forwardRef<DDrawerRef, DDrawerProps>((props, ref) =
   //#region Element
   const handleContainer = useCallback(() => {
     if (isUndefined(dContainer)) {
-      let el = document.getElementById('d-drawer-root');
+      let el = document.getElementById(`${dPrefix}drawer-root`);
       if (!el) {
         el = document.createElement('div');
-        el.id = 'd-drawer-root';
+        el.id = `${dPrefix}drawer-root`;
         document.body.appendChild(el);
       }
       return el;
     } else if (dContainer === false) {
       return drawerEl?.parentElement ?? null;
     }
     return null;
-  }, [dContainer, drawerEl]);
+  }, [dContainer, dPrefix, drawerEl?.parentElement]);
   const containerEl = useElement(dContainer, handleContainer);
   //#endregion
 

packages/ui/src/components/tooltip/Tooltip.tsx

@@ -43,9 +43,9 @@ export const DTooltip = React.forwardRef<DPopupRef, DTooltipProps>((props, ref)
     const _child = React.Children.only(children) as React.ReactElement;
     return React.cloneElement(_child, {
       ..._child.props,
-      'aria-describedby': `d-tooltip-${id}`,
+      'aria-describedby': `${dPrefix}tooltip-${id}`,
     });
-  }, [children, id]);
+  }, [children, dPrefix, id]);
   //#endregion
 
   return (
@@ -55,10 +55,10 @@ export const DTooltip = React.forwardRef<DPopupRef, DTooltipProps>((props, ref)
         <DPopup
           {...restProps}
           ref={ref}
-          id={`d-tooltip-${id}`}
+          id={`${dPrefix}tooltip-${id}`}
           className={getClassName(className, `${dPrefix}tooltip`)}
           role="tooltip"
-          dTarget={`[aria-describedby="d-tooltip-${id}"]`}
+          dTarget={`[aria-describedby="${dPrefix}tooltip-${id}"]`}
         >
           {dTitle}
         </DPopup>

packages/ui/src/components/virtual-scroll/VirtualScroll.tsx

@@ -2,7 +2,7 @@ import { isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useImmer } from 'use-immer';
 
-import { useDComponentConfig, useElement, useId, useThrottle, useAsync } from '../../hooks';
+import { useDComponentConfig, useElement, useId, useThrottle, useAsync, useDPrefixConfig } from '../../hooks';
 
 export interface DVirtualScrollProps<T> {
   dTag?: string;
@@ -33,6 +33,7 @@ export function DVirtualScroll<T>(props: DVirtualScrollProps<T>) {
     ...restProps
   } = useDComponentConfig('virtual-scroll', props);
 
+  const dPrefix = useDPrefixConfig();
   const { throttleByAnimationFrame } = useThrottle();
   const asyncCapture = useAsync();
 
@@ -55,8 +56,8 @@ export function DVirtualScroll<T>(props: DVirtualScrollProps<T>) {
   //#endregion
 
   //#region Element
-  const el = useElement(`[data-d-virtual-scroll-${id}]`);
-  const referenceEl = useElement(`[data-d-virtual-scroll-reference-${id}]`);
+  const el = useElement(`[data-${dPrefix}virtual-scroll-${id}]`);
+  const referenceEl = useElement(`[data-${dPrefix}virtual-scroll-reference-${id}]`);
   //#endregion
 
   //#region Getters.
@@ -161,10 +162,10 @@ export function DVirtualScroll<T>(props: DVirtualScrollProps<T>) {
       }, 20);
       return React.cloneElement(_reference, {
         ..._reference.props,
-        [`data-d-virtual-scroll-reference-${id}`]: 'true',
+        [`data-${dPrefix}virtual-scroll-reference-${id}`]: 'true',
       });
     }
-  }, [asyncCapture, dCustomSize, dList, dRenderItem, id, referenceEl, throttleByAnimationFrame, updateList]);
+  }, [asyncCapture, dCustomSize, dList, dPrefix, dRenderItem, id, referenceEl, throttleByAnimationFrame, updateList]);
 
   const handleScroll = useCallback(
     (e) => {
@@ -202,21 +203,21 @@ export function DVirtualScroll<T>(props: DVirtualScrollProps<T>) {
         overflowX: isUndefined(dWidth) ? undefined : 'auto',
         overflowY: isUndefined(dHeight) ? undefined : 'auto',
       },
-      [`data-d-virtual-scroll-${id}`]: 'true',
+      [`data-${dPrefix}virtual-scroll-${id}`]: 'true',
       onScroll: handleScroll,
     },
     [
       reference,
       <div
-        key={`d-virtual-scroll-pre-fill-${id}`}
+        key={`${dPrefix}virtual-scroll-pre-fill-${id}`}
         style={{
           ...fillSize[0],
           display: isUndefined(dWidth) ? undefined : 'inline-block',
         }}
       ></div>,
       ...list,
       <div
-        key={`d-virtual-scroll-sub-fill-${id}`}
+        key={`${dPrefix}virtual-scroll-sub-fill-${id}`}
         style={{
           ...fillSize[1],
           display: isUndefined(dWidth) ? undefined : 'inline-block',

packages/ui/src/hooks/async.ts

@@ -93,6 +93,9 @@ class AsyncCapture extends BaseAsyncCapture {
     for (const cb of this.tids.values()) {
       cb();
     }
+    this.onDestroy$.next();
+    this.onDestroy$.complete();
+
     for (const group of this.groups.values()) {
       group.clearAll();
     }

packages/ui/src/hooks/id.ts

@@ -1,17 +1,28 @@
+import { isUndefined } from 'lodash';
 import { useEffect } from 'react';
 import { useImmer } from 'use-immer';
 
 let id = 0;
 export function getID() {
   return (id += 1);
 }
-
-export function useId() {
+export function useId(): number;
+export function useId(size: number): number[];
+export function useId(size?: number): number[] | number {
   const [id, setId] = useImmer(0);
+  const [ids, setIds] = useImmer(Array(size).fill(0));
 
   useEffect(() => {
-    setId(getID());
-  }, [setId]);
+    if (isUndefined(size)) {
+      setId(getID());
+    } else {
+      const arr: number[] = [];
+      for (let n = 0; n < size; n++) {
+        arr.push(getID());
+      }
+      setIds(arr);
+    }
+  }, [setId, setIds, size]);
 
-  return id;
+  return isUndefined(size) ? id : ids;
 }