feat: switch click wave effect

Author: zhangyu1818

package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "test": "jest",
     "build": "rm -rf dist && tsc && lessc src/index.less dist/index.css",
-    "example": "npm run build && cp dist/* example",
+    "example": "esbuild ./src/index.ts --bundle --outdir=example --format=esm && lessc src/index.less example/index.css",
     "prepublishOnly": "npm run build && np --no-publish",
     "gh-pages": "npm run example && gh-pages -d example"
   },
@@ -29,9 +29,13 @@
     "@babel/preset-typescript": "^7.13.0",
     "@types/jest": "^26.0.23",
     "babel-jest": "^26.6.3",
+    "esbuild": "^0.11.20",
     "gh-pages": "^3.1.0",
     "jest": "^26.6.3",
     "less": "^4.1.1",
     "typescript": "^4.2.4"
+  },
+  "dependencies": {
+    "wave-effect": "^1.0.0"
   }
 }

src/index.less

@@ -1,3 +1,6 @@
+// lessc don't support ~
+@import 'wave-effect/src/wave.less';
+
 /**
   Copy from Ant Design
   https://github.com/ant-design/ant-design/blob/master/components/switch/style/index.less

src/index.ts

@@ -1,3 +1,5 @@
+import wave, { clearEffect } from 'wave-effect'
+
 interface ExtendOptions {
   prefixCls?: string
   role?: string
@@ -71,11 +73,13 @@ const extend = (options: ExtendOptions) => {
 
   const createSwitch = <T extends HTMLElement>(element: T, values?: Partial<SwitchValues>) => {
     const buttonEle = element
+    buttonEle.innerHTML = ''
+
     const handleEle = document.createElement('div')
     const textEle = document.createElement('span')
     const loadingEle = document.createElement('span')
 
-    buttonEle.className = classWithPrefix('switch')
+    buttonEle.classList.add(classWithPrefix('switch'))
     if (small) {
       buttonEle.classList.add(classWithPrefix('switch-small'))
     }
@@ -135,12 +139,18 @@ const extend = (options: ExtendOptions) => {
 
     buttonEle.addEventListener('click', internalClickEvent)
 
+    wave(buttonEle, {
+      disabledClass: ['loading', 'disabled'],
+    })
+
     return proxyValues
   }
   return createSwitch
 }
 
 const deleteSwitch = <T extends HTMLElement>(element: HTMLElement) => {
+  clearEffect(element)
+
   element.innerHTML = ''
   element.className = ''
   element.removeAttribute('role')

tsconfig.json

@@ -1,12 +1,13 @@
 {
   "compilerOptions": {
     "target": "ES2015",
-    "module": "ES2015",
+    "module": "commonjs",
     "outDir": "./dist",
     "strict": true,
     "esModuleInterop": true,
     "declaration": true,
     "skipLibCheck": true,
+    "moduleResolution": "node",
     "forceConsistentCasingInFileNames": true
   },
   "exclude": ["*/test.ts"]