components.widgets.Table.cells.ImageCell.ImageCell.tsx 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.2
import React, { useCallback } from 'react'
import get from 'lodash/get'
import isEmpty from 'lodash/isEmpty'
import omit from 'lodash/omit'
import flowRight from 'lodash/flowRight'
import classNames from 'classnames'

import { useResolved } from '../../../../../core/Expression/useResolver'
import { Image } from '../../../../snippets/Image/Image'
import { ImageInfo } from '../../../../snippets/Image/ImageInfo'
import { WithCell } from '../../withCell'
import { withTooltip } from '../../withTooltip'
import { ActionWrapper } from '../../../../buttons/StandardButton/ActionWrapper'
import { DefaultCell } from '../DefaultCell'

import { ImageStatuses } from './ImageStatuses'
import { type ImageCellProps } from './types'

/**
 * Ячейка таблицы с картинкой
 * @reactProps {string} id - id ячейки
 * @reactProps {object} model - модель строки
 * @reactProps {string} shape - тип формы изображения
 * @reactProps {object} style - стили ячейки
 * @reactProps {string} className - имя класса для ячейки
 * @reactProps {string} title - подсказка для картинки
 * @reactProps {string} description - описание
 * @reactProps {string} textPosition - позиция текста
 * @reactProps {string} width - ширина
 * @reactProps {array} statuses - статусы, отображающиеся над img
 */

function ImageCellBody({
    title,
    fieldKey,
    style,
    className,
    model,
    id,
    action,
    shape,
    visible,
    disabled,
    description,
    textPosition,
    width,
    height,
    data,
    pathMapping,
    queryMapping,
    target,
    url,
    forwardedRef,
    callAction,
    statuses = [],
}: ImageCellProps) {
    const onClick = useCallback(() => {
        if (callAction && model) {
            callAction(model)
        }
    }, [callAction, model])
    const src = get(model, fieldKey)

    const hasStatuses = !isEmpty(statuses)
    const hasInfo = title || description

    const defaultImageProps = {
        url: src,
        data,
        title,
        description,
    }

    const resolvedProps = useResolved(defaultImageProps, model)

    const wrapperProps = {
        url,
        target,
        queryMapping,
        pathMapping,
        action,
        className: classNames('n2o-image-cell', { 'with-statuses': hasStatuses }),
    }

    return (
        
            
                
                {hasStatuses && (
                    
                        
                    
                )}
            
            {hasInfo && (
                
                    
                
            )}
        
    )
}

const ImageCell = flowRight(WithCell, withTooltip)(ImageCellBody)

ImageCell.displayName = 'ImageCell'

export { ImageCell }
export default ImageCell