wix-style-react
Version:
wix-style-react
96 lines • 4.78 kB
JavaScript
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';
import ButtonCore from '../Button/ButtonCore';
class TextButton extends PureComponent {
constructor(props) {
super(props);
/**
* Sets focus on the element
*/
this.focus = () => {
this.button.current && this.button.current.focus();
};
this.button = React.createRef();
}
render() {
const { skin, underline, weight, size, children, className, dataHook, fluid, ellipsis, showTooltip, tooltipProps, ariaLabel, ariaLabelledBy, ariaHaspopup, ariaExpanded, ...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, ...rest, ...generateDataAttr(this.props, [
'skin',
'size',
'weight',
'underline',
]), ref: this.button, className: st(classes.root, { skin, underline, weight, size, fluid, ellipsis }, className), "data-hook": dataHook, contentClassName: ellipsisClasses(), contentRef: ref }, children)) }));
}
}
TextButton.displayName = 'TextButton';
TextButton.propTypes = {
/** Renders component as any other component or a given HTML tag */
as: PropTypes.oneOfType([
PropTypes.func,
PropTypes.object,
PropTypes.string,
]),
/** Specifies a CSS class name to be appended to the component’s root element */
className: PropTypes.string,
/** Specifies the skin of a button */
skin: PropTypes.oneOf([
'standard',
'light',
'premium',
'dark',
'destructive',
]),
/** Specifies whether to display and when to display an underline below button label */
underline: PropTypes.oneOf(['none', 'onHover', 'always']),
/** Controls the font weight of button label */
weight: PropTypes.oneOf(['thin', 'normal']),
/** Controls the size of a button */
size: PropTypes.oneOf(['tiny', 'small', 'medium']),
/** Defines a callback function which is called every time a button is clicked */
onClick: PropTypes.func,
/** Pass an icon or a component to display at the end of a label (e.g., svg, image, etc.) */
suffixIcon: PropTypes.element,
/** Pass an icon or a component to display at the front of a label (e.g., svg, image, etc.) */
prefixIcon: PropTypes.element,
/** Specifies whether user interactions are disabled */
disabled: PropTypes.bool,
/** Accepts any item as a child element. For all common cases pass a standard text string. */
children: PropTypes.node,
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** Stretches button to fill a 100% of its parent container width */
fluid: PropTypes.bool,
/** Specifies whether component handles text overflow with ellipsis. If enabled, label that exceed available space will be displayed inside of a tooltip when user hover over a button. */
ellipsis: PropTypes.bool,
/** Specifies whether the full button label is displayed in a tooltip when label overflows available space.
*
* Behaviour is enabled by default. Set property value to false to show ellipsis without a tooltip. */
showTooltip: PropTypes.bool,
/** Allows to pass all common tooltip props. Use it to customize a tooltip created from text ellipsis.
* @linkTypeTo components-overlays--tooltip
*/
tooltipProps: PropTypes.shape(TooltipCommonProps),
/** Defines a string value that labels the button element to screen reader users */
ariaLabel: PropTypes.string,
/** Identifies the element that labels the button element */
ariaLabelledBy: PropTypes.string,
/** Indicates to screen reader users whether an interactive popup element, such as menu or dialog, can be triggered by a button */
ariaHaspopup: PropTypes.string,
/** Indicates to screen reader users whether the collapsable content below is in the expanded or in the collapsed state */
ariaExpanded: PropTypes.bool,
};
TextButton.defaultProps = {
skin: 'standard',
underline: 'none',
weight: 'thin',
size: 'medium',
disabled: false,
fluid: false,
tooltipProps: {},
};
export default TextButton;
//# sourceMappingURL=TextButton.js.map