All files / components/menu index.js

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
105
106
107
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { Component } from 'react'
 
import PropTypes from 'prop-types'
import MenyStyled from './menu.styled'
import { MenuItem, NormalizeMenuItems } from './menu-item'
 
class Menu extends Component {
 
  constructor(props) {
    super(props)
    this.state = {
      items: props.items,
    }
  }
 
  componentWillReceiveProps (nextProps) {
    this.setState({
      items: nextProps.items,
    })
  }
 
  onSelectMenu = (menu, parentIndex, ownIndex) => {
    const { onSelectMenu } = this.props
    this.updateSelected(parentIndex, ownIndex).then(() => {
      onSelectMenu && onSelectMenu(menu)
    })
  }
 
  updateSelected = (parentIndex, ownIndex) => {
    const { items } = this.state
    return new Promise((resolve) => {
 
      const listItems = items.map((item, index) => {
        const parentMatch = (index === parentIndex);
        return {
          ...item,
          active: parentMatch,
          opened: parentMatch && item.items,
          items: item.items && item.items.map((subItem, subMenuIndex) => ({
            ...subItem,
            active: (parentMatch && subMenuIndex === ownIndex),
          }))
        }
      })
 
      this.setState({ items: listItems }, () => {
        resolve()
      })
    })
  }
 
  onToggleMenu = (menu, parentIndex, ownIndex) => {
    const { onToggleMenu } = this.props
    this.updateSelected(parentIndex, ownIndex).then(() => {
      onToggleMenu && onToggleMenu(menu)
    })
  }
 
  itemIsActive = (item) => {
    const { activeItem } = this.props
 
    if (item.active !== undefined)
      return item.active
 
    let hasActiveChildren = false
    if (item.items && item.items.length > 0) {
      //possui filhos
      //se algum filho for ativo deve ativar o pai tambem
      hasActiveChildren = item.items.filter(this.itemIsActive).length > 0
    }
 
    return (activeItem !== null) ? (item.key === activeItem) || hasActiveChildren : false
  }
 
  normalizeItens = () => {
    const { prefix, activeItem } = this.props
    const { items } = this.state
 
    return (
      items.map((item, index) => {
        item.active = this.itemIsActive(item)
        return NormalizeMenuItems(item, prefix, this.onSelectMenu, this.onToggleMenu, index)
      })
    )
  }
 
  render () {
    const { width = '196px', items = [], children } = this.props
    return (
      <MenyStyled width={width}>
        {items && items.length > 0 && this.normalizeItens()}
        {(!items || items.length == 0) && (children && children.length > 0) && children}
      </MenyStyled>
    )
  }
}
 
Menu.propTypes = {
  children: PropTypes.node,
  width: PropTypes.string,
  items: PropTypes.array,
  activeItem: PropTypes.string
}
 
export { MenuItem }
export { Menu }