From 13beccf6154a99c95df8c5d01ccfc67c62f27b5a Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 18 Mar 2021 21:41:11 +0800
Subject: feat: Prevent send empty.

---
 FrontEnd/src/app/index.sass                        | 17 +++++++---
 FrontEnd/src/app/views/common/FlatButton.tsx       | 36 ++++++++++++++++++++++
 .../app/views/timeline-common/MarkdownPostEdit.tsx | 12 +++++---
 3 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 FrontEnd/src/app/views/common/FlatButton.tsx

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/app/index.sass b/FrontEnd/src/app/index.sass
index 60f274c2..2079cad8 100644
--- a/FrontEnd/src/app/index.sass
+++ b/FrontEnd/src/app/index.sass
@@ -45,8 +45,15 @@ small
   cursor: pointer
   padding: 0.2em 0.5em
   border-radius: 0.2em
-  &:hover
+  &:hover:not(.disabled)
     background-color: $gray-200
+  &.disabled
+    cursor: default
+  @each $color, $value in $theme-colors
+    &.#{$color}
+      color: $value
+      &.disabled
+        color: adjust-color($value, $lightness: +15%)
 
 .cursor-pointer
   cursor: pointer
@@ -81,10 +88,10 @@ textarea
 .text-yellow
   color: $yellow
 
-@each $color, $value in $theme-colors
-  .text-button
-    background: transparent
-    border: none
+.text-button
+  background: transparent
+  border: none
+  @each $color, $value in $theme-colors
     &.#{$color}
       color: $value
       &:hover
diff --git a/FrontEnd/src/app/views/common/FlatButton.tsx b/FrontEnd/src/app/views/common/FlatButton.tsx
new file mode 100644
index 00000000..80bb654c
--- /dev/null
+++ b/FrontEnd/src/app/views/common/FlatButton.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import clsx from "clsx";
+
+import { BootstrapThemeColor } from "@/common";
+
+export interface FlatButtonProps {
+  variant?: BootstrapThemeColor | string;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+}
+
+const FlatButton: React.FC<FlatButtonProps> = (props) => {
+  const { disabled, className, style } = props;
+  const variant = props.variant ?? "primary";
+
+  const onClick = disabled ? undefined : props.onClick;
+
+  return (
+    <div
+      className={clsx(
+        "flat-button",
+        variant,
+        disabled ? "disabled" : null,
+        className
+      )}
+      style={style}
+      onClick={onClick}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default FlatButton;
diff --git a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
index bad6b2b0..f4351db0 100644
--- a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
@@ -5,6 +5,7 @@ import { Prompt } from "react-router";
 
 import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 
+import FlatButton from "../common/FlatButton";
 import TabPages from "../common/TabPages";
 import TimelinePostBuilder from "@/services/TimelinePostBuilder";
 import ConfirmDialog from "../common/ConfirmDialog";
@@ -100,8 +101,9 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
         pageContainerClassName="py-2"
         actions={
           <>
-            <div
-              className="flat-button text-danger mr-2"
+            <FlatButton
+              className="mr-2"
+              variant="danger"
               onClick={() => {
                 if (canLeave) {
                   onClose();
@@ -111,10 +113,10 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
               }}
             >
               {t("operationDialog.cancel")}
-            </div>
-            <div className="flat-button text-primary" onClick={send}>
+            </FlatButton>
+            <FlatButton onClick={send} disabled={canLeave}>
               {t("timeline.send")}
-            </div>
+            </FlatButton>
           </>
         }
         pages={[
-- 
cgit v1.2.3