diff --git a/src/designs/structures/sequence-timeline.tsx b/src/designs/structures/sequence-timeline.tsx index a880fa44..15f020f0 100644 --- a/src/designs/structures/sequence-timeline.tsx +++ b/src/designs/structures/sequence-timeline.tsx @@ -15,12 +15,13 @@ import type { BaseStructureProps } from './types'; export interface SequenceTimelineProps extends BaseStructureProps { gap?: number; lineOffset?: number; + showStepLabels?: boolean; } export const SequenceTimeline: ComponentType = ( props, ) => { - const { Title, Item, data, gap = 10, options } = props; + const { Title, Item, data, gap = 10, showStepLabels = true, options } = props; const { title, desc, items = [] } = data; const titleContent = Title ? : null; @@ -90,20 +91,22 @@ export const SequenceTimeline: ComponentType<SequenceTimelineProps> = ( const nodeY = itemY + itemBounds.height / 2; const indexes = [index]; - decorElements.push( - <Text - x={stepLabelX} - y={nodeY} - width={70} - fontSize={18} - fontWeight="bold" - alignHorizontal="left" - alignVertical="middle" - fill={palette[index % palette.length]} - > - {`STEP ${index + 1}`} - </Text>, - ); + if (showStepLabels) { + decorElements.push( + <Text + x={stepLabelX} + y={nodeY} + width={70} + fontSize={18} + fontWeight="bold" + alignHorizontal="left" + alignVertical="middle" + fill={palette[index % palette.length]} + > + {`STEP ${index + 1}`} + </Text>, + ); + } itemElements.push( <Item diff --git a/src/templates/built-in.ts b/src/templates/built-in.ts index db82fc57..f455a008 100644 --- a/src/templates/built-in.ts +++ b/src/templates/built-in.ts @@ -210,7 +210,7 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = { 'sequence-timeline-plain-text': { design: { title: 'default', - structure: { type: 'sequence-timeline' }, + structure: { type: 'sequence-timeline', showStepLabels: false }, items: [{ type: 'plain-text' }], }, }, @@ -231,7 +231,7 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = { 'sequence-timeline-simple': { design: { title: 'default', - structure: { type: 'sequence-timeline', gap: 20 }, + structure: { type: 'sequence-timeline', gap: 20, showStepLabels: false }, items: [{ type: 'simple', positionV: 'middle' }], }, },