components.widgets.List.ListItem.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, { useEffect, isValidElement } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'

/**
 * Компонент ListItem виджета ListWidget
 * @param {Node|Object} leftTop - секция картинки
 * @param {Node|Object} leftBottom - секция картинки
 * @param {Node|String} header - секция заголовка
 * @param {Node|String} subHeader - секция подзаголовка
 * @param {Node|String} body - секция тела
 * @param {Node|String} rightTop - секция справа сверху
 * @param {Node|String} rightBottom - секция справа снизу
 * @param {Node|String} extra - extra секция
 * @param {boolean} selected - флаг активности строки
 * @param {function} onClick - callback на клик по строке
 * @param {boolean} divider - разделить между строками
 * @param {object} style - стили
 * @param {object} hasSelect
 * @param measure
 * @returns {*}
 * @constructor
 */
function HeaderWrapper({ children, isValid }) {
    if (isValid) {
        return children
    }

    return (
        
            {children}
        
    )
}

function ListItem({
    leftTop,
    leftBottom,
    header,
    subHeader,
    body,
    rightTop,
    rightBottom,
    extra,
    selected,
    onClick,
    divider,
    style,
    hasSelect,
    measure = () => {},
}) {
    useEffect(() => {
        /* FIXME временный костыль до рефакторинга List widget.
            measure пересчитывает выстоту прокидывая style через CellMeasurer,
            style не может быть dependency useEffect уйдет в беск. цикл.
            Использование height не приносит результата, пересчет прерывается.
            Решение 1 рачсет с delay. При медленном рендере может несработать */
        setTimeout(() => measure(), 400)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    const renderImage = (image) => {
        if (isValidElement(image)) {
            return image
        }

        return 
    }

    return (
        
            
                {leftTop && {renderImage(leftTop)}}
                {leftBottom && {leftBottom}}
            
            
                
                    
                        {header && {header}}
                        {subHeader && {subHeader}}
                    
                
                {body && {body}}
            
            
                {rightTop && {rightTop}}
                {rightBottom && {rightBottom}}
            
            
                {extra && {extra}}
            
        
    )
}

ListItem.propTypes = {
    leftTop: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
    leftBottom: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
    header: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
    subHeader: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
    body: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
    rightTop: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
    rightBottom: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
    extra: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
    selected: PropTypes.bool,
    onClick: PropTypes.func,
    divider: PropTypes.bool,
    style: PropTypes.object,
    hasSelect: PropTypes.bool,
    measure: PropTypes.func,
}

export default ListItem