diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 9441e31808..70264abf70 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -3,7 +3,7 @@ import {DOMProps, QAProps} from '../types'; import {block} from '../utils/cn'; import {Icon} from '../Icon'; import {isOfType} from '../utils/isOfType'; -import {withEventBrokerDomHandlers} from '../utils/withEventBrokerDomHandlers'; +import {eventBroker} from '../utils/event-broker'; import {ButtonIcon} from './ButtonIcon'; import './Button.scss'; @@ -72,100 +72,111 @@ export interface ButtonProps extends DOMProps, QAProps { const b = block('button'); -const PureButton = React.forwardRef( - function Button( - { - view = 'normal', - size = 'm', - pin = 'round-round', - selected = false, - disabled = false, - loading = false, - width, - title, - tabIndex, - type = 'button', - component, - href, - target, - rel, - extraProps, - onClick, - onMouseEnter, - onMouseLeave, - onFocus, - onBlur, - children, - id, - style, - className, - qa, - }, - ref, - ) { - const commonProps = { - title, - tabIndex, - onClick, - onMouseEnter, - onMouseLeave, - onFocus, - onBlur, - id, - style, - className: b( - { +const ButtonWithHandlers = React.forwardRef(function Button( + { + view = 'normal', + size = 'm', + pin = 'round-round', + selected = false, + disabled = false, + loading = false, + width, + title, + tabIndex, + type = 'button', + component, + href, + target, + rel, + extraProps, + onClick, + onMouseEnter, + onMouseLeave, + onFocus, + onBlur, + children, + id, + style, + className, + qa, + }, + ref, +) { + const handleClick = React.useCallback( + (event: React.MouseEvent) => { + eventBroker.publish({ + componentId: 'Button', + eventId: 'click', + domEvent: event, + meta: { + content: event.currentTarget.textContent, view, - size, - pin, - selected, - disabled: disabled || loading, - loading, - width, }, - className, - ), - 'data-qa': qa, - }; - - if (typeof href === 'string' || component) { - const linkProps = { - href, - target, - rel: target === '_blank' && !rel ? 'noopener noreferrer' : rel, - }; - return React.createElement( - component || 'a', - { - ...extraProps, - ...commonProps, - ...(component ? {} : linkProps), - ref: ref as React.Ref, - 'aria-disabled': disabled || loading, - }, - prepareChildren(children), - ); - } else { - return ( - - ); - } - }, -); + }); + onClick?.(event); + }, + [view, onClick], + ); + + const commonProps = { + title, + tabIndex, + onClick: handleClick, + onMouseEnter, + onMouseLeave, + onFocus, + onBlur, + id, + style, + className: b( + { + view, + size, + pin, + selected, + disabled: disabled || loading, + loading, + width, + }, + className, + ), + 'data-qa': qa, + }; -PureButton.displayName = 'Button'; -const ButtonWithHandlers = withEventBrokerDomHandlers(PureButton, ['onClick'], { - componentId: 'Button', + if (typeof href === 'string' || component) { + const linkProps = { + href, + target, + rel: target === '_blank' && !rel ? 'noopener noreferrer' : rel, + }; + return React.createElement( + component || 'a', + { + ...extraProps, + ...commonProps, + ...(component ? {} : linkProps), + ref: ref as React.Ref, + 'aria-disabled': disabled || loading, + }, + prepareChildren(children), + ); + } else { + return ( + + ); + } }); +ButtonWithHandlers.displayName = 'Button'; + export const Button = Object.assign(ButtonWithHandlers, {Icon: ButtonIcon}); const isIcon = isOfType(Icon);