diff --git a/packages/site/src/app/components/route/RouteArticle.tsx b/packages/site/src/app/components/route/RouteArticle.tsx index 9627a165..c0532ec1 100644 --- 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> = { 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 && ( - + {(state) => (
setMenuOpen(false)} /> diff --git a/packages/site/src/app/routes/components/Interface.md b/packages/site/src/app/routes/components/Interface.md index 71e3cfa2..cd69b443 100644 --- 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`. | 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 index 6b267deb..d4e4be12 100644 --- 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 index b7e0c779..7b245eec 100644 --- 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 void; } -const TTANSITION_DURING = 116; function DateInput(props: DDateInputProps, ref: React.ForwardedRef) { const { children, @@ -308,7 +308,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef { e.stopPropagation(); @@ -327,7 +327,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef {containerEl && ReactDOM.createPortal( - + {(state) => { let transitionStyle: React.CSSProperties = {}; switch (state) { @@ -337,7 +337,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef, 'children'> { dAlign?: 'left' | 'center' | 'right'; - dButtons?: React.ReactNode[]; + dActions?: React.ReactNode[]; dCancelProps?: DButtonProps; dOkProps?: DButtonProps; onCancelClick?: () => void | boolean | Promise; @@ -19,7 +19,7 @@ export interface DFooterProps extends Omit, 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 (
- {dButtons.map((button, index) => + {dActions.map((button, index) => button === 'cancel' ? ( - {t('Cancel')} + {t('Footer', 'Cancel')} ) : button === 'ok' ? ( - {t('OK')} + {t('Footer', 'OK')} ) : ( {button} diff --git a/packages/ui/src/components/_header/Header.tsx b/packages/ui/src/components/_header/Header.tsx index b82d92c7..ca86c88f 100644 --- 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 { - 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 (
{children}
- {dExtraIcons && dExtraIcons.map((icon, index) => )} - {dClosable && ( - } - onClick={() => { - onClose?.(); - }} - > + {dActions.map((action, index) => + action === 'close' ? ( + } + onClick={() => { + onClose?.(); + }} + > + ) : ( + {action} + ) )}
diff --git a/packages/ui/src/components/_mask/Mask.tsx b/packages/ui/src/components/_mask/Mask.tsx index 4974aa8c..5827aa44 100644 --- 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, 'children'> { @@ -10,7 +11,6 @@ export interface DMaskProps extends Omit, ' 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> = { 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 ( { afterVisibleChange?.(true); }} diff --git a/packages/ui/src/components/_selectbox/Selectbox.tsx b/packages/ui/src/components/_selectbox/Selectbox.tsx index a11ec4a2..86831068 100644 --- 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 void; } -const TTANSITION_DURING = 116; function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef) { const { children, @@ -94,7 +94,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef(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 { e.stopPropagation(); @@ -320,7 +320,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef {containerEl && ReactDOM.createPortal( - + {(state) => { let transitionStyle: React.CSSProperties = {}; switch (state) { @@ -330,7 +330,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef { - children: (style: React.CSSProperties, state: DTransitionState) => JSX.Element | null; - dRef: React.RefObject; + children: (ref: React.RefObject, style: React.CSSProperties, state: DTransitionState) => JSX.Element | null; dSize: string | number; dHorizontal?: boolean; dStyles: Partial>; } 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(null); + return ( { 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); }} ); diff --git a/packages/ui/src/components/anchor/Anchor.tsx b/packages/ui/src/components/anchor/Anchor.tsx index 8ed76ee6..58698b31 100644 --- a/packages/ui/src/components/anchor/Anchor.tsx +++ b/packages/ui/src/components/anchor/Anchor.tsx @@ -28,8 +28,8 @@ export interface DAnchorProps extends Omit) => void; } -const DOT_INDICATOR = Symbol('dot'); -const LINE_INDICATOR = Symbol('line'); +const DOT_INDICATOR = Symbol(); +const LINE_INDICATOR = Symbol(); const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DAnchor' }); function Anchor(props: DAnchorProps, ref: React.ForwardedRef) { @@ -123,7 +123,7 @@ function Anchor(props: DAnchorProps, ref: React.Forw useEffect(() => { if (anchorRef.current && indicatorRef.current) { if (activeHref) { - const el = anchorRef.current.querySelector(`.${dPrefix}anchor-link.is-active`); + const el = anchorRef.current.querySelector(`.${dPrefix}anchor__link.is-active`); if (el) { const rect = el.getBoundingClientRect(); const top = rect.top - anchorRef.current.getBoundingClientRect().top + rect.height / 2; @@ -219,8 +219,8 @@ function Anchor(props: DAnchorProps, ref: React.Forw export const DAnchor: { (props: DAnchorProps & { ref?: React.ForwardedRef }): ReturnType; - DOT_INDICATOR?: typeof DOT_INDICATOR; - LINE_INDICATOR?: typeof LINE_INDICATOR; + DOT_INDICATOR: typeof DOT_INDICATOR; + LINE_INDICATOR: typeof LINE_INDICATOR; } = React.forwardRef(Anchor) as any; DAnchor.DOT_INDICATOR = DOT_INDICATOR; diff --git a/packages/ui/src/components/anchor/Link.tsx b/packages/ui/src/components/anchor/Link.tsx index f769400b..1a831e25 100644 --- a/packages/ui/src/components/anchor/Link.tsx +++ b/packages/ui/src/components/anchor/Link.tsx @@ -20,7 +20,7 @@ export function DLink(props: DLinkProps) { return (
  • ) { const { @@ -45,16 +45,12 @@ function Button(props: DButtonProps, ref: React.ForwardedRef) const { gSize, gDisabled } = useGeneralContext(); //#endregion - //#region Ref - const iconRef = useRef(null); - //#endregion - const [waveNode, wave] = useWave(); const size = dSize ?? gSize; const disabled = _disabled || dLoading || gDisabled; - const buttonIcon = (loading: boolean, style?: React.CSSProperties) => ( + const buttonIcon = (loading: boolean, iconRef?: React.RefObject, style?: React.CSSProperties) => (
    ) buttonIcon(dLoading) ) : ( - {(collapseStyle) => buttonIcon(true, collapseStyle)} + {(iconRef, collapseStyle) => buttonIcon(true, iconRef, collapseStyle)} )} {!dIconRight && children} diff --git a/packages/ui/src/components/cascader/Cascader.tsx b/packages/ui/src/components/cascader/Cascader.tsx index 02d0b5d8..c9503fad 100644 --- a/packages/ui/src/components/cascader/Cascader.tsx +++ b/packages/ui/src/components/cascader/Cascader.tsx @@ -328,7 +328,7 @@ function Cascader>(props: DCascaderP className={`${dPrefix}cascader__multiple-tag`} dSize={size} dClosable={!(node.disabled || disabled)} - onCloseClick={(e) => { + onClose={(e) => { e.stopPropagation(); const checkeds = (node as MultipleTreeNode).changeStatus('UNCHECKED', select as V[]); diff --git a/packages/ui/src/components/cascader/List.tsx b/packages/ui/src/components/cascader/List.tsx index ab9979e2..68b67c3e 100644 --- a/packages/ui/src/components/cascader/List.tsx +++ b/packages/ui/src/components/cascader/List.tsx @@ -56,7 +56,7 @@ export function DList>(props: DLis const dVSRef = useRef>>(null); //#endregion - const [t] = useTranslation('Common'); + const [t] = useTranslation(); const isFocus = dFocusNode && dNodes.findIndex((node) => node.id === dFocusNode.id) !== -1; const inFocusNode = (() => { @@ -169,7 +169,7 @@ export function DList>(props: DLis >(props: DLis {...renderProps} key={item.id} id={dGetOptionId(item.id)} - className={getClassName(`${dPrefix}cascader-list__option`, { + className={getClassName(`${dPrefix}cascader__option`, { 'is-focus': item.id === inFocusNode?.id, 'is-selected': !dMultiple && item.checked, 'is-disabled': item.disabled, @@ -209,11 +209,11 @@ export function DList>(props: DLis }} > )} -
    - {dCustomOption ? dCustomOption(item.origin) : item.origin.label} -
    +
    {dCustomOption ? dCustomOption(item.origin) : item.origin.label}
    {!item.isLeaf && ( -
    {item.origin.loading ? : }
    +
    + {item.origin.loading ? : } +
    )}
    • ); @@ -225,8 +225,8 @@ export function DList>(props: DLis dSize={264} dPadding={4} dEmpty={ -
  • -
    {t('No Data')}
    +
  • +
    {t('No Data')}
    • } /> diff --git a/packages/ui/src/components/cascader/SearchList.tsx b/packages/ui/src/components/cascader/SearchList.tsx index 14785b6c..4c0a7543 100644 --- a/packages/ui/src/components/cascader/SearchList.tsx +++ b/packages/ui/src/components/cascader/SearchList.tsx @@ -54,7 +54,7 @@ export function DSearchList>(props const dVSRef = useRef>>(null); //#endregion - const [t] = useTranslation('Common'); + const [t] = useTranslation(); const changeSelectByClick = useEventCallback((option: DSearchOption) => { if (dMultiple) { @@ -125,7 +125,7 @@ export function DSearchList>(props >(props {...renderProps} key={item.value} id={dGetOptionId(item.value)} - className={getClassName(`${dPrefix}cascader-search-list__option`, { + className={getClassName(`${dPrefix}cascader__option`, { 'is-selected': !dMultiple && inSelected, 'is-disabled': node.disabled, })} @@ -164,9 +164,7 @@ export function DSearchList>(props > {dFocusVisible && dFocusOption?.value === item.value &&
    } {dMultiple && } -
    - {dCustomOption ? dCustomOption(node.origin) : getText(node)} -
    +
    {dCustomOption ? dCustomOption(node.origin) : getText(node)}
    ); }} @@ -177,8 +175,8 @@ export function DSearchList>(props dSize={264} dPadding={4} dEmpty={ -
  • -
    {t('No Data')}
    +
  • +
    {t('No Data')}
    • } /> diff --git a/packages/ui/src/components/date-picker/DatePicker.tsx b/packages/ui/src/components/date-picker/DatePicker.tsx index 22977c35..92aaae8f 100644 --- a/packages/ui/src/components/date-picker/DatePicker.tsx +++ b/packages/ui/src/components/date-picker/DatePicker.tsx @@ -64,7 +64,7 @@ function DatePicker(props: DDatePickerProps, ref: React.ForwardedRef ( { const d = dPresetOptions[name](); @@ -141,7 +141,7 @@ function DatePicker(props: DDatePickerProps, ref: React.ForwardedRef - {t('DDatePicker', dShowTime ? 'Now' : 'Today')} + {t('DatePicker', dShowTime ? 'Now' : 'Today')} )}
    diff --git a/packages/ui/src/components/date-picker/DatePickerPanel.tsx b/packages/ui/src/components/date-picker/DatePickerPanel.tsx index e8867d0f..4c043c58 100644 --- a/packages/ui/src/components/date-picker/DatePickerPanel.tsx +++ b/packages/ui/src/components/date-picker/DatePickerPanel.tsx @@ -103,41 +103,39 @@ function DatePickerPanel(props: DDatePickerPanelProps, ref: React.ForwardedRef -
    +
    +
    - - {showDate.format(lang === 'zh-Hant' ? 'YYYY年 M月' : 'MMM YYYY')} - + {showDate.format(lang === 'zh-Hant' ? 'YYYY年 M月' : 'MMM YYYY')}
    - +
    {dayjs.weekdaysMin().map((day) => ( @@ -172,9 +170,9 @@ function DatePickerPanel(props: DDatePickerPanelProps, ref: React.ForwardedRef
    void; } -const TTANSITION_DURING = 200; const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DDrawer' }); export function DDrawer(props: DDrawerProps) { const { @@ -181,8 +181,8 @@ export function DDrawer(props: DDrawerProps) { return { enter: { transform }, - entering: { transition: `transform ${TTANSITION_DURING}ms ease-out` }, - leaving: { transform, transition: `transform ${TTANSITION_DURING}ms ease-in` }, + entering: { transition: `transform ${TTANSITION_DURING_BASE}ms ease-out` }, + leaving: { transform, transition: `transform ${TTANSITION_DURING_BASE}ms ease-in` }, leaved: { transform }, }; })(); @@ -217,7 +217,7 @@ export function DDrawer(props: DDrawerProps) { <> { afterVisibleChange?.(true); }} diff --git a/packages/ui/src/components/drawer/demos/1.Basic.md b/packages/ui/src/components/drawer/demos/1.Basic.md index bcc43c68..cf13179d 100644 --- a/packages/ui/src/components/drawer/demos/1.Basic.md +++ b/packages/ui/src/components/drawer/demos/1.Basic.md @@ -35,7 +35,9 @@ export default function Demo() { ]}>Basic Drawer} + dHeader={ + }>, 'close']}>Basic Drawer + } dFooter={ { diff --git a/packages/ui/src/components/drawer/demos/5.Footer.md b/packages/ui/src/components/drawer/demos/5.Footer.md index bf94f569..05ab80af 100644 --- a/packages/ui/src/components/drawer/demos/5.Footer.md +++ b/packages/ui/src/components/drawer/demos/5.Footer.md @@ -38,7 +38,7 @@ export default function Demo() { dFooter={ { diff --git a/packages/ui/src/components/dropdown/Dropdown.tsx b/packages/ui/src/components/dropdown/Dropdown.tsx index fe3f6756..3377826f 100644 --- a/packages/ui/src/components/dropdown/Dropdown.tsx +++ b/packages/ui/src/components/dropdown/Dropdown.tsx @@ -15,6 +15,7 @@ import { useIsomorphicLayoutEffect, } from '../../hooks'; import { registerComponentMate, getClassName, getNoTransformSize, getVerticalSidePosition, scrollElementToView } from '../../utils'; +import { TTANSITION_DURING_POPUP } from '../../utils/global'; import { DFocusVisible } from '../_focus-visible'; import { DPopup, useNestedPopup } from '../_popup'; import { DTransition } from '../_transition'; @@ -50,7 +51,6 @@ export interface DDropdownProps> onOptionClick?: (id: ID, option: DNestedChildren) => void; } -const TTANSITION_DURING = 116; const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DDropdown' }); function Dropdown>(props: DDropdownProps, ref: React.ForwardedRef) { const { @@ -86,7 +86,7 @@ function Dropdown>(props: DDropdow const ulRef = useRef(null); //#endregion - const [t] = useTranslation('Common'); + const [t] = useTranslation(); const [updatePosition$] = useState(() => new Subject()); @@ -354,7 +354,7 @@ function Dropdown>(props: DDropdow return ( { afterVisibleChange?.(true); @@ -372,7 +372,7 @@ function Dropdown>(props: DDropdow 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; @@ -381,7 +381,7 @@ function Dropdown>(props: DDropdow 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/dropdown/DropdownGroup.tsx b/packages/ui/src/components/dropdown/DropdownGroup.tsx index a41b3d47..f7a8785b 100644 --- a/packages/ui/src/components/dropdown/DropdownGroup.tsx +++ b/packages/ui/src/components/dropdown/DropdownGroup.tsx @@ -15,15 +15,15 @@ export function DDropdownGroup(props: DDropdownGroupProps) { const dPrefix = usePrefixConfig(); //#endregion - const [t] = useTranslation('Common'); + const [t] = useTranslation(); return ( -
      -