feat(ui): add tabs component

DevCloudFE · Dec 3, 2021 · 106229c · 106229c
1 parent 46e97b2
commit 106229c
Show file tree

Hide file tree

Showing 36 changed files with 1,772 additions and 232 deletions.
diff --git a/package.json b/package.json
@@ -43,16 +43,16 @@
   "devDependencies": {
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
-    "@nrwl/cli": "^13.2.2",
-    "@nrwl/cypress": "^13.2.2",
-    "@nrwl/eslint-plugin-nx": "^13.2.2",
-    "@nrwl/jest": "^13.2.2",
-    "@nrwl/linter": "^13.2.2",
+    "@nrwl/cli": "^13.2.3",
+    "@nrwl/cypress": "^13.2.3",
+    "@nrwl/eslint-plugin-nx": "^13.2.3",
+    "@nrwl/jest": "^13.2.3",
+    "@nrwl/linter": "^13.2.3",
     "@nrwl/nx-cloud": "latest",
-    "@nrwl/react": "^13.2.2",
-    "@nrwl/tao": "^13.2.2",
-    "@nrwl/web": "^13.2.2",
-    "@nrwl/workspace": "^13.2.2",
+    "@nrwl/react": "^13.2.3",
+    "@nrwl/tao": "^13.2.3",
+    "@nrwl/web": "^13.2.3",
+    "@nrwl/workspace": "^13.2.3",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "7.0.2",
     "@types/enzyme": "^3.10.10",

diff --git a/packages/site/src/app/components/route/DemoBox.tsx b/packages/site/src/app/components/route/DemoBox.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { DTooltip, DIcon } from '@react-devui/ui';
+import { DTooltip, DIcon, DTabs, DTab } from '@react-devui/ui';
 import { useAsync, useImmer } from '@react-devui/ui/hooks';
 import { copy, getClassName } from '@react-devui/ui/utils';
 
@@ -20,7 +20,6 @@ export interface AppDemoBoxProps {
 }
 
 export function AppDemoBox(props: AppDemoBoxProps) {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { id, renderer, title, scss, scssSource } = props;
 
   const description = toString(props.description);
@@ -29,16 +28,18 @@ export function AppDemoBox(props: AppDemoBoxProps) {
 
   const asyncCapture = useAsync();
 
+  const [tab, setTab] = useImmer<string | null>('tsx');
+
   const [openCode, setOpencode] = useImmer(false);
   const handleOpenClick = useCallback(() => {
     setOpencode((draft) => !draft);
   }, [setOpencode]);
 
   const [copyCode, setCopycode] = useImmer(false);
   const handleCopyClick = useCallback(() => {
-    copy(tsxSource);
+    copy(tab === 'tsx' ? tsxSource : (scssSource as string));
     setCopycode(true);
-  }, [setCopycode, tsxSource]);
+  }, [scssSource, setCopycode, tab, tsxSource]);
 
   const afterCopyTrige = useCallback(
     (v) => {
@@ -118,8 +119,16 @@ export function AppDemoBox(props: AppDemoBoxProps) {
       </div>
       {openCode && (
         <div className="app-demo-box__code">
-          <div className="app-demo-box__tsx" dangerouslySetInnerHTML={{ __html: tsx }} />
-          {/* {scss && <div className="app-demo-box__scss" dangerouslySetInnerHTML={{ __html: scss }} />} */}
+          {!scss && <div dangerouslySetInnerHTML={{ __html: tsx }} />}
+          {scss && (
+            <DTabs dActive={[tab, setTab]} dSize="smaller" dCenter>
+              {['tsx', 'scss'].map((code) => (
+                <DTab key={code} dId={code} dTitle={code}>
+                  <div dangerouslySetInnerHTML={{ __html: code === 'tsx' ? tsx : scss }} />
+                </DTab>
+              ))}
+            </DTabs>
+          )}
         </div>
       )}
     </section>

diff --git a/packages/ui/src/components/_popup/Popup.tsx b/packages/ui/src/components/_popup/Popup.tsx
@@ -7,7 +7,16 @@ import { isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useImperativeHandle, useRef } from 'react';
 import ReactDOM, { flushSync } from 'react-dom';
 
-import { useDPrefixConfig, useAsync, useRefSelector, useId, useImmer, useRefCallback, useTwoWayBinding } from '../../hooks';
+import {
+  useDPrefixConfig,
+  useAsync,
+  useRefSelector,
+  useId,
+  useImmer,
+  useRefCallback,
+  useTwoWayBinding,
+  useDContentConfig,
+} from '../../hooks';
 import { getClassName, globalMaxIndexManager, getPopupPlacementStyle } from '../../utils';
 import { DTransition } from '../_transition';
 import { checkOutEl } from './utils';
@@ -81,6 +90,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
 
   //#region Context
   const dPrefix = useDPrefixConfig();
+  const rootContentRef = useDContentConfig();
   //#endregion
 
   //#region Ref
@@ -106,8 +116,9 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
 
   const triggerRef = useRefSelector(isUndefined(dTriggerEl) ? `[data-${dPrefix}popup-trigger="${id}"]` : dTriggerEl);
 
+  const isFixed = isUndefined(dContainer);
   const handleContainer = useCallback(() => {
-    if (isUndefined(dContainer)) {
+    if (isFixed) {
       let el = document.getElementById(`${dPrefix}popup-root`);
       if (!el) {
         el = document.createElement('div');
@@ -119,21 +130,19 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
       return triggerRef.current?.parentElement ?? null;
     }
     return null;
-  }, [dContainer, dPrefix, triggerRef]);
+  }, [dContainer, dPrefix, isFixed, triggerRef]);
   const containerRef = useRefSelector(dContainer, handleContainer);
 
   const placement = dAutoPlace ? autoPlacement : dPlacement;
 
   const updatePosition = useCallback(() => {
     if (popupEl && triggerRef.current && containerRef.current) {
-      const fixed = isUndefined(dContainer);
-
       if (isUndefined(dCustomPopup)) {
         let currentPlacement = dAutoPlace ? dPlacement : autoPlacement;
 
         if (dAutoPlace) {
           let space: [number, number, number, number] = [0, 0, 0, 0];
-          if (!fixed) {
+          if (!isFixed) {
             const containerRect = containerRef.current.getBoundingClientRect();
             space = [
               containerRect.top,
@@ -142,27 +151,27 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
               containerRect.left,
             ];
           }
-          const position = getPopupPlacementStyle(popupEl, triggerRef.current, dPlacement, dDistance, fixed, space);
+          const position = getPopupPlacementStyle(popupEl, triggerRef.current, dPlacement, dDistance, isFixed, space);
           if (position) {
             currentPlacement = position.placement;
             setAutoPlacement(position.placement);
             setPopupPositionStyle({
-              position: fixed ? 'fixed' : 'absolute',
+              position: isFixed ? 'fixed' : 'absolute',
               top: position.top,
               left: position.left,
             });
           } else {
-            const position = getPopupPlacementStyle(popupEl, triggerRef.current, autoPlacement, dDistance, fixed);
+            const position = getPopupPlacementStyle(popupEl, triggerRef.current, autoPlacement, dDistance, isFixed);
             setPopupPositionStyle({
-              position: fixed ? 'fixed' : 'absolute',
+              position: isFixed ? 'fixed' : 'absolute',
               top: position.top,
               left: position.left,
             });
           }
         } else {
-          const position = getPopupPlacementStyle(popupEl, triggerRef.current, dPlacement, dDistance, fixed);
+          const position = getPopupPlacementStyle(popupEl, triggerRef.current, dPlacement, dDistance, isFixed);
           setPopupPositionStyle({
-            position: fixed ? 'fixed' : 'absolute',
+            position: isFixed ? 'fixed' : 'absolute',
             top: position.top,
             left: position.left,
           });
@@ -230,7 +239,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
         const { top, left, stateList, arrowPosition } = dCustomPopup(popupEl, triggerRef.current);
         setArrowStyle(arrowPosition);
         setPopupPositionStyle({
-          position: fixed ? 'fixed' : 'absolute',
+          position: isFixed ? 'fixed' : 'absolute',
           top,
           left,
         });
@@ -241,10 +250,10 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
     autoPlacement,
     containerRef,
     dAutoPlace,
-    dContainer,
     dCustomPopup,
     dDistance,
     dPlacement,
+    isFixed,
     popupEl,
     setArrowStyle,
     setAutoPlacement,
@@ -337,7 +346,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
   useEffect(() => {
     if (visible) {
       if (isUndefined(dZIndex)) {
-        if (isUndefined(dContainer)) {
+        if (isFixed) {
           const [key, maxZIndex] = globalMaxIndexManager.getMaxIndex();
           setZIndex(maxZIndex);
           return () => {
@@ -350,7 +359,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
         setZIndex(dZIndex);
       }
     }
-  }, [dContainer, dZIndex, setZIndex, visible]);
+  }, [dZIndex, isFixed, setZIndex, visible]);
 
   useEffect(() => {
     if (!isUndefined(dTriggerEl)) {
@@ -440,6 +449,10 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
 
       throttleUpdate();
 
+      if (!isFixed && rootContentRef.current) {
+        asyncGroup.onResize(rootContentRef.current, throttleUpdate);
+      }
+
       asyncGroup.onResize(popupEl, throttleUpdate);
 
       asyncGroup.onResize(triggerRef.current, throttleUpdate);
@@ -449,7 +462,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
     return () => {
       asyncCapture.deleteGroup(asyncId);
     };
-  }, [asyncCapture, visible, updatePosition, triggerRef, popupEl, transition]);
+  }, [asyncCapture, visible, updatePosition, triggerRef, popupEl, transition, rootContentRef, isFixed]);
   //#endregion
 
   useImperativeHandle(

diff --git a/packages/ui/src/components/affix/Affix.tsx b/packages/ui/src/components/affix/Affix.tsx
@@ -3,7 +3,7 @@ import type { DElementSelector } from '../../hooks/element-ref';
 import { isString, isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useImperativeHandle } from 'react';
 
-import { useDPrefixConfig, useDComponentConfig, useAsync, useRefSelector, useImmer, useRefCallback } from '../../hooks';
+import { useDPrefixConfig, useDComponentConfig, useAsync, useRefSelector, useImmer, useRefCallback, useDContentConfig } from '../../hooks';
 import { getClassName, toPx } from '../../utils';
 
 export interface DAffixRef {
@@ -34,6 +34,7 @@ export const DAffix = React.forwardRef<DAffixRef, DAffixProps>((props, ref) => {
 
   //#region Context
   const dPrefix = useDPrefixConfig();
+  const rootContentRef = useDContentConfig();
   //#endregion
 
   //#region Ref
@@ -126,11 +127,14 @@ export const DAffix = React.forwardRef<DAffixRef, DAffixProps>((props, ref) => {
 
   useEffect(() => {
     const [asyncGroup, asyncId] = asyncCapture.createGroup();
+    if (rootContentRef.current) {
+      asyncGroup.onResize(rootContentRef.current, updatePosition);
+    }
     asyncGroup.onGlobalScroll(updatePosition);
     return () => {
       asyncCapture.deleteGroup(asyncId);
     };
-  }, [asyncCapture, updatePosition]);
+  }, [asyncCapture, rootContentRef, updatePosition]);
 
   useEffect(() => {
     updatePosition();

diff --git a/packages/ui/src/components/anchor/Anchor.tsx b/packages/ui/src/components/anchor/Anchor.tsx
@@ -3,7 +3,7 @@ import type { DElementSelector } from '../../hooks/element-ref';
 import { isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import { useDPrefixConfig, useDComponentConfig, useRefSelector, useImmer, useAsync, useRefCallback } from '../../hooks';
+import { useDPrefixConfig, useDComponentConfig, useRefSelector, useImmer, useAsync, useRefCallback, useDContentConfig } from '../../hooks';
 import { getClassName, CustomScroll } from '../../utils';
 
 export interface DAnchorContextData {
@@ -35,6 +35,7 @@ export function DAnchor(props: DAnchorProps) {
 
   //#region Context
   const dPrefix = useDPrefixConfig();
+  const rootContentRef = useDContentConfig();
   //#endregion
 
   //#region Ref
@@ -136,11 +137,14 @@ export function DAnchor(props: DAnchorProps) {
 
   useEffect(() => {
     const [asyncGroup, asyncId] = asyncCapture.createGroup();
+    if (rootContentRef.current) {
+      asyncGroup.onResize(rootContentRef.current, updateAnchor);
+    }
     asyncGroup.onGlobalScroll(updateAnchor);
     return () => {
       asyncCapture.deleteGroup(asyncId);
     };
-  }, [asyncCapture, updateAnchor]);
+  }, [asyncCapture, rootContentRef, updateAnchor]);
   //#endregion
 
   const contextValue = useMemo<DAnchorContextData>(

diff --git a/packages/ui/src/components/drag-drop/Drop.tsx b/packages/ui/src/components/drag-drop/Drop.tsx
@@ -52,18 +52,24 @@ export const DDrop = React.forwardRef<DDropRef, DDropProps>((props, ref) => {
   });
 
   const [isOuter, setIsOuter] = useImmer(false);
+  const [dragEnd, setDragEnd] = useImmer(false);
 
   const [orderIds, setOrderIds] = useState<string[]>([]);
   const [orderChildren, setOrderChildren] = useImmer<React.ReactElement[]>([]);
 
   const containerRef = useRefSelector(dContainer);
 
   //#region DidUpdate
+  useEffect(() => {
+    if (dragEnd) {
+      onOrderChange?.(orderIds);
+    }
+  }, [dragEnd, onOrderChange, orderIds]);
+
   useEffect(() => {
     const _childs = React.Children.toArray(children) as Array<React.ReactElement<DDragProps>>;
     const allIds = _childs.map((child) => child.props.dId as string);
     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[] = [];
@@ -92,6 +98,7 @@ export const DDrop = React.forwardRef<DDropRef, DDropProps>((props, ref) => {
       dropCurrentData: dataRef.current,
       dropPlaceholder: dPlaceholder,
       onDragStart: (id) => {
+        setDragEnd(false);
         onDragStart?.(id);
       },
       onDrag: (dragId, rect) => {
@@ -189,14 +196,14 @@ export const DDrop = React.forwardRef<DDropRef, DDropProps>((props, ref) => {
 
         if (!isEqual(newOrderIds, orderIds)) {
           setOrderIds(newOrderIds);
-          onOrderChange?.(newOrderIds);
         }
       },
       onDragEnd: (id) => {
+        setDragEnd(true);
         onDragEnd?.(id);
       },
     }),
-    [containerRef, dDirection, dPlaceholder, isOuter, onDrag, onDragEnd, onDragStart, onOrderChange, orderIds, setIsOuter, setOrderIds]
+    [containerRef, dDirection, dPlaceholder, isOuter, onDrag, onDragEnd, onDragStart, orderIds, setDragEnd, setIsOuter]
   );
 
   useImperativeHandle(ref, () => orderIds, [orderIds]);