diff --git a/packages/common b/packages/common index 17b62abaed..ee109a4547 160000 --- a/packages/common +++ b/packages/common @@ -1 +1 @@ -Subproject commit 17b62abaedb8f4d2bac8e2aad53bc17bc68d5fd9 +Subproject commit ee109a4547b88f86bd97e4b4b6da0c142cc78c7b diff --git a/packages/components/textarea/Textarea.tsx b/packages/components/textarea/Textarea.tsx index a78dc72db0..4613f3cd97 100644 --- a/packages/components/textarea/Textarea.tsx +++ b/packages/components/textarea/Textarea.tsx @@ -1,5 +1,6 @@ import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'; import classNames from 'classnames'; +import { CloseCircleFilledIcon as TdCloseCircleFilledIcon } from 'tdesign-icons-react'; import calcTextareaHeight from '@tdesign/common-js/utils/calcTextareaHeight'; import { getCharacterLength, getUnicodeLength, limitUnicodeMaxLength } from '@tdesign/common-js/utils/helper'; @@ -9,6 +10,7 @@ import useConfig from '../hooks/useConfig'; import useControlled from '../hooks/useControlled'; import useDefaultProps from '../hooks/useDefaultProps'; import useEventCallback from '../hooks/useEventCallback'; +import useGlobalIcon from '../hooks/useGlobalIcon'; import useIsomorphicLayoutEffect from '../hooks/useLayoutEffect'; import { textareaDefaultProps } from './defaultProps'; @@ -49,9 +51,12 @@ const Textarea = forwardRef((originalProps, tips, allowInputOverMax, rows, + clearable, + onClear, ...otherProps } = props; const hasMaxcharacter = typeof maxcharacter !== 'undefined'; + const readOnlyProp = props.readOnly || props.readonly; const [value = '', setValue] = useControlled(props, 'value', props.onChange); @@ -72,6 +77,10 @@ const Textarea = forwardRef((originalProps, }, [value, allowInputOverMax, maxcharacter]); const { classPrefix } = useConfig(); + const { CloseCircleFilledIcon } = useGlobalIcon({ + CloseCircleFilledIcon: TdCloseCircleFilledIcon, + }); + const isShowClearIcon = clearable && value && !disabled && !readOnlyProp; const textareaPropsNames = Object.keys(otherProps).filter( (key) => !/^on[A-Z]/.test(key) && !OMIT_PROPS.includes(key), @@ -140,6 +149,13 @@ const Textarea = forwardRef((originalProps, } } + function handleClear(e: React.MouseEvent) { + composingRef.current = false; + setComposingValue(''); + setValue('', { e, trigger: 'clear' }); + onClear?.({ e }); + } + function handleCompositionStart() { composingRef.current = true; } @@ -216,7 +232,13 @@ const Textarea = forwardRef((originalProps, ); return ( -
+