components.widgets.Table.cells.ButtonsCell.HintButton.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 pick from 'lodash/pick'
import { Button, UncontrolledTooltip } from 'reactstrap'

// eslint-disable-next-line import/no-named-as-default
import Icon from '../../../../snippets/Icon/Icon'

import { MODIFIERS, initUid } from './until'

/**
 * Кнопка с тултипом
 * @param title - Название кнопки
 * @param hint - Тултип кнопки
 * @param visible - Видимость кнопки
 * @param uId - уникальный идентификатор
 * @param icon - Иконка кнопки
 * @param action - Переданное действие
 * @param onClick - функция обработки клика
 * @param rest - остальные props
 * @returns {*}
 * @constructor
 */
function HintButton({
    uId,
    title,
    hint,
    visible,
    icon,
    onClick,
    action,
    hintPosition,
    ...rest
}) {
    const otherBtnProps = pick(rest, ['size', 'active', 'color', 'disabled'])
    const otherToltipProps = pick(rest, ['delay', 'hideArrow', 'offset'])

    const handleClick = action => (e) => {
        e.stopPropagation()
        onClick(e, action)
    }

    return (visible ? (
        <>
            
            {hint && (
                
                    {hint}
                
            )}
        
    ) : null)
}

HintButton.propTypes = {
    title: PropTypes.string,
    hint: PropTypes.string,
    visible: PropTypes.bool,
    disabled: PropTypes.bool,
    uId: PropTypes.string,
    size: PropTypes.string,
    color: PropTypes.string,
    placement: PropTypes.oneOf([
        'auto',
        'auto-start',
        'auto-end',
        'top',
        'top-start',
        'top-end',
        'right',
        'right-start',
        'right-end',
        'bottom',
        'bottom-start',
        'bottom-end',
        'left',
        'left-start',
        'left-end',
    ]),
    delay: PropTypes.oneOfType([PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }), PropTypes.number]),
    hideArrow: PropTypes.bool,
    offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    icon: PropTypes.string,
    onClick: PropTypes.func,
    action: PropTypes.object,
    hintPosition: PropTypes.string,
}

HintButton.defaultProps = {
    visible: true,
    disabled: false,
    size: 'sm',
    color: 'link',
    placement: 'top',
    delay: 100,
    hideArrow: false,
    offset: 0,
}

export default initUid(HintButton)