wix-style-react
Version:
wix-style-react
76 lines • 2.95 kB
JavaScript
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { ThemeProviderConsumerBackwardCompatible } from '../ThemeProvider/ThemeProviderConsumerBackwardCompatible';
import { Close, CloseLarge } from '@wix/wix-ui-icons-common/system';
import { generateDataAttr } from '../utils/generateDataAttr';
import { SIZES } from './constants';
import { st, classes } from './CloseButton.st.css';
import ButtonCore from '../Button/ButtonCore';
const childSize = '18px';
class CloseButton extends PureComponent {
_renderCloseIcon(Icon, size) {
let CloseIcon;
if (size === SIZES.small) {
// fallback to Close icon if children not provided (current behavior)
CloseIcon = React.createElement(Icon, { "data-hook": "close" });
}
else if (size === SIZES.medium) {
CloseIcon = React.createElement(Icon, { "data-hook": "close-medium" });
}
else {
CloseIcon = React.createElement(Icon, { "data-hook": "close-large", size: "12" });
}
return CloseIcon;
}
render() {
const { skin, size, className, dataHook, children, ...rest } = this.props;
return (React.createElement(ButtonCore, { ...rest, className: st(classes.root, { skin, size }, className), ...generateDataAttr(this.props, ['skin', 'size']), "data-hook": dataHook }, children ? (React.cloneElement(children, {
size: childSize,
width: childSize,
height: childSize,
})) : (React.createElement(ThemeProviderConsumerBackwardCompatible, { defaultIcons: {
CloseButton: {
small: Close,
medium: CloseLarge,
large: CloseLarge,
},
} }, ({ icons }) => this._renderCloseIcon(icons.CloseButton[size], size)))));
}
}
CloseButton.displayName = 'CloseButton';
CloseButton.propTypes = {
/** render as some other component or DOM tag */
as: PropTypes.oneOfType([
PropTypes.func,
PropTypes.object,
PropTypes.string,
]),
/** additional css classes */
className: PropTypes.string,
/** Used for passing any wix-style-react icon. For external icon make sure to follow ux sizing guidelines */
children: PropTypes.node,
/** skins of closebutton */
skin: PropTypes.oneOf([
'standard',
'standardFilled',
'light',
'lightFilled',
'dark',
'transparent',
]),
/** size of closebutton */
size: PropTypes.oneOf(['small', 'medium', 'large']),
/** Click event handler */
onClick: PropTypes.func,
/** applies disabled styles */
disabled: PropTypes.bool,
/** string based data hook for testing */
dataHook: PropTypes.string,
};
CloseButton.defaultProps = {
skin: 'standard',
size: 'small',
disabled: false,
};
export default CloseButton;
//# sourceMappingURL=CloseButton.js.map