From ad5670aba82ee4ca66988da6552e93b4e4292ad0 Mon Sep 17 00:00:00 2001
From: Huangyilin19 <huangyilin16@qq.com>
Date: Thu, 9 Nov 2023 18:54:40 -0800
Subject: [PATCH] fixed(timeline): [timeline] solve the problem that timeline
 item can't be fold

---
 packages/renderless/src/time-line/index.ts      | 8 ++++++++
 packages/renderless/src/time-line/vue.ts        | 8 +++++---
 packages/renderless/types/time-line.type.ts     | 2 ++
 packages/renderless/types/timeline-item.type.ts | 1 +
 packages/vue/src/time-line/src/mobile.vue       | 2 +-
 5 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/renderless/src/time-line/index.ts b/packages/renderless/src/time-line/index.ts
index 8c76db5f36..93a6770abf 100644
--- a/packages/renderless/src/time-line/index.ts
+++ b/packages/renderless/src/time-line/index.ts
@@ -125,3 +125,11 @@ export const computedWrapperClass =
 
     return wrapperClass
   }
+
+export const toggleFold =
+  ({ props }) =>
+  (node: ITimelineItem): boolean => {
+    const isFold = !props.data[node.index].fold
+    props.data[node.index].fold = isFold
+    return isFold
+  }
\ No newline at end of file
diff --git a/packages/renderless/src/time-line/vue.ts b/packages/renderless/src/time-line/vue.ts
index ccdd0b105c..97d36b75c6 100644
--- a/packages/renderless/src/time-line/vue.ts
+++ b/packages/renderless/src/time-line/vue.ts
@@ -21,7 +21,8 @@ import {
   changeStatus,
   computedStackNodes,
   computedSpace,
-  computedWrapperClass
+  computedWrapperClass,
+  toggleFold
 } from './index'
 import type {
   ITimelineApi,
@@ -32,7 +33,7 @@ import type {
   ITimelineItem
 } from '@/types'
 
-export const api = ['state', 'handleClick', 'getStatusCls', 'getStatus', 'getDate', 'changeStatus']
+export const api = ['state', 'handleClick', 'getStatusCls', 'getStatus', 'getDate', 'changeStatus', 'toggleFold']
 
 export const renderless = (
   props: ITimelineProps,
@@ -64,7 +65,8 @@ export const renderless = (
     getStatusCls: getStatusCls({ constants, state }),
     computedStackNodes: computedStackNodes({ state, constants }),
     changeStatus: changeStatus({ state }),
-    computedWrapperClass: computedWrapperClass({ props })
+    computedWrapperClass: computedWrapperClass({ props }),
+    toggleFold: toggleFold({ props })
   })
 
   provide('nodesInject', { timelineItems: state.timelineItems, nodes: state.nodes, props })
diff --git a/packages/renderless/types/time-line.type.ts b/packages/renderless/types/time-line.type.ts
index 7e2ed53339..195945b544 100644
--- a/packages/renderless/types/time-line.type.ts
+++ b/packages/renderless/types/time-line.type.ts
@@ -12,6 +12,7 @@
 
 import type { ExtractPropTypes } from 'vue'
 import { timelineProps, $constants } from '@/time-line/src'
+import { toggleFold } from 'src/time-line'
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type'
 import type { ITimelineItem } from './timeline-item.type'
 
@@ -47,6 +48,7 @@ export interface ITimelineApi {
   computedStackNodes: () => ITimelineItem[]
   changeStatus: () => boolean
   computedWrapperClass: () => ITimelineCustomCls
+  toggleFold: ReturnType<typeof toggleFold>
 }
 
 export type ITimelineRenderlessParams = ISharedRenderlessFunctionParams<ITimelineConstants> & {
diff --git a/packages/renderless/types/timeline-item.type.ts b/packages/renderless/types/timeline-item.type.ts
index 72999d735f..594ba375b2 100644
--- a/packages/renderless/types/timeline-item.type.ts
+++ b/packages/renderless/types/timeline-item.type.ts
@@ -71,6 +71,7 @@ export interface ITimelineItem {
   error: boolean
   disabled: boolean
   type: TimelineItemType
+  fold?: boolean
 }
 
 export interface ITimelineInject {
diff --git a/packages/vue/src/time-line/src/mobile.vue b/packages/vue/src/time-line/src/mobile.vue
index 18e87fd690..c8ab75d32f 100644
--- a/packages/vue/src/time-line/src/mobile.vue
+++ b/packages/vue/src/time-line/src/mobile.vue
@@ -64,7 +64,7 @@
                   {{ node.name }}
                 </div>
               </slot>
-              <div v-if="node.showFoldBtn" class="arrow-btn" @click="node.fold = !node.fold">
+              <div v-if="node.showFoldBtn" class="arrow-btn" @click="toggleFold(node)">
                 <div :class="['arrow-btn-arrow', node.fold ? 'arrow-btn-arrow-fold' : '']"></div>
               </div>
             </div>