@wix/design-system
Version:
@wix/design-system
68 lines • 2.97 kB
JavaScript
import * as React from 'react';
import classNames from 'classnames';
import { withFocusable, } from '../../common/Focusable';
import { st, classes } from './ButtonCore.st.css.js';
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();
}
}
/**
* Returns the size and position of the element
*/
getBoundingClientRect() {
if (this.innerComponentRef &&
this.innerComponentRef.getBoundingClientRect) {
return this.innerComponentRef.getBoundingClientRect();
}
return;
}
render() {
const { as: Component, suffixIcon, prefixIcon, children, disabled, focusableOnFocus, focusableOnBlur, href, contentClassName, contentRef, onClick, onKeyDown, onKeyUp, ...rest } = this.props;
const htmlTabIndex = rest.tabIndex || 0;
const htmlHref = disabled ? undefined : href;
const reference = isStatelessComponent(Component) && typeof Component !== 'string'
? undefined
: (ref) => (this.innerComponentRef = ref);
// Block action handlers when disabled (using aria-disabled instead of native disabled)
const handleClick = disabled
? (e) => e.preventDefault()
: onClick;
const handleKeyDown = disabled
? (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
}
}
: onKeyDown;
if (!Component) {
return null;
}
return (React.createElement(Component, { "data-hook": dataHooks.button, ...rest, onFocus: focusableOnFocus, onBlur: focusableOnBlur, onClick: handleClick, onKeyDown: handleKeyDown, onKeyUp: disabled ? undefined : onKeyUp, href: htmlHref, ref: reference, tabIndex: htmlTabIndex, "aria-disabled": disabled || undefined, 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