chore: style modification and some upgrades

Author: xiejay97

packages/site/src/app/styles/_variables.scss

@@ -1,4 +1,4 @@
 :root {
-  --app-th-background-color: rgb(0 0 0 / 2%);
+  --app-th-background-color: #f9f9f9;
   --app-code-background-color: #f2f4f5;
 }

packages/ui/src/components/_transition/transition.tsx

@@ -4,7 +4,7 @@ import type { ThrottleByAnimationFrame } from '../../hooks/throttle-and-debounce
 import { isFunction, isNumber, isString } from 'lodash';
 import React, { useImperativeHandle, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
-import { count, first, mergeWith, take, timer } from 'rxjs';
+import { count, filter, first, mergeWith, take, timer } from 'rxjs';
 
 import { useAsync, useThrottle, useImmer } from '../../hooks';
 import { CssRecord, getTransitinNum, getMaxTime } from './utils';
@@ -93,6 +93,7 @@ export const DTransition = React.forwardRef<DTransitionRef, DTransitionProps>((p
 
         asyncCapture
           .fromEvent(dEl, 'transitionend')
+          .pipe(filter((e) => e.target === dEl))
           .pipe(take(transitinNum), count())
           .pipe(mergeWith(timer(timeout + 5)))
           .pipe(first())

packages/ui/src/components/affix/demos/2.Target.md

@@ -33,15 +33,15 @@ export default function Demo() {
   height: 200px;
   overflow-y: scroll;
 
-  background-color: rgba(var(--d-color-primary-rgb) / 10%);
+  background-color: var(--d-color-primary-background-6);
 
   & > div {
     height: 600px;
     padding-top: 60px;
   }
 
   .d-affix {
-    background-color: rgba(var(--d-color-primary-rgb) / 20%);
+    background-color: var(--d-color-primary-background);
   }
 }
 ```

packages/ui/src/components/anchor/Anchor.tsx

@@ -9,7 +9,7 @@ import { getClassName, CustomScroll } from '../../utils';
 export interface DAnchorContextData {
   anchorActiveHref: string | null;
   onLinkClick: (href: string) => void;
-  onLinkChange: (href: string, el?: HTMLElement) => void;
+  onLinkChange: (href: string, el?: HTMLElement | null) => void;
 }
 export const DAnchorContext = React.createContext<DAnchorContextData | null>(null);
 
@@ -42,7 +42,7 @@ export function DAnchor(props: DAnchorProps) {
   //#endregion
 
   const dataRef = useRef({
-    links: new Map<string, HTMLElement>(),
+    links: new Map<string, HTMLElement | null>(),
   });
 
   const asyncCapture = useAsync();

packages/ui/src/components/anchor/AnchorLink.tsx

@@ -36,7 +36,7 @@ export function DAnchorLink(props: DAnchorLinkProps) {
   //#region DidUpdate
   useEffect(() => {
     if (linkEl && href) {
-      onLinkChange?.(href, linkEl as HTMLElement);
+      onLinkChange?.(href, linkEl);
       return () => {
         onLinkChange?.(href);
       };

packages/ui/src/components/drag-drop/Drop.tsx

@@ -1,8 +1,8 @@
 import type { DElementSelector } from '../../hooks/element-ref';
 import type { DDragProps } from './Drag';
 
-import { isEqual, isUndefined } from 'lodash';
-import React, { useImperativeHandle, useRef } from 'react';
+import { cloneDeep, isEqual, isUndefined } from 'lodash';
+import React, { useImperativeHandle, useRef, useState } from 'react';
 import { useEffect, useMemo } from 'react';
 
 import { useDComponentConfig, useRefSelector, useImmer } from '../../hooks';
@@ -46,20 +46,14 @@ export const DDrop = React.forwardRef<DDropRef, DDropProps>((props, ref) => {
     onDragEnd,
   } = useDComponentConfig('drop', props);
 
-  const dataRef = useRef<
-    DDropContextData['dropCurrentData'] & {
-      order: string[];
-      preOrder?: string[];
-    }
-  >({
+  const dataRef = useRef<DDropContextData['dropCurrentData']>({
     drags: new Map(),
     placeholders: new Map(),
-    order: Array<string>(),
   });
 
-  const [updateChildren, setUpdateChildren] = useImmer(0);
   const [isOuter, setIsOuter] = useImmer(false);
 
+  const [orderIds, setOrderIds] = useState<string[]>([]);
   const [orderChildren, setOrderChildren] = useImmer<React.ReactElement[]>([]);
 
   const containerRef = useRefSelector(dContainer);
@@ -68,24 +62,27 @@ export const DDrop = React.forwardRef<DDropRef, DDropProps>((props, ref) => {
   useEffect(() => {
     const _childs = React.Children.toArray(children) as Array<React.ReactElement<DDragProps>>;
     const allIds = _childs.map((child) => child.props.dId as string);
-    dataRef.current.order = dataRef.current.order.filter((id) => allIds.includes(id));
-    dataRef.current.order.length = allIds.length;
-    const addIndex = allIds.findIndex((id) => !dataRef.current.order.includes(id));
+    const newOrderIds = cloneDeep(orderIds.filter((id) => allIds.includes(id)));
+    newOrderIds.length = allIds.length;
+    const addIndex = allIds.findIndex((id) => !newOrderIds.includes(id));
     if (addIndex !== -1) {
       const addIds: string[] = [];
       for (let n = addIndex; n < allIds.length; n++) {
-        if (!dataRef.current.order.includes(allIds[n])) {
+        if (!newOrderIds.includes(allIds[n])) {
           addIds.push(allIds[n]);
         } else {
           break;
         }
       }
-      dataRef.current.order.splice(addIndex, 0, ...addIds);
+      newOrderIds.splice(addIndex, 0, ...addIds);
     }
 
+    if (!isEqual(newOrderIds, orderIds)) {
+      setOrderIds(newOrderIds);
+    }
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    setOrderChildren(dataRef.current.order.map((id) => _childs.find((child) => child.props.dId === id)!));
-  }, [children, updateChildren, setOrderChildren]);
+    setOrderChildren(newOrderIds.map((id) => _childs.find((child) => child.props.dId === id)!));
+  }, [children, setOrderChildren, orderIds, setOrderIds]);
   //#endregion
 
   const contextValue = useMemo<DDropContextData>(
@@ -145,7 +142,9 @@ export const DDrop = React.forwardRef<DDropRef, DDropProps>((props, ref) => {
           top: rect.top + rect.height / 2,
           left: rect.left + rect.width / 2,
         };
-        dataRef.current.order.forEach((id, index) => {
+
+        let newOrderIds = cloneDeep(orderIds);
+        newOrderIds.forEach((id, index) => {
           let el: HTMLElement | null = null;
           if (id === dragId) {
             const selector = dataRef.current.placeholders.get(id);
@@ -175,34 +174,32 @@ export const DDrop = React.forwardRef<DDropRef, DDropProps>((props, ref) => {
             }
           }
         });
-
         if (!isUndefined(replaceIndex)) {
-          dataRef.current.order.splice(
-            dataRef.current.order.findIndex((id) => id === dragId),
+          newOrderIds.splice(
+            newOrderIds.findIndex((id) => id === dragId),
             1,
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             undefined as any
           );
 
-          dataRef.current.order.splice(replaceIndex, 0, dragId as string);
+          newOrderIds.splice(replaceIndex, 0, dragId as string);
 
-          dataRef.current.order = dataRef.current.order.filter((id) => !!id);
+          newOrderIds = newOrderIds.filter((id) => !!id);
+        }
 
-          if (!isEqual(dataRef.current.preOrder, dataRef.current.order)) {
-            dataRef.current.preOrder = [...dataRef.current.order];
-            setUpdateChildren((prev) => prev + 1);
-            onOrderChange?.(dataRef.current.order);
-          }
+        if (!isEqual(newOrderIds, orderIds)) {
+          setOrderIds(newOrderIds);
+          onOrderChange?.(newOrderIds);
         }
       },
       onDragEnd: (id) => {
         onDragEnd?.(id);
       },
     }),
-    [dDirection, isOuter, dPlaceholder, onDragStart, onDrag, containerRef, setIsOuter, setUpdateChildren, onOrderChange, onDragEnd]
+    [containerRef, dDirection, dPlaceholder, isOuter, onDrag, onDragEnd, onDragStart, onOrderChange, orderIds, setIsOuter, setOrderIds]
   );
 
-  useImperativeHandle(ref, () => dataRef.current.order, []);
+  useImperativeHandle(ref, () => orderIds, [orderIds]);
 
   return <DDropContext.Provider value={contextValue}>{orderChildren}</DDropContext.Provider>;
 });

packages/ui/src/components/drawer/demos/3.Container.md

@@ -44,6 +44,6 @@ export default function Demo() {
   padding: 20px;
   border: 1px solid var(--d-divider-color);
 
-  background-color: rgba(var(--d-color-primary-rgb) / 10%);
+  background-color: var(--d-color-primary-background-6);
 }
 ```

packages/ui/src/components/drawer/demos/4.Nested.md

@@ -49,13 +49,3 @@ export default function Demo() {
   );
 }
 ```
-
-```scss
-.container {
-  height: 200px;
-  padding: 20px;
-  border: 1px solid var(--d-divider-color);
-
-  background-color: rgba(var(--d-color-primary-rgb) / 10%);
-}
-```

packages/ui/src/components/menu/MenuSub.tsx

@@ -118,7 +118,7 @@ export function DMenuSub(props: DMenuSubProps) {
         popupEl,
         targetEl,
         horizontal ? 'bottom' : 'right',
-        horizontal ? 12 : inNav ? 10 : 18
+        horizontal ? 12 : inNav ? 10 : 14
       );
       setMenuWidth(targetEl.getBoundingClientRect().width - 32);
       return {

packages/ui/src/components/menu/demos/3.Popup.md

@@ -97,7 +97,7 @@ export default function Demo() {
   justify-content: center;
   height: 40px;
 
-  background-color: rgba(var(--d-color-primary-rgb) / 10%);
+  background-color: var(--d-color-primary-background-6);
   cursor: pointer;
 }
 ```