clubmate.fi

import React from 'react'
import PropTypes from 'prop-types'
import { Descendants, useDescendant, useDescendants } from './useDescendants'

const TabContext = React.createContext()
const sharedPropTypes = {
  as: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.elementType, PropTypes.array])
    .isRequired,
  className: PropTypes.string
}
const sharedDefaultProps = {
  as: 'div'
}

export const Tab = props => {
  const { as: Comp, children, className } = props
  const ref = React.useRef()
  const { index, context } = useDescendant({ ref })  const { handleClick, handleKeyboard, getId, activeTabIndex } =
    React.useContext(TabContext)
  const isActive = index === activeTabIndex

  return (
    <Comp
      aria-controls={getId(index, 'tabpanel')}
      aria-selected={isActive}
      className={className}
      data-selected={isActive ? '' : undefined}
      href={Comp === 'a' ? `#${getId(index, 'tabpanel')}` : undefined}
      id={getId(index)}
      key={index}
      onClick={handleClick(index)}
      onKeyDown={handleKeyboard(index, context)}      ref={ref}
      role="tab"
      tabIndex={isActive ? 0 : -1}
      type={Comp === 'button' ? 'button' : undefined}
    >
      {children}
    </Comp>
  )
}

Tab.defaultProps = { as: 'button' }
Tab.propTypes = sharedPropTypes

export const TabList = ({ as: Comp, className, children }) => {
  const context = useDescendants()
  return (
    <Descendants value={context}>      <Comp className={className} role="tablist">
        {children}
      </Comp>
    </Descendants>
  )
}

TabList.defaultProps = sharedDefaultProps
TabList.propTypes = sharedPropTypes

export const TabPanels = ({ as: Comp, className, children }) => {
  const context = useDescendants()
  return (
    <Descendants value={context}>      <Comp className={className} tole="tablist">
        {children}
      </Comp>
    </Descendants>
  )
}

TabPanels.defaultProps = sharedDefaultProps
TabPanels.propTypes = sharedPropTypes

export const TabPanel = props => {
  const { as: Comp, className, children } = props
  const { index } = useDescendant()  const { activeTabIndex, getId } = React.useContext(TabContext)
  const isActive = activeTabIndex === index

  return (
    <Comp
      aria-labelledby={getId(index)}
      className={className}
      id={getId(index, 'tabpanel')}
      hidden={!isActive}
      key={index}
      tabIndex={0}
      role="tabpanel"
    >
      {children}
    </Comp>
  )
}

TabPanel.defaultProps = sharedDefaultProps
TabPanel.propTypes = sharedPropTypes

export const Tabs = ({ children, id, initialIndex, className }) => {
  const [activeTabIndex, setActiveTabIndex] = React.useState(initialIndex)  const getId = (...rest) => [...rest, id].join('-')

  const handleClick = index => event => {
    event.preventDefault()
    setActiveTabIndex(index)
  }

  const focusTab = currentTab => {    setActiveTabIndex(currentTab.index)
    currentTab.props.ref.current.focus()  }

  const handleKeyboard = (index, context) => event => {    const tabCount = Object.keys(context.map.current).length - 1

    const getTab = index => {      const tabs = context.map.current      const id = Object.keys(tabs).find(id => tabs[id].index === index)      return tabs[id]    }
    if (event.key === 'ArrowRight') {
      if (tabCount > index) return focusTab(getTab(index + 1))
      return focusTab(getTab(0))
    }

    if (event.key === 'ArrowLeft') {
      if (index > 0) return focusTab(getTab(index - 1))
      return focusTab(getTab(tabCount))
    }

    if (event.key === 'Home') {
      event.preventDefault()
      return focusTab(getTab(0))
    }

    if (event.key === 'End') {
      event.preventDefault()
      return focusTab(getTab(tabCount))
    }
  }

  return (
    <TabContext.Provider      value={{ activeTabIndex, handleClick, handleKeyboard, getId }}    >      <div className={className}>{children}</div>    </TabContext.Provider>  )
}

Tabs.defaultProps = { initialIndex: 0 }
Tabs.propTypes = {
  ...sharedPropTypes,
  initialIndex: PropTypes.number
}