RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

support for disable element

Browse Source
This commit is contained in:
SrGooglo 2025-02-18 04:22:43 +00:00
parent 379838d0f7
commit 37ab0184c2
2 changed files with 179 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/app/src/components/LikeButton/index.jsx
View File

@ -4,7 +4,9 @@ import classnames from "classnames"
import "./index.less"
export default (props) => {
const [liked, setLiked] = React.useState(props.liked)
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
@ -19,6 +21,10 @@ export default (props) => {
}
async function computeLikedState() {
if (props.disabled) {
return false
}
if (typeof props.liked === "function") {
let result = await props.liked()
@ -31,6 +37,10 @@ export default (props) => {
}
const handleClick = () => {
if (props.disabled) {
return false
}
setClicked(true)
setTimeout(() => {
@ -48,24 +58,19 @@ export default (props) => {
computeLikedState()
}, [props.liked])
return <button
className={classnames(
"likeButton",
{
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"
>
{!!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>
)
}

23
packages/app/src/components/LikeButton/index.less
View File

@ -1,5 +1,5 @@
@likeAnimationDuration : .5s;
@likeAnimationEasing : cubic-bezier(.7, 0, .3, 1);
@likeAnimationDuration: 0.5s;
@likeAnimationEasing: cubic-bezier(0.7, 0, 0.3, 1);
.likeButton {
display: flex;
@ -26,7 +26,7 @@
&:before {
z-index: -1;
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
@ -37,7 +37,7 @@
}
&:after {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
@ -49,7 +49,7 @@
&.liked {
.heart {
>path {
> path {
stroke: var(--colorPrimary);
fill: var(--colorPrimary);
}
@ -76,12 +76,17 @@
}
}
&.disabled {
pointer-events: none;
opacity: 0.5;
}
.heart {
position: relative;
cursor: pointer;
>path {
> path {
stroke-width: 2;
transition: fill @likeAnimationDuration @likeAnimationEasing;
stroke: currentColor;
@ -110,13 +115,13 @@
z-index: 1;
&:before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: .4em solid var(--colorPrimary);
border: 0.4em solid var(--colorPrimary);
border-radius: inherit;
transform: scale(0);
}
@ -134,7 +139,6 @@
}
@keyframes depress {
from,
to {
transform: none;
@ -146,7 +150,6 @@
}
@keyframes depress-shadow {
from,
to {
transform: none;