feat(comp:date-picker): add DatePickerPanel & DateRangePickerPanel (#964

)
IDuxFE · Jun 30, 2022 · 2a343c1 · 2a343c1
1 parent c1fef9c
commit 2a343c1
Show file tree

Hide file tree

Showing 26 changed files with 939 additions and 645 deletions.
diff --git a/packages/components/date-picker/__tests__/datePicker.spec.ts b/packages/components/date-picker/__tests__/datePicker.spec.ts
@@ -145,43 +145,31 @@ describe('DatePicker', () => {
     expect(onUpdateValue).toBeCalledWith(newDate)
   })
 
-  test('defaultOpenValue work', async () => {
-    const wrapper = DatePickerMount({
-      props: {
-        value: undefined,
-        defaultOpenValue: new Date('2021-10-11'),
-      },
-    })
-
-    const headerContentBtns = wrapper.findComponent(DatePanel).find('.ix-date-panel-header-content').findAll('button')
-    expect(headerContentBtns.some(btn => btn.text().indexOf('2021') > -1)).toBeTruthy()
-    expect(headerContentBtns.some(btn => btn.text().indexOf('10') > -1)).toBeTruthy()
-  })
-
   test('datetime panel switch work', async () => {
     const wrapper = DatePickerMount({
       props: {
         type: 'datetime',
         value: new Date('2021-10-11'),
+        allowInput: true,
       },
     })
 
     expect(wrapper.findComponent(DatePanel).isVisible()).toBeTruthy()
     expect(wrapper.findComponent(TimePanel).isVisible()).toBeFalsy()
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-time-input').trigger('focus')
+    await wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-time-input').trigger('focus')
     expect(wrapper.findComponent(DatePanel).isVisible()).toBeFalsy()
     expect(wrapper.findComponent(TimePanel).isVisible()).toBeTruthy()
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-date-input').trigger('focus')
+    await wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-date-input').trigger('focus')
     expect(wrapper.findComponent(DatePanel).isVisible()).toBeTruthy()
     expect(wrapper.findComponent(TimePanel).isVisible()).toBeFalsy()
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-time-input').trigger('input')
+    await wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-time-input').trigger('input')
     expect(wrapper.findComponent(DatePanel).isVisible()).toBeFalsy()
     expect(wrapper.findComponent(TimePanel).isVisible()).toBeTruthy()
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-date-input').trigger('input')
+    await wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-date-input').trigger('input')
     expect(wrapper.findComponent(DatePanel).isVisible()).toBeTruthy()
     expect(wrapper.findComponent(TimePanel).isVisible()).toBeFalsy()
   })
@@ -198,7 +186,7 @@ describe('DatePicker', () => {
       },
     })
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-time-input').trigger('focus')
+    await wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-time-input').trigger('focus')
 
     const timePanel = wrapper.findComponent(TimePanel) as VueWrapper<ɵTimePanelInstance>
 
@@ -234,14 +222,22 @@ describe('DatePicker', () => {
       },
     })
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-date-input').find('input').setValue('2021-11-22')
+    await wrapper
+      .findComponent(Content)
+      .find('.ix-date-picker-overlay-inputs-date-input')
+      .find('input')
+      .setValue('2021-11-22')
     expect(onUpdateValue).toBeCalledWith(new Date('2021-11-22 00:00:00'))
     expect(onChange).toBeCalledWith(new Date('2021-11-22 00:00:00'), new Date('2021-10-11 00:00:00'))
 
     onUpdateValue.mockClear()
     onChange.mockClear()
 
-    await wrapper.findComponent(Content).find('.ix-date-picker-board-time-input').find('input').setValue('13:03:04')
+    await wrapper
+      .findComponent(Content)
+      .find('.ix-date-picker-overlay-inputs-time-input')
+      .find('input')
+      .setValue('13:03:04')
     expect(onUpdateValue).toBeCalledWith(new Date('2021-10-11 13:03:04'))
     expect(onChange).toBeCalledWith(new Date('2021-10-11 13:03:04'), new Date('2021-10-11 00:00:00'))
 
@@ -265,11 +261,11 @@ describe('DatePicker', () => {
     })
 
     expect(wrapper.find('.ix-date-picker').find('input').element.value).toBe('2021-10-11 13/03/04')
-    expect(wrapper.findComponent(Content).find('.ix-date-picker-board-date-input').find('input').element.value).toBe(
-      '2021年10月11日',
-    )
-    expect(wrapper.findComponent(Content).find('.ix-date-picker-board-time-input').find('input').element.value).toBe(
-      '13时03分04秒',
-    )
+    expect(
+      wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-date-input').find('input').element.value,
+    ).toBe('2021年10月11日')
+    expect(
+      wrapper.findComponent(Content).find('.ix-date-picker-overlay-inputs-time-input').find('input').element.value,
+    ).toBe('13时03分04秒')
   })
 })
diff --git a/packages/components/date-picker/__tests__/dateRangePicker.spec.ts b/packages/components/date-picker/__tests__/dateRangePicker.spec.ts
@@ -181,23 +181,6 @@ describe('DateRangePicker', () => {
     expect(onUpdateValue).toBeCalledWith([newFromDate, newToDate])
   })
 
-  test('defaultOpenValue work', async () => {
-    const wrapper = DateRangePickerMount({
-      props: {
-        value: undefined,
-        defaultOpenValue: [new Date('2021-10-11 00:00:00'), new Date('2021-11-11 00:00:00')],
-      },
-    })
-
-    const [fromDatePanel, toDatePanel] = wrapper.findAllComponents(DatePanel)
-    const fromHeaderContentBtns = fromDatePanel.find('.ix-date-panel-header-content').findAll('button')
-    const toHeaderContentBtns = toDatePanel.find('.ix-date-panel-header-content').findAll('button')
-    expect(fromHeaderContentBtns.some(btn => btn.text().indexOf('2021') > -1)).toBeTruthy()
-    expect(fromHeaderContentBtns.some(btn => btn.text().indexOf('10') > -1)).toBeTruthy()
-    expect(toHeaderContentBtns.some(btn => btn.text().indexOf('2021') > -1)).toBeTruthy()
-    expect(toHeaderContentBtns.some(btn => btn.text().indexOf('11') > -1)).toBeTruthy()
-  })
-
   test('datetime time select work', async () => {
     const onChange = vi.fn()
     const onUpdateValue = vi.fn()
@@ -210,7 +193,10 @@ describe('DateRangePicker', () => {
       },
     })
 
-    await wrapper.findComponent(RangeContent).findAll('.ix-date-range-picker-board-time-input')[0].trigger('focus')
+    await wrapper
+      .findComponent(RangeContent)
+      .findAll('.ix-date-range-picker-overlay-inputs-time-input')[0]
+      .trigger('focus')
 
     const fromTimePanel = wrapper.findAllComponents(TimePanel)[0] as unknown as VueWrapper<ɵTimePanelInstance>
     const toTimePanel = wrapper.findAllComponents(TimePanel)[1] as unknown as VueWrapper<ɵTimePanelInstance>
@@ -247,11 +233,11 @@ describe('DateRangePicker', () => {
 
     const dateInputs = wrapper
       .findComponent(RangeContent)
-      .findAll('.ix-date-range-picker-board-date-input')
+      .findAll('.ix-date-range-picker-overlay-inputs-date-input')
       .map(el => el.find('input'))
     const timeInputs = wrapper
       .findComponent(RangeContent)
-      .findAll('.ix-date-range-picker-board-time-input')
+      .findAll('.ix-date-range-picker-overlay-inputs-time-input')
       .map(el => el.find('input'))
 
     await dateInputs[0].setValue('2021-11-22')