From d49dbeae213f0a5b9e3ca2dce6481d042357517a Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Sat, 4 May 2024 22:45:29 +0800 Subject: [PATCH] feat: disable button when submitting comments (#120) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 支持在提交评论或回复时，禁用提交按钮，防止重复提交。 Fixes https://github.com/halo-dev/plugin-comment-widget/issues/116 image /kind feature ```release-note 支持在提交评论或回复时，禁用提交按钮，防止重复提交。 ``` --- packages/comment-widget/src/base-form.ts | 31 ++++++++++++++------- packages/comment-widget/src/comment-form.ts | 21 +++++++++++--- packages/comment-widget/src/reply-form.ts | 20 +++++++++++-- 3 files changed, 55 insertions(+), 17 deletions(-) diff --git a/packages/comment-widget/src/base-form.ts b/packages/comment-widget/src/base-form.ts index 01663e8..216ff34 100644 --- a/packages/comment-widget/src/base-form.ts +++ b/packages/comment-widget/src/base-form.ts @@ -1,6 +1,6 @@ import './emoji-button'; -import { LitElement, css, html } from 'lit'; -import { Ref, createRef, ref } from 'lit/directives/ref.js'; +import { css, html, LitElement } from 'lit'; +import { createRef, Ref, ref } from 'lit/directives/ref.js'; import { allowAnonymousCommentsContext, baseUrlContext, @@ -9,11 +9,12 @@ import { kindContext, nameContext, } from './context'; -import { state } from 'lit/decorators.js'; +import { property, state } from 'lit/decorators.js'; import type { User } from '@halo-dev/api-client'; import baseStyles from './styles/base'; import { consume } from '@lit/context'; import varStyles from './styles/var'; +import './icons/icon-loading'; export class BaseForm extends LitElement { @consume({ context: baseUrlContext }) @@ -40,6 +41,9 @@ export class BaseForm extends LitElement { @state() name = ''; + @property({ type: Boolean }) + submitting = false; + textareaRef: Ref = createRef(); get customAccount() { @@ -179,13 +183,20 @@ export class BaseForm extends LitElement { : ''}
-
diff --git a/packages/comment-widget/src/comment-form.ts b/packages/comment-widget/src/comment-form.ts index 74581d7..ebabd7c 100644 --- a/packages/comment-widget/src/comment-form.ts +++ b/packages/comment-widget/src/comment-form.ts @@ -1,4 +1,4 @@ -import { LitElement, html } from 'lit'; +import { html, LitElement } from 'lit'; import { state } from 'lit/decorators.js'; import { consume } from '@lit/context'; import { @@ -11,8 +11,8 @@ import { toastContext, versionContext, } from './context'; -import { CommentRequest, User, Comment } from '@halo-dev/api-client'; -import { Ref, createRef, ref } from 'lit/directives/ref.js'; +import { Comment, CommentRequest, User } from '@halo-dev/api-client'; +import { createRef, Ref, ref } from 'lit/directives/ref.js'; import { BaseForm } from './base-form'; import './base-form'; import { ToastManager } from './lit-toast'; @@ -50,15 +50,24 @@ export class CommentForm extends LitElement { @state() toastManager: ToastManager | undefined; + @state() + submitting = false; + baseFormRef: Ref = createRef(); override render() { - return html``; + return html` `; } async onSubmit(e: CustomEvent) { e.preventDefault(); + this.submitting = true; + const data = e.detail; const { displayName, email, website, content } = data || {}; @@ -78,12 +87,14 @@ export class CommentForm extends LitElement { if (!this.currentUser && !this.allowAnonymousComments) { this.toastManager?.warn('请先登录'); + this.submitting = false; return; } if (!this.currentUser && this.allowAnonymousComments) { if (!displayName || !email) { this.toastManager?.warn('请先登录或者完善信息'); + this.submitting = false; return; } else { commentRequest.owner = { @@ -121,6 +132,8 @@ export class CommentForm extends LitElement { if (error instanceof Error) { this.toastManager?.error(error.message); } + } finally { + this.submitting = false; } } } diff --git a/packages/comment-widget/src/reply-form.ts b/packages/comment-widget/src/reply-form.ts index be1e416..6d024fd 100644 --- a/packages/comment-widget/src/reply-form.ts +++ b/packages/comment-widget/src/reply-form.ts @@ -1,7 +1,7 @@ import './base-form'; import { CommentVo, Reply, ReplyRequest, ReplyVo, User } from '@halo-dev/api-client'; -import { LitElement, html } from 'lit'; -import { Ref, createRef, ref } from 'lit/directives/ref.js'; +import { html, LitElement } from 'lit'; +import { createRef, Ref, ref } from 'lit/directives/ref.js'; import { allowAnonymousCommentsContext, baseUrlContext, @@ -36,6 +36,9 @@ export class ReplyForm extends LitElement { @state() toastManager: ToastManager | undefined; + @state() + submitting = false; + baseFormRef: Ref = createRef(); override connectedCallback(): void { @@ -48,11 +51,18 @@ export class ReplyForm extends LitElement { } override render() { - return html``; + return html` `; } async onSubmit(e: CustomEvent) { e.preventDefault(); + + this.submitting = true; + const data = e.detail; const { displayName, email, website, content } = data || {}; @@ -70,12 +80,14 @@ export class ReplyForm extends LitElement { if (!this.currentUser && !this.allowAnonymousComments) { this.toastManager?.warn('请先登录'); + this.submitting = false; return; } if (!this.currentUser && this.allowAnonymousComments) { if (!displayName || !email) { this.toastManager?.warn('请先登录或者完善信息'); + this.submitting = false; return; } else { replyRequest.owner = { @@ -116,6 +128,8 @@ export class ReplyForm extends LitElement { if (error instanceof Error) { this.toastManager?.error(error.message); } + } finally { + this.submitting = false; } } }