Skip to content

modal types fix #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LugomAnS wants to merge 1 commit into
base: master
Choose a base branch
from
Open

modal types fix #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 .prettierrc.js → .prettierrc.cjs
View file
Open in desktop
File renamed without changes.
60 changes: 32 additions & 28 deletions src/features/example-modals/page/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import {memo, useCallback} from 'react';
import Head from "@src/ui/layout/head";
import MainMenu from "@src/features/navigation/components/main-menu";
import PageLayout from "@src/ui/layout/page-layout";
import useServices from "@src/services/use-services";
import LocaleSelect from "@src/features/example-i18n/components/locale-select";
import {useTranslate} from "@src/services/i18n/use-i18n";
import { memo, useCallback } from 'react';
import Head from '@src/ui/layout/head';
import MainMenu from '@src/features/navigation/components/main-menu';
import PageLayout from '@src/ui/layout/page-layout';
import useServices from '@src/services/use-services';
import LocaleSelect from '@src/features/example-i18n/components/locale-select';
import { useTranslate } from '@src/services/i18n/use-i18n';
import { ModalClose } from '@src/services/modals/types';

interface IProps {
close?: () => void;
interface IProps extends ModalClose<void> {
close: () => void;
}

function ModalsExamplePage(props: IProps) {
Expand All @@ -18,14 +19,15 @@ function ModalsExamplePage(props: IProps) {
openMessage: useCallback(async () => {
modals.open('message', {
title: 'Сообщение',
message: 'Простое окно с сообщением. Заголовок и текст переданы при открытии окна'
message: 'Простое окно с сообщением. Заголовок и текст переданы при открытии окна',
});
}, []),

openConfirm: useCallback(async () => {
const result = await modals.open('confirm', {
title: 'Подтвердите действие!',
message: 'Вы действительно хотите выполнить некое действие? Ваш выбор отобразится в консоле браузера.'
message:
'Вы действительно хотите выполнить некое действие? Ваш выбор отобразится в консоле браузера.',
});
console.log('confirm', result);
}, []),
Expand All @@ -41,7 +43,9 @@ function ModalsExamplePage(props: IProps) {
openCascade: useCallback(async () => {
const result = await modals.open('cascade', {
title: t('example-modals.cascade.title'),
message: `${t('example-modals.cascade.messageCount', {plural: 1})} ${t('example-modals.cascade.message')}`
message: `${t('example-modals.cascade.messageCount', { plural: 1 })} ${t(
'example-modals.cascade.message',
)}`,
});
console.log('cascade', result);
}, []),
Expand All @@ -52,30 +56,31 @@ function ModalsExamplePage(props: IProps) {

onClose: useCallback(() => {
if (props.close) props.close();
}, [props.close])
}, [props.close]),
};

return (
<PageLayout>
<Head title="React Skeleton">
{props.close ? <button onClick={callbacks.onClose}>Закрыть</button> : <LocaleSelect/>}
{Boolean(props.close) ? (
<button onClick={callbacks.onClose}>Закрыть</button>
) : (
<LocaleSelect />
)}
</Head>
<MainMenu/>
<MainMenu />
<h2>{t('example-modals.title')}</h2>
<p>
Модальные окна отображаются поверх текущей страницы, делая элементы страницы недоступными
пока
окно не закроется.
Управление модальными окнами осуществляется сервисом modals. Для открытия окна вызывается
метод open с передачей свойств окна. Свойства окна - это свойства React компонента, которым
реализовано окно.
пока окно не закроется. Управление модальными окнами осуществляется сервисом modals. Для
открытия окна вызывается метод open с передачей свойств окна. Свойства окна - это свойства
React компонента, которым реализовано окно.
</p>
<p>
Любой React компонент может стать окном, его достаточно прописать в импорте сервиса - в
файле <code>@src/services/modals/imports.ts</code>.
В компонент окна автоматически передаётся функция обратного вызова close, чтобы закрыть окно
и передать результат.
Смотрите README в <code className="block">./src/services/modals/README.md</code>
файле <code>@src/services/modals/imports.ts</code>. В компонент окна автоматически
передаётся функция обратного вызова close, чтобы закрыть окно и передать результат. Смотрите
README в <code className="block">./src/services/modals/README.md</code>
</p>
<p>
<button onClick={callbacks.openMessage}>Сообщение</button>
Expand All @@ -90,10 +95,9 @@ function ModalsExamplePage(props: IProps) {
<button onClick={callbacks.openCascade}>Каскад окон</button>
</p>
<p>
Пример отображения страницы в качестве модального окна.
Страница отобразится ниже, так как позиционируется в соответствии с нормальным потоком
документа.
Тогда как в разметке модальных окон используется абсолютная или фиксированная позиция.
Пример отображения страницы в качестве модального окна. Страница отобразится ниже, так как
позиционируется в соответствии с нормальным потоком документа. Тогда как в разметке
модальных окон используется абсолютная или фиксированная позиция.
</p>
<p>
<button onClick={callbacks.openPage}>Открыть текущую страницу сервисом модалок</button>
Expand Down
21 changes: 11 additions & 10 deletions src/services/modals/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,16 @@ export type TModalName = keyof TModalsComponents;
* Gо умолчанию добавляется колбэк close()
*/
export type TModalsProps = {
[Name in TModalName]: Parameters<TModalsComponents[Name]>[0] & ModalClose<void>
}
[Name in TModalName]: Parameters<TModalsComponents[Name]>[0] &
ModalClose<Parameters<Parameters<TModalsComponents[Name]>[0]['close']>[0]>;
};
/**
* Параметры открытия модалки для метода open.
* Берутся из свойств компонента, исключая колбэк close, так как его не надо передавать.
*/
export type TModalsParams = {
[Name in TModalName]: Omit<TModalsProps[Name], 'close'>
}
[Name in TModalName]: Omit<TModalsProps[Name], 'close'>;
};
/**
* Результат закрытия модалки.
* Берется первый параметр из колбэка close, так как в close передаются результаты
Expand All @@ -31,8 +32,8 @@ export type TModalsResult = {
// // Если в свойствах модалки есть колбэк close, то используем его первый аргумент
// ? Parameters<TModalsProps[Name]['close']>[0]
// : void
[Name in TModalName]: Parameters<TModalsProps[Name]['close']>[0]
}
[Name in TModalName]: Parameters<TModalsProps[Name]['close']>[0];
};
/**
* Свойства модалки с колбэком закрытия
* Для определения props в компоненте модалки
Expand All @@ -44,10 +45,10 @@ export interface ModalClose<Result = boolean> {
* Состояние открытой модалки в стеке
*/
export type TModalState<Name extends TModalName> = {
key: number,
name: Name,
props: TModalsProps[Name],
}
key: number;
name: Name;
props: TModalsProps[Name];
};
/**
* Стек открытых модалок
*/
Expand Down