RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +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" import "./index.less"
export default (props) => { 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) const [clicked, setClicked] = React.useState(false)
// TODO: Support handle like change on websocket event // TODO: Support handle like change on websocket event
@ -19,6 +21,10 @@ export default (props) => {
} }
async function computeLikedState() { async function computeLikedState() {
if (props.disabled) {
return false
}
if (typeof props.liked === "function") { if (typeof props.liked === "function") {
let result = await props.liked() let result = await props.liked()
@ -31,6 +37,10 @@ export default (props) => {
} }
const handleClick = () => { const handleClick = () => {
if (props.disabled) {
return false
}
setClicked(true) setClicked(true)
setTimeout(() => { setTimeout(() => {
@ -48,24 +58,19 @@ export default (props) => {
computeLikedState() computeLikedState()
}, [props.liked]) }, [props.liked])
return <button return (
className={classnames( <button
"likeButton", className={classnames("likeButton", {
{
["liked"]: liked, ["liked"]: liked,
["clicked"]: clicked, ["clicked"]: clicked,
} ["disabled"]: props.disabled,
)} })}
onClick={handleClick} onClick={handleClick}
> >
{ {!!props.ripple && <div className="ripple" />}
!!props.ripple && <div className="ripple" /> <svg className="heart" viewBox="0 0 24 24">
}
<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> <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> </svg>
</button> </button>
)
} }

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

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