Skip to content

Commit 8658806

Browse files
tangjinzhoutangjinzhou
committed
feat: input add disabled
1 parent 4f3ce35 commit 8658806

File tree

12 files changed

+38
-36
lines changed

12 files changed

+38
-36
lines changed

‎components/_util/type.ts

+3
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ export function functionType<T = () => {}>(defaultVal?: any) {
6262
export function anyType<T = any>() {
6363
return { validator: () => true } as unknown as { type: PropType<T> };
6464
}
65+
export function vNodeType<T = VueNode>() {
66+
return { validator: () => true } as unknown as { type: PropType<T> };
67+
}
6568

6669
export function stringType<T extends string = string>(defaultVal?: string) {
6770
return { type: String as unknown as PropType<T>, default: defaultVal as T };

‎components/config-provider/DisabledContext.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export type DisabledType = boolean | undefined;
55
const DisabledContextKey: InjectionKey<Ref<DisabledType>> = Symbol('DisabledContextKey');
66

77
export const useInjectDisabled = () => {
8-
return inject(DisabledContextKey, ref(undefined));
8+
return inject(DisabledContextKey, ref<DisabledType>(undefined));
99
};
1010
export const useProviderDisabled = (disabled: Ref<DisabledType>) => {
1111
const parentDisabled = useInjectDisabled();

‎components/input/ClearableLabeledInput.tsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@ import PropTypes from '../_util/vue-types';
44
import { cloneElement } from '../_util/vnode';
55
import type { CSSProperties, PropType, VNode } from 'vue';
66
import { defineComponent } from 'vue';
7-
import { tuple } from '../_util/type';
7+
import type { VueNode } from '../_util/type';
8+
import { anyType, tuple } from '../_util/type';
89
import type { Direction, SizeType } from '../config-provider';
910
import type { MouseEventHandler } from '../_util/EventInterface';
1011
import { hasAddon } from './util';
1112
import { FormItemInputContext } from '../form/FormItemContext';
1213
import type { InputStatus } from '../_util/statusUtils';
1314
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
1415

15-
const ClearableInputType = ['text', 'input'];
16+
const ClearableInputType = ['text', 'input'] as const;
1617

1718
export default defineComponent({
1819
compatConfig: { MODE: 3 },
@@ -21,18 +22,18 @@ export default defineComponent({
2122
props: {
2223
prefixCls: String,
2324
inputType: PropTypes.oneOf(tuple('text', 'input')),
24-
value: PropTypes.any,
25-
defaultValue: PropTypes.any,
25+
value: anyType<VueNode>(),
26+
defaultValue: anyType<VueNode>(),
2627
allowClear: { type: Boolean, default: undefined },
27-
element: PropTypes.any,
28+
element: anyType<VueNode>(),
2829
handleReset: Function as PropType<MouseEventHandler>,
2930
disabled: { type: Boolean, default: undefined },
3031
direction: { type: String as PropType<Direction> },
3132
size: { type: String as PropType<SizeType> },
32-
suffix: PropTypes.any,
33-
prefix: PropTypes.any,
34-
addonBefore: PropTypes.any,
35-
addonAfter: PropTypes.any,
33+
suffix: anyType<VueNode>(),
34+
prefix: anyType<VueNode>(),
35+
addonBefore: anyType<VueNode>(),
36+
addonAfter: anyType<VueNode>(),
3637
readonly: { type: Boolean, default: undefined },
3738
focused: { type: Boolean, default: undefined },
3839
bordered: { type: Boolean, default: true },
@@ -114,7 +115,7 @@ export default defineComponent({
114115
return () => {
115116
const { prefixCls, inputType, element = slots.element?.() } = props;
116117
if (inputType === ClearableInputType[0]) {
117-
return renderTextAreaWithClearIcon(prefixCls, element);
118+
return renderTextAreaWithClearIcon(prefixCls, element as VNode);
118119
}
119120
return null;
120121
};

‎components/input/Group.tsx

+3-15
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type { PropType } from 'vue';
22
import { computed, defineComponent } from 'vue';
33
import type { SizeType } from '../config-provider';
44
import { FormItemInputContext } from '../form/FormItemContext';
5-
import type { FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
65
import useConfigInject from '../config-provider/hooks/useConfigInject';
76
import classNames from '../_util/classNames';
87

@@ -17,20 +16,16 @@ export default defineComponent({
1716
prefixCls: String,
1817
size: { type: String as PropType<SizeType> },
1918
compact: { type: Boolean, default: undefined },
20-
onMouseenter: { type: Function as PropType<MouseEventHandler> },
21-
onMouseleave: { type: Function as PropType<MouseEventHandler> },
22-
onFocus: { type: Function as PropType<FocusEventHandler> },
23-
onBlur: { type: Function as PropType<FocusEventHandler> },
2419
},
2520
setup(props, { slots, attrs }) {
26-
const { prefixCls, direction } = useConfigInject('input-group', props);
21+
const { prefixCls, direction, getPrefixCls } = useConfigInject('input-group', props);
2722
const formItemInputContext = FormItemInputContext.useInject();
2823
FormItemInputContext.useProvide(formItemInputContext, {
2924
isFormItemInput: false,
3025
});
3126

3227
// style
33-
const { prefixCls: inputPrefixCls } = useConfigInject('input', props);
28+
const inputPrefixCls = computed(() => getPrefixCls('input'));
3429
const [wrapSSR, hashId] = useStyle(inputPrefixCls);
3530

3631
const cls = computed(() => {
@@ -46,14 +41,7 @@ export default defineComponent({
4641
});
4742
return () => {
4843
return wrapSSR(
49-
<span
50-
{...attrs}
51-
class={classNames(cls.value, attrs.class)}
52-
onMouseenter={props.onMouseenter}
53-
onMouseleave={props.onMouseleave}
54-
onFocus={props.onFocus}
55-
onBlur={props.onBlur}
56-
>
44+
<span {...attrs} class={classNames(cls.value, attrs.class)}>
5745
{slots.default?.()}
5846
</span>,
5947
);

‎components/input/Input.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
1616

1717
// CSSINJS
1818
import useStyle from './style';
19+
import { useInjectDisabled } from '../config-provider/DisabledContext';
1920

2021
export default defineComponent({
2122
compatConfig: { MODE: 3 },
@@ -32,6 +33,8 @@ export default defineComponent({
3233
// Style
3334
const [wrapSSR, hashId] = useStyle(prefixCls);
3435

36+
const disabled = useInjectDisabled();
37+
3538
const focus = (option?: InputFocusOptions) => {
3639
inputRef.value?.focus(option);
3740
};
@@ -129,6 +132,7 @@ export default defineComponent({
129132
{...omit(rest, ['onUpdate:value', 'onChange', 'onInput'])}
130133
onChange={triggerChange}
131134
id={id}
135+
disabled={props.disabled ?? disabled.value}
132136
ref={inputRef}
133137
prefixCls={prefixClsValue}
134138
autocomplete={autocomplete.value}

‎components/input/Search.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export default defineComponent({
6464
};
6565

6666
const onPressEnter = (e: KeyboardEvent) => {
67-
if (composedRef.value) {
67+
if (composedRef.value || props.loading) {
6868
return;
6969
}
7070
onSearch(e);

‎components/input/TextArea.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
2323

2424
// CSSINJS
2525
import useStyle from './style';
26+
import { useInjectDisabled } from '../config-provider/DisabledContext';
2627

2728
function fixEmojiLength(value: string, maxLength: number) {
2829
return [...(value || '')].slice(0, maxLength).join('');
@@ -64,7 +65,7 @@ export default defineComponent({
6465

6566
// Style
6667
const [wrapSSR, hashId] = useStyle(prefixCls);
67-
68+
const disabled = useInjectDisabled();
6869
const showCount = computed(() => {
6970
return (props.showCount as any) === '' || props.showCount || false;
7071
});
@@ -191,12 +192,11 @@ export default defineComponent({
191192
setValue(triggerValue);
192193
};
193194
const renderTextArea = () => {
194-
const { style, class: customClass } = attrs;
195+
const { class: customClass } = attrs;
195196
const { bordered = true } = props;
196197
const resizeProps = {
197198
...omit(props, ['allowClear']),
198199
...attrs,
199-
style: showCount.value ? {} : style,
200200
class: [
201201
{
202202
[`${prefixCls.value}-borderless`]: !bordered,
@@ -261,6 +261,7 @@ export default defineComponent({
261261
bordered,
262262
style: showCount.value ? undefined : style,
263263
hashId: hashId.value,
264+
disabled: props.disabled ?? disabled.value,
264265
};
265266

266267
let textareaNode = (
@@ -276,7 +277,11 @@ export default defineComponent({
276277
const valueLength = [...mergedValue.value].length;
277278
let dataCount: VueNode = '';
278279
if (typeof showCount.value === 'object') {
279-
dataCount = showCount.value.formatter({ count: valueLength, maxlength });
280+
dataCount = showCount.value.formatter({
281+
value: mergedValue.value,
282+
count: valueLength,
283+
maxlength,
284+
});
280285
} else {
281286
dataCount = `${valueLength}${hasMaxLength.value ? ` / ${maxlength}` : ''}`;
282287
}

‎components/input/index.en-US.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
category: Components
33
type: Data Entry
44
title: Input
5-
cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
5+
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y3R0RowXHlAAAAAAAAAAAAAADrJ8AQ/original
66
---
77

88
A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.

‎components/input/index.zh-CN.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ category: Components
33
type: 数据录入
44
title: Input
55
subtitle: 输入框
6-
cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
6+
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y3R0RowXHlAAAAAAAAAAAAAADrJ8AQ/original
77
---
88

99
通过鼠标或键盘输入内容，是最基础的表单域的包装。

‎components/input/inputProps.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { ExtractPropTypes, PropType } from 'vue';
22
import omit from '../_util/omit';
33
import type { VueNode } from '../_util/type';
4+
import { eventType } from '../_util/type';
45
import type { CompositionEventHandler } from '../_util/EventInterface';
56
import { inputProps as vcInputProps } from '../vc-input/inputProps';
67

@@ -29,8 +30,8 @@ const textAreaProps = () => ({
2930
autosize: { type: [Boolean, Object] as PropType<boolean | AutoSizeType>, default: undefined },
3031
autoSize: { type: [Boolean, Object] as PropType<boolean | AutoSizeType>, default: undefined },
3132
onResize: { type: Function as PropType<(size: { width: number; height: number }) => void> },
32-
onCompositionstart: Function as PropType<CompositionEventHandler>,
33-
onCompositionend: Function as PropType<CompositionEventHandler>,
33+
onCompositionstart: eventType<CompositionEventHandler>(),
34+
onCompositionend: eventType<CompositionEventHandler>(),
3435
valueModifiers: Object,
3536
});
3637

‎components/input/style/index.tsx renamed to ‎components/input/style/index.ts

File renamed without changes.

‎components/vc-input/inputProps.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export const inputProps = () => ({
107107
export type InputProps = Partial<ExtractPropTypes<ReturnType<typeof inputProps>>>;
108108

109109
export interface ShowCountProps {
110-
formatter: (args: { count: number; maxlength?: number }) => VueNode;
110+
formatter: (args: { count: number; maxlength?: number; value?: string }) => VueNode;
111111
}
112112

113113
export interface InputRef {

0 commit comments

Comments
 (0)