Merge 54432bf into efab292

IDuxFE · Jul 31, 2022 · 640e577 · 640e577
2 parents efab292 + 54432bf
commit 640e577
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 6 deletions.
diff --git a/packages/components/textarea/__tests__/textarea.spec.ts b/packages/components/textarea/__tests__/textarea.spec.ts
@@ -2,7 +2,7 @@ import { MountingOptions, mount } from '@vue/test-utils'
 
 import { renderWork } from '@tests'
 
-import IxTextarea from '../src/Textarea'
+import IxTextarea, { renderSuffix } from '../src/Textarea'
 import { TextareaProps } from '../src/types'
 
 describe('Textarea', () => {
@@ -98,6 +98,7 @@ describe('Textarea', () => {
   test('clearable work', async () => {
     const onClear = vi.fn()
     const wrapper = TextareaMount({ props: { clearable: true, onClear } })
+    const renderSuffixFn = vi.fn(renderSuffix)
 
     expect(wrapper.find('.ix-icon-close-circle').exists()).toBe(true)
     expect(wrapper.find('.ix-textarea-suffix-hidden').exists()).toBe(true)
@@ -110,6 +111,10 @@ describe('Textarea', () => {
 
     expect(wrapper.find('.ix-textarea-suffix-hidden').exists()).toBe(false)
 
+    const res = (renderSuffixFn(true, undefined, '', true, onClear, '', true)?.props as { class: '' }).class
+
+    expect(res).toBe('-suffix -suffix-scroll')
+
     await wrapper.setProps({ disabled: true })
 
     expect(wrapper.find('.ix-textarea-suffix-hidden').exists()).toBe(true)

diff --git a/packages/components/textarea/src/Textarea.tsx b/packages/components/textarea/src/Textarea.tsx
@@ -5,7 +5,17 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type Ref, type Slot, type StyleValue, computed, defineComponent, normalizeClass, onMounted } from 'vue'
+import {
+  type Ref,
+  type Slot,
+  type StyleValue,
+  computed,
+  defineComponent,
+  normalizeClass,
+  onMounted,
+  ref,
+  watch,
+} from 'vue'
 
 import { type FormAccessor } from '@idux/cdk/forms'
 import { type TextareaConfig, useGlobalConfig } from '@idux/components/config'
@@ -23,6 +33,7 @@ export default defineComponent({
     const common = useGlobalConfig('common')
     const mergedPrefixCls = computed(() => `${common.prefixCls}-textarea`)
     const config = useGlobalConfig('textarea')
+    const isScroll = ref(false)
 
     const {
       elementRef,
@@ -74,6 +85,19 @@ export default defineComponent({
 
     useAutoRows(elementRef as Ref<HTMLTextAreaElement>, autoRows, accessor)
 
+    watch(
+      () => accessor.value,
+      () => {
+        if (clearable.value) {
+          if (elementRef.value?.scrollHeight !== elementRef.value?.clientHeight) {
+            isScroll.value = true
+          } else {
+            isScroll.value = false
+          }
+        }
+      },
+    )
+
     return () => {
       const { class: className, style, ...rest } = attrs
       const prefixCls = mergedPrefixCls.value
@@ -90,7 +114,15 @@ export default defineComponent({
             onCompositionstart={handleCompositionStart}
             onCompositionend={handleCompositionEnd}
           />
-          {renderSuffix(clearable.value, slots.clearIcon, clearIcon.value, clearVisible.value, handleClear, prefixCls)}
+          {renderSuffix(
+            clearable.value,
+            slots.clearIcon,
+            clearIcon.value,
+            clearVisible.value,
+            handleClear,
+            prefixCls,
+            isScroll.value,
+          )}
         </span>
       )
     }
@@ -116,14 +148,15 @@ function useDataCount(props: TextareaProps, config: TextareaConfig, accessor: Fo
   })
 }
 
-function renderSuffix(
+export function renderSuffix(
   isClearable: boolean,
   clearIconSlot: Slot | undefined,
   clearIcon: string,
   clearVisible: boolean,
   onClear: (evt: MouseEvent) => void,
   prefixCls: string,
-) {
+  isScroll: boolean,
+): JSX.Element | null {
   if (!isClearable) {
     return null
   }
@@ -132,6 +165,9 @@ function renderSuffix(
   if (!clearVisible) {
     classes += ` ${prefixCls}-suffix-hidden`
   }
+  if (isScroll) {
+    classes += ` ${prefixCls}-suffix-scroll`
+  }
 
   return (
     <span class={classes} onClick={onClear}>

diff --git a/packages/components/textarea/style/index.less b/packages/components/textarea/style/index.less
@@ -78,6 +78,10 @@
     &-hidden {
       visibility: hidden;
     }
+
+    &-scroll {
+      right: 10px !important;
+    }
   }
 
   &-with-count::after {

diff --git a/packages/components/textarea/style/mixin.less b/packages/components/textarea/style/mixin.less
@@ -5,7 +5,7 @@
   }
   .@{textarea-prefix}-suffix {
     top: @padding-vertical;
-    right: @padding-horizontal;
+    right: @padding-horizontal - 10;
   }
 }