diff --git a/.prettierrc.js b/.prettierrc.cjs similarity index 100% rename from .prettierrc.js rename to .prettierrc.cjs diff --git a/src/features/example-modals/page/index.tsx b/src/features/example-modals/page/index.tsx index d0cde27..46d3978 100644 --- a/src/features/example-modals/page/index.tsx +++ b/src/features/example-modals/page/index.tsx @@ -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 { + close: () => void; } function ModalsExamplePage(props: IProps) { @@ -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); }, []), @@ -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); }, []), @@ -52,30 +56,31 @@ function ModalsExamplePage(props: IProps) { onClose: useCallback(() => { if (props.close) props.close(); - }, [props.close]) + }, [props.close]), }; return ( - {props.close ? : } + {Boolean(props.close) ? ( + + ) : ( + + )} - +

{t('example-modals.title')}

Модальные окна отображаются поверх текущей страницы, делая элементы страницы недоступными - пока - окно не закроется. - Управление модальными окнами осуществляется сервисом modals. Для открытия окна вызывается - метод open с передачей свойств окна. Свойства окна - это свойства React компонента, которым - реализовано окно. + пока окно не закроется. Управление модальными окнами осуществляется сервисом modals. Для + открытия окна вызывается метод open с передачей свойств окна. Свойства окна - это свойства + React компонента, которым реализовано окно.

Любой React компонент может стать окном, его достаточно прописать в импорте сервиса - в - файле @src/services/modals/imports.ts. - В компонент окна автоматически передаётся функция обратного вызова close, чтобы закрыть окно - и передать результат. - Смотрите README в ./src/services/modals/README.md + файле @src/services/modals/imports.ts. В компонент окна автоматически + передаётся функция обратного вызова close, чтобы закрыть окно и передать результат. Смотрите + README в ./src/services/modals/README.md

@@ -90,10 +95,9 @@ function ModalsExamplePage(props: IProps) {

- Пример отображения страницы в качестве модального окна. - Страница отобразится ниже, так как позиционируется в соответствии с нормальным потоком - документа. - Тогда как в разметке модальных окон используется абсолютная или фиксированная позиция. + Пример отображения страницы в качестве модального окна. Страница отобразится ниже, так как + позиционируется в соответствии с нормальным потоком документа. Тогда как в разметке + модальных окон используется абсолютная или фиксированная позиция.

diff --git a/src/services/modals/types.ts b/src/services/modals/types.ts index beb0ae1..98bc2da 100644 --- a/src/services/modals/types.ts +++ b/src/services/modals/types.ts @@ -13,15 +13,16 @@ export type TModalName = keyof TModalsComponents; * Gо умолчанию добавляется колбэк close() */ export type TModalsProps = { - [Name in TModalName]: Parameters[0] & ModalClose -} + [Name in TModalName]: Parameters[0] & + ModalClose[0]['close']>[0]>; +}; /** * Параметры открытия модалки для метода open. * Берутся из свойств компонента, исключая колбэк close, так как его не надо передавать. */ export type TModalsParams = { - [Name in TModalName]: Omit -} + [Name in TModalName]: Omit; +}; /** * Результат закрытия модалки. * Берется первый параметр из колбэка close, так как в close передаются результаты @@ -31,8 +32,8 @@ export type TModalsResult = { // // Если в свойствах модалки есть колбэк close, то используем его первый аргумент // ? Parameters[0] // : void - [Name in TModalName]: Parameters[0] -} + [Name in TModalName]: Parameters[0]; +}; /** * Свойства модалки с колбэком закрытия * Для определения props в компоненте модалки @@ -44,10 +45,10 @@ export interface ModalClose { * Состояние открытой модалки в стеке */ export type TModalState = { - key: number, - name: Name, - props: TModalsProps[Name], -} + key: number; + name: Name; + props: TModalsProps[Name]; +}; /** * Стек открытых модалок */