refactor(action-button): used BaseButtonCandidate

Author: hextion

packages/action-button/package.json

@@ -10,9 +10,8 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
+        "@alfalab/core-components-button": "^13.1.0",
         "@alfalab/core-components-shared": "^2.1.0",
-        "@alfalab/core-components-spinner": "^6.0.2",
-        "@alfalab/hooks": "^1.13.1",
         "classnames": "^2.5.1",
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"

packages/action-button/src/Component.screenshots.test.tsx

@@ -87,8 +87,10 @@ describe(
             },
         }),
         screenshotOpts: { clip },
-        evaluate: (page: Page) =>
-            page.hover('button[class^=component]').then(() => page.waitForTimeout(500)),
+        evaluate: async (page) => {
+            await page.hover('button[class*=component]');
+            await page.waitForTimeout(500);
+        },
         matchImageSnapshotOptions: {
             customSnapshotIdentifier: (...args) => `hover-${customSnapshotIdentifier(...args)}`,
         },
@@ -106,10 +108,10 @@ describe(
             },
         }),
         screenshotOpts: { clip },
-        evaluate: (page: Page) => {
-            return page.mouse
-                .move(30, 30)
-                .then(() => page.mouse.down().then(() => page.waitForTimeout(500)));
+        evaluate: async (page) => {
+            await page.mouse.move(30, 30);
+            await page.mouse.down();
+            await page.waitForTimeout(500);
         },
         matchImageSnapshotOptions: {
             customSnapshotIdentifier: (...args) => `pressed-${customSnapshotIdentifier(...args)}`,

packages/action-button/src/Component.test.tsx

@@ -41,9 +41,9 @@ describe('ActionButton', () => {
     it('should use "href" prop and become a link', () => {
         const href = 'http://127.0.0.1';
 
-        render(<ActionButton href={href} />);
+        render(<ActionButton href={href} dataTestId={dti} />);
 
-        expect(screen.getByRole('button')).toHaveAttribute('href', href);
+        expect(screen.getByTestId(dti)).toHaveAttribute('href', href);
     });
 
     it('should use "disabled" prop (button)', () => {
@@ -57,13 +57,13 @@ describe('ActionButton', () => {
     });
 
     it('should use "disabled" prop (link)', () => {
-        const { rerender } = render(<ActionButton href='http://localhost' />);
+        const { rerender } = render(<ActionButton href='http://localhost' dataTestId={dti} />);
 
-        expect(screen.getByRole('button')).not.toHaveAttribute('aria-disabled', 'true');
+        expect(screen.getByTestId(dti)).not.toHaveAttribute('aria-disabled', 'true');
 
-        rerender(<ActionButton href='http://localhost' disabled={true} />);
+        rerender(<ActionButton href='http://localhost' dataTestId={dti} disabled={true} />);
 
-        expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'true');
+        expect(screen.getByTestId(dti)).toHaveAttribute('aria-disabled', 'true');
     });
 
     it('should use "loading" prop (button)', () => {
@@ -81,12 +81,12 @@ describe('ActionButton', () => {
     it('should use "loading" prop (link)', () => {
         const { rerender } = render(<ActionButton href='http://localhost' dataTestId={dti} />);
 
-        expect(screen.getByRole('button')).not.toHaveAttribute('aria-disabled', 'true');
+        expect(screen.getByTestId(dti)).not.toHaveAttribute('aria-disabled', 'true');
         expect(screen.queryByTestId(loaderDti)).toBeNull();
 
         rerender(<ActionButton href='http://localhost' loading={true} dataTestId={dti} />);
 
-        expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'true');
+        expect(screen.getByTestId(dti)).toHaveAttribute('aria-disabled', 'true');
         expect(screen.getByTestId(loaderDti)).toBeInTheDocument();
     });
 

packages/action-button/src/Component.tsx

@@ -1,19 +1,15 @@
-import React, {
-    type AnchorHTMLAttributes,
-    type ButtonHTMLAttributes,
-    forwardRef,
-    Fragment,
-    useRef,
-} from 'react';
+import React, { type AnchorHTMLAttributes, type ButtonHTMLAttributes, forwardRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
+import {
+    BaseButtonCandidate,
+    type BaseButtonOwnProps,
+    type MaybeAnchorAttributes,
+} from '@alfalab/core-components-button/components/base-button-candidate';
+import { ButtonContent } from '@alfalab/core-components-button/components/button-content';
+import { useLoading } from '@alfalab/core-components-button/shared';
 import { getDataTestId } from '@alfalab/core-components-shared';
-import { Spinner } from '@alfalab/core-components-spinner';
-import { useFocus } from '@alfalab/hooks';
-
-import { LOADER_MIN_DISPLAY_INTERVAL } from './constants/loader-min-display-interval';
-import { useLoader } from './hooks';
 
 import defaultColors from './default.module.css';
 import styles from './index.module.css';
@@ -24,11 +20,12 @@ const colorStyles = {
     default: defaultColors,
     inverted: invertedColors,
     static: staticColors,
-};
+} as const;
 
 type Colors = 'default' | 'inverted' | 'static';
 
-type ComponentProps = {
+interface ComponentProps
+    extends Omit<BaseButtonOwnProps, 'disabledClassName' | 'Content' | 'block'> {
     /**
      * Иконка кнопки
      */
@@ -44,92 +41,69 @@ type ComponentProps = {
      */
     view?: 'primary' | 'secondary';
 
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-
     /**
      * Дополнительный класс для обертки иконки
      */
     iconWrapperClassName?: string;
 
-    /**
-     * Значение href для ссылки
-     */
-    href?: string;
-
-    /**
-     * Заблокировать кнопку
-     */
-    disabled?: boolean;
-
-    /**
-     * Показать лоадер
-     */
-    loading?: boolean;
-
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Для спиннера используется модификатор -loader
-     */
-    dataTestId?: string;
-
     /**
      * Палитра, в контексте которой используется кнопка
      */
     colors?: Colors;
-};
+}
+
+interface AnchorLikeProps
+    extends MaybeAnchorAttributes<string>,
+        ComponentProps,
+        Omit<AnchorHTMLAttributes<HTMLElement>, keyof ComponentProps> {}
 
-type AnchorProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type ButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
-export type ActionButtonProps = Partial<AnchorProps | ButtonProps>;
+interface ButtonLikeProps
+    extends MaybeAnchorAttributes<undefined>,
+        ComponentProps,
+        Omit<ButtonHTMLAttributes<HTMLElement>, keyof ComponentProps> {}
+
+export type ActionButtonProps = AnchorLikeProps | ButtonLikeProps;
 
 export const ActionButton = forwardRef<HTMLAnchorElement | HTMLButtonElement, ActionButtonProps>(
     (
         {
-            className,
+            className: classNameFromProps,
             icon,
             children,
-            href,
             size = 48,
             view = 'primary',
-            type = 'button',
             iconWrapperClassName,
             disabled,
-            loading,
-            dataTestId,
+            loading: loadingFromProps,
             colors = 'default',
+            dataTestId,
             ...rest
         },
         ref,
     ) => {
-        const componentRef = useRef<HTMLElement>(null);
-
-        const [focused] = useFocus(componentRef, 'keyboard');
-
-        const { showLoader } = useLoader(!!loading, LOADER_MIN_DISPLAY_INTERVAL);
+        const loading = useLoading(loadingFromProps);
 
         const styleSize = `size-${size}`;
 
-        const componentProps = {
-            className: cn(
-                styles.component,
-                colorStyles[colors][view],
-                styles[styleSize],
-                {
-                    [styles.focused]: focused,
-                    [styles.disabled]: disabled,
-                    [colorStyles[colors].disabled]: disabled,
-                    [styles.loading]: showLoader,
-                },
-                className,
-            ),
-            'data-test-id': dataTestId,
-        };
-
-        const buttonChildren = (
-            <Fragment>
+        const className = cn(
+            styles.component,
+            colorStyles[colors].component,
+            colorStyles[colors][view],
+            styles[styleSize],
+            loading && [colorStyles[colors].loading, styles.loading],
+            classNameFromProps,
+        );
+
+        return (
+            <BaseButtonCandidate
+                {...rest}
+                dataTestId={dataTestId}
+                ref={mergeRefs([ref])}
+                className={className}
+                disabled={disabled}
+                disabledClassName={colorStyles[colors].disabled}
+                loading={loading}
+            >
                 <span
                     role='img'
                     className={cn(
@@ -139,47 +113,16 @@ export const ActionButton = forwardRef<HTMLAnchorElement | HTMLButtonElement, Ac
                         iconWrapperClassName,
                     )}
                 >
-                    {showLoader ? (
-                        <Spinner
-                            preset={24}
-                            dataTestId={getDataTestId(dataTestId, 'loader')}
-                            visible={true}
-                            className={cn(styles.loader, colorStyles[colors].loader)}
-                        />
-                    ) : (
-                        icon
-                    )}
+                    <ButtonContent
+                        loading={loading}
+                        loaderClassName={cn(styles.loader, colorStyles[colors].loader)}
+                        dataTestId={getDataTestId(dataTestId, 'loader')}
+                    >
+                        {icon}
+                    </ButtonContent>
                 </span>
                 <span className={styles.label}>{children}</span>
-            </Fragment>
-        );
-
-        if (href) {
-            return (
-                <a
-                    role='button'
-                    ref={mergeRefs([componentRef, ref])}
-                    href={href}
-                    aria-disabled={disabled || loading}
-                    {...componentProps}
-                    {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}
-                >
-                    {buttonChildren}
-                </a>
-            );
-        }
-
-        return (
-            <button
-                ref={mergeRefs([componentRef, ref])}
-                // eslint-disable-next-line react/button-has-type
-                type={type as ButtonHTMLAttributes<HTMLButtonElement>['type']}
-                disabled={disabled || loading}
-                {...componentProps}
-                {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}
-            >
-                {buttonChildren}
-            </button>
+            </BaseButtonCandidate>
         );
     },
 );