components.buttons.Dropdown.Dropdown.jsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
The newest version!
import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { compose, mapProps } from 'recompose'
import map from 'lodash/map'
import get from 'lodash/get'
import some from 'lodash/some'
import { Manager, Reference, Popper } from 'react-popper'
import onClickOutside from 'react-onclickoutside'
import classNames from 'classnames'

import { Factory } from '../../../core/factory/Factory'
import { BUTTONS } from '../../../core/factory/factoryLevels'
import { SimpleButton } from '../Simple/Simple'
import mappingProps from '../Simple/mappingProps'
import withActionButton from '../withActionButton'

function SubMenu(props) {
    const { items, actionCallback, entityKey, toggle, onClick } = props

    return map(items, ({ src, component, ...btn }) => {
        if (component) {
            return React.createElement(component, { ...btn, actionCallback, entityKey, onClick: toggle })
        }

        return (
            
        )
    })
}

class DropdownButton extends React.Component {
    state = { opened: false, popperKey: 0 }

    toggle = () => {
        let { popperKey } = this.state
        const { opened } = this.state

        if (!opened) { popperKey += 1 }

        this.setState({ opened: !opened, popperKey })
    }

    onClick = () => this.setState({ opened: false })

    handleClickOutside = () => this.onClick()

    render() {
        const {
            subMenu, entityKey, className,
            showToggleIcon, tooltipTriggerRef,
            getStoreButtons, actionCallback, ...rest
        } = this.props

        const { opened, popperKey } = this.state
        const storeButtons = getStoreButtons(entityKey)
        let visible = false

        if (storeButtons) {
            visible = some(subMenu, (item = {}) => {
                const { visible } = item

                if (visible !== undefined) { return visible }

                const { id } = item

                return get(storeButtons, `${id}.visible`)
            })
        }

        return (
            
                
                    
                        {({ ref }) => (
                            
                        )}
                    
                    
                        {({ ref, style, placement }) => (
                            
                                
                            
                        )}
                    
                
            
        )
    }
}

DropdownButton.propTypes = {
    id: PropTypes.any,
    className: PropTypes.string,
    subMenu: PropTypes.array,
    showToggleIcon: PropTypes.bool,
    tooltipTriggerRef: PropTypes.func,
}

DropdownButton.defaultProps = { subMenu: [], showToggleIcon: true }

export default compose(
    withActionButton(),
    mapProps(props => ({ ...mappingProps(props), subMenu: props.subMenu })),
    connect(state => ({ getStoreButtons: id => state.toolbar[id] || null })),
    onClickOutside,
)(DropdownButton)