From 37ab0184c299d0e919299c594a62e59c5d854267 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Tue, 18 Feb 2025 04:22:43 +0000 Subject: [PATCH] support for disable element --- .../app/src/components/LikeButton/index.jsx | 113 +++++---- .../app/src/components/LikeButton/index.less | 237 +++++++++--------- 2 files changed, 179 insertions(+), 171 deletions(-) diff --git a/packages/app/src/components/LikeButton/index.jsx b/packages/app/src/components/LikeButton/index.jsx index 766c9072..1fc6f4bd 100755 --- a/packages/app/src/components/LikeButton/index.jsx +++ b/packages/app/src/components/LikeButton/index.jsx @@ -4,68 +4,73 @@ import classnames from "classnames" import "./index.less" export default (props) => { - const [liked, setLiked] = React.useState(props.liked) - const [clicked, setClicked] = React.useState(false) + const [liked, setLiked] = React.useState( + typeof props.liked === "function" ? false : props.liked, + ) + const [clicked, setClicked] = React.useState(false) - // TODO: Support handle like change on websocket event - if (typeof props.watchWs === "object") { - // useWsEvents({ - // [props.watchWs.event]: (data) => { - // handleUpdateTrackLike(data.track_id, data.action === "liked") - // } - // }, { - // socketName: props.watchWs.socket, - // }) - } + // TODO: Support handle like change on websocket event + if (typeof props.watchWs === "object") { + // useWsEvents({ + // [props.watchWs.event]: (data) => { + // handleUpdateTrackLike(data.track_id, data.action === "liked") + // } + // }, { + // socketName: props.watchWs.socket, + // }) + } - async function computeLikedState() { - if (typeof props.liked === "function") { - let result = await props.liked() + async function computeLikedState() { + if (props.disabled) { + return false + } - result = result.liked ?? result + if (typeof props.liked === "function") { + let result = await props.liked() - return setLiked(result) - } + result = result.liked ?? result - return setLiked(props.liked) - } + return setLiked(result) + } - const handleClick = () => { - setClicked(true) + return setLiked(props.liked) + } - setTimeout(() => { - setClicked(false) - }, 500) + const handleClick = () => { + if (props.disabled) { + return false + } - if (typeof props.onClick === "function") { - props.onClick() - } + setClicked(true) - setLiked(!liked) - } + setTimeout(() => { + setClicked(false) + }, 500) - React.useEffect(() => { - computeLikedState() - }, [props.liked]) + if (typeof props.onClick === "function") { + props.onClick() + } - return -} \ No newline at end of file + setLiked(!liked) + } + + React.useEffect(() => { + computeLikedState() + }, [props.liked]) + + return ( + + ) +} diff --git a/packages/app/src/components/LikeButton/index.less b/packages/app/src/components/LikeButton/index.less index d92aaca6..11db2727 100755 --- a/packages/app/src/components/LikeButton/index.less +++ b/packages/app/src/components/LikeButton/index.less @@ -1,158 +1,161 @@ -@likeAnimationDuration : .5s; -@likeAnimationEasing : cubic-bezier(.7, 0, .3, 1); +@likeAnimationDuration: 0.5s; +@likeAnimationEasing: cubic-bezier(0.7, 0, 0.3, 1); .likeButton { - display: flex; + display: flex; - align-items: center; - justify-content: center; + align-items: center; + justify-content: center; - color: var(--text-color); + color: var(--text-color); - border: none; - border-radius: 50%; + border: none; + border-radius: 50%; - width: 1em; - height: 1em; + width: 1em; + height: 1em; - padding: 0; - margin: 0; + padding: 0; + margin: 0; - z-index: 2; + z-index: 2; - transition: all @likeAnimationDuration @likeAnimationEasing; + transition: all @likeAnimationDuration @likeAnimationEasing; - background-color: transparent; + background-color: transparent; - &:before { - z-index: -1; - content: ''; - position: absolute; - top: 0; - left: 0; - width: 1em; - height: 1em; - border-radius: inherit; - transition: inherit; - } + &:before { + z-index: -1; + content: ""; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + border-radius: inherit; + transition: inherit; + } - &:after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 1em; - height: 1em; - border-radius: inherit; - z-index: -1; - } + &:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + border-radius: inherit; + z-index: -1; + } - &.liked { - .heart { - >path { - stroke: var(--colorPrimary); - fill: var(--colorPrimary); - } + &.liked { + .heart { + > path { + stroke: var(--colorPrimary); + fill: var(--colorPrimary); + } - filter: drop-shadow(0px 0px 2px var(--colorPrimary)); - } - } + filter: drop-shadow(0px 0px 2px var(--colorPrimary)); + } + } - &.clicked { - .heart { - animation: heart-bounce @likeAnimationDuration @likeAnimationEasing; + &.clicked { + .heart { + animation: heart-bounce @likeAnimationDuration @likeAnimationEasing; - @keyframes heart-bounce { - 40% { - transform: scale(0.7); - } + @keyframes heart-bounce { + 40% { + transform: scale(0.7); + } - 0%, - 80%, - 100% { - transform: scale(1); - } - } - } - } + 0%, + 80%, + 100% { + transform: scale(1); + } + } + } + } - .heart { - position: relative; + &.disabled { + pointer-events: none; + opacity: 0.5; + } - cursor: pointer; + .heart { + position: relative; - >path { - stroke-width: 2; - transition: fill @likeAnimationDuration @likeAnimationEasing; - stroke: currentColor; - fill: transparent; - } + cursor: pointer; - animation: none; + > path { + stroke-width: 2; + transition: fill @likeAnimationDuration @likeAnimationEasing; + stroke: currentColor; + fill: transparent; + } - width: 1em; - height: 1em; + animation: none; - margin: 0; + width: 1em; + height: 1em; - transition: all @likeAnimationDuration @likeAnimationEasing; - } + margin: 0; - .ripple { - position: absolute; + transition: all @likeAnimationDuration @likeAnimationEasing; + } - height: 1em; - width: 1em; + .ripple { + position: absolute; - border-radius: 50%; - overflow: hidden; + height: 1em; + width: 1em; - z-index: 1; + border-radius: 50%; + overflow: hidden; - &:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: .4em solid var(--colorPrimary); - border-radius: inherit; - transform: scale(0); - } - } + z-index: 1; + + &:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0.4em solid var(--colorPrimary); + border-radius: inherit; + transform: scale(0); + } + } } @keyframes ripple-out { - from { - transform: scale(0); - } + from { + transform: scale(0); + } - to { - transform: scale(5); - } + to { + transform: scale(5); + } } @keyframes depress { + from, + to { + transform: none; + } - from, - to { - transform: none; - } - - 50% { - transform: translateY(5%) scale(0.9); - } + 50% { + transform: translateY(5%) scale(0.9); + } } @keyframes depress-shadow { + from, + to { + transform: none; + } - from, - to { - transform: none; - } - - 50% { - transform: scale(0.5); - } -} \ No newline at end of file + 50% { + transform: scale(0.5); + } +}