@aochuang/client-sdk 1.0.372 → 1.0.373

package/components/chat-editor/chat-editor-suggestions/chat-editor-suggestions.vue

@@ -23,7 +23,7 @@
                 ></span>
             </div>
         </div>
-        <div class="sdk-chat-editor-suggestions__body" ref="body">
+        <div class="sdk-chat-editor-suggestions__body" ref="body" @scroll="handleBodyScroll">
             <template v-if="data && data.length">
                 <div class="sdk-chat-editor-suggestions__list">
                     <div 
@@ -38,6 +38,9 @@
                         <slot name="item" :data="item"></slot>
                     </div>
                 </div>
+                <div class="sdk-chat-editor-suggestions__more" v-if="loadingMore">
+                    <ui-loading size="mini"></ui-loading>
+                </div>
             </template>
         </div>
         <div class="sdk-chat-editor-suggestions__foot">
@@ -68,6 +71,14 @@ export default {
             type: Boolean,
             default: false
         },
+        loadingMore: {
+            type: Boolean,
+            default: false
+        },
+        hasMore: {
+            type: Boolean,
+            default: false
+        },
         confirmMethod: {
             type: Function
         }
@@ -108,6 +119,15 @@ export default {
         handleCloseClick () {
             this.closed = true
         },
+        handleBodyScroll (evt) {
+            if (!this.hasMore || this.loadingMore) {
+                return
+            }
+            const target = evt.target
+            if (target.scrollHeight - target.scrollTop - target.clientHeight <= 20) {
+                this.$emit('load-more')
+            }
+        },
         handleItemMouseEnter (item) {
             this.focusId = item.id
         },
@@ -180,7 +200,7 @@ export default {
         checkAutoFocus () {
             if (!this.data || !this.data.length) {
                 this.focusId = null
-            } else {
+            } else if (!this.focusId || !this.data.some(item => item.id === this.focusId)) {
                 this.focusId = this.data[0].id
             }
         },
@@ -341,4 +361,10 @@ export default {
 .sdk-chat-editor-suggestions__item.is-focus:after {
     opacity: 1;
 }
+.sdk-chat-editor-suggestions__more {
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 </style>

package/components/chat-editor/chat-editor.vue

@@ -46,9 +46,12 @@
                 ref="suggestions"
                 :keyword="suggestionsKeyword"
                 :loading="suggestioning"
+                :loading-more="suggestionsLoadingMore"
+                :has-more="suggestionsHasMore"
                 :data="suggestionsData"
                 :confirm-method="handleSuggestionsConfirmMethod"
                 @closed="handleSuggestionsClosed"
+                @load-more="handleSuggestionsLoadMore"
             >
                 <template slot="item" slot-scope="scope">
                     <slot name="suggestions-item" v-bind="scope"></slot>
@@ -83,6 +86,9 @@ export default {
         fetchSuggestionsMethod: {
             type: Function
         },
+        fetchMoreSuggestionsMethod: {
+            type: Function
+        },
         confirmSuggestionsMethod: {
             type: Function
         },
@@ -99,6 +105,8 @@ export default {
             sending: false,
             popoverActive: false,
             suggestioning: false,
+            suggestionsLoadingMore: false,
+            suggestionsHasMore: false,
             suggestionsData: [],
             suggestionsKeyword: null,
             inputValue: this.value || ''
@@ -127,6 +135,8 @@ export default {
         },
         handleSuggestionsClosed () {
             this.suggestionsData = []
+            this.suggestionsHasMore = false
+            this.suggestionsLoadingMore = false
         },
         handleSuggestionsConfirmMethod ({ item }) {
             const next = () => {
@@ -263,6 +273,8 @@ export default {
             const requestId = (this._suggestionsRequestId || 0) + 1
             this._suggestionsRequestId = requestId
             this.suggestioning = true
+            this.suggestionsLoadingMore = false
+            this.suggestionsHasMore = false
             this.suggestionsKeyword = keyword
             this.popoverActive = true
             clearTimeout(this._loadSuggestionsTimer)
@@ -274,13 +286,60 @@ export default {
                 if (requestId !== this._suggestionsRequestId) {
                     return
                 }
-                this.suggestionsData = rs || []
+                const result = this.normalizeSuggestionsResult(rs)
+                this.suggestionsData = result.items
+                this.suggestionsHasMore = result.hasMore
             }).finally(() => {
                 if (requestId === this._suggestionsRequestId) {
                     this.suggestioning = false
                 }
             })
         },
+        handleSuggestionsLoadMore () {
+            if (!this.fetchMoreSuggestionsMethod || !this.suggestionsHasMore || this.suggestionsLoadingMore) {
+                return
+            }
+            const requestId = this._suggestionsRequestId
+            const keyword = this.suggestionsKeyword
+            const nearestInfo = this.suggestionsNearsetInfo
+            this.suggestionsLoadingMore = true
+            return Promise.resolve(this.fetchMoreSuggestionsMethod({
+                keyword,
+                nearestInfo,
+                isAtContext: !!(nearestInfo && nearestInfo.isAtContext),
+                data: this.suggestionsData.slice()
+            })).then(rs => {
+                if (requestId !== this._suggestionsRequestId || keyword !== this.suggestionsKeyword) {
+                    return
+                }
+                const result = this.normalizeSuggestionsResult(rs)
+                const ids = new Set(this.suggestionsData.map(item => item && item.id))
+                this.suggestionsData = this.suggestionsData.concat(result.items.filter(item => {
+                    if (!item || ids.has(item.id)) {
+                        return false
+                    }
+                    ids.add(item.id)
+                    return true
+                }))
+                this.suggestionsHasMore = result.hasMore
+            }).finally(() => {
+                if (requestId === this._suggestionsRequestId) {
+                    this.suggestionsLoadingMore = false
+                }
+            })
+        },
+        normalizeSuggestionsResult (result) {
+            if (Array.isArray(result)) {
+                return {
+                    items: result,
+                    hasMore: false
+                }
+            }
+            return {
+                items: result && Array.isArray(result.items) ? result.items : [],
+                hasMore: !!(result && result.hasMore)
+            }
+        },
         normalizeSuggestionsKeyword (nearestInfo, keyword) {
             const nearest = keyword === undefined
                 ? (nearestInfo && nearestInfo.nearest) || ''
@@ -294,6 +353,8 @@ export default {
             this._suggestionsRequestId = (this._suggestionsRequestId || 0) + 1
             this.$refs.suggestions && this.$refs.suggestions.close()
             this.suggestioning = false
+            this.suggestionsLoadingMore = false
+            this.suggestionsHasMore = false
             this.popoverActive = false
         },
         hasCurrentSuggestionsContext () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aochuang/client-sdk",
-  "version": "1.0.372",
+  "version": "1.0.373",
   "description": "",
   "files": [
     "common",