@hbsis.uikit/react/src/components/menu/menu-item/index.js

Biblioteca ReactJS

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import cx from 'classnames'
import MenuItemStyled from './menu-item.styled'
import styled from 'styled-components'

class MenuItem extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      opened: props.opened || false,
      data: props.data || {}
    }
  }

  handleMenuItemClick = (e) => {
    e.preventDefault()
    e.stopPropagation()
    const { data } = this.state

    this.setState({
      opened: !this.state.opened
    }, () => this.handleClick(data));
  }

  handleClick = data => {
    const { onSelect, onToggleMenu, parentIndex, ownIndex } = this.props

    if (data.items && data.items.length > 0) {
      onToggleMenu && onToggleMenu(data, parentIndex, ownIndex)
    }
    else {
      onSelect && onSelect(data, parentIndex, ownIndex)
    }
  }

  normalizeChildren = items => {
    if (items.length > 0) {
      const { opened } = this.state
      const { onSelect, onToggleMenu, prefix, parentIndex } = this.props

      return (
        <div
          className={cx('menu-item-submenu', {
            'menu-item-submenu-opened': opened
          })}>
          {
            items.map((item, index) => {
              return NormalizeMenuItems(item, `sub-${prefix}`, onSelect, onToggleMenu, parentIndex, index)
            })
          }
        </div>
      )
    }
    else {
      return null;
    }
  }

  render () {
    const { opened } = this.state;
    const { items = [] } = this.props

    return (
      <MenuItemStyled>
        <div
          onClick={this.handleMenuItemClick}
          className={cx('menu-item', {
            'menu-item-active': this.props.active
          })}
        >
          {this.props.children}
        </div>
        {this.normalizeChildren(items)}
      </MenuItemStyled>
    )
  }
}

MenuItem.propTypes = {
  active: PropTypes.bool,
  onSelectMenu: PropTypes.func,
  items: PropTypes.array,
  opened: PropTypes.bool
};

MenuItem.defaultProps = {
  opened: false,
  items: []
};

const Indicator = styled.div`
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: ${p => p.color};
  margin-right: 10px;
`

const NormalizeMenuItems = (item, prefix, onSelectMenu, onToggleMenu, parentIndex, index) => {

  let icon = null
  if(item.active || index == null)
  {
    const _icon = item.icon || <Indicator color="#c5d0e1" />
    icon = React.cloneElement(_icon, {active:item.active})
  }
  else
    icon = <Indicator color="transparent" />

  return (
    <MenuItem
      key={item.key}
      active={item.active}
      prefix={prefix}
      opened={item.opened}
      items={item.items || []}
      parentIndex={parentIndex}
      ownIndex={index}
      onSelect={onSelectMenu}
      onToggleMenu={onToggleMenu}
      data={item}
    >
      {icon}
      <span>{item.label}</span>
    </MenuItem>
  )
}

export { MenuItem }
export { NormalizeMenuItems }