Skip to content

Commit

Permalink
fix(Textarea): fix maxlenght property problem
Browse files Browse the repository at this point in the history
  • Loading branch information
anlyyao committed Dec 18, 2024
1 parent 37c54c7 commit 514f5db
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 73 deletions.
6 changes: 3 additions & 3 deletions src/form/__test__/__snapshots__/demo.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -1385,13 +1385,13 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
>
<textarea
class="t-textarea__wrapper-inner"
maxlength="50"
name=""
placeholder="请输入个人简介"
/>
<div
class="t-textarea__indicator"
>
0/50
</div>
</div>
Expand Down Expand Up @@ -3157,13 +3157,13 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
>
<textarea
class="t-textarea__wrapper-inner"
maxlength="50"
name=""
placeholder="请输入个人简介"
/>
<div
class="t-textarea__indicator"
>
0/50
</div>
</div>
Expand Down Expand Up @@ -4780,13 +4780,13 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
>
<textarea
class="t-textarea__wrapper-inner"
maxlength="50"
name=""
placeholder="请输入个人简介"
/>
<div
class="t-textarea__indicator"
>
0/50
</div>
</div>
Expand Down
51 changes: 51 additions & 0 deletions src/hooks/useLengthLimit.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { computed, ComputedRef } from 'vue';
import isNumber from 'lodash/isNumber';
import isObject from 'lodash/isObject';
import log from '../_common/js/log';
import { getCharacterLength, getUnicodeLength, limitUnicodeMaxLength } from '../_common/js/utils/helper';

export interface UseLengthLimitParams {
value: string;
maxlength: number;
maxcharacter: number;
allowInputOverMax: boolean;
}

export default function useLengthLimit(params: ComputedRef<UseLengthLimitParams>) {
// 文本超出数量限制时,是否允许继续输入
const getValueByLimitNumber = (inputValue: string) => {
const { allowInputOverMax, maxlength, maxcharacter } = params.value;
if (!(maxlength || maxcharacter) || allowInputOverMax || !inputValue) return inputValue;
if (maxlength) {
// input value could be unicode 😊
return limitUnicodeMaxLength(inputValue, maxlength);
}
if (maxcharacter) {
const r = getCharacterLength(inputValue, maxcharacter);
if (isObject(r)) {
return r.characters;
}
}
};

const limitNumber = computed(() => {
const { maxlength, maxcharacter, value } = params.value;
if (isNumber(value)) return String(value);
if (maxlength && maxcharacter) {
log.warn('Input', 'Pick one of maxlength and maxcharacter please.');
}
if (maxlength) {
const length = value?.length ? getUnicodeLength(value) : 0;
return `${length}/${maxlength}`;
}
if (maxcharacter) {
return `${getCharacterLength(value || '')}/${maxcharacter}`;
}
return '';
});

return {
limitNumber,
getValueByLimitNumber,
};
}
31 changes: 12 additions & 19 deletions src/input/input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,15 @@ import {
CloseCircleFilledIcon as TCloseCircleFilledIcon,
} from 'tdesign-icons-vue-next';
import isFunction from 'lodash/isFunction';
import isObject from 'lodash/isObject';
import config from '../config';
import InputProps from './props';
import { InputValue, TdInputProps } from './type';
import { useDefault, extendAPI } from '../shared';
import { getCharacterLength, limitUnicodeMaxLength } from '../_common/js/utils/helper';
import { FormItemInjectionKey } from '../form/const';
import { useFormDisabled } from '../form/hooks';
import { usePrefixClass } from '../hooks/useClass';
import { useTNodeJSX } from '../hooks/tnode';
import useLengthLimit from '../hooks/useLengthLimit';

const { prefix } = config;

Expand Down Expand Up @@ -76,6 +75,15 @@ export default defineComponent({
return false;
});

const limitParams = computed(() => ({
value: [undefined, null].includes(innerValue.value) ? undefined : String(innerValue.value),
maxlength: Number(props.maxlength),
maxcharacter: props.maxcharacter,
allowInputOverMax: props.allowInputOverMax,
}));

const { getValueByLimitNumber } = useLengthLimit(limitParams);

const setInputValue = (v: InputValue = '') => {
const input = inputRef.value as HTMLInputElement;
const sV = String(v);
Expand All @@ -96,22 +104,6 @@ export default defineComponent({
inputValueChangeHandle(e);
};

// 文本超出数量限制时,是否允许继续输入
const getValueByLimitNumber = (inputValue: string) => {
const { allowInputOverMax, maxlength, maxcharacter } = props;
if (!(maxlength || maxcharacter) || allowInputOverMax || !inputValue) return inputValue;
if (maxlength) {
// input value could be unicode 😊
return limitUnicodeMaxLength(inputValue, Number(maxlength));
}
if (maxcharacter) {
const r = getCharacterLength(inputValue, maxcharacter);
if (isObject(r)) {
return r.characters;
}
}
};

const inputValueChangeHandle = (e: Event) => {
const { value } = e.target as HTMLInputElement;
innerValue.value = getValueByLimitNumber(value);
Expand Down Expand Up @@ -248,6 +240,7 @@ export default defineComponent({
// 不传给 input 原生元素 maxlength,浏览器默认行为会按照 unicode 进行限制,与 maxLength API 违背
const inputAttrs = {
ref: inputRef,
class: inputClasses.value,
value: innerValue.value,
name: props.name,
type: renderType.value,
Expand All @@ -271,7 +264,7 @@ export default defineComponent({
{renderPrefix()}
<div class={`${inputClass.value}__wrap`}>
<div class={`${inputClass.value}__content ${inputClass.value}--${status || 'default'}`}>
<input class={inputClasses.value} {...inputAttrs} />
<input {...inputAttrs} />
{renderClearable()}
{renderSuffix()}
{renderSuffixIcon()}
Expand Down
18 changes: 10 additions & 8 deletions src/textarea/__test__/__snapshots__/demo.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,13 @@ exports[`Textarea > Textarea cardVue demo works fine 1`] = `
>
<textarea
class="t-textarea__wrapper-inner"
maxlength="500"
name=""
placeholder="请输入文字"
/>
<div
class="t-textarea__indicator"
>
0/500
</div>
</div>
Expand Down Expand Up @@ -96,13 +96,13 @@ exports[`Textarea > Textarea cardVue demo works fine 1`] = `
>
<textarea
class="t-textarea__wrapper-inner"
maxlength="500"
name=""
placeholder="请输入文字"
/>
<div
class="t-textarea__indicator"
>
0/500
</div>
</div>
Expand Down Expand Up @@ -133,13 +133,13 @@ exports[`Textarea > Textarea customVue demo works fine 1`] = `
>
<textarea
class="t-textarea__wrapper-inner"
maxlength="100"
name=""
placeholder="请输入文字"
/>
<div
class="t-textarea__indicator"
>
0/100
</div>
</div>
Expand Down Expand Up @@ -214,6 +214,7 @@ exports[`Textarea > Textarea maxcharacterVue demo works fine 1`] = `
<div
class="t-textarea__indicator"
>
0/500
</div>
</div>
Expand All @@ -234,13 +235,13 @@ exports[`Textarea > Textarea maxlengthVue demo works fine 1`] = `
>
<textarea
class="t-textarea__wrapper-inner"
maxlength="500"
name="标签文字"
placeholder="请输入文字"
/>
<div
class="t-textarea__indicator"
>
0/500
</div>
</div>
Expand Down Expand Up @@ -406,13 +407,13 @@ exports[`Textarea > Textarea mobileVue demo works fine 1`] = `
>
<textarea
class="t-textarea__wrapper-inner"
maxlength="500"
name="标签文字"
placeholder="请输入文字"
/>
<div
class="t-textarea__indicator"
>
0/500
</div>
</div>
Expand Down Expand Up @@ -447,6 +448,7 @@ exports[`Textarea > Textarea mobileVue demo works fine 1`] = `
<div
class="t-textarea__indicator"
>
0/500
</div>
</div>
Expand Down Expand Up @@ -539,13 +541,13 @@ exports[`Textarea > Textarea mobileVue demo works fine 1`] = `
>
<textarea
class="t-textarea__wrapper-inner"
maxlength="500"
name=""
placeholder="请输入文字"
/>
<div
class="t-textarea__indicator"
>
0/500
</div>
</div>
Expand Down Expand Up @@ -575,13 +577,13 @@ exports[`Textarea > Textarea mobileVue demo works fine 1`] = `
>
<textarea
class="t-textarea__wrapper-inner"
maxlength="500"
name=""
placeholder="请输入文字"
/>
<div
class="t-textarea__indicator"
>
0/500
</div>
</div>
Expand Down Expand Up @@ -632,13 +634,13 @@ exports[`Textarea > Textarea mobileVue demo works fine 1`] = `
>
<textarea
class="t-textarea__wrapper-inner"
maxlength="100"
name=""
placeholder="请输入文字"
/>
<div
class="t-textarea__indicator"
>
0/100
</div>
</div>
Expand Down
Loading

0 comments on commit 514f5db

Please sign in to comment.