From 2f39574304e0eec36d2c00b8a01be9c540aa389b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9A=D0=BE=D1=80=D0=BE=D0=BB=D0=B5=D0=B2=20=D0=94=D0=B0?=
=?UTF-8?q?=D0=BD=D0=B8=D0=BB?=
<105650840+pan1caisreal@users.noreply.github.com>
Date: Wed, 28 Aug 2024 18:05:20 +0300
Subject: [PATCH] =?UTF-8?q?feat(UIKIT-625,SideDialog):=20=D0=94=D0=BE?=
=?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=20=D0=BF=D1=80=D0=BE=D0=BF?=
=?UTF-8?q?=D1=81=20size=20(#1115)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/SideDialog/SideDialog.stories.tsx | 205 ++++++++++++++++++
.../components/src/SideDialog/SideDialog.tsx | 16 +-
.../components/src/SideDialog/constants.ts | 6 +
packages/components/src/SideDialog/styles.ts | 14 +-
4 files changed, 238 insertions(+), 3 deletions(-)
create mode 100644 packages/components/src/SideDialog/constants.ts
diff --git a/packages/components/src/SideDialog/SideDialog.stories.tsx b/packages/components/src/SideDialog/SideDialog.stories.tsx
index 6640a3a67..851c9b53e 100644
--- 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 (
+ <>
+
+
+
+
+
+
+
+
+ Реквизиты абонента
+
+
+
+ Данные партнера
+
+
+
+
+
+
+
+
+
+
+
+ Реквизиты абонента
+
+
+
+ Данные партнера
+
+
+
+
+
+
+
+
+
+
+
+ Реквизиты абонента
+
+
+
+ Данные партнера
+
+
+
+
+
+
+
+
+
+
+
+ Реквизиты абонента
+
+
+
+ Данные партнера
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/components/src/SideDialog/SideDialog.tsx b/packages/components/src/SideDialog/SideDialog.tsx
index f3d33fc8e..31e71ffc2 100644
--- a/packages/components/src/SideDialog/SideDialog.tsx
+++ b/packages/components/src/SideDialog/SideDialog.tsx
@@ -5,10 +5,17 @@ import { type WithoutEmotionSpecific } from '../types';
import { StyledDrawer } from './styles';
+type SideDialogSize = 'xs' | 'sm' | 'md' | 'lg';
+
export type SideDialogProps = WithoutEmotionSpecific<
Omit
> & {
title?: string;
+ /**
+ * Размер SideDialog
+ * @default sm
+ */
+ size?: SideDialogSize;
};
export const SideDialog = ({
@@ -16,10 +23,17 @@ export const SideDialog = ({
title,
onClose,
open,
+ size = 'sm',
...props
}: SideDialogProps) => {
return (
-
+
{title && {title}}
{children}
diff --git a/packages/components/src/SideDialog/constants.ts b/packages/components/src/SideDialog/constants.ts
new file mode 100644
index 000000000..0dd48d925
--- /dev/null
+++ 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
index 87670a3af..34cf3921b 100644
--- 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)>`
+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>`
height: 100vh;
@supports (height: 100dvh) {
height: 100dvh;
}
.${drawerClasses.paper} {
- width: 30%;
+ width: ${({ $size }) => getSize($size)};
}
`;