@wix/design-system
Version:
@wix/design-system
46 lines • 2.03 kB
JavaScript
import React, { PureComponent } from 'react';
import Ellipsis from '../common/Ellipsis';
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.defaultProps = {
skin: 'standard',
underline: 'none',
size: 'medium',
disabled: false,
fluid: false,
wrap: false,
tooltipProps: {},
};
export default TextButton;
//# sourceMappingURL=TextButton.js.map