feat(config-provider ): wave config (#7036)

Author: kovsu

components/_util/wave/index.tsx

@@ -26,7 +26,7 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const instance = getCurrentInstance();
-    const { prefixCls } = useConfigInject('wave', props);
+    const { prefixCls, wave } = useConfigInject('wave', props);
 
     // ============================== Style ===============================
     const [, hashId] = useStyle(prefixCls);
@@ -35,6 +35,7 @@ export default defineComponent({
     const showWave = useWave(
       instance,
       computed(() => classNames(prefixCls.value, hashId.value)),
+      wave,
     );
     let onClick: (e: MouseEvent) => void;
     const clear = () => {

components/_util/wave/useWave.ts

@@ -1,14 +1,19 @@
-import type { ComponentInternalInstance, Ref } from 'vue';
+import type { ComponentInternalInstance, ComputedRef, Ref } from 'vue';
 import { findDOMNode } from '../props-util';
 import showWaveEffect from './WaveEffect';
 
 export default function useWave(
   instance: ComponentInternalInstance | null,
   className: Ref<string>,
+  wave: ComputedRef<{ disabled?: boolean }>,
 ): VoidFunction {
   function showWave() {
     const node = findDOMNode(instance);
 
+    if (wave.value?.disabled || !node) {
+      return;
+    }
+
     showWaveEffect(node, className.value);
   }
 

components/config-provider/context.ts

@@ -105,6 +105,9 @@ export const configProviderProps = () => ({
   select: objectType<{
     showSearch?: boolean;
   }>(),
+  wave: objectType<{
+    disabled?: boolean;
+  }>(),
 });
 
 export type ConfigProviderProps = Partial<ExtractPropTypes<ReturnType<typeof configProviderProps>>>;
@@ -145,6 +148,9 @@ export interface ConfigProviderInnerProps {
   componentSize?: ComputedRef<SizeType>;
   componentDisabled?: ComputedRef<boolean>;
   transformCellText?: ComputedRef<(tableProps: TransformCellTextProps) => any>;
+  wave?: ComputedRef<{
+    disabled?: boolean;
+  }>;
 }
 
 export const configProviderKey: InjectionKey<ConfigProviderInnerProps> = Symbol('configProvider');

components/config-provider/hooks/useConfigInject.ts

@@ -42,6 +42,10 @@ export default (name: string, props: Record<any, any>) => {
   );
   const disabled = computed<boolean>(() => props.disabled ?? disabledContext.value);
   const csp = computed(() => props.csp ?? configProvider.csp);
+  const wave = computed<{
+    disabled?: boolean;
+  }>(() => props.wave ?? configProvider.wave.value);
+
   return {
     configProvider,
     prefixCls,
@@ -63,5 +67,6 @@ export default (name: string, props: Record<any, any>) => {
     iconPrefixCls,
     disabled,
     select: configProvider.select,
+    wave,
   };
 };

components/config-provider/index.tsx

@@ -197,6 +197,7 @@ const ConfigProvider = defineComponent({
     );
     const componentSize = computed(() => props.componentSize);
     const componentDisabled = computed(() => props.componentDisabled);
+    const wave = computed(() => props.wave ?? parentContext.wave?.value);
     const configProvider: ConfigProviderInnerProps = {
       csp,
       autoInsertSpaceInButton,
@@ -221,6 +222,7 @@ const ConfigProvider = defineComponent({
       componentSize,
       componentDisabled,
       transformCellText: computed(() => props.transformCellText),
+      wave,
     };
 
     // ================================ Dynamic theme ================================