feat(ui): add form component

DevCloudFE · Dec 27, 2021 · 2f53edc · 2f53edc
1 parent a1011c8
commit 2f53edc
Show file tree

Hide file tree

Showing 115 changed files with 4,811 additions and 1,246 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -9,7 +9,7 @@
       "processor": "markdown/markdown"
     },
     {
-      "files": ["*.md", "*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
         "@nrwl/nx/enforce-module-boundaries": [
           "error",
@@ -47,7 +47,7 @@
       }
     },
     {
-      "files": ["*.md", "*.ts", "*.tsx"],
+      "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nrwl/nx/typescript"],
       "rules": {
         "no-unreachable": "error",
@@ -116,9 +116,17 @@
       }
     },
     {
-      "files": ["*.md", "*.js", "*.jsx"],
+      "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nrwl/nx/javascript"],
       "rules": {}
+    },
+    {
+      "files": ["**/*.md/*.ts", "**/*.md/*.tsx"],
+      "rules": {
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-explicit-any": "off"
+      }
     }
   ]
 }
diff --git a/packages/site/src/app/components/route/RouteArticle.tsx b/packages/site/src/app/components/route/RouteArticle.tsx
@@ -2,8 +2,7 @@ import { isString, isUndefined } from 'lodash';
 import { useEffect, useState } from 'react';
 
 import { DIcon, DAnchor, DAnchorLink, DRow } from '@react-devui/ui';
-import { DTransition } from '@react-devui/ui/components/_transition';
-import { useImmer, useRefCallback } from '@react-devui/ui/hooks';
+import { useImmer, useDTransition, useRefCallback } from '@react-devui/ui/hooks';
 
 import './RouteArticle.scss';
 import marked, { toString } from './utils';
@@ -79,6 +78,15 @@ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
     }
   }, [html]);
 
+  const hidden = useDTransition({
+    dEl: el,
+    dVisible: menuOpen,
+    dCallbackList: {
+      beforeEnter: () => transitionState,
+      beforeLeave: () => transitionState,
+    },
+  });
+
   return (
     <DRow
       dAsListener
@@ -95,28 +103,17 @@ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
           )}
           {!matchs.includes('md') && (
             <>
-              <DTransition
-                dEl={el}
-                dVisible={menuOpen}
-                dCallbackList={{
-                  beforeEnter: () => transitionState,
-                  beforeLeave: () => transitionState,
-                }}
-                dRender={(hidden) =>
-                  links.length > 0 && (
-                    <div ref={ref} className="app-route-article__anchor-conatiner" style={{ visibility: hidden ? 'hidden' : undefined }}>
-                      <DAnchor dPage=".app-main" dIndicator="line">
-                        {links.map((link) => (
-                          <DAnchorLink key={link.href} href={link.href} title={link.title} onClick={() => setMenuOpen(false)}>
-                            {link.title}
-                          </DAnchorLink>
-                        ))}
-                      </DAnchor>
-                    </div>
-                  )
-                }
-              ></DTransition>
-
+              {links.length > 0 && (
+                <div ref={ref} className="app-route-article__anchor-conatiner" style={{ visibility: hidden ? 'hidden' : undefined }}>
+                  <DAnchor dPage=".app-main" dIndicator="line">
+                    {links.map((link) => (
+                      <DAnchorLink key={link.href} href={link.href} title={link.title} onClick={() => setMenuOpen(false)}>
+                        {link.title}
+                      </DAnchorLink>
+                    ))}
+                  </DAnchor>
+                </div>
+              )}
               <div className="app-route-article__anchor-button" role="button" tabIndex={0} onClick={() => setMenuOpen(!menuOpen)}>
                 {icon(true)}
                 {icon(false)}

diff --git a/packages/site/src/app/configs/icons.json b/packages/site/src/app/configs/icons.json
@@ -120,5 +120,17 @@
         ]
       }
     ]
+  },
+  {
+    "name": "minus",
+    "list": [
+      {
+        "viewBox": "64 64 896 896",
+        "paths": [
+          "M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z",
+          "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+        ]
+      }
+    ]
   }
 ]
diff --git a/packages/site/src/app/routes/components/Interface.md b/packages/site/src/app/routes/components/Interface.md
@@ -3,7 +3,7 @@
 ## DElementSelector
 
 ```tsx
-export type DElementSelector = HTMLElement | null | string | (() => HTMLElement | null);
+type DElementSelector = HTMLElement | null | string | (() => HTMLElement | null);
 ```
 
 ## DPopupProps
@@ -36,7 +36,7 @@ Extend `React.HTMLAttributes<HTMLDivElement>`.
 ## DPopupRef
 
 ```tsx
-export interface DPopupRef {
+interface DPopupRef {
   el: HTMLDivElement | null;
   triggerEl: HTMLElement | null;
   updatePosition: () => void;
@@ -46,7 +46,7 @@ export interface DPopupRef {
 ## DTriggerRenderProps
 
 ```tsx
-export interface DTriggerRenderProps {
+interface DTriggerRenderProps {
   [key: `data-${string}popup-trigger`]: string;
   onMouseEnter?: React.MouseEventHandler<HTMLElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLElement>;
@@ -59,7 +59,7 @@ export interface DTriggerRenderProps {
 ## DTransitionStateList
 
 ```tsx
-export interface DTransitionStateList {
+interface DTransitionStateList {
   'enter-from'?: Partial<CSSStyleDeclaration>;
   'enter-active'?: Partial<CSSStyleDeclaration>;
   'enter-to'?: Partial<CSSStyleDeclaration>;

diff --git a/packages/site/src/app/routes/components/Interface.zh-Hant.md b/packages/site/src/app/routes/components/Interface.zh-Hant.md
@@ -3,7 +3,7 @@
 ## DElementSelector
 
 ```tsx
-export type DElementSelector = HTMLElement | null | string | (() => HTMLElement | null);
+type DElementSelector = HTMLElement | null | string | (() => HTMLElement | null);
 ```
 
 ## DPopupProps
@@ -36,7 +36,7 @@ export type DElementSelector = HTMLElement | null | string | (() => HTMLElement
 ## DPopupRef
 
 ```tsx
-export interface DPopupRef {
+interface DPopupRef {
   el: HTMLDivElement | null;
   triggerEl: HTMLElement | null;
   updatePosition: () => void;
@@ -46,7 +46,7 @@ export interface DPopupRef {
 ## DTriggerRenderProps
 
 ```tsx
-export interface DTriggerRenderProps {
+interface DTriggerRenderProps {
   [key: `data-${string}popup-trigger`]: string;
   onMouseEnter?: React.MouseEventHandler<HTMLElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLElement>;
@@ -59,7 +59,7 @@ export interface DTriggerRenderProps {
 ## DTransitionStateList
 
 ```tsx
-export interface DTransitionStateList {
+interface DTransitionStateList {
   'enter-from'?: Partial<CSSStyleDeclaration>;
   'enter-active'?: Partial<CSSStyleDeclaration>;
   'enter-to'?: Partial<CSSStyleDeclaration>;

diff --git a/packages/ui/src/components/_dialog/Dialog.tsx b/packages/ui/src/components/_dialog/Dialog.tsx
@@ -1,39 +1,34 @@
-import type { DTransitionProps } from '../_transition';
+import { useEffect, useCallback } from 'react';
 
-import React, { useId, useEffect, useCallback, useRef, useImperativeHandle } from 'react';
-
-import { usePrefixConfig, useAsync, useRefCallback } from '../../hooks';
+import { usePrefixConfig, useAsync } from '../../hooks';
 import { getClassName, mergeStyle } from '../../utils';
-import { DTransition } from '../_transition';
 import { DMask } from './Mask';
 
-export interface DDialogRef {
-  uniqueId: string;
-  el: HTMLDivElement | null;
-  contentEl: HTMLDivElement | null;
-}
-
 export interface DDialogProps extends React.HTMLAttributes<HTMLDivElement> {
+  dId: string;
   dVisible: boolean;
-  dCallbackList?: NonNullable<DTransitionProps['dCallbackList']>;
+  dHidden: boolean;
   dContentProps?: React.HTMLAttributes<HTMLDivElement>;
   dMask?: boolean;
   dMaskClosable?: boolean;
   dDestroy?: boolean;
+  dDialogRef?: React.LegacyRef<HTMLDivElement>;
+  dDialogContentRef?: React.LegacyRef<HTMLDivElement>;
   onClose?: () => void;
-  afterVisibleChange?: (visible: boolean) => void;
 }
 
-const Dialog: React.ForwardRefRenderFunction<DDialogRef, DDialogProps> = (props, ref) => {
+export function DDialog(props: DDialogProps) {
   const {
+    dId,
     dVisible,
-    dCallbackList,
+    dHidden,
     dContentProps,
     dMask = true,
     dMaskClosable = true,
     dDestroy = false,
+    dDialogRef,
+    dDialogContentRef,
     onClose,
-    afterVisibleChange,
     className,
     style,
     children,
@@ -44,17 +39,7 @@ const Dialog: React.ForwardRefRenderFunction<DDialogRef, DDialogProps> = (props,
   const dPrefix = usePrefixConfig();
   //#endregion
 
-  //#region Ref
-  const [dialogEl, dialogRef] = useRefCallback<HTMLDivElement>();
-  const [dialogContentEl, dialogContentRef] = useRefCallback<HTMLDivElement>();
-  //#endregion
-
-  const dataRef = useRef<{ preActiveEl: HTMLElement | null }>({
-    preActiveEl: null,
-  });
-
   const asyncCapture = useAsync();
-  const uniqueId = useId();
 
   const handleMaskClose = useCallback(() => {
     if (dMaskClosable) {
@@ -74,65 +59,31 @@ const Dialog: React.ForwardRefRenderFunction<DDialogRef, DDialogProps> = (props,
   }, [asyncCapture, dVisible, onClose]);
   //#endregion
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      uniqueId,
-      el: dialogEl,
-      contentEl: dialogContentEl,
-    }),
-    [dialogContentEl, dialogEl, uniqueId]
-  );
-
   return (
-    <DTransition
-      dEl={dialogContentEl}
-      dVisible={dVisible}
-      dCallbackList={{
-        ...dCallbackList,
-        beforeEnter: (el) => dCallbackList?.beforeEnter(el),
-        afterEnter: (el) => {
-          dCallbackList?.afterEnter?.(el);
-          dataRef.current.preActiveEl = document.activeElement as HTMLElement | null;
-          el.focus({ preventScroll: true });
-        },
-        beforeLeave: (el) => {
-          dataRef.current.preActiveEl?.focus({ preventScroll: true });
-          return dCallbackList?.beforeLeave(el);
-        },
-      }}
-      dRender={(hidden) =>
-        !(dDestroy && hidden) && (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {!(dDestroy && dHidden) && (
+        <div
+          {...restProps}
+          ref={dDialogRef}
+          className={getClassName(className, `${dPrefix}dialog`)}
+          style={mergeStyle(style, { display: dHidden ? 'none' : undefined })}
+          role="dialog"
+          aria-modal="true"
+          aria-describedby={`${dPrefix}dialog-content-${dId}`}
+        >
+          {dMask && <DMask dVisible={dVisible} onClose={handleMaskClose} />}
           <div
-            {...restProps}
-            ref={dialogRef}
-            className={getClassName(className, `${dPrefix}dialog`)}
-            style={mergeStyle(style, { display: hidden ? 'none' : undefined })}
-            role="dialog"
-            aria-modal="true"
-            aria-describedby={`${dPrefix}dialog-content-${uniqueId}`}
+            {...dContentProps}
+            ref={dDialogContentRef}
+            id={`${dPrefix}dialog-content-${dId}`}
+            className={getClassName(dContentProps?.className, `${dPrefix}dialog__content`)}
+            tabIndex={-1}
           >
-            {dMask && <DMask dVisible={dVisible} onClose={handleMaskClose} />}
-            <div
-              {...dContentProps}
-              ref={dialogContentRef}
-              id={`${dPrefix}dialog-content-${uniqueId}`}
-              className={getClassName(dContentProps?.className, `${dPrefix}dialog__content`)}
-              tabIndex={-1}
-            >
-              {children}
-            </div>
+            {children}
           </div>
-        )
-      }
-      afterEnter={() => {
-        afterVisibleChange?.(true);
-      }}
-      afterLeave={() => {
-        afterVisibleChange?.(false);
-      }}
-    />
+        </div>
+      )}
+    </>
   );
-};
-
-export const DDialog = React.forwardRef(Dialog);
+}