components.widgets.Table.cells.CollapsedCell.CollapsedCell.jsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
There is a newer version: 7.28.3
import React, { useCallback, useMemo, useState } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import isString from 'lodash/isString'
import get from 'lodash/get'

import withTooltip from '../../withTooltip'
import { EMPTY_ARRAY } from '../../../../../utils/emptyTypes'
import propsResolver from '../../../../../utils/propsResolver'

/**
 * CollapsedCell
 * @reactProps {object} model - модель
 * @reactProps {string} fieldKey - поле данных
 * @reactProps {string} color - цвет элементов
 * @reactProps {string} amountToGroup - количество элементов для группировки
 */

function CollapsedCell({
    model,
    fieldKey,
    color,
    amountToGroup,
    labelFieldId,
    content,
    separator = null,
    forwardedRef,
    visible,
    inline = true,
}) {
    const [isCollapsed, setIsCollapsed] = useState(true)

    const separatorAsHtml = useMemo(() => {
        if (separator) {
            return {
                __html: separator
                    .replaceAll(/(<([^>]+)>)/gi, '')
                    .replaceAll(/\r\n|\r|\n/g, '
')
                    .replaceAll(/ /g, ' '),
            }
        }

        return null
    }, [separator])

    const toggleIsCollapsed = useCallback((event) => {
        event.stopPropagation()
        event.preventDefault()

        setIsCollapsed(state => !state)
    }, [])

    const { isButtonNeeded, items } = useMemo(() => {
        const data = model[fieldKey] || EMPTY_ARRAY

        return ({
            items: isCollapsed ? data.slice(0, amountToGroup) : data,
            isButtonNeeded: data.length > amountToGroup,
        })
    }, [fieldKey, model, amountToGroup, isCollapsed])

    const renderCell = useCallback((data) => {
        if (content) {
            const { component: Component, ...componentProps } = content
            const resolvedProps = propsResolver(componentProps, data)

            return (
                
                    {isString(data) ? data : get(data, labelFieldId)}
                
            )
        }

        return (
            
                {isString(data) ? data : get(data, labelFieldId)}
            
        )
    }, [content, color, labelFieldId])

    if (!visible) { return null }

    return (
        
            {items.map((item, index, self) => (
                // eslint-disable-next-line react/no-array-index-key
                
                    {renderCell(item)}
                    {separatorAsHtml && (index !== self.length - 1) && (
                        /* eslint-disable-next-line react/no-danger */
                        
                    )}
                
            ))}

            {isButtonNeeded ? (
                
            ) : null}
        
    )
}

CollapsedCell.propTypes = {
    /**
   * Модель даных
   */
    model: PropTypes.object.isRequired,
    /**
   * Ключ значения из модели
   */
    fieldKey: PropTypes.string.isRequired,
    /**
   * Цвет
   */
    color: PropTypes.string,
    /**
   * Количество элементов для группировки
   */
    amountToGroup: PropTypes.number,
    /**
   * Ключ label из модели
   */
    labelFieldId: PropTypes.string,
    /**
   * Флаг видимости
   */
    visible: PropTypes.bool,
}

CollapsedCell.defaultProps = {
    amountToGroup: 3,
    color: 'secondary',
    visible: true,
}

CollapsedCell.displayName = 'CollapsedCell'

export default withTooltip(CollapsedCell)