components.snippets.UserBox.UserBox.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 PropTypes from 'prop-types'
import classNames from 'classnames'
import { compose, withHandlers, withState, lifecycle } from 'recompose'
import { UncontrolledTooltip } from 'reactstrap'

import { id } from '../../../utils/id'

/**
 *
 * @param id - userbox id
 * @param image - изображение userbox
 * @param title - заголовок
 * @param subTitle - подзаголовок
 * @param children - subItems
 * @param isOpen - флаг видимости subItems
 * @param onToggle - переключение subItems
 * @param compressed - флаг сжатого вида
 * @returns {*}
 * @constructor
 */
function UserBox({
    id,
    image,
    title,
    subTitle,
    children,
    isOpen,
    onToggle,
    compressed,
}) {
    return (
        
            {compressed && (title || subTitle) && (
                
                    {title}
                    {subTitle}
                
            )}
            
                
            
            {!compressed && (
                <>
                    
                    {subTitle && (
                        
                            {subTitle}
                        
                    )}
                
            )}
            {isOpen && children && (
                
                    {children}
                
            )}
        
    )
}

UserBox.propTypes = {
    id: PropTypes.string,
    image: PropTypes.string,
    title: PropTypes.string,
    subTitle: PropTypes.string,
    children: PropTypes.node,
    isOpen: PropTypes.bool,
    onToggle: PropTypes.func,
    compressed: PropTypes.bool,
}

export default compose(
    withState('isOpen', 'toggle', false),
    withHandlers({
        onToggle: ({ isOpen, toggle }) => () => toggle(!isOpen),
    }),
    lifecycle({
        componentDidMount() {
            this.setState({ id: id() })
        },
    }),
)(UserBox)