feat(Button): added content and view to eventBroker meta (#319)

gravity-ui · Sep 6, 2022 · 19a3463 · 19a3463
1 parent 9fa1747
commit 19a3463
Showing 1 changed file with 101 additions and 90 deletions.
diff --git 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<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
-    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<HTMLElement, ButtonProps>(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<HTMLButtonElement | HTMLAnchorElement>) => {
+            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<HTMLAnchorElement>,
-                    'aria-disabled': disabled || loading,
-                },
-                prepareChildren(children),
-            );
-        } else {
-            return (
-                <button
-                    {...(extraProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}
-                    {...commonProps}
-                    ref={ref as React.Ref<HTMLButtonElement>}
-                    type={type}
-                    disabled={disabled || loading}
-                >
-                    {prepareChildren(children)}
-                </button>
-            );
-        }
-    },
-);
+            });
+            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<HTMLAnchorElement>,
+                'aria-disabled': disabled || loading,
+            },
+            prepareChildren(children),
+        );
+    } else {
+        return (
+            <button
+                {...(extraProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+                {...commonProps}
+                ref={ref as React.Ref<HTMLButtonElement>}
+                type={type}
+                disabled={disabled || loading}
+            >
+                {prepareChildren(children)}
+            </button>
+        );
+    }
 });
 
+ButtonWithHandlers.displayName = 'Button';
+
 export const Button = Object.assign(ButtonWithHandlers, {Icon: ButtonIcon});
 
 const isIcon = isOfType(Icon);