diff --git a/README.md b/README.md index bddfe01..19b53e3 100644 --- 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 index 300420f..3a8d4ff 100644 --- 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 index fbddc92..e1a2b3d 100644 --- 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 index 2deb300..408c376 100644 --- 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 (
-
{icon && !loading && {icon}} {loading && ( diff --git a/src/style/index.less b/src/style/index.less index 123cbaa..80c31bc 100644 --- a/src/style/index.less +++ b/src/style/index.less @@ -10,6 +10,7 @@ background-color: transparent; border-width: 0; cursor: pointer; + &-box { --primary-color: #2b65f4; position: relative; @@ -17,19 +18,55 @@ 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; } @@ -37,25 +74,15 @@ &.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;