wix-style-react
Version:
wix-style-react
47 lines • 2.19 kB
JavaScript
import * as React from 'react';
import classNames from 'classnames';
import { withFocusable } from '../../common/Focusable';
import { st, classes } from './ButtonCore.st.css';
import { dataHooks } from './constants';
import { isStatelessComponent } from './utils';
const _addAffix = (Affix, styleClass, dataHook) => Affix &&
React.cloneElement(Affix, {
className: classNames(classes[styleClass], Affix.props.className),
'data-hook': Affix.props['data-hook'] || Affix.props.dataHook || dataHook,
});
/**
* ButtonCore
*/
class ButtonCore extends React.Component {
constructor() {
super(...arguments);
this.innerComponentRef = React.createRef();
}
focus() {
if (this.innerComponentRef && this.innerComponentRef.focus) {
this.innerComponentRef.focus();
}
}
render() {
const { as: Component, suffixIcon, prefixIcon, children, disabled, focusableOnFocus, focusableOnBlur, href, contentClassName, contentRef, ...rest } = this.props;
const htmlTabIndex = disabled ? -1 : rest.tabIndex || 0;
const htmlHref = disabled ? undefined : href;
const reference = isStatelessComponent(Component) && typeof Component !== 'string'
? undefined
: (ref) => (this.innerComponentRef = ref);
if (!Component) {
return null;
}
return (React.createElement(Component, { "data-hook": dataHooks.button, ...rest, onFocus: focusableOnFocus, onBlur: focusableOnBlur, disabled: href ? undefined : disabled, href: htmlHref, ref: reference, tabIndex: htmlTabIndex, "aria-disabled": disabled, className: st(classes.root, { disabled }, this.props.className) },
prefixIcon && _addAffix(prefixIcon, 'prefix', dataHooks.prefixIcon),
React.createElement("span", { className: st(classes.content, contentClassName), ref: contentRef }, children),
suffixIcon && _addAffix(suffixIcon, 'suffix', dataHooks.suffixIcon)));
}
}
ButtonCore.defaultProps = {
as: 'button',
type: 'button',
};
ButtonCore.displayName = 'ButtonCore';
export default withFocusable(ButtonCore);
//# sourceMappingURL=ButtonCore.js.map