feature:remove all dependencies

happy-func · May 1, 2022 · c80b4ef · c80b4ef
1 parent f22bb04
commit c80b4ef
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 88 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,9 @@
 # react-swim-button
 
+![version](https://img.shields.io/github/package-json/v/happy-func/react-swim-button/main) ![typescript](https://img.shields.io/npm/types/react-swim-button) ![esm](https://img.shields.io/static/v1?label=build&message=esm&color=blue) ![npm bundle size (version)](https://img.shields.io/bundlephobia/min/react-swim-button/latest) ![GitHub Repo stars](https://img.shields.io/github/stars/happy-func/sudoku.js?style=social)
+
+Zero dependencies
+
 ## Getting Started
 
 Install dependencies,
@@ -18,6 +22,7 @@ $ yarn add react-swim-button
 ```tsx
 import React, { useState } from 'react';
 import ReactSwimButton from 'react-swim-button';
+import 'react-swim-button/es/style';
 
 const texts = ['React', 'Swim', 'Button'];
 
@@ -46,6 +51,7 @@ export default () => {
 ```tsx
 import React, { useState } from 'react';
 import ReactSwimButton from 'react-swim-button';
+import 'react-swim-button/es/style';
 
 export default () => {
   const [activeAt, setActiveAt] = useState(0);
@@ -71,6 +77,7 @@ export default () => {
 ```tsx
 import React, { useState } from 'react';
 import ReactSwimButton from 'react-swim-button';
+import 'react-swim-button/es/style';
 
 const texts = [
   {

diff --git a/docs/demo/plainbutton.less b/docs/demo/plainbutton.less
@@ -15,29 +15,20 @@
       box-shadow: none;
 
       &:before {
+        background-color: var(--primary-color);
+      }
+
+      &:after {
         border-color: rgba(188, 193, 205, 0.5);
+        opacity: 1;
       }
 
       &:hover {
         color: #fff;
-        .swim-button-wave {
-          opacity: 1;
-        }
-        &:before {
+        &:after {
           border-color: #2b65f4;
         }
       }
-
-      &-active {
-        .swim-button-wave {
-          background-color: #2b65f4;
-          opacity: 0;
-          transition-delay: 50ms;
-          transition-timing-function: ease-in-out;
-          transition-duration: 150ms;
-          transition-property: opacity;
-        }
-      }
     }
   }
 }
diff --git a/package.json b/package.json
@@ -30,9 +30,6 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "dependencies": {
-    "@tweenjs/tween.js": "^18.6.4"
-  },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.2",

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,4 @@
-import TWEEN from '@tweenjs/tween.js';
-import React, { CSSProperties, ReactElement, useEffect, useRef } from 'react';
+import React, { CSSProperties, ReactElement } from 'react';
 
 function clsx(...classnames: (string | undefined | boolean)[]) {
   return classnames.filter((item) => !!item).join(' ');
@@ -17,58 +16,17 @@ function ReactSwimButton(props: ReactSwimButtonProps) {
     loading,
     duration = 250,
   } = props;
-  const waveRef = useRef(null);
-  function animate(time: number | undefined) {
-    requestAnimationFrame(animate);
-    TWEEN.update(time);
-  }
-  function updateProperty(coords: { width: number }) {
-    if (waveRef.current) {
-      // @ts-ignore
-      waveRef.current.style.setProperty('width', `${coords.width}%`);
-    }
-  }
-  function _onMouseEnter() {
-    const coords = { width: 0 };
-    const tween = new TWEEN.Tween(coords)
-      .to({ width: 100 }, duration)
-      .easing(TWEEN.Easing.Cubic.InOut) // Use an easing function to make the animation smooth.
-      .onUpdate(updateProperty);
-    // @ts-ignore
-    waveRef.current.style.removeProperty('right');
-    // @ts-ignore
-    waveRef.current.style.setProperty('left', `0px`);
-    tween.start();
-  }
-  function _onMouseLeave() {
-    const coords = { width: 100 };
-    const tween = new TWEEN.Tween(coords)
-      .to({ width: 0 }, duration)
-      .easing(TWEEN.Easing.Cubic.InOut) // Use an easing function to make the animation smooth.
-      .onUpdate(updateProperty);
-    // @ts-ignore
-    waveRef.current.style.removeProperty('left');
-    // @ts-ignore
-    waveRef.current.style.setProperty('right', `0px`);
-    tween.start();
-  }
   function _onClick() {
     if (loading) return;
     onClick && onClick();
   }
-  useEffect(() => {
-    requestAnimationFrame(animate);
-  }, []);
   return (
     <div
       className={clsx('swim-button-box', className, active && `swim-button-box-active`)}
-      onMouseEnter={_onMouseEnter}
-      onMouseLeave={_onMouseLeave}
       onClick={_onClick}
       // @ts-ignore
-      style={{ ...style, [`--primary-color`]: primary }}
+      style={{ ...style, [`--primary-color`]: primary, [`--swim-duration`]: `${duration}ms` }}
     >
-      <div ref={waveRef} className={clsx('swim-button-wave')} style={{ left: 0 }} />
       <span className={clsx('swim-button')}>
         {icon && !loading && <span className={clsx('swim-button-icon')}>{icon}</span>}
         {loading && (

diff --git a/src/style/index.less b/src/style/index.less
@@ -10,52 +10,79 @@
     background-color: transparent;
     border-width: 0;
     cursor: pointer;
+
     &-box {
       --primary-color: #2b65f4;
       position: relative;
       display: inline-block;
       box-sizing: border-box;
       height: 48px;
       padding: 0 24px;
-      overflow: hidden;
       color: #858b9b;
       font-size: 14px;
       line-height: 20px;
       text-align: center;
+      vertical-align: top;
       background-color: #fff;
       border-radius: 4px;
       box-shadow: 0 3px 12px rgba(188, 193, 205, 0.3);
       cursor: pointer;
       transition-timing-function: ease;
-      transition-duration: 0.25s;
+      transition-duration: var(--swim-duration);
       transition-property: color;
       user-select: none;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--primary-color);
+        border-radius: 4px;
+        transform: rotateY(90deg);
+        transform-origin: right;
+        opacity: 1;
+        transition: transform var(--swim-duration) ease-in-out;
+        content: '';
+      }
+
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        border: 1px solid var(--primary-color);
+        border-radius: 4px;
+        opacity: 0;
+        transition-delay: var(--swim-duration);
+        content: '';
+      }
+
+      &:hover::before {
+        border-radius: 4px;
+        transform: rotateY(0deg);
+        transform-origin: left;
+      }
+
       &:hover {
         color: #fff;
       }
 
       &.swim-button-box-active {
         color: #fff;
         background-color: var(--primary-color);
-        &:before {
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          z-index: 2;
-          border-color: var(--primary-color);
-          border-style: solid;
-          border-width: 1px;
-          border-radius: 4px;
-          content: '';
+        &::before {
+          background-color: #fff;
         }
         &:hover {
           color: var(--primary-color);
-        }
-
-        .swim-button-wave {
-          background-color: #fff;
+          &::after {
+            opacity: 1;
+            transition-delay: 0s;
+          }
         }
       }
     }
@@ -67,14 +94,6 @@
       line-height: 100%;
     }
 
-    &-wave {
-      position: absolute;
-      top: 0;
-      height: 100%;
-      background-color: var(--primary-color);
-      border-radius: 4px;
-    }
-
     &-loading {
       display: inline-block;
       color: inherit;