mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
support for disable element
This commit is contained in:
parent
379838d0f7
commit
37ab0184c2
@ -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 <button
|
||||
className={classnames(
|
||||
"likeButton",
|
||||
{
|
||||
["liked"]: liked,
|
||||
["clicked"]: clicked,
|
||||
}
|
||||
)}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{
|
||||
!!props.ripple && <div className="ripple" />
|
||||
}
|
||||
<svg
|
||||
className="heart"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
}
|
||||
setLiked(!liked)
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
computeLikedState()
|
||||
}, [props.liked])
|
||||
|
||||
return (
|
||||
<button
|
||||
className={classnames("likeButton", {
|
||||
["liked"]: liked,
|
||||
["clicked"]: clicked,
|
||||
["disabled"]: props.disabled,
|
||||
})}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{!!props.ripple && <div className="ripple" />}
|
||||
<svg className="heart" viewBox="0 0 24 24">
|
||||
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user