feat(UIKIT-1048,Dialog): Добавлен пропс size (#1119)

kaluga-astral · Aug 29, 2024 · cacbed0 · cacbed0
1 parent f32d65a
commit cacbed0
Show file tree

Hide file tree

Showing 4 changed files with 183 additions and 5 deletions.
diff --git a/packages/components/src/Dialog/Dialog.stories.tsx b/packages/components/src/Dialog/Dialog.stories.tsx
@@ -9,6 +9,7 @@ import { DialogHeader } from '../DialogHeader';
 import { Grid } from '../Grid';
 import { Tag } from '../Tag';
 import { Typography } from '../Typography';
+import { DescriptionList, type DescriptionListItem } from '../DescriptionList';
 
 import { Dialog } from './Dialog';
 
@@ -44,6 +45,41 @@ export const Interaction: Story = {
   },
 };
 
+const FAKE_ITEMS: DescriptionListItem[] = [
+  {
+    name: 'Дата поступления',
+    value: '12.06.2024 в 11:11',
+  },
+  {
+    name: 'Тип заявки',
+    value: 'Создание',
+  },
+  {
+    name: 'ID учетной записи',
+    value: '4d1f0594-bc22-4660-8e7d-83a024126ef3',
+  },
+  {
+    name: 'ID док-оборота',
+    value: '222a1343-rf12-6660-1e3q-88a911143yr1',
+  },
+  {
+    name: 'ИНН',
+    value: '77724528768',
+  },
+  {
+    name: 'КПП',
+    value: '772401001',
+  },
+  {
+    name: 'Конфигурация',
+    value: 'Значение показателя',
+  },
+  {
+    name: 'Удостоверенный центр',
+    value: 'УЦ «Калуга Астрал»',
+  },
+];
+
 export const Example = () => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -279,3 +315,115 @@ export const DialogActions = () => {
     </>
   );
 };
+
+export const Size = () => {
+  const [openXs, setOpenXs] = useState(false);
+  const [openSm, setOpenSm] = useState(false);
+  const [openMd, setOpenMd] = useState(false);
+  const [openLg, setOpenLg] = useState(false);
+  const [openXl, setOpenXl] = useState(false);
+
+  const handleCloseXs = () => {
+    setOpenXs(false);
+  };
+  const handleCloseSm = () => {
+    setOpenSm(false);
+  };
+  const handleCloseMd = () => {
+    setOpenMd(false);
+  };
+  const handleCloseLg = () => {
+    setOpenLg(false);
+  };
+
+  const handleCloseXl = () => {
+    setOpenXl(false);
+  };
+
+  return (
+    <>
+      <Grid container columns={2} spacing={2}>
+        <Button onClick={() => setOpenXs((prevState) => !prevState)}>
+          Dialog xs size
+        </Button>
+        <Button onClick={() => setOpenSm((prevState) => !prevState)}>
+          Dialog sm size
+        </Button>
+        <Button onClick={() => setOpenMd((prevState) => !prevState)}>
+          Dialog md size
+        </Button>
+        <Button onClick={() => setOpenLg((prevState) => !prevState)}>
+          Dialog lg size
+        </Button>
+        <Button onClick={() => setOpenXl((prevState) => !prevState)}>
+          Dialog xl size
+        </Button>
+      </Grid>
+      <Dialog open={openXs} onClose={handleCloseXs} title="Заявка" size="xs">
+        <DialogContent>
+          <DescriptionList items={FAKE_ITEMS} leader />
+        </DialogContent>
+        <DialogActionComponent>
+          <Button onClick={handleCloseXs} variant="light" color="error">
+            Отклонить
+          </Button>
+          <Button onClick={handleCloseXs} variant="light" color="success">
+            Принять
+          </Button>
+        </DialogActionComponent>
+      </Dialog>
+      <Dialog open={openSm} onClose={handleCloseSm} title="Заявка" size="sm">
+        <DialogContent>
+          <DescriptionList items={FAKE_ITEMS} leader />
+        </DialogContent>
+        <DialogActionComponent>
+          <Button onClick={handleCloseSm} variant="light" color="error">
+            Отклонить
+          </Button>
+          <Button onClick={handleCloseSm} variant="light" color="success">
+            Принять
+          </Button>
+        </DialogActionComponent>
+      </Dialog>
+      <Dialog open={openMd} onClose={handleCloseMd} title="Заявка" size="md">
+        <DialogContent>
+          <DescriptionList items={FAKE_ITEMS} leader />
+        </DialogContent>
+        <DialogActionComponent>
+          <Button onClick={handleCloseMd} variant="light" color="error">
+            Отклонить
+          </Button>
+          <Button onClick={handleCloseMd} variant="light" color="success">
+            Принять
+          </Button>
+        </DialogActionComponent>
+      </Dialog>
+      <Dialog open={openLg} onClose={handleCloseLg} title="Заявка" size="lg">
+        <DialogContent>
+          <DescriptionList items={FAKE_ITEMS} leader />
+        </DialogContent>
+        <DialogActionComponent>
+          <Button onClick={handleCloseLg} variant="light" color="error">
+            Отклонить
+          </Button>
+          <Button onClick={handleCloseLg} variant="light" color="success">
+            Принять
+          </Button>
+        </DialogActionComponent>
+      </Dialog>
+      <Dialog open={openXl} onClose={handleCloseXl} title="Заявка" size="xl">
+        <DialogContent>
+          <DescriptionList items={FAKE_ITEMS} leader />
+        </DialogContent>
+        <DialogActionComponent>
+          <Button onClick={handleCloseXl} variant="light" color="error">
+            Отклонить
+          </Button>
+          <Button onClick={handleCloseXl} variant="light" color="success">
+            Принять
+          </Button>
+        </DialogActionComponent>
+      </Dialog>
+    </>
+  );
+};
diff --git a/packages/components/src/Dialog/Dialog.tsx b/packages/components/src/Dialog/Dialog.tsx
@@ -1,12 +1,15 @@
 import { type DialogProps as MuiDialogProps } from '@mui/material';
+import { type MouseEvent } from 'react';
 
 import { DialogTitle } from '../DialogTitle';
-import { type WithoutEmotionSpecific } from '../types';
+import type { WithoutEmotionSpecific } from '../types';
 import { BottomDrawer } from '../BottomDrawer';
-import { useViewportType } from '../hooks/useViewportType';
+import { useViewportType } from '../hooks';
 
 import { StyledDialog } from './styles';
 
+type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
 export type DialogProps = WithoutEmotionSpecific<
   Omit<MuiDialogProps, 'title'>
 > & {
@@ -18,19 +21,25 @@ export type DialogProps = WithoutEmotionSpecific<
    * Отключить кликабельность фонового компонента
    */
   disableBackdropClick?: boolean;
+  /**
+   * Размер Dialog
+   * @default md
+   */
+  size?: DialogSize;
 };
 
 export const Dialog = ({
   children,
   title,
   disableBackdropClick,
   onClose,
+  size = 'md',
   ...props
 }: DialogProps) => {
   const handleClose =
     onClose &&
     ((
-      event: React.MouseEvent<HTMLButtonElement>,
+      event: MouseEvent<HTMLButtonElement>,
       reason: 'backdropClick' | 'escapeKeyDown',
     ) => {
       if (disableBackdropClick && reason == 'backdropClick') {
@@ -51,7 +60,7 @@ export const Dialog = ({
   }
 
   return (
-    <StyledDialog onClose={handleClose} {...props}>
+    <StyledDialog $size={size} onClose={handleClose} {...props}>
       {title && <DialogTitle onClose={onClose}>{title}</DialogTitle>}
       {children}
     </StyledDialog>

diff --git a/packages/components/src/Dialog/constants.ts b/packages/components/src/Dialog/constants.ts
@@ -0,0 +1,7 @@
+export const SIZES = {
+  xs: { minWidth: '300px', maxWidth: '399px' },
+  sm: { minWidth: '400px', maxWidth: '499px' },
+  md: { minWidth: '500px', maxWidth: '599px' },
+  lg: { minWidth: '600px', maxWidth: '699px' },
+  xl: { minWidth: '700px', maxWidth: '980px' },
+};
diff --git a/packages/components/src/Dialog/styles.ts b/packages/components/src/Dialog/styles.ts
@@ -6,8 +6,22 @@ import {
 
 import { styled } from '../styles';
 
-export const StyledDialog = styled(MuiDialog)`
+import { SIZES } from './constants';
+
+type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+const getSize = (size: DialogSize) => {
+  return SIZES[size] || SIZES.md;
+};
+
+export const StyledDialog = styled(MuiDialog, {
+  shouldForwardProp: (prop) => !['$size'].includes(prop),
+})<{ $size: DialogSize }>`
   &.${dialogClasses.root} .${backdropClasses.root} {
     background-color: ${({ theme }) => theme.palette.background.modalShadow};
   }
+  .${dialogClasses.paper} {
+    min-width: ${({ $size }) => getSize($size).minWidth};
+    max-width: ${({ $size }) => getSize($size).maxWidth};
+  }
 `;