refactor(comp: timeline): optimize code and style (#819)

IDuxFE · Mar 24, 2022 · 3b99839 · 3b99839
1 parent 743328f
commit 3b99839
Show file tree

Hide file tree

Showing 15 changed files with 889 additions and 774 deletions.
diff --git a/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap b/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap
diff --git a/packages/components/timeline/__tests__/timeline.spec.ts b/packages/components/timeline/__tests__/timeline.spec.ts
@@ -87,15 +87,12 @@ describe('Timeline', () => {
     })
     expect(wrapper.html()).toMatchSnapshot()
 
-    const reverseWrapper = TimelineMount({
-      props: {
-        reverse: true,
-      },
-    })
-    reverseWrapper.findAll('.ix-timeline-item').forEach((item, index) => {
+    await wrapper.setProps({ reverse: true })
+
+    wrapper.findAll('.ix-timeline-item').forEach((item, index) => {
       expect(item.text()).toBe((3 - index).toString())
     })
-    expect(reverseWrapper.html()).toMatchSnapshot()
+    expect(wrapper.html()).toMatchSnapshot()
   })
 
   test('pending work', async () => {
@@ -107,33 +104,14 @@ describe('Timeline', () => {
 
     await wrapper.setProps({ pending: true })
     expect(wrapper.findAll('.ix-timeline-item').length).toBe(5)
-    expect(wrapper.findAll('.ix-timeline-item')[3].classes()).toContain('ix-timeline-item-pending')
-    expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending-dot')
+    expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending')
     expect(wrapper.html()).toMatchSnapshot()
 
     await wrapper.setProps({ pending: pendingText })
     expect(wrapper.findAll('.ix-timeline-item').length).toBe(5)
-    expect(wrapper.findAll('.ix-timeline-item')[3].classes()).toContain('ix-timeline-item-pending')
-    expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending-dot')
+    expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending')
     expect(wrapper.findAll('.ix-timeline-item')[4].text()).toBe(pendingText)
     expect(wrapper.html()).toMatchSnapshot()
-
-    const reverseWrapper = TimelineMount({
-      props: {
-        pending: true,
-        reverse: true,
-      },
-    })
-
-    reverseWrapper.findAll('.ix-timeline-item').forEach((item, index) => {
-      if (index === 0) {
-        expect(item.classes()).toContain('ix-timeline-item-pending')
-        expect(item.classes()).toContain('ix-timeline-item-pending-dot')
-      } else {
-        expect(item.text()).toBe((4 - index).toString())
-      }
-    })
-    expect(reverseWrapper.html()).toMatchSnapshot()
   })
 
   test('pending slot work', async () => {
@@ -146,16 +124,19 @@ describe('Timeline', () => {
     })
 
     expect(wrapper.findAll('.ix-timeline-item').length).toBe(5)
-    expect(wrapper.findAll('.ix-timeline-item')[3].classes()).toContain('ix-timeline-item-pending')
-    expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending-dot')
+    expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending')
     expect(wrapper.findAll('.ix-timeline-item')[4].text()).toBe(pendingSlotText)
     expect(wrapper.html()).toMatchSnapshot()
 
     await wrapper.setProps({ pending: pendingText })
     expect(wrapper.findAll('.ix-timeline-item')[4].text()).toBe(pendingSlotText)
     expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('reverse with pending slot work', async () => {
+    const pendingSlotText = 'pendingSlotText'
 
-    const reverseWrapper = TimelineMount({
+    const wrapper = TimelineMount({
       slots: {
         pending: pendingSlotText,
       },
@@ -164,15 +145,14 @@ describe('Timeline', () => {
       },
     })
 
-    reverseWrapper.findAll('.ix-timeline-item').forEach((item, index) => {
+    wrapper.findAll('.ix-timeline-item').forEach((item, index) => {
       if (index === 0) {
         expect(item.classes()).toContain('ix-timeline-item-pending')
-        expect(item.classes()).toContain('ix-timeline-item-pending-dot')
       } else {
         expect(item.text()).toBe((4 - index).toString())
       }
     })
-    expect(reverseWrapper.html()).toMatchSnapshot()
+    expect(wrapper.html()).toMatchSnapshot()
   })
 
   test('pendingDot work', async () => {
@@ -183,13 +163,13 @@ describe('Timeline', () => {
     })
     const pendingDotText = 'pendingDotText'
 
-    expect(wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-dot').find('.ix-icon').classes()).toContain(
-      'ix-icon-loading',
-    )
+    expect(
+      wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-head-dot').find('.ix-icon').classes(),
+    ).toContain('ix-icon-loading')
     expect(wrapper.html()).toMatchSnapshot()
 
     await wrapper.setProps({ pendingDot: pendingDotText })
-    expect(wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-dot').text()).toBe(pendingDotText)
+    expect(wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-head-dot').text()).toBe(pendingDotText)
     expect(wrapper.html()).toMatchSnapshot()
   })
 
@@ -216,10 +196,10 @@ describe('TimelineItem', () => {
     })
 
     const items = wrapper.findAll('.ix-timeline-item')
-    expect(items[0].find('.ix-timeline-item-dot').classes()).toContain('ix-timeline-item-dot-red')
+    expect(items[0].find('.ix-timeline-item-head-dot').classes()).toContain('ix-timeline-item-head-dot-red')
 
-    expect(items[1].find('.ix-timeline-item-dot-black').exists()).toBe(false)
-    expect(items[1].find('.ix-timeline-item-dot').html()).toContain('style="color: black; border-color: black;"')
+    expect(items[1].find('.ix-timeline-item-head-dot-black').exists()).toBe(false)
+    expect(items[1].find('.ix-timeline-item-head-dot').html()).toContain('style="color: black; border-color: black;"')
   })
 
   test('dot work', async () => {
@@ -232,9 +212,9 @@ describe('TimelineItem', () => {
 
     const items = wrapper.findAll('.ix-timeline-item')
 
-    expect(items[0].find('.ix-timeline-item-dot-custom').exists()).toBe(true)
-    expect(items[0].find('.ix-timeline-item-dot').classes()).toContain('ix-timeline-item-dot-custom')
-    expect(items[0].find('.ix-timeline-item-dot').text()).toBe(dotText)
+    expect(items[0].find('.ix-timeline-item-head-dot-custom').exists()).toBe(true)
+    expect(items[0].find('.ix-timeline-item-head-dot').classes()).toContain('ix-timeline-item-head-dot-custom')
+    expect(items[0].find('.ix-timeline-item-head-dot').text()).toBe(dotText)
   })
 
   test('dot slot work', async () => {
@@ -247,9 +227,9 @@ describe('TimelineItem', () => {
 
     const items = wrapper.findAll('.ix-timeline-item')
 
-    expect(items[0].find('.ix-timeline-item-dot-custom').exists()).toBe(true)
-    expect(items[0].find('.ix-timeline-item-dot').classes()).toContain('ix-timeline-item-dot-custom')
-    expect(items[0].find('.ix-timeline-item-dot').text()).toBe(dotSlotText)
+    expect(items[0].find('.ix-timeline-item-head-dot-custom').exists()).toBe(true)
+    expect(items[0].find('.ix-timeline-item-head-dot').classes()).toContain('ix-timeline-item-head-dot-custom')
+    expect(items[0].find('.ix-timeline-item-head-dot').text()).toBe(dotSlotText)
   })
 
   test('label work', async () => {
@@ -262,8 +242,8 @@ describe('TimelineItem', () => {
 
     const items = wrapper.findAll('.ix-timeline-item')
 
-    expect(items[0].find('.ix-timeline-item-label').exists()).toBe(true)
-    expect(items[0].find('.ix-timeline-item-label').text()).toBe(labelText)
+    expect(items[0].find('.ix-timeline-item-content-label').exists()).toBe(true)
+    expect(items[0].find('.ix-timeline-item-content-label').text()).toBe(labelText)
   })
 
   test('label slot work', async () => {
@@ -277,7 +257,7 @@ describe('TimelineItem', () => {
 
     const items = wrapper.findAll('.ix-timeline-item')
 
-    expect(items[0].find('.ix-timeline-item-label').exists()).toBe(true)
-    expect(items[0].find('.ix-timeline-item-label').text()).toBe(labelSlotText)
+    expect(items[0].find('.ix-timeline-item-content-label').exists()).toBe(true)
+    expect(items[0].find('.ix-timeline-item-content-label').text()).toBe(labelSlotText)
   })
 })
diff --git a/packages/components/timeline/demo/Label.vue b/packages/components/timeline/demo/Label.vue
@@ -1,49 +1,51 @@
 <template>
-  <p>1.标签的一般用法</p>
-  <IxTimeline>
-    <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
-    <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
-    <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
-    <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
-  </IxTimeline>
+  <IxSpace vertical block>
+    <p>1.标签的一般用法</p>
+    <IxTimeline>
+      <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
+      <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
+      <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
+      <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
+    </IxTimeline>
 
-  <p>2.标签的一般用法</p>
-  <IxTimeline placement="start">
-    <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
-    <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
-    <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
-    <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
-  </IxTimeline>
+    <p>2.标签的一般用法</p>
+    <IxTimeline placement="start">
+      <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
+      <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
+      <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
+      <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
+    </IxTimeline>
 
-  <p>3.标签的一般用法</p>
-  <IxTimeline placement="alternate">
-    <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
-    <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
-    <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
-    <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
-  </IxTimeline>
+    <p>3.标签的一般用法</p>
+    <IxTimeline placement="alternate">
+      <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
+      <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
+      <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
+      <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
+    </IxTimeline>
 
-  <p>4.标签跟内容分开</p>
-  <IxTimeline :both="false">
-    <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
-    <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
-    <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
-    <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
-  </IxTimeline>
+    <p>4.标签跟内容分开</p>
+    <IxTimeline :both="false">
+      <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
+      <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
+      <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
+      <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
+    </IxTimeline>
 
-  <p>5.标签跟内容分开</p>
-  <IxTimeline :both="false" placement="start">
-    <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
-    <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
-    <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
-    <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
-  </IxTimeline>
+    <p>5.标签跟内容分开</p>
+    <IxTimeline :both="false" placement="start">
+      <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
+      <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
+      <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
+      <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
+    </IxTimeline>
 
-  <p>6.标签跟内容分开</p>
-  <IxTimeline :both="false" placement="alternate">
-    <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
-    <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
-    <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
-    <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
-  </IxTimeline>
+    <p>6.标签跟内容分开</p>
+    <IxTimeline :both="false" placement="alternate">
+      <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
+      <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>
+      <IxTimelineItem key="2" label="2021-02-12">Update component documentation</IxTimelineItem>
+      <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
+    </IxTimeline>
+  </IxSpace>
 </template>
diff --git a/packages/components/timeline/demo/Pending.vue b/packages/components/timeline/demo/Pending.vue
@@ -1,32 +1,28 @@
 <template>
-  <p>通过设置pending为true来展示幽灵节点</p>
-  <IxTimeline :pending="true">
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
-  </IxTimeline>
+  <IxSpace vertical block>
+    <p>通过设置pending为true来展示幽灵节点</p>
+    <IxTimeline :pending="true">
+      <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
+    </IxTimeline>
 
-  <p>通过设置pending为字符串来展示幽灵节点</p>
-  <IxTimeline pending="Recoding...">
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
-  </IxTimeline>
+    <p>通过设置pending为字符串来展示幽灵节点</p>
+    <IxTimeline pending="Recoding...">
+      <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
+    </IxTimeline>
 
-  <p>通过设置插槽pending来展示幽灵节点</p>
-  <IxTimeline>
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
-    <template #pending>Recoding...</template>
-  </IxTimeline>
+    <p>通过设置插槽pending来展示幽灵节点</p>
+    <IxTimeline>
+      <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
+      <template #pending>Recoding...</template>
+    </IxTimeline>
+  </IxSpace>
 </template>
-
-<style lang="less" scoped>
-p {
-  margin: 20px 0;
-}
-</style>
diff --git a/packages/components/timeline/demo/PendingDot.vue b/packages/components/timeline/demo/PendingDot.vue
@@ -1,26 +1,22 @@
 <template>
-  <p>默认幽灵节点的时间轴点</p>
-  <IxTimeline :pending="true">
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
-  </IxTimeline>
+  <IxSpace vertical block>
+    <p>默认幽灵节点的时间轴点</p>
+    <IxTimeline :pending="true">
+      <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
+    </IxTimeline>
 
-  <p>自定义幽灵节点的时间轴点</p>
-  <IxTimeline :pending="true">
-    <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
-    <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
-    <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
-    <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
-    <template #pendingDot>
-      <IxIcon name="sync" rotate />
-    </template>
-  </IxTimeline>
+    <p>自定义幽灵节点的时间轴点</p>
+    <IxTimeline :pending="true">
+      <IxTimelineItem>New issue in 2021-02-08</IxTimelineItem>
+      <IxTimelineItem>Create IxTimeline in 2021-02-10</IxTimelineItem>
+      <IxTimelineItem>Update component documentation in 2021-02-12</IxTimelineItem>
+      <IxTimelineItem>Write test cases in 2021-02-14</IxTimelineItem>
+      <template #pendingDot>
+        <IxIcon name="sync" rotate />
+      </template>
+    </IxTimeline>
+  </IxSpace>
 </template>
-
-<style lang="less" scoped>
-p {
-  margin: 20px 0;
-}
-</style>