feat(ui): add upload component

DevCloudFE · Jul 6, 2022 · ef0e55c · ef0e55c
1 parent 069a05f
commit ef0e55c
Show file tree

Hide file tree

Showing 85 changed files with 2,472 additions and 718 deletions.
diff --git a/packages/site/src/app/components/route/RouteArticle.tsx b/packages/site/src/app/components/route/RouteArticle.tsx
@@ -7,6 +7,7 @@ import { DAnchor, useMediaMatch } from '@react-devui/ui';
 import { DTransition } from '@react-devui/ui/components/_transition';
 import { useImmer } from '@react-devui/ui/hooks';
 import { DCustomIcon } from '@react-devui/ui/icons';
+import { TTANSITION_DURING_BASE } from '@react-devui/ui/utils/global';
 
 import './RouteArticle.scss';
 import marked, { toString } from './utils';
@@ -17,7 +18,6 @@ export interface AppRouteArticleProps {
   children?: React.ReactNode;
 }
 
-const TTANSITION_DURING = 200;
 export function AppRouteArticle(props: AppRouteArticleProps) {
   const html = props.html ? marked(toString(props.html)) : undefined;
 
@@ -78,11 +78,11 @@ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
 
   const transitionStyles: Partial<Record<DTransitionState, React.CSSProperties>> = {
     enter: { opacity: 0, transform: 'translateY(120px)' },
-    entering: { transition: `opacity ${TTANSITION_DURING}ms linear, transform ${TTANSITION_DURING}ms ease-out` },
+    entering: { transition: `opacity ${TTANSITION_DURING_BASE}ms ease-out, transform ${TTANSITION_DURING_BASE}ms ease-out` },
     leaving: {
       opacity: 0,
       transform: 'translateY(120px)',
-      transition: `opacity ${TTANSITION_DURING}ms linear, transform ${TTANSITION_DURING}ms ease-in`,
+      transition: `opacity ${TTANSITION_DURING_BASE}ms ease-in, transform ${TTANSITION_DURING_BASE}ms ease-in`,
     },
     leaved: { display: 'none' },
   };
@@ -93,7 +93,7 @@ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
       {!mediaMatch.includes('md') && (
         <>
           {links.length > 0 && (
-            <DTransition dIn={menuOpen} dDuring={TTANSITION_DURING}>
+            <DTransition dIn={menuOpen} dDuring={TTANSITION_DURING_BASE}>
               {(state) => (
                 <div className="app-route-article__anchor-conatiner" style={transitionStyles[state]}>
                   <DAnchor dLinks={links} dPage=".app-main" dIndicator={DAnchor.LINE_INDICATOR} onLinkClick={() => setMenuOpen(false)} />

diff --git a/packages/site/src/app/routes/components/Interface.md b/packages/site/src/app/routes/components/Interface.md
@@ -90,7 +90,7 @@ Extend `React.HTMLAttributes<HTMLDivElement>`.
 | Property | Description | Type | Default | 
 | --- | --- | --- | --- | 
 | dAlign | Set the horizontal position of the button | 'left' \| 'center' \| 'right' | 'right' |
-| dButtons | Custom button, `'cancel'` stands for cancel button, `'ok'` stands for OK button | React.ReactNode[] | `['cancel', 'ok']` |
+| dActions | Custom button, `'cancel'` stands for cancel button, `'ok'` stands for OK button | React.ReactNode[] | `['cancel', 'ok']` |
 | dOkButtonProps | Provide additional `Props` for the OK button | [DButtonProps](/components/Button#DButtonProps) | - |
 | dCancelButtonProps | Provide additional `Props` for the cancel button | [DButtonProps](/components/Button#DButtonProps) | - |
 | onOkClick | The callback of clicking the OK button | `() => void` | - |

diff --git a/packages/site/src/app/routes/components/Interface.zh-Hant.md b/packages/site/src/app/routes/components/Interface.zh-Hant.md
@@ -90,7 +90,7 @@ interface DTransitionStateList {
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | dAlign | 设置按钮的水平位置 | 'left' \| 'center' \| 'right' | 'right' |
-| dButtons | 自定义按钮，`'cancel'` 代表取消按钮，`'ok'` 代表确定按钮 | React.ReactNode[] | `['cancel', 'ok']` |
+| dActions | 自定义按钮，`'cancel'` 代表取消按钮，`'ok'` 代表确定按钮 | React.ReactNode[] | `['cancel', 'ok']` |
 | dOkButtonProps | 为确定按钮提供额外的 `Props` | [DButtonProps](/components/Button#DButtonProps) | - |
 | dCancelButtonProps | 为取消按钮提供额外的 `Props` | [DButtonProps](/components/Button#DButtonProps) | - |
 | onOkClick | 点击确定按钮的回调 | `() => void` | - |

diff --git a/packages/ui/src/components/_date-input/DateInput.tsx b/packages/ui/src/components/_date-input/DateInput.tsx
@@ -17,6 +17,7 @@ import {
 } from '../../hooks';
 import { CloseCircleFilled, SwapRightOutlined } from '../../icons';
 import { getClassName, getNoTransformSize, getVerticalSidePosition } from '../../utils';
+import { TTANSITION_DURING_POPUP } from '../../utils/global';
 import { ICON_SIZE } from '../../utils/global';
 import { DBaseDesign } from '../_base-design';
 import { DBaseInput } from '../_base-input';
@@ -49,7 +50,6 @@ export interface DDateInputProps extends Omit<React.HTMLAttributes<HTMLDivElemen
   onClear?: () => void;
 }
 
-const TTANSITION_DURING = 116;
 function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef>) {
   const {
     children,
@@ -308,7 +308,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
             <button
               className={getClassName(`${dPrefix}icon-button`, `${dPrefix}date-input__clear`)}
               style={{ width: iconSize, height: iconSize }}
-              aria-label={t('Common', 'Clear')}
+              aria-label={t('Clear')}
               onClick={(e) => {
                 e.stopPropagation();
 
@@ -327,7 +327,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
       </DBaseDesign>
       {containerEl &&
         ReactDOM.createPortal(
-          <DTransition dIn={dVisible} dDuring={TTANSITION_DURING} onEnterRendered={updatePosition}>
+          <DTransition dIn={dVisible} dDuring={TTANSITION_DURING_POPUP} onEnterRendered={updatePosition}>
             {(state) => {
               let transitionStyle: React.CSSProperties = {};
               switch (state) {
@@ -337,7 +337,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
 
                 case 'entering':
                   transitionStyle = {
-                    transition: `transform ${TTANSITION_DURING}ms ease-out, opacity ${TTANSITION_DURING}ms ease-out`,
+                    transition: `transform ${TTANSITION_DURING_POPUP}ms ease-out, opacity ${TTANSITION_DURING_POPUP}ms ease-out`,
                     transformOrigin,
                   };
                   break;
@@ -346,7 +346,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
                   transitionStyle = {
                     transform: 'scaleY(0.7)',
                     opacity: 0,
-                    transition: `transform ${TTANSITION_DURING}ms ease-in, opacity ${TTANSITION_DURING}ms ease-in`,
+                    transition: `transform ${TTANSITION_DURING_POPUP}ms ease-in, opacity ${TTANSITION_DURING_POPUP}ms ease-in`,
                     transformOrigin,
                   };
                   break;

diff --git a/packages/ui/src/components/_footer/Footer.tsx b/packages/ui/src/components/_footer/Footer.tsx
@@ -8,7 +8,7 @@ import { DButton } from '../button';
 
 export interface DFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   dAlign?: 'left' | 'center' | 'right';
-  dButtons?: React.ReactNode[];
+  dActions?: React.ReactNode[];
   dCancelProps?: DButtonProps;
   dOkProps?: DButtonProps;
   onCancelClick?: () => void | boolean | Promise<void | boolean>;
@@ -19,7 +19,7 @@ export interface DFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 export function DFooter(props: DFooterProps) {
   const {
     dAlign = 'right',
-    dButtons = ['cancel', 'ok'],
+    dActions = ['cancel', 'ok'],
     dCancelProps,
     dOkProps,
     onCancelClick,
@@ -34,7 +34,7 @@ export function DFooter(props: DFooterProps) {
   const dPrefix = usePrefixConfig();
   //#endregion
 
-  const [t] = useTranslation('DFooter');
+  const [t] = useTranslation();
 
   const [cancelLoading, setCancelLoading] = useState(false);
   const [okLoading, setOkLoading] = useState(false);
@@ -79,14 +79,14 @@ export function DFooter(props: DFooterProps) {
 
   return (
     <div {...restProps} className={getClassName(className, `${dPrefix}footer`, `${dPrefix}footer--${dAlign}`)}>
-      {dButtons.map((button, index) =>
+      {dActions.map((button, index) =>
         button === 'cancel' ? (
           <DButton key="cancel" {...cancelProps} dType="secondary">
-            {t('Cancel')}
+            {t('Footer', 'Cancel')}
           </DButton>
         ) : button === 'ok' ? (
           <DButton key="ok" {...okProps}>
-            {t('OK')}
+            {t('Footer', 'OK')}
           </DButton>
         ) : (
           <React.Fragment key={index}>{button}</React.Fragment>

diff --git a/packages/ui/src/components/_header/Header.tsx b/packages/ui/src/components/_header/Header.tsx
@@ -1,19 +1,19 @@
+import React from 'react';
+
 import { usePrefixConfig, useTranslation } from '../../hooks';
 import { CloseOutlined } from '../../icons';
 import { getClassName } from '../../utils';
 import { DButton } from '../button';
 
 export interface DHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  dClosable?: boolean;
-  dExtraIcons?: React.ReactNode[];
+  dActions?: React.ReactNode[];
   onClose?: () => void;
 }
 
 export function DHeader(props: DHeaderProps) {
   const {
     children,
-    dClosable = true,
-    dExtraIcons,
+    dActions = ['close'],
     onClose,
 
     className,
@@ -24,22 +24,26 @@ export function DHeader(props: DHeaderProps) {
   const dPrefix = usePrefixConfig();
   //#endregion
 
-  const [t] = useTranslation('Common');
+  const [t] = useTranslation();
 
   return (
     <div {...restProps} className={getClassName(className, `${dPrefix}header`)}>
       <div className={`${dPrefix}header__title`}>{children}</div>
       <div className={`${dPrefix}header__buttons`}>
-        {dExtraIcons && dExtraIcons.map((icon, index) => <DButton key={index} dType="text" dIcon={icon}></DButton>)}
-        {dClosable && (
-          <DButton
-            aria-label={t('Close')}
-            dType="text"
-            dIcon={<CloseOutlined />}
-            onClick={() => {
-              onClose?.();
-            }}
-          ></DButton>
+        {dActions.map((action, index) =>
+          action === 'close' ? (
+            <DButton
+              key="close"
+              aria-label={t('Close')}
+              dType="text"
+              dIcon={<CloseOutlined />}
+              onClick={() => {
+                onClose?.();
+              }}
+            ></DButton>
+          ) : (
+            <React.Fragment key={index}>{action}</React.Fragment>
+          )
         )}
       </div>
     </div>

diff --git a/packages/ui/src/components/_mask/Mask.tsx b/packages/ui/src/components/_mask/Mask.tsx
@@ -2,6 +2,7 @@ import type { DTransitionState } from '../_transition';
 
 import { usePrefixConfig } from '../../hooks';
 import { getClassName } from '../../utils';
+import { TTANSITION_DURING_FAST } from '../../utils/global';
 import { DTransition } from '../_transition';
 
 export interface DMaskProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -10,7 +11,6 @@ export interface DMaskProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
   afterVisibleChange?: (visible: boolean) => void;
 }
 
-const TTANSITION_DURING = 100;
 export function DMask(props: DMaskProps) {
   const {
     dVisible,
@@ -29,15 +29,15 @@ export function DMask(props: DMaskProps) {
 
   const transitionStyles: Partial<Record<DTransitionState, React.CSSProperties>> = {
     enter: { opacity: 0 },
-    entering: { transition: `opacity ${TTANSITION_DURING}ms linear` },
-    leaving: { opacity: 0, transition: `opacity ${TTANSITION_DURING}ms linear` },
+    entering: { transition: `opacity ${TTANSITION_DURING_FAST}ms linear` },
+    leaving: { opacity: 0, transition: `opacity ${TTANSITION_DURING_FAST}ms linear` },
     leaved: { display: 'none' },
   };
 
   return (
     <DTransition
       dIn={dVisible}
-      dDuring={TTANSITION_DURING}
+      dDuring={TTANSITION_DURING_FAST}
       afterEnter={() => {
         afterVisibleChange?.(true);
       }}

diff --git a/packages/ui/src/components/_selectbox/Selectbox.tsx b/packages/ui/src/components/_selectbox/Selectbox.tsx
@@ -18,6 +18,7 @@ import {
 } from '../../hooks';
 import { CloseCircleFilled, DownOutlined, LoadingOutlined, SearchOutlined } from '../../icons';
 import { getClassName } from '../../utils';
+import { TTANSITION_DURING_POPUP } from '../../utils/global';
 import { ICON_SIZE } from '../../utils/global';
 import { DBaseDesign } from '../_base-design';
 import { DBaseInput } from '../_base-input';
@@ -56,7 +57,6 @@ export interface DSelectboxProps extends Omit<React.HTMLAttributes<HTMLDivElemen
   onClear?: () => void;
 }
 
-const TTANSITION_DURING = 116;
 function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef>) {
   const {
     children,
@@ -94,7 +94,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
   const inputRef = useRef<HTMLInputElement>(null);
   //#endregion
 
-  const combineInputRef = useForkRef(dInputRef, inputRef);
+  const combineInputRef = useForkRef(inputRef, dInputRef);
 
   const asyncCapture = useAsync();
   const [t] = useTranslation();
@@ -295,7 +295,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
             <button
               className={getClassName(`${dPrefix}icon-button`, `${dPrefix}selectbox__clear`)}
               style={{ width: iconSize, height: iconSize }}
-              aria-label={t('Common', 'Clear')}
+              aria-label={t('Clear')}
               onClick={(e) => {
                 e.stopPropagation();
 
@@ -320,7 +320,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
       </DBaseDesign>
       {containerEl &&
         ReactDOM.createPortal(
-          <DTransition dIn={dVisible} dDuring={TTANSITION_DURING} onEnterRendered={updatePosition}>
+          <DTransition dIn={dVisible} dDuring={TTANSITION_DURING_POPUP} onEnterRendered={updatePosition}>
             {(state) => {
               let transitionStyle: React.CSSProperties = {};
               switch (state) {
@@ -330,7 +330,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
 
                 case 'entering':
                   transitionStyle = {
-                    transition: `transform ${TTANSITION_DURING}ms ease-out, opacity ${TTANSITION_DURING}ms ease-out`,
+                    transition: `transform ${TTANSITION_DURING_POPUP}ms ease-out, opacity ${TTANSITION_DURING_POPUP}ms ease-out`,
                     transformOrigin,
                   };
                   break;
@@ -339,7 +339,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
                   transitionStyle = {
                     transform: 'scaleY(0.7)',
                     opacity: 0,
-                    transition: `transform ${TTANSITION_DURING}ms ease-in, opacity ${TTANSITION_DURING}ms ease-in`,
+                    transition: `transform ${TTANSITION_DURING_POPUP}ms ease-in, opacity ${TTANSITION_DURING_POPUP}ms ease-in`,
                     transformOrigin,
                   };
                   break;

diff --git a/packages/ui/src/components/_transition/CollapseTransition.tsx b/packages/ui/src/components/_transition/CollapseTransition.tsx
@@ -5,15 +5,14 @@ import { useRef } from 'react';
 import { DTransition } from './Transition';
 
 export interface DCollapseTransitionProps extends Omit<DTransitionProps, 'children'> {
-  children: (style: React.CSSProperties, state: DTransitionState) => JSX.Element | null;
-  dRef: React.RefObject<HTMLElement>;
+  children: (ref: React.RefObject<any>, style: React.CSSProperties, state: DTransitionState) => JSX.Element | null;
   dSize: string | number;
   dHorizontal?: boolean;
   dStyles: Partial<Record<DTransitionState, React.CSSProperties>>;
 }
 
 export function DCollapseTransition(props: DCollapseTransitionProps) {
-  const { children, dRef, dSize, dHorizontal = false, dStyles, onEnterRendered, ...restProps } = props;
+  const { children, dSize, dHorizontal = false, dStyles, onEnterRendered, ...restProps } = props;
 
   const dataRef = useRef<{
     width: number;
@@ -23,26 +22,28 @@ export function DCollapseTransition(props: DCollapseTransitionProps) {
     height: 0,
   });
 
+  const ref = useRef<HTMLElement>(null);
+
   return (
     <DTransition
       {...restProps}
       onEnterRendered={() => {
         onEnterRendered?.();
 
-        if (dRef.current) {
-          const cssText = dRef.current.style.cssText;
+        if (ref.current) {
+          const cssText = ref.current.style.cssText;
 
           if (dHorizontal) {
-            dRef.current.style.width = '';
-            const { width } = dRef.current.getBoundingClientRect();
+            ref.current.style.width = '';
+            const { width } = ref.current.getBoundingClientRect();
             dataRef.current.width = width;
           } else {
-            dRef.current.style.height = '';
-            const { height } = dRef.current.getBoundingClientRect();
+            ref.current.style.height = '';
+            const { height } = ref.current.getBoundingClientRect();
             dataRef.current.height = height;
           }
 
-          dRef.current.style.cssText = cssText;
+          ref.current.style.cssText = cssText;
         }
       }}
     >
@@ -64,8 +65,8 @@ export function DCollapseTransition(props: DCollapseTransitionProps) {
             break;
 
           case 'leave':
-            if (dRef.current) {
-              const { width, height } = dRef.current.getBoundingClientRect();
+            if (ref.current) {
+              const { width, height } = ref.current.getBoundingClientRect();
               dataRef.current.width = width;
               dataRef.current.height = height;
             }
@@ -93,7 +94,7 @@ export function DCollapseTransition(props: DCollapseTransitionProps) {
             break;
         }
 
-        return children(transitionStyle, state);
+        return children(ref, transitionStyle, state);
       }}
     </DTransition>
   );