demo: migrate wave demo from ConfigProvider to Button (#56303)

* demo: migrate wave demo from ConfigProvider to Button

* update

* update

components/button/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -4411,3 +4411,52 @@ exports[`renders components/button/demo/style-class.tsx extend context correctly
 `;
 
 exports[`renders components/button/demo/style-class.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/button/demo/wave.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-large"
+>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Disabled
+    </span>
+  </button>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Default
+    </span>
+  </button>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Inset
+    </span>
+  </button>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Shake
+    </span>
+  </button>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Happy Work
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders components/button/demo/wave.tsx extend context correctly 2`] = `[]`;

components/button/__tests__/__snapshots__/demo.test.ts.snap

@@ -3880,3 +3880,50 @@ exports[`renders components/button/demo/style-class.tsx correctly 1`] = `
   </button>
 </div>
 `;
+
+exports[`renders components/button/demo/wave.tsx correctly 1`] = `
+<div
+  class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-large"
+>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Disabled
+    </span>
+  </button>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Default
+    </span>
+  </button>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Inset
+    </span>
+  </button>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Shake
+    </span>
+  </button>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Happy Work
+    </span>
+  </button>
+</div>
+`;

components/button/demo/wave.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+波纹效果带来了灵动性，你也可以使用 [`@ant-design/happy-work-theme`](https://github.com/ant-design/happy-work-theme) 提供的 HappyProvider 实现动态波纹效果。
+
+## en-US
+
+Wave effect brings dynamic. You can also use HappyProvider from [`@ant-design/happy-work-theme`](https://github.com/ant-design/happy-work-theme) to implement dynamic wave effect.

components/button/demo/wave.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { HappyProvider } from '@ant-design/happy-work-theme';
+import { Button, ConfigProvider, Flex } from 'antd';
+import type { ConfigProviderProps, GetProp } from 'antd';
+
+type WaveConfig = GetProp<ConfigProviderProps, 'wave'>;
+
+// Prepare effect holder
+const createHolder = (node: HTMLElement) => {
+  const { borderWidth } = getComputedStyle(node);
+  const borderWidthNum = Number.parseInt(borderWidth, 10);
+
+  const div = document.createElement('div');
+  div.style.position = 'absolute';
+  div.style.inset = `-${borderWidthNum}px`;
+  div.style.borderRadius = 'inherit';
+  div.style.background = 'transparent';
+  div.style.zIndex = '999';
+  div.style.pointerEvents = 'none';
+  div.style.overflow = 'hidden';
+  node.appendChild(div);
+
+  return div;
+};
+
+const createDot = (holder: HTMLElement, color: string, left: number, top: number, size = 0) => {
+  const dot = document.createElement('div');
+  dot.style.position = 'absolute';
+  dot.style.left = `${left}px`;
+  dot.style.top = `${top}px`;
+  dot.style.width = `${size}px`;
+  dot.style.height = `${size}px`;
+  dot.style.borderRadius = '50%';
+  dot.style.background = color;
+  dot.style.transform = 'translate3d(-50%, -50%, 0)';
+  dot.style.transition = 'all 1s ease-out';
+  holder.appendChild(dot);
+  return dot;
+};
+
+// Inset Effect
+const showInsetEffect: WaveConfig['showEffect'] = (node, { event, component }) => {
+  if (component !== 'Button') {
+    return;
+  }
+
+  const holder = createHolder(node);
+
+  const rect = holder.getBoundingClientRect();
+
+  const left = event.clientX - rect.left;
+  const top = event.clientY - rect.top;
+
+  const dot = createDot(holder, 'rgba(255, 255, 255, 0.65)', left, top);
+
+  // Motion
+  requestAnimationFrame(() => {
+    dot.ontransitionend = () => {
+      holder.remove();
+    };
+
+    dot.style.width = '200px';
+    dot.style.height = '200px';
+    dot.style.opacity = '0';
+  });
+};
+
+// Shake Effect
+const showShakeEffect: WaveConfig['showEffect'] = (node, { component }) => {
+  if (component !== 'Button') {
+    return;
+  }
+
+  const seq = [0, -15, 15, -5, 5, 0];
+  const itv = 10;
+
+  let steps = 0;
+
+  const loop = () => {
+    cancelAnimationFrame((node as any).effectTimeout);
+
+    (node as any).effectTimeout = requestAnimationFrame(() => {
+      const currentStep = Math.floor(steps / itv);
+      const current = seq[currentStep];
+      const next = seq[currentStep + 1];
+
+      if (next === undefined || next === null) {
+        node.style.transform = '';
+        node.style.transition = '';
+        return;
+      }
+
+      // Trans from current to next by itv
+      const angle = current + ((next - current) / itv) * (steps % itv);
+
+      node.style.transform = `rotate(${angle}deg)`;
+      node.style.transition = 'none';
+
+      steps += 1;
+      loop();
+    });
+  };
+
+  loop();
+};
+
+// Component
+const Wrapper: React.FC<WaveConfig & { name: string }> = ({ name, ...wave }) => (
+  <ConfigProvider wave={wave}>
+    <Button type="primary">{name}</Button>
+  </ConfigProvider>
+);
+
+const Demo: React.FC = () => (
+  <Flex gap="large" wrap>
+    <Wrapper name="Disabled" disabled />
+    <Wrapper name="Default" />
+    <Wrapper name="Inset" showEffect={showInsetEffect} />
+    <Wrapper name="Shake" showEffect={showShakeEffect} />
+    <HappyProvider>
+      <Button type="primary">Happy Work</Button>
+    </HappyProvider>
+  </Flex>
+);
+
+export default Demo;

components/button/index.en-US.md

@@ -52,6 +52,7 @@ And 4 other properties additionally.
 <code src="./demo/chinese-chars-loading.tsx" debug>Loading style bug</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
 <code src="./demo/linear-gradient.tsx">Gradient Button</code>
+<code src="./demo/wave.tsx">Custom Wave</code>
 <code src="./demo/custom-disabled-bg.tsx">Custom disabled backgroundColor</code>
 <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>
 

components/button/index.zh-CN.md

@@ -53,6 +53,7 @@ group:
 <code src="./demo/chinese-chars-loading.tsx" debug>加载中状态 bug 还原</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
 <code src="./demo/linear-gradient.tsx">渐变按钮</code>
+<code src="./demo/wave.tsx">自定义按钮波纹</code>
 <code src="./demo/chinese-space.tsx" version="5.17.0">移除两个汉字之间的空格</code>
 <code src="./demo/custom-disabled-bg.tsx">自定义禁用样式背景</code>
 <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code>

components/config-provider/demo/wave.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { HappyProvider } from '@ant-design/happy-work-theme';
-import { Button, ConfigProvider, Space } from 'antd';
+import { Button, ConfigProvider, Flex } from 'antd';
 import type { ConfigProviderProps, GetProp } from 'antd';
 
 type WaveConfig = GetProp<ConfigProviderProps, 'wave'>;
@@ -32,10 +32,9 @@ const createDot = (holder: HTMLElement, color: string, left: number, top: number
   dot.style.height = `${size}px`;
   dot.style.borderRadius = '50%';
   dot.style.background = color;
-  dot.style.transform = 'translate(-50%, -50%)';
+  dot.style.transform = 'translate3d(-50%, -50%, 0)';
   dot.style.transition = 'all 1s ease-out';
   holder.appendChild(dot);
-
   return dot;
 };
 
@@ -77,7 +76,7 @@ const showShakeEffect: WaveConfig['showEffect'] = (node, { component }) => {
 
   let steps = 0;
 
-  function loop() {
+  const loop = () => {
     cancelAnimationFrame((node as any).effectTimeout);
 
     (node as any).effectTimeout = requestAnimationFrame(() => {
@@ -85,7 +84,7 @@ const showShakeEffect: WaveConfig['showEffect'] = (node, { component }) => {
       const current = seq[currentStep];
       const next = seq[currentStep + 1];
 
-      if (!next) {
+      if (next === undefined || next === null) {
         node.style.transform = '';
         node.style.transition = '';
         return;
@@ -100,20 +99,20 @@ const showShakeEffect: WaveConfig['showEffect'] = (node, { component }) => {
       steps += 1;
       loop();
     });
-  }
+  };
 
   loop();
 };
 
 // Component
-const Wrapper = ({ name, ...wave }: WaveConfig & { name: string }) => (
+const Wrapper: React.FC<WaveConfig & { name: string }> = ({ name, ...wave }) => (
   <ConfigProvider wave={wave}>
     <Button type="primary">{name}</Button>
   </ConfigProvider>
 );
 
-const App = () => (
-  <Space style={{ padding: 24 }} size="large">
+const Demo: React.FC = () => (
+  <Flex gap="large" wrap>
     <Wrapper name="Disabled" disabled />
     <Wrapper name="Default" />
     <Wrapper name="Inset" showEffect={showInsetEffect} />
@@ -121,7 +120,7 @@ const App = () => (
     <HappyProvider>
       <Button type="primary">Happy Work</Button>
     </HappyProvider>
-  </Space>
+  </Flex>
 );
 
-export default App;
+export default Demo;