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

wix-style-react

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { iconChildSize } from './constants';
import { generateDataAttr } from '../utils/generateDataAttr';
import { st, classes } from './IconButton.st.css';
import { WixStyleReactDefaultsOverrideContext } from '../WixStyleReactDefaultsOverrideProvider';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
import deprecationLog from '../utils/deprecationLog';
import ButtonCore from '../Button/ButtonCore';
class IconButton extends PureComponent {
    constructor(props) {
        super(props);
        /**
         * Sets focus on the button element
         */
        this.focus = () => {
            this.button.current && this.button.current.focus();
        };
        this.button = React.createRef();
        if (props.skin === 'inverted') {
            deprecationLog('<IconButton/> - skin="inverted" is deprecated and will be removed in next major version, please use skin="standard" and priority="secondary" instead');
        }
    }
    render() {
        const { button: buttonPropsDefaults } = this.context;
        const { skin, className, priority, size = buttonPropsDefaults.size, children, dataHook, ariaLabel, ariaLabelledBy, ...rest } = this.props;
        const childSize = iconChildSize[size];
        return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement(ButtonCore, { ...rest, ref: this.button, className: st(classes.root, { skin, priority, size, newColorsBranding }, className), ...generateDataAttr({
                ...this.props,
                size,
            }, ['skin', 'size', 'priority']), "data-hook": dataHook, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, children &&
            React.cloneElement(children, {
                size: childSize,
                width: childSize,
                height: childSize,
                'aria-hidden': true,
            })))));
    }
}
IconButton.contextType = WixStyleReactDefaultsOverrideContext;
IconButton.displayName = 'IconButton';
IconButton.propTypes = {
    /** Render button as another component or a custom 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,
    /** Accept any WSR icon. In order to use external icons make sure to follow sizing guidelines and contact design system UX for approval. */
    children: PropTypes.node,
    /** Sets the skin of a component */
    skin: PropTypes.oneOf([
        'standard',
        'inverted',
        'light',
        'transparent',
        'premium',
        'dark',
    ]),
    /** Control the priority of a component */
    priority: PropTypes.oneOf(['primary', 'secondary']),
    /** Control the size of a component */
    size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
    /** Defines a callback function which is called whenever a button is clicked */
    onClick: PropTypes.func,
    /** Specify whether button should be disabled */
    disabled: PropTypes.bool,
    /** Applies a data-hook HTML attribute that can be used in the tests */
    dataHook: PropTypes.string,
    /** Define a string value that labels the button element */
    ariaLabel: PropTypes.string,
    /** Identify the element that labels the button element */
    ariaLabelledBy: PropTypes.string,
};
IconButton.defaultProps = {
    skin: 'standard',
    priority: 'primary',
    disabled: false,
};
export default IconButton;
//# sourceMappingURL=IconButton.js.map