CVOnboardingTabs CVOnboardingTabs.tsx

0% Statements 0/25

0% Branches 0/20

0% Functions 0/7

0% Lines 0/25

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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104

/*
 * 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, { useState } from 'react'
import { Tabs, Tab, Icon, IconName } from '@wings-software/uicore'
import ContentEditable from 'react-contenteditable'
import cx from 'classnames'
import type { OnClickHandlerParams } from '@cv/hooks/CVTabsHook/useCVTabsHook'
 
import css from './CVOnboardingTabs.module.scss'
 
interface CVTabProps<T> {
  defaultEntityName: string
  setName: (val: string) => void
  iconName: IconName
  tabProps: any[]
  onNext: ({ data, prevTab, newTab }: OnClickHandlerParams<T>) => void
  onPrevious: (prevTab: number, newTab: number) => void
  currentTab: number
  maxEnabledTab: number
}
 
const CVOnboardingTabs: React.FC<CVTabProps<any>> = props => {
  const [editable, setEditable] = useState(false)
 
  return (
    <div className={css.tabWrapper}>
      <Tabs
        id="monitoring-sources"
        selectedTabId={props.currentTab}
        defaultSelectedTabId={1}
        onChange={(newTabId: number, prevTabId: number, event) => {
          if (newTabId === 0) {
            event.preventDefault()
          } else if (newTabId > prevTabId) {
            props.onNext({ prevTab: prevTabId, newTab: newTabId })
          } else if (newTabId < prevTabId) {
            props.onPrevious(prevTabId, newTabId)
          }
        }}
      >
        <Tab
          id={0}
          title={
            <div>
              <Icon name={props.iconName} size={16} className={css.nameTypeIcon} />
              <ContentEditable
                html={props.defaultEntityName}
                disabled={!editable}
                className={cx({ [css.editable]: editable })}
                tagName="span"
                onChange={ev => {
                  const val = ev.target.value.replace(/&nbsp;/g, ' ')
                  if (val) {
                    props.setName(val)
                  }
                }}
                onBlur={() => {
                  setEditable(false)
                }}
                onKeyPress={event => {
                  if (event.which === 32) {
                    // space
                    event.stopPropagation()
                  } else if (event.which === 13) {
                    // enter
                    setEditable(false)
                  }
                }}
              />
              <Icon
                name="edit"
                size={12}
                className={css.nameEditIcon}
                onClick={() => {
                  setEditable(true)
                }}
              />
            </div>
          }
          panel={<></>}
        />
        {props.tabProps?.map((item, index) => {
          return (
            <Tab
              key={`${item}${index}`}
              id={item.id}
              title={item.title}
              panel={item.component}
              disabled={item.id <= props.currentTab || item.id <= props.maxEnabledTab ? false : true}
            />
          )
        })}
      </Tabs>
    </div>
  )
}
 
export default CVOnboardingTabs