xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: motion button motion style in mobile 

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei 2024-11-24 17:34:31 +08:00
parent f418efcd9c
commit 611d2cf034
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
1 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/components/src/ui/button/index.tsx
View File

@ -1,4 +1,5 @@
import { useFocusable } from "@follow/components/common/Focusable.jsx"
import { useMobile } from "@follow/components/hooks/useMobile"
import { LoadingCircle } from "@follow/components/ui/loading/index.jsx"
import { stopPropagation } from "@follow/utils/dom"
import { cn, getOS } from "@follow/utils/utils"
@ -177,19 +178,31 @@ const HotKeyTrigger = ({
})
return null
}
const motionBaseMap = {
pc: {
whileFocus: { scale: 1.02 },
whileTap: { scale: 0.95 },
},
mobile: {
whileFocus: { opacity: 0.8 },
whileTap: { opacity: 0.2 },
},
} as const
export const MotionButtonBase = React.forwardRef<HTMLButtonElement, HTMLMotionProps<"button">>(
({ children, ...rest }, ref) => (
<m.button
layout="size"
initial
whileFocus={{ scale: 1.02 }}
whileTap={{ scale: 0.95 }}
{...rest}
ref={ref}
>
{children}
</m.button>
),
({ children, ...rest }, ref) => {
const isMobile = useMobile()
return (
<m.button
layout="size"
initial
{...motionBaseMap[isMobile ? "mobile" : "pc"]}
{...rest}
ref={ref}
>
{children}
</m.button>
)
},
)
MotionButtonBase.displayName = "MotionButtonBase"