Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { useContext, useState } from 'react'
- import PropTypes from 'prop-types'
- import style from './SwitcherEditDeck.scss'
- import { MobileContext } from '../container/App'
- const SwitcherEditDeck = ({ btns, onClick, value }) => {
- const isMobile = useContext(MobileContext)
- const [tooltipVisible, setTooltipVisible] = useState(null)
- return <div className={style.wrap_all}>
- {btns.map((btn, i) => {
- const isValue = btn.id === 'off' ? value === 'none' : btn.id === value
- return <div
- key={btn.id}
- className={style.wrap}
- >
- <div
- aria-checked={isValue}
- className={isValue ? style[`select_${btn.id}`] : style[`main_${btn.id}`]}
- role={'checkbox'}
- tabIndex={0}
- onClick={() => onClick(btn.id)}
- onKeyDown={(e) => e.key === 'Enter' && onClick(btn.id)}
- onMouseEnter={() => {
- setTooltipVisible(i)
- }}
- onMouseLeave={() => {
- setTooltipVisible(null)
- }}
- />
- {(!isMobile && tooltipVisible === i) && (<span
- className={style.tooltip}
- style={{ 'width': `${btn.width}px` }}
- >{btn.label}</span>)}
- </div>
- })}
- </div>
- }
- SwitcherEditDeck.propTypes = {
- btns: PropTypes.arrayOf(
- PropTypes.shape({
- id: PropTypes.string,
- label: PropTypes.string,
- width: PropTypes.string
- })
- ),
- value: PropTypes.string,
- onClick: PropTypes.func()
- }
- export default React.memo(SwitcherEditDeck)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement