feat(UIKIT-625,SideDialog): Добавлен пропс size (#1115)

kaluga-astral · Aug 28, 2024 · 2f39574 · 2f39574
1 parent c9de34b
commit 2f39574
Show file tree

Hide file tree

Showing 4 changed files with 238 additions and 3 deletions.
diff --git a/packages/components/src/SideDialog/SideDialog.stories.tsx b/packages/components/src/SideDialog/SideDialog.stories.tsx
@@ -12,6 +12,8 @@ import { SideDialogActions } from '../SideDialogActions';
 import { SideDialogContent } from '../SideDialogContent';
 import { SideDialogContentText } from '../SideDialogContentText';
 import { SideDialogHeader } from '../SideDialogHeader';
+import { Typography } from '../Typography';
+import { DescriptionList, type DescriptionListItem } from '../DescriptionList';
 
 import { SideDialog } from './SideDialog';
 
@@ -261,3 +263,206 @@ export const CustomFooter = () => {
     </>
   );
 };
+
+/**
+ * prop `size` определяет размер SideDialog, по дефолту `sm`
+ * */
+export const Sizes = () => {
+  const [openXs, setOpenXs] = useState(false);
+  const [openSm, setOpenSm] = useState(false);
+  const [openMd, setOpenMd] = useState(false);
+  const [openLg, setOpenLg] = useState(false);
+
+  const 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: 'ООО «АкцептЗайчатинаСТОНал»',
+    },
+    {
+      name: 'ИНН',
+      value: '77724528768',
+    },
+    {
+      name: 'КПП',
+      value: '772401001',
+    },
+    {
+      name: 'Конфигурация',
+      value: 'Значение показателя',
+    },
+    {
+      name: 'Удостоверенный центр',
+      value: 'УЦ «Калуга Астрал»',
+    },
+  ];
+
+  const partnerItems: DescriptionListItem[] = [
+    {
+      name: 'Офис',
+      value: 'АО «Калуга Астрал» ОПС ЭДО',
+    },
+    {
+      name: 'Центр продаж',
+      value: 'АО «Калуга Астрал»',
+    },
+    {
+      name: 'ID партнера',
+      value: '4d1f0594-bc22-4660-8e7d-83a024126ef3',
+    },
+  ];
+  const handleCloseXs = () => {
+    setOpenXs(false);
+  };
+  const handleCloseSm = () => {
+    setOpenSm(false);
+  };
+  const handleCloseMd = () => {
+    setOpenMd(false);
+  };
+  const handleCloseLg = () => {
+    setOpenLg(false);
+  };
+
+  return (
+    <>
+      <Grid container columns={2} spacing={2}>
+        <Button onClick={() => setOpenXs((prevState) => !prevState)}>
+          SideDialog xs size
+        </Button>
+        <Button onClick={() => setOpenSm((prevState) => !prevState)}>
+          SideDialog sm size
+        </Button>
+        <Button onClick={() => setOpenMd((prevState) => !prevState)}>
+          SideDialog md size
+        </Button>
+        <Button onClick={() => setOpenLg((prevState) => !prevState)}>
+          SideDialog lg size
+        </Button>
+      </Grid>
+      <SideDialog
+        title="Заявка"
+        open={openXs}
+        onClose={handleCloseXs}
+        size="xs"
+      >
+        <SideDialogContent>
+          <Typography variant="h6">Реквизиты абонента</Typography>
+          <br />
+          <DescriptionList items={items} leader />
+          <br />
+          <Typography variant="h6">Данные партнера</Typography>
+          <br />
+          <DescriptionList items={partnerItems} leader />
+        </SideDialogContent>
+        <SideDialogActions>
+          <Button variant="light" onClick={handleCloseXs}>
+            Ручная проверка
+          </Button>
+          <Button onClick={handleCloseXs} variant="light">
+            Абонент Нотариус
+          </Button>
+          <Button onClick={handleCloseXs} variant="light" color="error">
+            Отклонить
+          </Button>
+        </SideDialogActions>
+      </SideDialog>
+      <SideDialog
+        title="Заголовок"
+        open={openSm}
+        onClose={handleCloseSm}
+        size="sm"
+      >
+        <SideDialogContent>
+          <Typography variant="h6">Реквизиты абонента</Typography>
+          <br />
+          <DescriptionList items={items} leader />
+          <br />
+          <Typography variant="h6">Данные партнера</Typography>
+          <br />
+          <DescriptionList items={partnerItems} leader />
+        </SideDialogContent>
+        <SideDialogActions>
+          <Button variant="light" onClick={handleCloseXs}>
+            Ручная проверка
+          </Button>
+          <Button onClick={handleCloseXs} variant="light">
+            Абонент Нотариус
+          </Button>
+          <Button onClick={handleCloseXs} variant="light" color="error">
+            Отклонить
+          </Button>
+        </SideDialogActions>
+      </SideDialog>
+      <SideDialog
+        title="Заголовок"
+        open={openMd}
+        onClose={handleCloseMd}
+        size="md"
+      >
+        <SideDialogContent>
+          <Typography variant="h6">Реквизиты абонента</Typography>
+          <br />
+          <DescriptionList items={items} leader />
+          <br />
+          <Typography variant="h6">Данные партнера</Typography>
+          <br />
+          <DescriptionList items={partnerItems} leader />
+        </SideDialogContent>
+        <SideDialogActions>
+          <Button variant="light" onClick={handleCloseXs}>
+            Ручная проверка
+          </Button>
+          <Button onClick={handleCloseXs} variant="light">
+            Абонент Нотариус
+          </Button>
+          <Button onClick={handleCloseXs} variant="light" color="error">
+            Отклонить
+          </Button>
+        </SideDialogActions>
+      </SideDialog>
+      <SideDialog
+        title="Заголовок"
+        open={openLg}
+        onClose={handleCloseLg}
+        size="lg"
+      >
+        <SideDialogContent>
+          <Typography variant="h6">Реквизиты абонента</Typography>
+          <br />
+          <DescriptionList items={items} leader />
+          <br />
+          <Typography variant="h6">Данные партнера</Typography>
+          <br />
+          <DescriptionList items={partnerItems} leader />
+        </SideDialogContent>
+        <SideDialogActions>
+          <Button variant="light" onClick={handleCloseXs}>
+            Ручная проверка
+          </Button>
+          <Button onClick={handleCloseXs} variant="light">
+            Абонент Нотариус
+          </Button>
+          <Button onClick={handleCloseXs} variant="light" color="error">
+            Отклонить
+          </Button>
+        </SideDialogActions>
+      </SideDialog>
+    </>
+  );
+};
diff --git a/packages/components/src/SideDialog/SideDialog.tsx b/packages/components/src/SideDialog/SideDialog.tsx
@@ -5,21 +5,35 @@ import { type WithoutEmotionSpecific } from '../types';
 
 import { StyledDrawer } from './styles';
 
+type SideDialogSize = 'xs' | 'sm' | 'md' | 'lg';
+
 export type SideDialogProps = WithoutEmotionSpecific<
   Omit<MuiDrawerProps, 'anchor'>
 > & {
   title?: string;
+  /**
+   * Размер SideDialog
+   * @default sm
+   */
+  size?: SideDialogSize;
 };
 
 export const SideDialog = ({
   children,
   title,
   onClose,
   open,
+  size = 'sm',
   ...props
 }: SideDialogProps) => {
   return (
-    <StyledDrawer anchor="right" open={open} onClose={onClose} {...props}>
+    <StyledDrawer
+      $size={size}
+      anchor="right"
+      open={open}
+      onClose={onClose}
+      {...props}
+    >
       {title && <SideDialogTitle onClose={onClose}>{title}</SideDialogTitle>}
       {children}
     </StyledDrawer>

diff --git a/packages/components/src/SideDialog/constants.ts b/packages/components/src/SideDialog/constants.ts
@@ -0,0 +1,6 @@
+export const SIZES = {
+  xs: '460px',
+  sm: '520px',
+  md: '620px',
+  lg: '800px',
+};
diff --git a/packages/components/src/SideDialog/styles.ts b/packages/components/src/SideDialog/styles.ts
@@ -3,13 +3,23 @@ import { Drawer, type DrawerProps, drawerClasses } from '@mui/material';
 import { styled } from '../styles';
 import { type WithoutEmotionSpecific } from '../types';
 
-export const StyledDrawer = styled(Drawer)<WithoutEmotionSpecific<DrawerProps>>`
+import { SIZES } from './constants';
+
+type SideDialogSize = 'xs' | 'sm' | 'md' | 'lg';
+
+const getSize = (size: SideDialogSize) => {
+  return SIZES[size] || SIZES.sm;
+};
+
+export const StyledDrawer = styled(Drawer, {
+  shouldForwardProp: (prop) => !['$size'].includes(prop),
+})<{ $size: SideDialogSize } & WithoutEmotionSpecific<DrawerProps>>`
   height: 100vh;
 
   @supports (height: 100dvh) {
     height: 100dvh;
   }
   .${drawerClasses.paper} {
-    width: 30%;
+    width: ${({ $size }) => getSize($size)};
   }
 `;