first commit

frontend/node_modules/antd/es/_util/wave/WaveEffect.d.ts

@@ -0,0 +1,10 @@
+import type { UnmountType } from '../../config-provider/UnstableContext';
+import type { ShowWaveEffect } from './interface';
+export interface WaveEffectProps {
+    className: string;
+    target: HTMLElement;
+    component?: string;
+    registerUnmount: () => UnmountType | null;
+}
+declare const showWaveEffect: ShowWaveEffect;
+export default showWaveEffect;

frontend/node_modules/antd/es/_util/wave/WaveEffect.js

@@ -0,0 +1,142 @@
+"use client";
+
+import * as React from 'react';
+import classNames from 'classnames';
+import CSSMotion from 'rc-motion';
+import raf from "rc-util/es/raf";
+import { composeRef } from "rc-util/es/ref";
+import { unstableSetRender } from '../../config-provider/UnstableContext';
+import { TARGET_CLS } from './interface';
+import { getTargetWaveColor } from './util';
+function validateNum(value) {
+  return Number.isNaN(value) ? 0 : value;
+}
+const WaveEffect = props => {
+  const {
+    className,
+    target,
+    component,
+    registerUnmount
+  } = props;
+  const divRef = React.useRef(null);
+  // ====================== Refs ======================
+  const unmountRef = React.useRef(null);
+  React.useEffect(() => {
+    unmountRef.current = registerUnmount();
+  }, []);
+  // ===================== Effect =====================
+  const [color, setWaveColor] = React.useState(null);
+  const [borderRadius, setBorderRadius] = React.useState([]);
+  const [left, setLeft] = React.useState(0);
+  const [top, setTop] = React.useState(0);
+  const [width, setWidth] = React.useState(0);
+  const [height, setHeight] = React.useState(0);
+  const [enabled, setEnabled] = React.useState(false);
+  const waveStyle = {
+    left,
+    top,
+    width,
+    height,
+    borderRadius: borderRadius.map(radius => `${radius}px`).join(' ')
+  };
+  if (color) {
+    waveStyle['--wave-color'] = color;
+  }
+  function syncPos() {
+    const nodeStyle = getComputedStyle(target);
+    // Get wave color from target
+    setWaveColor(getTargetWaveColor(target));
+    const isStatic = nodeStyle.position === 'static';
+    // Rect
+    const {
+      borderLeftWidth,
+      borderTopWidth
+    } = nodeStyle;
+    setLeft(isStatic ? target.offsetLeft : validateNum(-Number.parseFloat(borderLeftWidth)));
+    setTop(isStatic ? target.offsetTop : validateNum(-Number.parseFloat(borderTopWidth)));
+    setWidth(target.offsetWidth);
+    setHeight(target.offsetHeight);
+    // Get border radius
+    const {
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius
+    } = nodeStyle;
+    setBorderRadius([borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius].map(radius => validateNum(Number.parseFloat(radius))));
+  }
+  React.useEffect(() => {
+    if (target) {
+      // We need delay to check position here
+      // since UI may change after click
+      const id = raf(() => {
+        syncPos();
+        setEnabled(true);
+      });
+      // Add resize observer to follow size
+      let resizeObserver;
+      if (typeof ResizeObserver !== 'undefined') {
+        resizeObserver = new ResizeObserver(syncPos);
+        resizeObserver.observe(target);
+      }
+      return () => {
+        raf.cancel(id);
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+      };
+    }
+  }, [target]);
+  if (!enabled) {
+    return null;
+  }
+  const isSmallComponent = (component === 'Checkbox' || component === 'Radio') && (target === null || target === void 0 ? void 0 : target.classList.contains(TARGET_CLS));
+  return /*#__PURE__*/React.createElement(CSSMotion, {
+    visible: true,
+    motionAppear: true,
+    motionName: "wave-motion",
+    motionDeadline: 5000,
+    onAppearEnd: (_, event) => {
+      var _a, _b;
+      if (event.deadline || event.propertyName === 'opacity') {
+        const holder = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        (_b = unmountRef.current) === null || _b === void 0 ? void 0 : _b.call(unmountRef).then(() => {
+          holder === null || holder === void 0 ? void 0 : holder.remove();
+        });
+      }
+      return false;
+    }
+  }, ({
+    className: motionClassName
+  }, ref) => (/*#__PURE__*/React.createElement("div", {
+    ref: composeRef(divRef, ref),
+    className: classNames(className, motionClassName, {
+      'wave-quick': isSmallComponent
+    }),
+    style: waveStyle
+  })));
+};
+const showWaveEffect = (target, info) => {
+  var _a;
+  const {
+    component
+  } = info;
+  // Skip for unchecked checkbox
+  if (component === 'Checkbox' && !((_a = target.querySelector('input')) === null || _a === void 0 ? void 0 : _a.checked)) {
+    return;
+  }
+  // Create holder
+  const holder = document.createElement('div');
+  holder.style.position = 'absolute';
+  holder.style.left = '0px';
+  holder.style.top = '0px';
+  target === null || target === void 0 ? void 0 : target.insertBefore(holder, target === null || target === void 0 ? void 0 : target.firstChild);
+  const reactRender = unstableSetRender();
+  let unmountCallback = null;
+  function registerUnmount() {
+    return unmountCallback;
+  }
+  unmountCallback = reactRender(/*#__PURE__*/React.createElement(WaveEffect, Object.assign({}, info, {
+    target: target,
+    registerUnmount: registerUnmount
+  })), holder);
+};
+export default showWaveEffect;

frontend/node_modules/antd/es/_util/wave/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { WaveComponent } from './interface';
+export interface WaveProps {
+    disabled?: boolean;
+    children?: React.ReactNode;
+    component?: WaveComponent;
+}
+declare const Wave: React.FC<WaveProps>;
+export default Wave;

frontend/node_modules/antd/es/_util/wave/index.js

@@ -0,0 +1,58 @@
+import React, { useContext, useRef } from 'react';
+import classNames from 'classnames';
+import isVisible from "rc-util/es/Dom/isVisible";
+import { composeRef, getNodeRef, supportRef } from "rc-util/es/ref";
+import { ConfigContext } from '../../config-provider';
+import { cloneElement } from '../reactNode';
+import useStyle from './style';
+import useWave from './useWave';
+const Wave = props => {
+  const {
+    children,
+    disabled,
+    component
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigContext);
+  const containerRef = useRef(null);
+  // ============================== Style ===============================
+  const prefixCls = getPrefixCls('wave');
+  const [, hashId] = useStyle(prefixCls);
+  // =============================== Wave ===============================
+  const showWave = useWave(containerRef, classNames(prefixCls, hashId), component);
+  // ============================== Effect ==============================
+  React.useEffect(() => {
+    const node = containerRef.current;
+    if (!node || node.nodeType !== window.Node.ELEMENT_NODE || disabled) {
+      return;
+    }
+    // Click handler
+    const onClick = e => {
+      // Fix radio button click twice
+      if (!isVisible(e.target) ||
+      // No need wave
+      !node.getAttribute || node.getAttribute('disabled') || node.disabled || node.className.includes('disabled') && !node.className.includes('disabled:') || node.getAttribute('aria-disabled') === 'true' || node.className.includes('-leave')) {
+        return;
+      }
+      showWave(e);
+    };
+    // Bind events
+    node.addEventListener('click', onClick, true);
+    return () => {
+      node.removeEventListener('click', onClick, true);
+    };
+  }, [disabled]);
+  // ============================== Render ==============================
+  if (! /*#__PURE__*/React.isValidElement(children)) {
+    return children !== null && children !== void 0 ? children : null;
+  }
+  const ref = supportRef(children) ? composeRef(getNodeRef(children), containerRef) : containerRef;
+  return cloneElement(children, {
+    ref
+  });
+};
+if (process.env.NODE_ENV !== 'production') {
+  Wave.displayName = 'Wave';
+}
+export default Wave;

frontend/node_modules/antd/es/_util/wave/interface.d.ts

@@ -0,0 +1,11 @@
+import type { GlobalToken } from '../../theme/internal';
+export declare const TARGET_CLS = "ant-wave-target";
+export type ShowWaveEffect = (element: HTMLElement, info: {
+    className: string;
+    token: GlobalToken;
+    component?: WaveComponent;
+    event: MouseEvent;
+    hashId: string;
+}) => void;
+export type ShowWave = (event: MouseEvent) => void;
+export type WaveComponent = 'Tag' | 'Button' | 'Checkbox' | 'Radio' | 'Switch';

frontend/node_modules/antd/es/_util/wave/interface.js

@@ -0,0 +1,2 @@
+import { defaultPrefixCls } from '../../config-provider';
+export const TARGET_CLS = `${defaultPrefixCls}-wave-target`;

frontend/node_modules/antd/es/_util/wave/style.d.ts

@@ -0,0 +1,7 @@
+import type { FullToken } from '../../theme/internal';
+export interface ComponentToken {
+}
+export interface WaveToken extends FullToken<'Wave'> {
+}
+declare const _default: (prefixCls: string, rootCls?: string) => import("@ant-design/cssinjs-utils/lib/interface").UseComponentStyleResult;
+export default _default;

frontend/node_modules/antd/es/_util/wave/style.js

@@ -0,0 +1,30 @@
+import { genComponentStyleHook } from '../../theme/internal';
+const genWaveStyle = token => {
+  const {
+    componentCls,
+    colorPrimary
+  } = token;
+  return {
+    [componentCls]: {
+      position: 'absolute',
+      background: 'transparent',
+      pointerEvents: 'none',
+      boxSizing: 'border-box',
+      color: `var(--wave-color, ${colorPrimary})`,
+      boxShadow: `0 0 0 0 currentcolor`,
+      opacity: 0.2,
+      // =================== Motion ===================
+      '&.wave-motion-appear': {
+        transition: [`box-shadow 0.4s ${token.motionEaseOutCirc}`, `opacity 2s ${token.motionEaseOutCirc}`].join(','),
+        '&-active': {
+          boxShadow: `0 0 0 6px currentcolor`,
+          opacity: 0
+        },
+        '&.wave-quick': {
+          transition: [`box-shadow ${token.motionDurationSlow} ${token.motionEaseInOut}`, `opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`].join(',')
+        }
+      }
+    }
+  };
+};
+export default genComponentStyleHook('Wave', genWaveStyle);

frontend/node_modules/antd/es/_util/wave/useWave.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { ShowWave, WaveComponent } from './interface';
+declare const useWave: (nodeRef: React.RefObject<HTMLElement | null>, className: string, component?: WaveComponent) => ShowWave;
+export default useWave;

frontend/node_modules/antd/es/_util/wave/useWave.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import useEvent from "rc-util/es/hooks/useEvent";
+import raf from "rc-util/es/raf";
+import { ConfigContext } from '../../config-provider';
+import useToken from '../../theme/useToken';
+import { TARGET_CLS } from './interface';
+import showWaveEffect from './WaveEffect';
+const useWave = (nodeRef, className, component) => {
+  const {
+    wave
+  } = React.useContext(ConfigContext);
+  const [, token, hashId] = useToken();
+  const showWave = useEvent(event => {
+    const node = nodeRef.current;
+    if ((wave === null || wave === void 0 ? void 0 : wave.disabled) || !node) {
+      return;
+    }
+    const targetNode = node.querySelector(`.${TARGET_CLS}`) || node;
+    const {
+      showEffect
+    } = wave || {};
+    // Customize wave effect
+    (showEffect || showWaveEffect)(targetNode, {
+      className,
+      token,
+      component,
+      event,
+      hashId
+    });
+  });
+  const rafId = React.useRef(null);
+  // Merge trigger event into one for each frame
+  const showDebounceWave = event => {
+    raf.cancel(rafId.current);
+    rafId.current = raf(() => {
+      showWave(event);
+    });
+  };
+  return showDebounceWave;
+};
+export default useWave;

frontend/node_modules/antd/es/_util/wave/util.d.ts

@@ -0,0 +1,2 @@
+export declare function isValidWaveColor(color: string): boolean | "";
+export declare function getTargetWaveColor(node: HTMLElement): string | null;

frontend/node_modules/antd/es/_util/wave/util.js

@@ -0,0 +1,14 @@
+export function isValidWaveColor(color) {
+  return color && color !== '#fff' && color !== '#ffffff' && color !== 'rgb(255, 255, 255)' && color !== 'rgba(255, 255, 255, 1)' && !/rgba\((?:\d*, ){3}0\)/.test(color) &&
+  // any transparent rgba color
+  color !== 'transparent' && color !== 'canvastext';
+}
+export function getTargetWaveColor(node) {
+  var _a;
+  const {
+    borderTopColor,
+    borderColor,
+    backgroundColor
+  } = getComputedStyle(node);
+  return (_a = [borderTopColor, borderColor, backgroundColor].find(isValidWaveColor)) !== null && _a !== void 0 ? _a : null;
+}