From 2ec0f4b8dfc1614d11153f0637bb706ec8835917 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=20Cai?= Date: Thu, 28 Nov 2024 20:07:23 +0800 Subject: [PATCH 1/7] feat(datePicker): support `readonly` --- src/date-picker/DatePicker.tsx | 2 +- src/date-picker/DateRangePicker.tsx | 1 + .../__snapshots__/index.test.jsx.snap | 408 +++++++++++++++++- src/date-picker/__tests__/index.test.jsx | 104 +++-- src/date-picker/_usage/date-picker-props.json | 7 + .../_usage/date-range-picker-props.json | 6 + src/date-picker/date-picker.en-US.md | 1 + src/date-picker/date-picker.md | 1 + src/date-picker/date-range-picker-props.ts | 5 + src/date-picker/hooks/useRange.tsx | 6 +- src/date-picker/hooks/useSingle.tsx | 2 +- src/date-picker/props.ts | 5 + src/date-picker/type.ts | 10 + 13 files changed, 518 insertions(+), 40 deletions(-) diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index 04efff8b5c..9c98702a1c 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -292,7 +292,7 @@ export default defineComponent({ popupProps={popupProps.value} inputProps={inputProps.value} placeholder={props.placeholder || globalConfig.value.placeholder[props.mode]} - popupVisible={popupVisible.value} + popupVisible={!props.readonly && popupVisible.value} valueDisplay={() => renderTNodeJSX('valueDisplay', { params: valueDisplayParams.value })} needConfirm={props.needConfirm} {...(props.selectInputProps as TdDatePickerProps['selectInputProps'])} diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx index 832f5abf1a..954e6287b3 100644 --- a/src/date-picker/DateRangePicker.tsx +++ b/src/date-picker/DateRangePicker.tsx @@ -411,6 +411,7 @@ export default defineComponent({ return () => (
+
+ +
+
+ + + + + + + + + + + +
+ +
+ + + +
+
+`; + +exports[`:range 1`] = ` +
+
+ + +
+
+ + +
+
+ + + + + + + +
+ +
+
+ - +
+
+
+ + + + + + + +
+ +
+ + + + + + +
+
+ + + + +
+
+`; + +exports[`:value 1`] = ` +
+
+ +
+
+ + + + + + + + + + + +
+ +
+ + + +
+
+`; exports[`DatePicker > :mode 1`] = `
:value 1`] = `
`; + +exports[`DatePicker test > DatePicker > :props > :mode 1`] = ` +
+
+ +
+
+ + + + + + + + + + + +
+ +
+ + + +
+
+`; + +exports[`DatePicker test > DatePicker > :props > :value 1`] = ` +
+
+ +
+
+ + + + + + + + + + + +
+ +
+ + + +
+
+`; + +exports[`DatePicker test > DateRangePicker > :props > :range 1`] = ` +
+
+ + +
+
+ + +
+
+ + + + + + + +
+ +
+
+ - +
+
+
+ + + + + + + +
+ +
+ + + + + + +
+
+ + + + +
+
+`; diff --git a/src/date-picker/__tests__/index.test.jsx b/src/date-picker/__tests__/index.test.jsx index b22b96a906..d672e4ab97 100644 --- a/src/date-picker/__tests__/index.test.jsx +++ b/src/date-picker/__tests__/index.test.jsx @@ -1,52 +1,84 @@ import { mount } from '@vue/test-utils'; import MockDate from 'mockdate'; import DatePicker, { DateRangePicker } from '@/src/date-picker/index.ts'; +import { ref } from 'vue'; // 固定时间，当使用 new Date() 时，返回固定时间，防止“当前时间”的副作用影响，导致 snapshot 变更，mockdate 插件见 https://github.com/boblauer/MockDate MockDate.set('2020-12-28'); // every component needs four parts: props/events/slots/functions. -describe('DatePicker', () => { - // test props api - describe(':props', () => { - it('', () => { - const wrapper = mount({ - render() { - return ; - }, - }); - expect(wrapper.exists()).toBe(true); - }); - }); +describe('DatePicker test', () => { + describe('DatePicker', () => { + describe(':props', () => { + // it(':value', () => { + // const wrapper = mount({ + // render() { + // return ; + // }, + // }); + // expect(wrapper.exists()).toBe(true); + // expect(wrapper.element).toMatchSnapshot(); + // }); - it(':value', () => { - const wrapper = mount({ - render() { - return ; - }, - }); - expect(wrapper.element).toMatchSnapshot(); - }); + // it(':mode', () => { + // const wrapper = mount({ + // render() { + // return ; + // }, + // }); + // expect(wrapper.element).toMatchSnapshot(); + // }); - it(':mode', () => { - const wrapper = mount({ - render() { - return ; - }, + it(':readonly', async () => { + const readonly = ref(false); + + const wrapper = mount( + { + render() { + return ( + + ); + }, + }, + { + attachTo: document.body, + }, + ); + await wrapper.find('.t-input').trigger('click'); + // await wrapper.find('.t-select-input').trigger('focus'); + + await wrapper.vm.$nextTick(); + await new Promise((resolve) => setTimeout(resolve, 1000)); + const focusedInput = wrapper.findAll('.t-input--focused'); + // console.log('focusedInput', focusedInput); + const pickerPopup = wrapper.findAll('.t-date-picker__panel'); + // console.log('pickerPopup', pickerPopup); + + // 断言 border-color 是否为 #0052d9 + // expect(focusedInput.element.style.borderColor).toBe('#0052d9'); + }); }); - expect(wrapper.element).toMatchSnapshot(); }); - it(':range', () => { - const wrapper = mount({ - render() { - const testRange = [ - '2018-08', // new Date(2017, 7) - '2028-04', // new Date(2027, 3) - ]; - return ; - }, + describe('DateRangePicker', () => { + describe(':props', () => { + it(':range', () => { + const wrapper = mount({ + render() { + const testRange = [ + '2018-08', // new Date(2017, 7) + '2028-04', // new Date(2027, 3) + ]; + return ; + }, + }); + expect(wrapper.element).toMatchSnapshot(); + }); }); - expect(wrapper.element).toMatchSnapshot(); }); }); diff --git a/src/date-picker/_usage/date-picker-props.json b/src/date-picker/_usage/date-picker-props.json index 663d77e079..5cc3fee33e 100644 --- a/src/date-picker/_usage/date-picker-props.json +++ b/src/date-picker/_usage/date-picker-props.json @@ -17,6 +17,7 @@ "defaultValue": false, "options": [] }, + { "name": "disabled", "type": "Boolean", @@ -29,6 +30,12 @@ "defaultValue": false, "options": [] }, + { + "name": "readonly", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, { "name": "mode", "type": "enum", diff --git a/src/date-picker/_usage/date-range-picker-props.json b/src/date-picker/_usage/date-range-picker-props.json index 878b2e0414..93da4322be 100644 --- a/src/date-picker/_usage/date-range-picker-props.json +++ b/src/date-picker/_usage/date-range-picker-props.json @@ -29,6 +29,12 @@ "defaultValue": false, "options": [] }, + { + "name": "readonly", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, { "name": "mode", "type": "enum", diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md index 4cc2cc6cc8..a2a1024d1b 100644 --- a/src/date-picker/date-picker.en-US.md +++ b/src/date-picker/date-picker.en-US.md @@ -77,6 +77,7 @@ prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definitio presets | Object | - | Typescript：`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N +readonly | Boolean | undefined | Whether it is read only, the priority is greater than `allowInput` | N separator | String | - | \- | N size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N status | String | default | options: default/success/warning/error | N diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md index e36f6e3531..d36389bda6 100644 --- a/src/date-picker/date-picker.md +++ b/src/date-picker/date-picker.md @@ -77,6 +77,7 @@ prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[ presets | Object | - | 预设快捷日期选择，示例：{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型：`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域（包含确定按钮）。可选项：left/top/right/bottom | N rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N +readonly | Boolean | undefined | 是否只读，优先级大于 `allowInput` | N separator | String | - | 日期分隔符，支持全局配置，默认为 '-' | N size | String | medium | 输入框尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N status | String | default | 输入框状态。可选项：default/success/warning/error | N diff --git a/src/date-picker/date-range-picker-props.ts b/src/date-picker/date-range-picker-props.ts index d15a4966c2..d60015f4b8 100644 --- a/src/date-picker/date-range-picker-props.ts +++ b/src/date-picker/date-range-picker-props.ts @@ -97,6 +97,11 @@ export default { rangeInputProps: { type: Object as PropType, }, + /** 只读状态 */ + readonly: { + type: Boolean, + default: undefined, + }, /** 日期分隔符，支持全局配置，默认为 '-' */ separator: { type: String, diff --git a/src/date-picker/hooks/useRange.tsx b/src/date-picker/hooks/useRange.tsx index d9c64f2ad7..92b41b9b28 100644 --- a/src/date-picker/hooks/useRange.tsx +++ b/src/date-picker/hooks/useRange.tsx @@ -5,6 +5,7 @@ import omit from 'lodash/omit'; import { useTNodeJSX } from '../../hooks/tnode'; import { useGlobalIcon } from '../../hooks/useGlobalIcon'; import { usePrefixClass, useConfig } from '../../hooks/useConfig'; +import { useReadonly } from '../../../src/hooks/useReadonly'; import { TdDateRangePickerProps, DateValue } from '../type'; import { isValidDate, formatDate, getDefaultFormat, parseToDayjs } from '../../_common/js/date-picker/format'; @@ -36,6 +37,7 @@ export default function useRange(props: TdDateRangePickerProps) { const isHoverCell = ref(false); const activeIndex = ref(0); // 确定当前选中的输入框序号 const inputValue = ref(formatDate(props.value, { format: formatRef.value.format })); // 未真正选中前可能不断变更输入框的内容 + const isReadOnly = useReadonly(); // input 设置 const rangeInputProps = computed(() => ({ @@ -45,7 +47,7 @@ export default function useRange(props: TdDateRangePickerProps) { borderless: props.borderless, clearable: props.clearable, prefixIcon: () => renderTNodeJSX('prefixIcon'), - readonly: !props.allowInput, + readonly: props.readonly || !props.allowInput, separator: props.separator || globalConfig.value.rangeSeparator, placeholder: props.placeholder || globalConfig.value.placeholder[props.mode], activeIndex: popupVisible.value ? activeIndex.value : undefined, @@ -122,6 +124,8 @@ export default function useRange(props: TdDateRangePickerProps) { overlayInnerStyle: props.popupProps?.overlayInnerStyle ?? { width: 'auto' }, overlayClassName: [props.popupProps?.overlayClassName, `${COMPONENT_NAME.value}__panel-container`], onVisibleChange: (visible: boolean, context: any) => { + if (isReadOnly.value) return; + // 这里劫持了进一步向 popup 传递的 onVisibleChange 事件，为了保证可以在 Datepicker 中使用 popupProps.onVisibleChange，故此处理 props.popupProps?.onVisibleChange?.(visible, context); props.popupProps?.['on-visible-change']?.(visible, context); diff --git a/src/date-picker/hooks/useSingle.tsx b/src/date-picker/hooks/useSingle.tsx index 093b0975d8..adaee6b479 100644 --- a/src/date-picker/hooks/useSingle.tsx +++ b/src/date-picker/hooks/useSingle.tsx @@ -47,7 +47,7 @@ export default function useSingle(props: TdDatePickerProps) { size: props.size, ref: inputRef, prefixIcon: () => renderTNodeJSX('prefixIcon'), - readonly: !props.allowInput, + readonly: props.readonly || !props.allowInput, suffixIcon: () => { return renderTNodeJSX('suffixIcon') || ; }, diff --git a/src/date-picker/props.ts b/src/date-picker/props.ts index f79794a89b..679d1b8fab 100644 --- a/src/date-picker/props.ts +++ b/src/date-picker/props.ts @@ -91,6 +91,11 @@ export default { return ['left', 'top', 'right', 'bottom'].includes(val); }, }, + /** 只读状态 */ + readonly: { + type: Boolean, + default: undefined, + }, /** 透传 SelectInput 筛选器输入框组件的全部属性 */ selectInputProps: { type: Object as PropType, diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts index 8f20f37905..f56e115957 100644 --- a/src/date-picker/type.ts +++ b/src/date-picker/type.ts @@ -93,6 +93,11 @@ export interface TdDatePickerProps { * @default bottom */ presetsPlacement?: 'left' | 'top' | 'right' | 'bottom'; + /** + * 只读状态 + * @default undefined + */ + readonly?: boolean; /** * 透传 SelectInput 筛选器输入框组件的全部属性 */ @@ -257,6 +262,11 @@ export interface TdDateRangePickerProps { * @default bottom */ presetsPlacement?: 'left' | 'top' | 'right' | 'bottom'; + /** + * 只读状态 + * @default undefined + */ + readonly?: boolean; /** * 透传给范围输入框 RangeInput 组件的参数 */ From c50469559356729c3a09e87bc714ce3a62ad4274 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=20Cai?= Date: Mon, 2 Dec 2024 10:27:35 +0800 Subject: [PATCH 2/7] chore: reset test --- .../__snapshots__/index.test.jsx.snap | 410 +----------------- src/date-picker/__tests__/index.test.jsx | 104 ++--- 2 files changed, 38 insertions(+), 476 deletions(-) diff --git a/src/date-picker/__tests__/__snapshots__/index.test.jsx.snap b/src/date-picker/__tests__/__snapshots__/index.test.jsx.snap index 77fdec1f6e..70ddb659f9 100644 --- a/src/date-picker/__tests__/__snapshots__/index.test.jsx.snap +++ b/src/date-picker/__tests__/__snapshots__/index.test.jsx.snap @@ -1,207 +1,4 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`:mode 1`] = ` -
-
- -
-
- - - - - - - - - - - -
- -
- - - -
-
-`; - -exports[`:range 1`] = ` -
-
- - -
-
- - -
-
- - - - - - - -
- -
-
- - -
-
-
- - - - - - - -
- -
- - - - - - -
-
- - - - -
-
-`; - -exports[`:value 1`] = ` -
-
- -
-
- - - - - - - - - - - -
- -
- - - -
-
-`; +// Vitest Snapshot v1 exports[`DatePicker > :mode 1`] = `
:value 1`] = `
-`; - -exports[`DatePicker test > DatePicker > :props > :mode 1`] = ` -
-
- -
-
- - - - - - - - - - - -
- -
- - - -
-
-`; - -exports[`DatePicker test > DatePicker > :props > :value 1`] = ` -
-
- -
-
- - - - - - - - - - - -
- -
- - - -
-
-`; - -exports[`DatePicker test > DateRangePicker > :props > :range 1`] = ` -
-
- - -
-
- - -
-
- - - - - - - -
- -
-
- - -
-
-
- - - - - - - -
- -
- - - - - - -
-
- - - - -
-
-`; +`; \ No newline at end of file diff --git a/src/date-picker/__tests__/index.test.jsx b/src/date-picker/__tests__/index.test.jsx index d672e4ab97..b22b96a906 100644 --- a/src/date-picker/__tests__/index.test.jsx +++ b/src/date-picker/__tests__/index.test.jsx @@ -1,84 +1,52 @@ import { mount } from '@vue/test-utils'; import MockDate from 'mockdate'; import DatePicker, { DateRangePicker } from '@/src/date-picker/index.ts'; -import { ref } from 'vue'; // 固定时间，当使用 new Date() 时，返回固定时间，防止“当前时间”的副作用影响，导致 snapshot 变更，mockdate 插件见 https://github.com/boblauer/MockDate MockDate.set('2020-12-28'); // every component needs four parts: props/events/slots/functions. -describe('DatePicker test', () => { - describe('DatePicker', () => { - describe(':props', () => { - // it(':value', () => { - // const wrapper = mount({ - // render() { - // return ; - // }, - // }); - // expect(wrapper.exists()).toBe(true); - // expect(wrapper.element).toMatchSnapshot(); - // }); - - // it(':mode', () => { - // const wrapper = mount({ - // render() { - // return ; - // }, - // }); - // expect(wrapper.element).toMatchSnapshot(); - // }); - - it(':readonly', async () => { - const readonly = ref(false); - - const wrapper = mount( - { - render() { - return ( - - ); - }, - }, - { - attachTo: document.body, - }, - ); - await wrapper.find('.t-input').trigger('click'); - // await wrapper.find('.t-select-input').trigger('focus'); +describe('DatePicker', () => { + // test props api + describe(':props', () => { + it('', () => { + const wrapper = mount({ + render() { + return ; + }, + }); + expect(wrapper.exists()).toBe(true); + }); + }); - await wrapper.vm.$nextTick(); - await new Promise((resolve) => setTimeout(resolve, 1000)); - const focusedInput = wrapper.findAll('.t-input--focused'); - // console.log('focusedInput', focusedInput); - const pickerPopup = wrapper.findAll('.t-date-picker__panel'); - // console.log('pickerPopup', pickerPopup); + it(':value', () => { + const wrapper = mount({ + render() { + return ; + }, + }); + expect(wrapper.element).toMatchSnapshot(); + }); - // 断言 border-color 是否为 #0052d9 - // expect(focusedInput.element.style.borderColor).toBe('#0052d9'); - }); + it(':mode', () => { + const wrapper = mount({ + render() { + return ; + }, }); + expect(wrapper.element).toMatchSnapshot(); }); - describe('DateRangePicker', () => { - describe(':props', () => { - it(':range', () => { - const wrapper = mount({ - render() { - const testRange = [ - '2018-08', // new Date(2017, 7) - '2028-04', // new Date(2027, 3) - ]; - return ; - }, - }); - expect(wrapper.element).toMatchSnapshot(); - }); + it(':range', () => { + const wrapper = mount({ + render() { + const testRange = [ + '2018-08', // new Date(2017, 7) + '2028-04', // new Date(2027, 3) + ]; + return ; + }, }); + expect(wrapper.element).toMatchSnapshot(); }); }); From dedd9a840f6c661f61f4a1b9ff6aa2afb34ebaca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=20Cai?= Date: Fri, 6 Dec 2024 17:11:23 +0800 Subject: [PATCH 3/7] fix: use global readonly --- src/date-picker/DatePicker.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index 9c98702a1c..8fe28ed48a 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -11,6 +11,7 @@ import { subtractMonth, addMonth, extractTimeObj, covertToDate } from '../_commo import props from './props'; import TSelectInput from '../select-input'; import TSinglePanel from './panel/SinglePanel'; +import { useReadonly } from '../hooks/useReadonly'; import type { TdDatePickerProps } from './type'; import type { DateValue } from './type'; @@ -44,6 +45,7 @@ export default defineComponent({ const disabled = useDisabled(); const renderTNodeJSX = useTNodeJSX(); const { globalConfig } = useConfig('datePicker'); + const isReadOnly = useReadonly(); const formatRef = computed(() => getDefaultFormat({ @@ -292,7 +294,7 @@ export default defineComponent({ popupProps={popupProps.value} inputProps={inputProps.value} placeholder={props.placeholder || globalConfig.value.placeholder[props.mode]} - popupVisible={!props.readonly && popupVisible.value} + popupVisible={!isReadOnly && popupVisible.value} valueDisplay={() => renderTNodeJSX('valueDisplay', { params: valueDisplayParams.value })} needConfirm={props.needConfirm} {...(props.selectInputProps as TdDatePickerProps['selectInputProps'])} From 9879b61e7ddc3ad1c285d1f8cae3f28a6125bc89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= Date: Fri, 6 Dec 2024 21:56:16 +0800 Subject: [PATCH 4/7] fix: use `useReadonly` --- src/date-picker/DatePicker.tsx | 2 +- src/date-picker/DateRangePicker.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index 8fe28ed48a..b9f5be50b9 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -11,7 +11,7 @@ import { subtractMonth, addMonth, extractTimeObj, covertToDate } from '../_commo import props from './props'; import TSelectInput from '../select-input'; import TSinglePanel from './panel/SinglePanel'; -import { useReadonly } from '../hooks/useReadonly'; +import { useReadonly } from '@src/hooks/useReadonly'; import type { TdDatePickerProps } from './type'; import type { DateValue } from './type'; diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx index 954e6287b3..fb7958a789 100644 --- a/src/date-picker/DateRangePicker.tsx +++ b/src/date-picker/DateRangePicker.tsx @@ -21,6 +21,7 @@ import { } from '../_common/js/date-picker/format'; import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils'; import { dateCorrection } from './utils'; +import { useReadonly } from '@src/hooks/useReadonly'; export default defineComponent({ name: 'TDateRangePicker', @@ -49,6 +50,7 @@ export default defineComponent({ } = useRange(props); const disabled = useDisabled(); + const isReadOnly = useReadonly(); const formatRef = computed(() => getDefaultFormat({ @@ -411,7 +413,7 @@ export default defineComponent({ return () => (
Date: Fri, 6 Dec 2024 22:05:43 +0800 Subject: [PATCH 5/7] fix: import path --- src/date-picker/DatePicker.tsx | 2 +- src/date-picker/DateRangePicker.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index b9f5be50b9..8fe28ed48a 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -11,7 +11,7 @@ import { subtractMonth, addMonth, extractTimeObj, covertToDate } from '../_commo import props from './props'; import TSelectInput from '../select-input'; import TSinglePanel from './panel/SinglePanel'; -import { useReadonly } from '@src/hooks/useReadonly'; +import { useReadonly } from '../hooks/useReadonly'; import type { TdDatePickerProps } from './type'; import type { DateValue } from './type'; diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx index fb7958a789..bc85cfb0a8 100644 --- a/src/date-picker/DateRangePicker.tsx +++ b/src/date-picker/DateRangePicker.tsx @@ -21,7 +21,7 @@ import { } from '../_common/js/date-picker/format'; import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils'; import { dateCorrection } from './utils'; -import { useReadonly } from '@src/hooks/useReadonly'; +import { useReadonly } from '../hooks/useReadonly'; export default defineComponent({ name: 'TDateRangePicker', From 1ae1dddc08ef61b4e763f9eea4efe747d1882da4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= Date: Sun, 8 Dec 2024 02:23:37 +0800 Subject: [PATCH 6/7] fix: use useReadonly --- src/date-picker/DatePicker.tsx | 2 +- src/date-picker/hooks/useRange.tsx | 2 +- src/date-picker/hooks/useSingle.tsx | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index 8fe28ed48a..e4a68a448e 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -294,7 +294,7 @@ export default defineComponent({ popupProps={popupProps.value} inputProps={inputProps.value} placeholder={props.placeholder || globalConfig.value.placeholder[props.mode]} - popupVisible={!isReadOnly && popupVisible.value} + popupVisible={!isReadOnly.value && popupVisible.value} valueDisplay={() => renderTNodeJSX('valueDisplay', { params: valueDisplayParams.value })} needConfirm={props.needConfirm} {...(props.selectInputProps as TdDatePickerProps['selectInputProps'])} diff --git a/src/date-picker/hooks/useRange.tsx b/src/date-picker/hooks/useRange.tsx index 92b41b9b28..1cbdc07221 100644 --- a/src/date-picker/hooks/useRange.tsx +++ b/src/date-picker/hooks/useRange.tsx @@ -47,7 +47,7 @@ export default function useRange(props: TdDateRangePickerProps) { borderless: props.borderless, clearable: props.clearable, prefixIcon: () => renderTNodeJSX('prefixIcon'), - readonly: props.readonly || !props.allowInput, + readonly: isReadOnly.value || !props.allowInput, separator: props.separator || globalConfig.value.rangeSeparator, placeholder: props.placeholder || globalConfig.value.placeholder[props.mode], activeIndex: popupVisible.value ? activeIndex.value : undefined, diff --git a/src/date-picker/hooks/useSingle.tsx b/src/date-picker/hooks/useSingle.tsx index adaee6b479..4a9544c43f 100644 --- a/src/date-picker/hooks/useSingle.tsx +++ b/src/date-picker/hooks/useSingle.tsx @@ -16,6 +16,7 @@ import { parseToDayjs, } from '../../_common/js/date-picker/format'; import useSingleValue from './useSingleValue'; +import { useReadonly } from '@src/hooks/useReadonly'; export default function useSingle(props: TdDatePickerProps) { const COMPONENT_NAME = usePrefixClass('date-picker'); @@ -24,6 +25,7 @@ export default function useSingle(props: TdDatePickerProps) { const renderTNodeJSX = useTNodeJSX(); const inputRef = ref(); + const isReadOnly = useReadonly(); const { value, onChange, time, month, year, cacheValue } = useSingleValue(props); @@ -47,7 +49,7 @@ export default function useSingle(props: TdDatePickerProps) { size: props.size, ref: inputRef, prefixIcon: () => renderTNodeJSX('prefixIcon'), - readonly: props.readonly || !props.allowInput, + readonly: isReadOnly.value || !props.allowInput, suffixIcon: () => { return renderTNodeJSX('suffixIcon') || ; }, From c8a6417795f90cdbf33e21d3293818454b199060 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= Date: Sun, 8 Dec 2024 02:42:24 +0800 Subject: [PATCH 7/7] fix: use useReadonly path --- src/date-picker/hooks/useSingle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/date-picker/hooks/useSingle.tsx b/src/date-picker/hooks/useSingle.tsx index 4a9544c43f..d823f3ee43 100644 --- a/src/date-picker/hooks/useSingle.tsx +++ b/src/date-picker/hooks/useSingle.tsx @@ -16,7 +16,7 @@ import { parseToDayjs, } from '../../_common/js/date-picker/format'; import useSingleValue from './useSingleValue'; -import { useReadonly } from '@src/hooks/useReadonly'; +import { useReadonly } from '../../hooks/useReadonly'; export default function useSingle(props: TdDatePickerProps) { const COMPONENT_NAME = usePrefixClass('date-picker');