wix-style-react/dist/es/src/Tag/Tag.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Tag.st.css';
import CloseButton from '../CloseButton';
import Text from '../Text';
import { dataHooks } from './Tag.helpers';
import { generateDataAttr } from '../utils/generateDataAttr';
import { EllipsisCommonProps } from '../common/PropTypes/EllipsisCommon';
const tagToTextSize = {
    tiny: 'tiny',
    small: 'small',
    medium: 'small',
    large: 'medium',
};
/**
 * A Tag component
 */
class Tag extends React.PureComponent {
    constructor() {
        super(...arguments);
        this._handleRemoveClick = event => {
            const { onRemove, id } = this.props;
            event.stopPropagation();
            onRemove(id);
        };
        this._handleRemoveKeyDown = event => {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                this._handleRemoveClick(event);
            }
        };
        this._handleOnClick = event => {
            const { id, onClick } = this.props;
            return onClick && onClick(id, event);
        };
    }
    _renderThumb() {
        const { thumb } = this.props;
        return thumb ? (React.createElement("span", { "data-hook": dataHooks.thumb, className: classes.thumb }, thumb)) : null;
    }
    _renderText() {
        const { size, children, disabled, theme, ellipsisProps } = this.props;
        return (React.createElement(Text, { skin: disabled ? 'disabled' : 'standard', light: theme === 'dark', secondary: theme !== 'dark', ellipsis: true, tooltipProps: ellipsisProps, size: tagToTextSize[size], weight: "thin", className: classes.text, dataHook: dataHooks.text }, children));
    }
    _renderRemoveButton() {
        const { removable, disabled, size, theme } = this.props;
        if (removable) {
            return (React.createElement(CloseButton, { size: size === 'large' ? 'medium' : 'small', skin: theme === 'dark' ? 'light' : 'dark', disabled: disabled, dataHook: dataHooks.removeButton, className: classes.removeButton, onClick: this._handleRemoveClick, onKeyDown: this._handleRemoveKeyDown }));
        }
        else {
            return null;
        }
    }
    render() {
        const { id, onClick, maxWidth, dataHook, size, disabled, theme, thumb, removable, className, } = this.props;
        const clickable = !!onClick;
        const hoverable = !disabled && !!onClick;
        return (React.createElement("span", { className: st(classes.root, {
                withRemoveButton: removable,
                withThumb: !!thumb,
                disabled,
                clickable,
                hoverable,
                size,
                theme,
            }, className), ...generateDataAttr({ ...this.props, hoverable, clickable }, [
                'size',
                'disabled',
                'theme',
                'hoverable',
                'clickable',
            ]), "data-hook": dataHook, id: id, onClick: this._handleOnClick, style: {
                maxWidth: typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`,
            } },
            this._renderThumb(),
            this._renderText(),
            this._renderRemoveButton()));
    }
}
Tag.displayName = 'Tag';
Tag.propTypes = {
    /** Applies a data-hook HTML attribute that can be used in the tests */
    dataHook: PropTypes.string,
    /** Sets the text of the tag */
    children: PropTypes.node.isRequired,
    /** Specifies whether the tag should be disabled */
    disabled: PropTypes.bool,
    /** Ellipsis props */
    ellipsisProps: PropTypes.shape(EllipsisCommonProps),
    /** Assigns an unique identifier for the tag  */
    id: PropTypes.string.isRequired,
    /** Defines a callback function which is called whenever a tag component is clicked.
     * It passes the id property as the first parameter and a mouse event as second parameter. */
    onClick: PropTypes.func,
    /** Defines a callback function which is called when removing the tag. It passes the id property as a parameter.  */
    onRemove: PropTypes.func,
    /** Specifies whether the tag is removable or not. If enabled, a small clickable X icon is displayed on the right side of a component. */
    removable: PropTypes.bool,
    /** Controls the size of the component */
    size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
    /** Sets the theme of the component */
    theme: PropTypes.oneOf([
        'standard',
        'error',
        'warning',
        'dark',
        'neutral',
        'success',
        'light',
        'lightOutlined',
    ]),
    /** Displays a thumbnail at the front of a tag label. Usually contain icons or `<Avatar/>`. */
    thumb: PropTypes.element,
    /** Sets a maximum tag width */
    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /** Specifies a CSS class name to be appended to the component’s root element  */
    className: PropTypes.string,
};
Tag.defaultProps = {
    size: 'small',
    removable: true,
    theme: 'standard',
};
export default Tag;
//# sourceMappingURL=Tag.js.map