feat(module:message-box): add textarea component

NG-NEST · Nov 2, 2024 · 8f1f374 · 8f1f374
1 parent 1a6c208
commit 8f1f374
Show file tree

Hide file tree

Showing 13 changed files with 136 additions and 11 deletions.
diff --git a/lib/ng-nest/ui/message-box/examples/index.ts b/lib/ng-nest/ui/message-box/examples/index.ts
@@ -2,3 +2,4 @@ export * from './zh_CN/default/confirm/confirm.component';
 export * from './zh_CN/default/custom/custom.component';
 export * from './zh_CN/default/default/default.component';
 export * from './zh_CN/default/prompt/prompt.component';
+export * from './zh_CN/default/textarea/textarea.component';
diff --git a/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/readme.md b/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/readme.md
@@ -0,0 +1,6 @@
+---
+order: 5
+label: '提交内容(多行)'
+---
+
+使用 `XMessageBoxService` 中的 `prompt` 方法来弹出可输入的消息框。
diff --git a/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/textarea.component.html b/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/textarea.component.html
@@ -0,0 +1,4 @@
+<x-button (click)="prompt1()">提交内容(正则验证)</x-button>
+<br />
+<br />
+<x-button (click)="prompt2()">提交内容(自定义验证)</x-button>
diff --git a/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/textarea.component.ts b/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/textarea.component.ts
@@ -0,0 +1,63 @@
+import { Component } from '@angular/core';
+import { XMessageBoxService, XMessageBoxAction } from '@ng-nest/ui/message-box';
+import { XMessageService } from '@ng-nest/ui/message';
+import { XButtonComponent } from '@ng-nest/ui/button';
+
+@Component({
+  selector: 'ex-textarea',
+  standalone: true,
+  imports: [XButtonComponent],
+  templateUrl: './textarea.component.html'
+})
+export class ExTextareaComponent {
+  constructor(
+    private msgBox: XMessageBoxService,
+    private message: XMessageService
+  ) {}
+  prompt1() {
+    this.msgBox.prompt({
+      title: '提交内容',
+      content: '请输入邮箱',
+      showTextarea: true,
+      inputValue: 'ngnest@163',
+      inputPattern:
+        /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+      inputInvalidMessage: '邮箱格式不正确',
+      callback: (action: XMessageBoxAction, msg) => {
+        if (action === 'confirm') {
+          // 业务处理......
+          this.message.success('邮箱：' + msg);
+        } else if (action === 'close') {
+          this.message.info('已关闭窗口！');
+        } else if (action === 'cancel') {
+          this.message.info('已取消窗口！');
+        }
+      }
+    });
+  }
+  prompt2() {
+    this.msgBox.prompt({
+      title: '提交内容',
+      content: '请输入邮箱',
+      showTextarea: true,
+      inputValue: 'ngnest@163',
+      inputValidator: (value: string) => {
+        let reg = new RegExp(
+          /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/
+        );
+        return reg.test(value);
+      },
+      inputInvalidMessage: '邮箱格式不正确',
+      callback: (action: XMessageBoxAction, msg) => {
+        if (action === 'confirm') {
+          // 业务处理......
+          this.message.success('邮箱：' + msg);
+        } else if (action === 'close') {
+          this.message.info('已关闭窗口！');
+        } else if (action === 'cancel') {
+          this.message.info('已取消窗口！');
+        }
+      }
+    });
+  }
+}
diff --git a/lib/ng-nest/ui/message-box/message-box.component.html b/lib/ng-nest/ui/message-box/message-box.component.html
@@ -32,6 +32,19 @@
                 [inputValidator]="msgInput.inputValidator!"
               ></x-input>
             </form>
+          } @else if (msgInput.showTextarea) {
+            <form [formGroup]="formGroup">
+              <x-textarea
+                formControlName="inputValue"
+                [placeholder]="msgInput.inputPlaceholder!"
+                [label]="getLabel"
+                [pattern]="getPattern"
+                [message]="msgInput.inputInvalidMessage!"
+                [inputValidator]="msgInput.inputValidator!"
+                [maxlength]="msgInput.textareaMaxlength!"
+                [height]="msgInput.textareaHeight!"
+              ></x-textarea>
+            </form>
           } @else {
             @if (msgInput.showIcon) {
               <ng-container *ngTemplateOutlet="iconTpl"></ng-container>

diff --git a/lib/ng-nest/ui/message-box/message-box.component.ts b/lib/ng-nest/ui/message-box/message-box.component.ts
@@ -17,6 +17,7 @@ import { XIconComponent } from '@ng-nest/ui/icon';
 import { XInputComponent } from '@ng-nest/ui/input';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
 import { NgTemplateOutlet } from '@angular/common';
+import { XTextareaComponent } from '@ng-nest/ui/textarea';
 
 @Component({
   selector: `${XMessageBoxPrefix}`,
@@ -26,6 +27,7 @@ import { NgTemplateOutlet } from '@angular/common';
     FormsModule,
     ReactiveFormsModule,
     XInputComponent,
+    XTextareaComponent,
     XButtonComponent,
     XButtonsComponent,
     XIconComponent,
@@ -66,7 +68,7 @@ export class XMessageBoxComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.msgInput.showInput && this.createFormGroup();
+    (this.msgInput.showInput || this.msgInput.showTextarea) && this.createFormGroup();
   }
 
   onClose() {
@@ -100,6 +102,9 @@ export class XMessageBoxComponent implements OnInit {
       if (!this.msgInput.showInput || (this.msgInput.showInput && this.formGroup.valid)) {
         this.action = 'confirm';
         this.hideBox();
+      } else if (!this.msgInput.showTextarea || (this.msgInput.showTextarea && this.formGroup.valid)) {
+        this.action = 'confirm';
+        this.hideBox();
       }
     };
     if (this.msgInput.confirmLoading && XIsFunction(this.msgInput.confirmLoading)) {

diff --git a/lib/ng-nest/ui/message-box/message-box.property.ts b/lib/ng-nest/ui/message-box/message-box.property.ts
@@ -88,8 +88,8 @@ export interface XMessageBoxOption extends XAlertOption {
    */
   cancelText?: string;
   /**
-   * @zh_CN 是否显示输入框
-   * @en_US Whether to show the input box
+   * @zh_CN 是否显示输入框，显示单行文本框后，将不能显示多行文本框
+   * @en_US Do not display input box. After displaying a single line text box, multi line text boxes cannot be displayed
    */
   showInput?: boolean;
   /**
@@ -132,6 +132,21 @@ export interface XMessageBoxOption extends XAlertOption {
    * @en_US confirm Loading
    */
   confirmLoading?: XMessageBoxConfirmLoading;
+  /**
+   * @zh_CN 是否显示多行文本框
+   * @en_US Whether to show the input box
+   */
+  showTextarea?: boolean;
+  /**
+   * @zh_CN 输入最大长度
+   * @en_US Enter the maximum length
+   */
+  textareaMaxlength?: number;
+  /**
+   * @zh_CN 高度
+   * @en_US height
+   */
+  textareaHeight?: string;
 }
 
 /**

diff --git a/lib/ng-nest/ui/message-box/message-box.service.ts b/lib/ng-nest/ui/message-box/message-box.service.ts
@@ -16,11 +16,13 @@ export class XMessageBoxService {
     duration: 3000,
     showIcon: false,
     showInput: false,
+    showTextarea: false,
     backdropClose: false,
     cancelText: '取消',
     confirmText: '确认',
     inputPlaceholder: '',
-    hide: false
+    hide: false,
+    textareaHeight: '6rem'
   };
 
   private portal = inject(XPortalService);
@@ -35,7 +37,12 @@ export class XMessageBoxService {
   }
 
   prompt(option: XTemplate | XMessageBoxOption): XMessageBoxRef {
-    return this.createMessageBox(option, { showIcon: false, showCancel: true, showInput: true });
+    const opt = option as XMessageBoxOption;
+    let def: XMessageBoxOption = { showIcon: false, showCancel: true, showInput: true };
+    if (!opt.showInput && opt.showTextarea) {
+      def = { showIcon: false, showCancel: true, showTextarea: true };
+    }
+    return this.createMessageBox(option, def);
   }
 
   create(option: XMessageBoxOption): XMessageBoxOverlayRef {

diff --git a/lib/ng-nest/ui/message-box/style/mixin.scss b/lib/ng-nest/ui/message-box/style/mixin.scss
@@ -18,9 +18,13 @@
     display: inline-flex;
     > form {
       width: 100%;
+      margin-bottom: 1rem;
       > x-input {
         width: 100%;
       }
+      > x-textarea {
+        width: 100%;
+      }
     }
   }
 }
diff --git a/lib/ng-nest/ui/textarea/textarea.property.ts b/lib/ng-nest/ui/textarea/textarea.property.ts
@@ -46,6 +46,11 @@ export class XTextareaProperty extends XFormControlFunction(X_TEXTAREA_CONFIG_NA
    * @en_US height
    */
   readonly height = input<string, XNumber>('6rem', { transform: XToCssPixelValue });
+  /**
+   * @zh_CN 输入提示信息
+   * @en_US Enter prompt information
+   */
+  override readonly placeholder = input<string | string[]>('');
   /**
    * @zh_CN 标签
    * @en_US Label

diff --git a/src/environments/environment.development.ts b/src/environments/environment.development.ts
@@ -1,5 +1,5 @@
 export const environment = {
   layout: 'test',
-  defaultPage: 'select',
+  defaultPage: 'message-box',
   static: 'https://ngnest.com/static'
 };
diff --git a/src/main/test/message-box/message-box.component.html b/src/main/test/message-box/message-box.component.html
@@ -1,4 +1,5 @@
-<ex-default></ex-default>
-<ex-confirm></ex-confirm>
-<ex-custom></ex-custom>
+<!-- <ex-default></ex-default> -->
+<!-- <ex-confirm></ex-confirm> -->
+<!-- <ex-custom></ex-custom> -->
 <ex-prompt></ex-prompt>
+<ex-textarea></ex-textarea>
diff --git a/src/main/test/message-box/message-box.component.ts b/src/main/test/message-box/message-box.component.ts
@@ -3,13 +3,14 @@ import {
   ExDefaultComponent,
   ExConfirmComponent,
   ExCustomComponent,
-  ExPromptComponent
+  ExPromptComponent,
+  ExTextareaComponent
 } from '@ng-nest/ui/message-box/examples';
 
 @Component({
   selector: 'te-message-box',
   standalone: true,
-  imports: [ExDefaultComponent, ExConfirmComponent, ExCustomComponent, ExPromptComponent],
+  imports: [ExDefaultComponent, ExConfirmComponent, ExCustomComponent, ExPromptComponent, ExTextareaComponent],
   templateUrl: './message-box.component.html'
 })
 export class TeMessageBoxComponent {}