feat(UIKIT-1781,ConfirmDialog): Исправлено отображение на мобильных у…

…стройствах (#1137)

packages/components/src/ConfirmDialog/ConfirmDialog.stories.tsx

@@ -64,7 +64,7 @@ export const Example = () => {
         onClose={handleClose}
         actions={{
           confirm: { text: 'Да', onClick: handleConfirm, loading },
-          cancel: { text: 'Нет', variant: 'text' },
+          cancel: { text: 'Нет' },
         }}
       />
     </div>

packages/components/src/ConfirmDialog/ConfirmDialog.tsx

@@ -1,11 +1,14 @@
-import { type ReactNode, useMemo } from 'react';
+import { type ReactNode } from 'react';
 
 import { Button, type ButtonProps } from '../Button';
 import { Dialog, type DialogProps } from '../Dialog';
 import { DialogContent } from '../DialogContent';
 import { DialogContentText } from '../DialogContentText';
 import { DialogActions } from '../DialogActions';
 
+import { CancelButton } from './styles';
+import { useLogic } from './useLogic';
+
 export type ConfirmDialogProps = {
   /**
    * Заголовок диалога
@@ -46,30 +49,19 @@ export type ConfirmDialogProps = {
   | 'open'
 >;
 
-export const ConfirmDialog = ({
-  open,
-  title,
-  description,
-  actions,
-  onClose,
-  ...restProps
-}: ConfirmDialogProps) => {
-  const { text: confirmText, ...confirmButtonProps } = actions.confirm;
+export const ConfirmDialog = (props: ConfirmDialogProps) => {
+  const { isShowCancelButton, cancelButtonProps } = useLogic(props);
 
-  const renderCancelButton = useMemo(() => {
-    if (actions.cancel) {
-      const { text: cancelText, ...cancelButtonProps } = actions.cancel;
-      const handleCancelClick = actions.cancel?.onClick || onClose;
+  const { open, title, description, actions, onClose, ...restProps } = props;
 
-      return (
-        <Button {...cancelButtonProps} onClick={handleCancelClick}>
-          {cancelText}
-        </Button>
-      );
-    }
+  const { text: confirmText, ...confirmButtonProps } = actions.confirm;
 
-    return null;
-  }, [actions.cancel, onClose]);
+  const {
+    text: cancelText,
+    variant,
+    onClick,
+    ...restCancelProps
+  } = actions.cancel || {};
 
   return (
     <Dialog title={title} open={open} onClose={onClose} {...restProps}>
@@ -79,7 +71,11 @@ export const ConfirmDialog = ({
         </DialogContent>
       )}
       <DialogActions>
-        {renderCancelButton}
+        {isShowCancelButton && (
+          <CancelButton {...restCancelProps} {...cancelButtonProps}>
+            {cancelText}
+          </CancelButton>
+        )}
         <Button {...confirmButtonProps}>{confirmText}</Button>
       </DialogActions>
     </Dialog>

packages/components/src/ConfirmDialog/styles.ts

@@ -0,0 +1,8 @@
+import { styled } from '../styles';
+import { Button } from '../Button';
+
+export const CancelButton = styled(Button)`
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    order: 1;
+  }
+`;

packages/components/src/ConfirmDialog/useLogic/index.ts

@@ -0,0 +1 @@
+export * from './useLogic';

packages/components/src/ConfirmDialog/useLogic/useLogic.ts

@@ -0,0 +1,23 @@
+import { useViewportType } from '../../hooks';
+import { type ConfirmDialogProps } from '../ConfirmDialog';
+
+type UseLogicParams = ConfirmDialogProps;
+
+export const useLogic = ({ actions, onClose }: UseLogicParams) => {
+  const { isMobile } = useViewportType();
+  const { cancel } = actions;
+
+  const isShowCancelButton = Boolean(cancel);
+
+  const cancelVariant = isMobile ? 'light' : 'text';
+  const handleCancelClick = cancel?.onClick || onClose;
+
+  const { variant = cancelVariant } = cancel || {};
+
+  const cancelButtonProps = {
+    variant,
+    onClick: handleCancelClick,
+  };
+
+  return { isShowCancelButton, cancelButtonProps };
+};