@wix/design-system/dist/esm/TextButton/TextButton.js

@wix/design-system

import React, { PureComponent } from 'react';
import Ellipsis from '../common/Ellipsis';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
import PropTypes from 'prop-types';
import { generateDataAttr } from '../utils/generateDataAttr';
import { st, classes } from './TextButton.st.css.js';
import ButtonCore from '../Button/ButtonCore';
class TextButton extends PureComponent {
    constructor() {
        super(...arguments);
        this.button = React.createRef();
        /**
         * Sets focus on the element
         */
        this.focus = () => {
            this.button.current && this.button.current.focus();
        };
    }
    render() {
        const { skin, underline, weight, size, children, className, dataHook, fluid, wrap, ellipsis, showTooltip, tooltipProps, ariaLabel, ariaLabelledBy, ariaHaspopup, ariaExpanded, ariaControls, ariaActiveDescendant, ...rest } = this.props;
        return (React.createElement(Ellipsis, { ellipsis: ellipsis, showTooltip: showTooltip, ...tooltipProps, render: ({ ref, ellipsisClasses }) => (React.createElement(ButtonCore, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-activedescendant": ariaActiveDescendant, ...rest, ...generateDataAttr(this.props, [
                    'skin',
                    'size',
                    'weight',
                    'underline',
                ]), ref: this.button, className: st(classes.root, {
                    skin,
                    underline,
                    weight,
                    size,
                    fluid,
                    wrap,
                    ellipsis,
                }, className), "data-hook": dataHook, contentClassName: ellipsisClasses(), contentRef: ref }, children)) }));
    }
}
TextButton.displayName = 'TextButton';
TextButton.propTypes = {
    as: PropTypes.oneOfType([
        PropTypes.func,
        PropTypes.object,
        PropTypes.string,
    ]),
    className: PropTypes.string,
    skin: PropTypes.oneOf([
        'standard',
        'light',
        'premium',
        'dark',
        'destructive',
        'standard-light',
    ]),
    underline: PropTypes.oneOf(['none', 'onHover', 'always']),
    weight: PropTypes.oneOf(['thin', 'normal', 'bold']),
    size: PropTypes.oneOf(['tiny', 'small', 'medium']),
    onClick: PropTypes.func,
    suffixIcon: PropTypes.element,
    prefixIcon: PropTypes.element,
    disabled: PropTypes.bool,
    children: PropTypes.node,
    dataHook: PropTypes.string,
    fluid: PropTypes.bool,
    wrap: PropTypes.bool,
    ellipsis: PropTypes.bool,
    showTooltip: PropTypes.bool,
    tooltipProps: PropTypes.shape(TooltipCommonProps),
    ariaLabel: PropTypes.string,
    ariaLabelledBy: PropTypes.string,
    ariaHaspopup: PropTypes.string,
    ariaExpanded: PropTypes.bool,
    ariaControls: PropTypes.string,
    ariaActiveDescendant: PropTypes.string,
};
TextButton.defaultProps = {
    skin: 'standard',
    underline: 'none',
    size: 'medium',
    disabled: false,
    fluid: false,
    wrap: false,
    tooltipProps: {},
};
export default TextButton;
//# sourceMappingURL=TextButton.js.map