support for disable element

packages/app/src/components/LikeButton/index.jsx

@@ -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>
+	)
 }

packages/app/src/components/LikeButton/index.less

@@ -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;
@@ -76,6 +76,11 @@
 		}
 	}
 
+	&.disabled {
+		pointer-events: none;
+		opacity: 0.5;
+	}
+
 	.heart {
 		position: relative;
 
@@ -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;