feat(animation): support close animation by custom global config

Tencent · Feb 28, 2022 · 4ac5f0d · 4ac5f0d
1 parent 6b93b8e
commit 4ac5f0d
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 10 deletions.
diff --git a/site/src/App.jsx b/site/src/App.jsx
@@ -77,7 +77,7 @@ function Components(props) {
   }, []);
 
   return (
-    <ConfigProvider /* locale={locale} */>
+    <ConfigProvider /* locale={locale}  globalConfig={{ animation: { exclude: ['ripple'] }}} */ >
       <td-doc-layout>
         <td-header ref={tdHeaderRef} slot="header">
           <td-doc-search slot="search" ref={tdDocSearch} />

diff --git a/src/_util/useAnimation.ts b/src/_util/useAnimation.ts
@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import useConfig from './useConfig';
+import { EAnimationType } from '../config-provider/ConfigContext';
+
+export default function useAnimation() {
+  const { animation } = useConfig();
+  const { expand, ripple, fade } = EAnimationType;
+
+  const keepAnimation = useCallback(
+    (type: EAnimationType) => animation && !animation.exclude?.includes(type) && animation.include?.includes(type),
+    [animation],
+  );
+
+  return {
+    keepExpand: keepAnimation(expand),
+    keepRipple: keepAnimation(ripple),
+    keepFade: keepAnimation(fade),
+  };
+}
diff --git a/src/_util/useRipple.ts b/src/_util/useRipple.ts
@@ -1,5 +1,6 @@
 import { useEffect, useCallback, RefObject, useMemo } from 'react';
 import useConfig from './useConfig';
+import useAnimation from './useAnimation';
 import setStyle from './setStyle';
 import { canUseDocument } from './dom';
 
@@ -37,6 +38,9 @@ const getRippleColor = (el: HTMLElement, fixedRippleColor?: string) => {
 export default function useRipple(ref: RefObject<HTMLElement>, fixedRippleColor?: string): void {
   const { classPrefix } = useConfig();
 
+  // 全局配置
+  const { keepRipple } = useAnimation();
+
   const rippleContainer = useMemo(() => {
     if (!canUseDocument) return null;
     return document.createElement('div');
@@ -48,7 +52,7 @@ export default function useRipple(ref: RefObject<HTMLElement>, fixedRippleColor?
       const el = ref?.current;
       const rippleColor = getRippleColor(el, fixedRippleColor);
 
-      if (e.button !== 0 || !el) return;
+      if (e.button !== 0 || !el || !keepRipple) return;
 
       if (
         el.classList.contains(`${classPrefix}-is-active`) ||
@@ -134,7 +138,7 @@ export default function useRipple(ref: RefObject<HTMLElement>, fixedRippleColor?
       el.addEventListener('pointerup', handleClearRipple, false);
       el.addEventListener('pointerleave', handleClearRipple, false);
     },
-    [classPrefix, ref, fixedRippleColor, rippleContainer],
+    [classPrefix, ref, fixedRippleColor, rippleContainer, keepRipple],
   );
 
   // 重置一些属性 为动画做准备 reset the node which uses the ripple animation

diff --git a/src/config-provider/ConfigContext.tsx b/src/config-provider/ConfigContext.tsx
@@ -3,9 +3,21 @@ import merge from 'lodash/merge';
 import defaultLocale from '../locale/zh_CN';
 import DEFAULT_GLOBAL_CONFIG from './defaultConfig';
 
+export enum EAnimationType {
+  ripple = 'ripple',
+  expand = 'expand',
+  fade = 'fade',
+}
+
 export const defaultClassPrefix = 't';
 
+export const defaultAnimation = {
+  include: [EAnimationType.ripple, EAnimationType.expand, EAnimationType.fade],
+  exclude: [],
+};
+
 export const defaultGlobalConfig = {
+  animation: defaultAnimation,
   classPrefix: defaultClassPrefix,
   ...merge(defaultLocale, DEFAULT_GLOBAL_CONFIG),
 };

diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md
@@ -5,8 +5,10 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+animation | Object | { include: ['ripple','expand','fade'], exclude: [] } | 动画效果控制，`ripple`指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。TS 类型：`Record<'include'|'exclude', Array<AnimationType>> ` `type AnimationType = 'ripple' | 'expand' | 'fade'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
 calendar | Object | - | 日历组件全局配置。TS 类型：`CalendarConfig` | N
 cascader | Object | - | 级联选择器全局配置。TS 类型：`CascaderConfig` | N
+classPrefix | String | t | CSS 类名前缀 | N
 datePicker | Object | - | 日期选择器全局配置。TS 类型：`DatePickerConfig` | N
 dialog | Object | - | 对话框全局配置。TS 类型：`DialogConfig` | N
 drawer | Object | - | 抽屉全局配置。TS 类型：`DrawerConfig` | N
@@ -45,7 +47,7 @@ total | String | '共 {total} 项数据' | 数据总条数文本，示例：`'to
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 cellMonth | String | '一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月' | 语言配置，月份描述文本 | N
-controllerConfig | Object | - | 日历右上角控制器按钮配置。TS 类型：`CalendarController`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
+controllerConfig | Object | - | 日历右上角控制器按钮配置。TS 类型：`CalendarController`，[Calendar API Documents](./calendar?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
 fillWithZero | Boolean | true | 当日期数字小于 10 时，是否使用 '0' 填充 | N
 firstDayOfWeek | Number | 1 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N
 hideWeekend | String | '隐藏周末' | 语言配置，“隐藏周末”描述文本 | N
@@ -102,7 +104,7 @@ now | String | '此刻' | “now” 描述文本 | N
 placeholder | Object | - | 占位符文本提示，默认值：`{ date: '请选择日期',  month: '请选择月份',  year: '请选择年份' }`。TS 类型：`{ date?: string; month?: string; year?: string }` | N
 preDecade | String | '上个十年' | “上个十年” 描述文本 | N
 preMonth | String | '上个月' | “上个月” 描述文本 | N
-presets | Object | - | 【暂不支持，讨论确认中】预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天':  dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型：`ConfigPresetDate`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
+presets | Object | - | 【暂不支持，讨论确认中】预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天':  dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型：`ConfigPresetDate` `interface ConfigPresetDate { [name: string]: DateConfigValue | (() => DateConfigValue) }` `type DateConfigValue = string | Date | Array<DateConfigValue>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
 preYear | String | '上一年' | “上一年” 描述文本 | N
 rangeSeparator | String | ' 至 ' | 范围分隔符描述文本，示例：' ~ ' | N
 selectDate | String | '选择日期' | “选择日期” 描述文本 | N
@@ -115,7 +117,7 @@ yearAriaLabel | String | '年' | “年” 描述文本 | N
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-cancel | Object | - | 取消按钮风格。TS 类型：`string | ButtonProps`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
+cancel | Object | - | 取消按钮风格。TS 类型：`string | ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
 confirm | Object | - | 确认按钮风格。TS 类型：`string | ButtonProps` | N
 confirmBtnTheme | Object | - | 确认按钮主题色，即 Dialog 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }。TS 类型：`{ default: string; info: string; warning: string; danger: string; success: string; }` | N
 
@@ -130,7 +132,7 @@ confirm | String | '确认' | “确认”描述文本。TS 类型：`string | B
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-cancel | String / Object | '取消' | “取消”描述文本。TS 类型：`string | ButtonProps`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
+cancel | String / Object | '取消' | “取消”描述文本。TS 类型：`string | ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
 confirm | String / Object | '确定' | “确定”描述文本。TS 类型：`string | ButtonProps` | N
 confirmBtnTheme | Object | - | 确认按钮主题色，即 Popconfirm 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }。TS 类型：`{ default: string; warning: string; danger: string; }` | N
 
@@ -188,7 +190,7 @@ dragger | Object | - | 语言配置，拖拽相关。示例：{ dragDropText: '
 file | Object | - | 语言配置，文件信息相关。示例：{  fileNameText: '文件名', fileSizeText: '文件尺寸', fileStatusText: '状态', fileOperationText: '操作', fileOperationDateText: '上传日期' }。TS 类型：`UploadConfigFileList` | N
 progress | Object | - | 语言配置，上传进度相关。示例：{ uploadText: '上传中', waitingText: '待上传', 'failText': '上传失败', successText: '上传成功' }。TS 类型：`UploadConfigProgress` | N
 sizeLimitMessage | String | '文件大小不能超过 {sizeLimit}' | 语言配置，文件大小超出限制时提醒文本 | N
-triggerUploadText | Object | - | 语言配置，上传功能触发文案。示例：{ image: '点击上传图片', normal: '点击上传',  fileInput: '选择文件',reupload: '重新上传',fileInput: '删除' }。TS 类型：`UploadTriggerUploadText`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
+triggerUploadText | Object | - | 语言配置，上传功能触发文案。示例：{ image: '点击上传图片', normal: '点击上传',  fileInput: '选择文件',reupload: '重新上传',fileInput: '删除' }。TS 类型：`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string,  fileInput?: string,  reupload?: string,  delete?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
 
 ### UploadConfigProgress
 

diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts
@@ -9,6 +9,11 @@ import { ButtonProps } from '../button';
 import { TNode, TElement } from '../common';
 
 export interface GlobalConfigProvider {
+  /**
+   * 动画效果控制，`ripple`指波纹动画， `expand` 指展开动画，`fade` 指渐变动画
+   * @default { include: ['ripple','expand','fade'], exclude: [] }
+   */
+  animation?: Record<'include' | 'exclude', Array<AnimationType>>;
   /**
    * 日历组件全局配置
    */
@@ -17,6 +22,11 @@ export interface GlobalConfigProvider {
    * 级联选择器全局配置
    */
   cascader?: CascaderConfig;
+  /**
+   * CSS 类名前缀
+   * @default t
+   */
+  classPrefix?: string;
   /**
    * 日期选择器全局配置
    */
@@ -634,6 +644,8 @@ export interface StepsConfig {
   errorIcon?: TElement;
 }
 
+export type AnimationType = 'ripple' | 'expand' | 'fade';
+
 export interface ConfigPresetDate {
   [name: string]: DateConfigValue | (() => DateConfigValue);
 }

diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx
@@ -13,8 +13,10 @@ import { CSSTransition } from 'react-transition-group';
 import classNames from 'classnames';
 import { usePopper } from 'react-popper';
 import { Placement } from '@popperjs/core';
+
 import { StyledProps } from '../common';
 import useDefault from '../_util/useDefault';
+import useAnimation from '../_util/useAnimation';
 import useConfig from '../_util/useConfig';
 import composeRefs from '../_util/composeRefs';
 import { TdPopupProps } from './type';
@@ -52,6 +54,10 @@ const Popup = forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
     expandAnimation,
   } = props;
   const { classPrefix } = useConfig();
+
+  // 全局配置
+  const { keepExpand, keepFade } = useAnimation();
+
   const [visible, setVisible] = useDefault(props.visible, defaultVisible, onVisibleChange);
 
   // refs
@@ -187,7 +193,8 @@ const Popup = forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
             nodeRef={popupRef}
             {...getTransitionParams({
               classPrefix,
-              expandAnimation,
+              expandAnimation: expandAnimation && keepExpand,
+              fadeAnimation: keepFade,
             })}
           >
             <div

diff --git a/src/popup/utils/getTransitionParams.ts b/src/popup/utils/getTransitionParams.ts
@@ -1,9 +1,14 @@
 export interface IAnimationTransitionParams {
   classPrefix: String;
   expandAnimation: boolean;
+  fadeAnimation: boolean;
 }
 
-const getTransitionParams = ({ classPrefix, expandAnimation }: IAnimationTransitionParams) => {
+const getTransitionParams = ({ classPrefix, expandAnimation, fadeAnimation }: IAnimationTransitionParams) => {
+  if (!fadeAnimation) {
+    return {};
+  }
+
   const popupAnimationClassPrefix = expandAnimation
     ? `${classPrefix}-popup--animation-expand`
     : `${classPrefix}-popup--animation`;