From d6b5e15d2860477140e704d123926d58c21e6ffe Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Mon, 7 Nov 2022 14:15:34 +0800
Subject: [PATCH] feature(message-box): support prompt dialog

---
 .../message-box/src/message-box.component.tsx | 65 +++++++------------
 .../message-box/src/message-box.service.tsx   | 15 ++++-
 packages/ui-vue/demos/message-box/prompt.vue  | 11 ++++
 packages/ui-vue/src/app.vue                   |  2 +
 4 files changed, 51 insertions(+), 42 deletions(-)
 create mode 100644 packages/ui-vue/demos/message-box/prompt.vue

diff --git a/packages/ui-vue/components/message-box/src/message-box.component.tsx b/packages/ui-vue/components/message-box/src/message-box.component.tsx
index 3d5542b2a0c..a77adc1dd4b 100644
--- a/packages/ui-vue/components/message-box/src/message-box.component.tsx
+++ b/packages/ui-vue/components/message-box/src/message-box.component.tsx
@@ -15,7 +15,6 @@ export default defineComponent({
     emits: ['close'],
     setup(props: MessageBoxProps, context: SetupContext) {
         const messageType = ref(props.type);
-        const messageIcon = ref('f-icon-info');
         const messageTitle = ref(props.title);
         const messageDetail = ref(props.detail);
         const exception = ref<ExceptionInfo>({} as ExceptionInfo);
@@ -27,7 +26,7 @@ export default defineComponent({
         const messageText = ref('');
         const enableWordCount = ref(false);
         const wordsTotalTips = ref('');
-        const wordsTotal = ref(0);
+        const wordsTotal = ref(messageDetail.value.length);
         const buttons = ref<ModalButton[]>([]);
         const okButtonText = ref(props.okButtonText);
         const cancelButtonText = ref(props.cancelButtonText);
@@ -49,6 +48,14 @@ export default defineComponent({
             return classObject;
         });
 
+        const messageBoxContainerStyle = computed(() => {
+            const styleObject = {} as Record<string, any>;
+            if (messageType.value === 'prompt') {
+                styleObject.padding = '0.5rem 0.5rem 1rem 1.5rem';
+            }
+            return styleObject;
+        });
+
         const messageBoxIconClass = computed(() => {
             const classObject = { 'f-icon': true } as Record<string, boolean>;
             const iconClass = `f-icon-${messageType.value}`;
@@ -145,8 +152,11 @@ export default defineComponent({
             return styleObject;
         });
 
-        function onTextChange($event: Event) {
-
+        function onTextChange($event: InputEvent) {
+            if ($event.currentTarget) {
+                const textVaue = (($event.currentTarget as any).value || '') as string;
+                wordsTotal.value = textVaue.length;
+            }
         }
 
         const shouldShowWordCount = computed(() => {
@@ -386,7 +396,7 @@ export default defineComponent({
                 <div class="farris-messager">
                     {
                         messageType.value !== 'prompt' &&
-                        <section class={messageBoxContainerClass.value}>
+                        <section class={messageBoxContainerClass.value} style={messageBoxContainerStyle.value}>
                             <div class="float-left modal-tips-iconwrap">
                                 <span class={messageBoxIconClass.value}></span>
                             </div>
@@ -425,51 +435,26 @@ export default defineComponent({
                     }
                     {
                         messageType.value === 'prompt' &&
-                        <section class={messageBoxContainerClass.value}>
-                            {
-                                promptInputType.value === 'textarea' &&
+                        <>
+                            <section class={messageBoxContainerClass.value} style={messageBoxContainerStyle.value}>
                                 <div class="flex-fill fixdiv mb-1 mr-3">
                                     <textarea title="promptMessage" name="promptMessage" class="form-control"
                                         style={promptTextAreaStyle.value} rows="4" maxlength={promptMaxLength.value}
-                                        onInput={onTextChange}>{messageText}</textarea>
-                                </div >
-                            }
-                            {
-                                promptInputType.value !== 'textarea' &&
-                                <div class="flex-fill fixdiv my-4 mr-4">
-                                    <input type="text" class="form-control" maxlength={promptMaxLength.value} onInput={onTextChange}
-                                        value={messageText.value} placeholder={promptInputPlaceholder.value} />
+                                        onInput={onTextChange}>{safeMessageDetail.value}</textarea>
                                 </div >
-                            }
-                        </section >
-                    }
-                    {
-                        shouldShowWordCount.value &&
-                        <span class="textarea-wordcount" title={wordsTotalTips.value}
-                            style="position: relative;bottom: 10px;right: 20px;cursor: pointer;text-align: right;">
-                            {wordsTotal.value + ' / ' + promptMaxLength.value}
-                        </span>
+                            </section >
+                            <span class="textarea-wordcount" title={wordsTotalTips.value}
+                                style="position: absolute; bottom: 76px; right: 32px; cursor: pointer; text-align: right;">
+                                {wordsTotal.value + ' / ' + promptMaxLength.value}
+                            </span>
+                        </>
                     }
                     {
                         shouldShowOkCancelButtons.value &&
                         <div class="modal-footer">
-                            {
-                                shouldShowFontSize.value &&
-                                <div class="d-flex flex-fill textarea-font-size" style="text-align: left">
-                                    <span style="width:75px">{fontSizeName.value}</span>
-                                    <select title="selectFontSize" class="form-control" style="max-width:100px"
-                                        v-model={promptFontSize} onChange={onFontSizeChange}>
-                                        <option value="14">{fontSmall}</option>
-                                        <option value="18">{fontMiddle}</option>
-                                        <option value="24">{fontBig}</option>
-                                        <option value="36">{fontLarge}</option>
-                                        <option value="48">{fontHuge}</option>
-                                    </select>
-                                </div >
-                            }
                             {
                                 shouldShowCancelButton.value &&
-                                <button type="button" class="btn btn-secondary  btn-lg" onClick={onClickCancelButton}>
+                                <button type="button" class="btn btn-secondary btn-lg" onClick={onClickCancelButton}>
                                     {cancelButtonText.value}
                                 </button>
                             }
diff --git a/packages/ui-vue/components/message-box/src/message-box.service.tsx b/packages/ui-vue/components/message-box/src/message-box.service.tsx
index 493df3073c1..6bb78b86ec6 100644
--- a/packages/ui-vue/components/message-box/src/message-box.service.tsx
+++ b/packages/ui-vue/components/message-box/src/message-box.service.tsx
@@ -13,8 +13,8 @@ function initInstance(props: MessageBoxProps, content?: string): App {
                 document.body.removeChild(container);
             });
             const showModal = ref(true);
-            const showHeader = props.type === 'error';
-            const modalTitle = props.type === 'error' ? '错误提示' : '';
+            const showHeader = (props.type === 'error' || props.type === 'prompt');
+            const modalTitle = props.type === 'error' ? '错误提示' : (props.type === 'prompt' ? props.title : '');
             return () =>
                 <FModal class="modal-message modal-message-type-info" title={modalTitle}
                     v-model={showModal.value} show-header={showHeader} show-buttons={false}>
@@ -78,4 +78,15 @@ export default class MessageBoxService {
         });
         this.show(props);
     }
+
+    static prompt(message: string, detail: string) {
+        const props: MessageBoxProps = reactive({
+            type: 'prompt',
+            title: message,
+            detail,
+            okButtonText: '确定',
+            cancelButtonText: '取消'
+        });
+        this.show(props);
+    }
 }
diff --git a/packages/ui-vue/demos/message-box/prompt.vue b/packages/ui-vue/demos/message-box/prompt.vue
new file mode 100644
index 00000000000..a774c743d13
--- /dev/null
+++ b/packages/ui-vue/demos/message-box/prompt.vue
@@ -0,0 +1,11 @@
+<script setup>
+import { inject } from 'vue';
+
+const MessageBoxService = inject('MessageBoxService');
+function showPrompt() {
+    MessageBoxService.prompt('Please give your opinion', 'I accept it.');
+}
+</script>
+<template>
+    <f-button style="margin: 5px" :type="'primary'" @click="showPrompt"> 显示对话框 </f-button>
+</template>
diff --git a/packages/ui-vue/src/app.vue b/packages/ui-vue/src/app.vue
index 27edafce6f6..4c5c16be445 100644
--- a/packages/ui-vue/src/app.vue
+++ b/packages/ui-vue/src/app.vue
@@ -12,6 +12,7 @@ import Checkbox from './components/checkbox.vue';
 import ComboList from './components/combo-list.vue';
 import MessageBoxBasic from '../demos/message-box/basic.vue';
 import MessageBoxTypes from '../demos/message-box/types.vue';
+import MessageBoxPrompt from '../demos/message-box/prompt.vue';
 import Modal from './components/modal.vue';
 import Notify from './components/notify.vue';
 import Popover from './components/popover.vue';
@@ -32,6 +33,7 @@ const routes: Record<string, any> = {
     '/combo-list': ComboList,
     '/message-box/basic': MessageBoxBasic,
     '/message-box/types': MessageBoxTypes,
+    '/message-box/prompt': MessageBoxPrompt,
     '/modal': Modal,
     '/notify': Notify,
     '/popover': Popover,
-- 
Gitee