fix(form): form disabled affect components (#2405)

Tencent · May 11, 2023 · 98a84a6 · 98a84a6
1 parent f829fce
commit 98a84a6
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx
@@ -21,13 +21,15 @@ import {
   initYearMonthTime,
 } from '../_common/js/date-picker/format';
 import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils';
+import useFormDisabled from '../hooks/useFormDisabled';
 
 export default defineComponent({
   name: 'TDateRangePicker',
   props,
   setup(props, { emit }) {
     const COMPONENT_NAME = usePrefixClass('date-range-picker');
     const { CalendarIcon } = useGlobalIcon({ CalendarIcon: TdCalendarIcon });
+    const { formDisabled } = useFormDisabled();
 
     const {
       inputValue,
@@ -51,6 +53,7 @@ export default defineComponent({
       format: props.format,
       valueType: props.valueType,
     }));
+    const isDisabled = computed(() => formDisabled.value || props.disabled);
 
     // 记录面板是否选中过
     const isSelected = ref(false);
@@ -416,6 +419,7 @@ export default defineComponent({
       popupVisible,
       panelProps,
       CalendarIcon,
+      isDisabled,
     };
   },
   render() {
@@ -440,7 +444,7 @@ export default defineComponent({
     return (
       <div class={COMPONENT_NAME}>
         <TRangeInputPopup
-          disabled={this.disabled}
+          disabled={this.isDisabled}
           status={this.status}
           tips={this.tips || this.$scopedSlots.tips}
           inputValue={inputValue as string[]}

diff --git a/src/select/select.tsx b/src/select/select.tsx
@@ -639,7 +639,7 @@ export default defineComponent({
               value: this.displayText,
               valueDisplay: () => renderTNode('valueDisplay', { params: this.valueDisplayParams }),
               clearable: this.clearable,
-              disabled: this.disabled,
+              disabled: this.isDisabled,
               label: this.renderLabel,
               suffixIcon: this.renderSuffixIcon,
               placeholder: this.placeholderText,

diff --git a/src/time-picker/time-picker.tsx b/src/time-picker/time-picker.tsx
@@ -13,6 +13,7 @@ import type { InputProps } from '../input';
 import useVModel from '../hooks/useVModel';
 import { useConfig, usePrefixClass } from '../hooks/useConfig';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
+import useFormDisabled from '../hooks/useFormDisabled';
 
 import props from './props';
 
@@ -25,10 +26,12 @@ export default defineComponent({
     const { classPrefix } = useConfig('classPrefix');
     const componentName = usePrefixClass('time-picker');
     const { TimeIcon } = useGlobalIcon({ TimeIcon: TdTimeIcon });
+    const { formDisabled } = useFormDisabled();
 
     const currentValue = ref('');
     const isShowPanel = ref(false);
     const { global } = useConfig('timePicker');
+    const isDisabled = computed(() => formDisabled.value || props.disabled);
 
     const { value } = toRefs(props);
     const [innerValue, setInnerValue] = useVModel(value, props.defaultValue, props.onChange, 'change');
@@ -116,6 +119,7 @@ export default defineComponent({
       global,
       currentValue,
       TimeIcon,
+      isDisabled,
     };
   },
   render() {
@@ -129,7 +133,7 @@ export default defineComponent({
               onClear: this.handleClear,
               onBlur: this.handleInputBlur,
               onInputChange: this.handleInputChange,
-              disabled: this.disabled,
+              disabled: this.isDisabled,
               clearable: this.clearable,
               allowInput: this.allowInput,
               class: this.inputClasses,

diff --git a/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx
@@ -19,6 +19,7 @@ import type { TimeRangePickerPartial } from './type';
 import useVModel from '../hooks/useVModel';
 import { useConfig, usePrefixClass } from '../hooks/useConfig';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
+import useFormDisabled from '../hooks/useFormDisabled';
 
 dayjs.extend(customParseFormat);
 
@@ -36,6 +37,7 @@ export default defineComponent({
     const { global } = useConfig('timePicker');
     const { classPrefix } = useConfig('classPrefix');
     const { TimeIcon } = useGlobalIcon({ TimeIcon: TdTimeIcon });
+    const { formDisabled } = useFormDisabled();
 
     const currentPanelIdx = ref(undefined);
     const currentValue = ref<Array<string>>(TIME_PICKER_EMPTY);
@@ -47,6 +49,8 @@ export default defineComponent({
         [`${classPrefix.value}-is-focused`]: isShowPanel.value,
       },
     ]);
+    const isDisabled = computed(() => formDisabled.value || props.disabled);
+
     const { value, format } = toRefs(props);
     const [innerValue, setInnerValue] = useVModel(value, props.defaultValue, props.onChange, 'change');
 
@@ -150,6 +154,7 @@ export default defineComponent({
       handleInputBlur,
       handleTimeChange,
       TimeIcon,
+      isDisabled,
     };
   },
   render() {
@@ -161,7 +166,7 @@ export default defineComponent({
           {...{
             props: {
               onInputChange: this.handleInputChange,
-              disabled: this.disabled,
+              disabled: this.isDisabled,
               popupVisible: this.isShowPanel,
               inputValue: this.isShowPanel ? this.currentValue : this.innerValue ?? TIME_PICKER_EMPTY,
               popupProps: {