Timeline Timeline.tsx

0% Statements 0/22

0% Branches 0/14

0% Functions 0/6

0% Lines 0/22

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

/*
 * Copyright 2021 Harness Inc. All rights reserved.
 * Use of this source code is governed by the PolyForm Shield 1.0.0 license
 * that can be found in the licenses directory at the root of this repository, also available at
 * https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
 */
 
import React from 'react'
import cx from 'classnames'
import { Text } from '@wings-software/uicore'
import css from './Timeline.module.scss'
export interface TimelineNode {
  label: string
  id: string
  childItems?: TimelineNode[]
}
export interface TimelineProps {
  nodes: TimelineNode[]
  onNodeClick: (itemId: string) => void
}
const Timeline = (props: TimelineProps): JSX.Element => {
  const { nodes, onNodeClick } = props
  const [activeId, setActiveId] = React.useState(props.nodes?.[0]?.id || '')
  const onItemClick = (data: any) => {
    const itemId = data.currentTarget.dataset.id
    setActiveId(itemId)
    onNodeClick(itemId)
  }
 
  return (
    <div className={cx(css.timeline, 'timeline-sidebar-main')}>
      <ul>
        {nodes.map(({ label, id, childItems }, index) => {
          let moreItems: JSX.Element[] = []
          if (childItems) {
            moreItems = childItems.map(({ label: childLabel, id: childId }, childIndex) => (
              <li
                data-id={childId}
                className={cx(css.timelineItem, { [css.active]: activeId === childId }, css.childItem)}
                onClick={onItemClick}
                id={`timeline--${childId}`}
                key={`timeline-item-${childIndex}-${childLabel}`}
              >
                <Text font={{ size: 'small', weight: 'semi-bold' }} lineClamp={1}>
                  {childLabel}
                </Text>
              </li>
            ))
          }
          return [
            <li
              data-id={id}
              className={cx(css.timelineItem, { [css.active]: activeId === id })}
              onClick={onItemClick}
              id={`timeline--${id}`}
              key={`timeline-item-${index}`}
            >
              <Text font={{ size: 'small', weight: 'semi-bold' }} lineClamp={1}>
                {label}
              </Text>
            </li>,
            ...moreItems
          ]
        })}
      </ul>
    </div>
  )
}
const TimeLineWrapper = (props: TimelineProps): JSX.Element => {
  const [sidebarVisible, setSidebarVisible] = React.useState(true)
  return (
    <div className={cx(css.timelineSidebar, { [css.hidden]: !sidebarVisible })}>
      <Timeline {...props} />
      <div className={css.sidebarToggle} onClick={() => setSidebarVisible(!sidebarVisible)}>
        <span className={css.sidebarToggleContent}>{sidebarVisible ? '<' : '>'}</span>
      </div>
    </div>
  )
}
export default TimeLineWrapper