From bb2371778ccaa380c453559807c0480605f14525 Mon Sep 17 00:00:00 2001 From: vchikalkin Date: Wed, 28 Jun 2023 12:44:21 +0300 Subject: [PATCH] UI: use antd theme for message & notification --- .../Form/ELT/Components/PolicyTable.tsx | 3 +- apps/web/Components/Common/Notification.tsx | 30 +++++++++++++++++++ apps/web/pages/_app.jsx | 11 ++++--- apps/web/process/calculate/action.ts | 5 +++- apps/web/process/create-kp/action.ts | 5 +++- .../leasing-without-kasko/reactions.ts | 3 +- apps/web/process/load-kp/reactions.ts | 2 +- apps/web/stores/results/index.ts | 3 +- apps/web/stores/tables/elt/policy.ts | 3 +- apps/web/stores/validation/index.ts | 3 +- packages/ui/elements/Config.tsx | 4 +-- packages/ui/elements/index.ts | 11 ------- 12 files changed, 57 insertions(+), 26 deletions(-) create mode 100644 apps/web/Components/Common/Notification.tsx diff --git a/apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.tsx b/apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.tsx index 4f448ad..ff80273 100644 --- a/apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.tsx +++ b/apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.tsx @@ -1,8 +1,9 @@ import type { columns } from '../lib/config'; import type { Row, StoreSelector } from '../types'; +import { message } from '@/Components/Common/Notification'; import { useStore } from '@/stores/hooks'; import { observer } from 'mobx-react-lite'; -import { message, Table } from 'ui/elements'; +import { Table } from 'ui/elements'; export const PolicyTable = observer( ({ diff --git a/apps/web/Components/Common/Notification.tsx b/apps/web/Components/Common/Notification.tsx new file mode 100644 index 0000000..1aff561 --- /dev/null +++ b/apps/web/Components/Common/Notification.tsx @@ -0,0 +1,30 @@ +/* eslint-disable import/no-mutable-exports */ +import type { MessageInstance } from 'antd/es/message/interface'; +import type { NotificationInstance } from 'antd/es/notification/interface'; +import type { ReactNode } from 'react'; +import { message as antdMessage, notification as antdNotification } from 'ui/elements'; + +export let message: Readonly; +export let notification: Readonly; + +export function Notification({ children }: { children: ReactNode }) { + const [messageApi, messageContextHolder] = antdMessage.useMessage({ + maxCount: 3, + top: 70, + }); + + const [notificationApi, notificationContextHolder] = antdNotification.useNotification({ + placement: 'bottomRight', + }); + + message = messageApi; + notification = notificationApi; + + return ( + <> + {messageContextHolder} + {notificationContextHolder} + {children} + + ); +} diff --git a/apps/web/pages/_app.jsx b/apps/web/pages/_app.jsx index 9ff8267..d05cc93 100644 --- a/apps/web/pages/_app.jsx +++ b/apps/web/pages/_app.jsx @@ -3,6 +3,7 @@ import '../styles/fonts.css'; import '../styles/globals.css'; import initializeQueryClient from '@/api/client'; import initializeApollo from '@/apollo/client'; +import { Notification } from '@/Components/Common/Notification'; import Layout from '@/Components/Layout'; import { theme } from '@/config/ui'; import StoreProvider from '@/stores/Provider'; @@ -14,7 +15,7 @@ import { QueryClientProvider } from '@tanstack/react-query'; import Head from 'next/head'; import { useMemo } from 'react'; import { ThemeProvider } from 'styled-components'; -import AntdConfig from 'ui/elements/Config'; +import { Config as AntdConfig } from 'ui/elements'; // eslint-disable-next-line turbo/no-undeclared-env-vars if (process.env.NODE_ENV === 'development') { @@ -50,9 +51,11 @@ function App({ Component, pageProps }) { }, }} > - - - + + + + + diff --git a/apps/web/process/calculate/action.ts b/apps/web/process/calculate/action.ts index 956e6d7..d11c45f 100644 --- a/apps/web/process/calculate/action.ts +++ b/apps/web/process/calculate/action.ts @@ -1,6 +1,6 @@ import type { ProcessContext } from '../types'; +import { notification } from '@/Components/Common/Notification'; import { toJS } from 'mobx'; -import { notification } from 'ui/elements'; const key = 'ACTION_CALCULATE'; const errorMessage = 'Ошибка во время расчета графика!'; @@ -36,6 +36,7 @@ export async function action({ store, trpcClient }: ProcessContext) { description: res.error, key, message: errorMessage, + placement: 'bottomRight', }); } else { $results.setPayments(res.data.resultPayments); @@ -45,6 +46,7 @@ export async function action({ store, trpcClient }: ProcessContext) { notification.success({ key, message: successMessage, + placement: 'bottomRight', }); } }) @@ -53,6 +55,7 @@ export async function action({ store, trpcClient }: ProcessContext) { description: JSON.stringify(error), key, message: errorMessage, + placement: 'bottomRight', }); }) .finally(() => { diff --git a/apps/web/process/create-kp/action.ts b/apps/web/process/create-kp/action.ts index e511efc..c704944 100644 --- a/apps/web/process/create-kp/action.ts +++ b/apps/web/process/create-kp/action.ts @@ -1,8 +1,8 @@ import type { ProcessContext } from '../types'; +import { notification } from '@/Components/Common/Notification'; import * as CRMTypes from '@/graphql/crm.types'; import { normalizeOptions } from '@/utils/entity'; import { toJS } from 'mobx'; -import { notification } from 'ui/elements'; const key = 'ACTION_CREATEKP'; const errorMessage = 'Ошибка во время создания КП!'; @@ -47,6 +47,7 @@ export function action({ store, trpcClient, apolloClient }: ProcessContext) { description: res.error, key, message: errorMessage, + placement: 'bottomRight', }); } else { $results.setPayments(res.data.resultPayments); @@ -56,6 +57,7 @@ export function action({ store, trpcClient, apolloClient }: ProcessContext) { notification.success({ key, message: successMessage, + placement: 'bottomRight', }); const leadid = $calculation.element('selectLead').getValue(); @@ -83,6 +85,7 @@ export function action({ store, trpcClient, apolloClient }: ProcessContext) { description: JSON.stringify(error), key, message: errorMessage, + placement: 'bottomRight', }); }) .finally(() => { diff --git a/apps/web/process/leasing-without-kasko/reactions.ts b/apps/web/process/leasing-without-kasko/reactions.ts index 240d773..b92d78d 100644 --- a/apps/web/process/leasing-without-kasko/reactions.ts +++ b/apps/web/process/leasing-without-kasko/reactions.ts @@ -1,5 +1,6 @@ /* eslint-disable canonical/sort-keys */ +import { notification } from '@/Components/Common/Notification'; import * as CRMTypes from '@/graphql/crm.types'; import type { ProcessContext } from '@/process/types'; import { normalizeOptions } from '@/utils/entity'; @@ -7,7 +8,6 @@ import dayjs from 'dayjs'; import utc from 'dayjs/plugin/utc'; import { reaction } from 'mobx'; import { uid } from 'radash'; -import { notification } from 'ui/elements'; dayjs.extend(utc); @@ -24,6 +24,7 @@ export function common({ store, apolloClient }: ProcessContext) { key: NOTIFICATION_KEY, message: 'Внимание', description: 'Лизинг без КАСКО был сброшен', + placement: 'bottomRight', }); } } diff --git a/apps/web/process/load-kp/reactions.ts b/apps/web/process/load-kp/reactions.ts index 17df36d..2c91686 100644 --- a/apps/web/process/load-kp/reactions.ts +++ b/apps/web/process/load-kp/reactions.ts @@ -1,9 +1,9 @@ /* eslint-disable sonarjs/cognitive-complexity */ import eltHelper from '../elt/lib/helper'; +import { message } from '@/Components/Common/Notification'; import type { ProcessContext } from '@/process/types'; import { reaction } from 'mobx'; import { omit } from 'radash'; -import { message } from 'ui/elements'; const key = 'KP_LOADING_INFO'; diff --git a/apps/web/stores/results/index.ts b/apps/web/stores/results/index.ts index 4f8c920..7b4a6fd 100644 --- a/apps/web/stores/results/index.ts +++ b/apps/web/stores/results/index.ts @@ -1,9 +1,9 @@ import { defaultResultsValues } from './default-values'; import type { ResultPayment, ResultValues } from './types'; +import { notification } from '@/Components/Common/Notification'; import type RootStore from '@/stores/root'; import type { IObservableArray } from 'mobx'; import { makeAutoObservable, observable } from 'mobx'; -import { notification } from 'ui/elements'; export default class Results { private root: RootStore; @@ -40,6 +40,7 @@ export default class Results { description: 'Результаты расчета были сброшены', key: 'ACTION_CALCULATE', message: 'Внимание', + placement: 'bottomRight', type: 'warning', }); }; diff --git a/apps/web/stores/tables/elt/policy.ts b/apps/web/stores/tables/elt/policy.ts index 633c573..776c648 100644 --- a/apps/web/stores/tables/elt/policy.ts +++ b/apps/web/stores/tables/elt/policy.ts @@ -2,9 +2,9 @@ import type RootStore from '../../root'; import Validation from '../../validation'; import type { ValidationConfig } from '../../validation/types'; import type * as ELT from '@/Components/Calculation/Form/ELT/types'; +import { notification } from '@/Components/Common/Notification'; import type { IObservableArray } from 'mobx'; import { makeAutoObservable, observable, reaction, toJS } from 'mobx'; -import { notification } from 'ui/elements'; type ConstructorInput = { rootStore: RootStore; @@ -38,6 +38,7 @@ export default class PolicyStore { description: 'Выбранный расчет ЭЛТ был сброшен', key: validationConfig.err_key, message: validationConfig.err_title, + placement: 'bottomRight', type: 'warning', }); } diff --git a/apps/web/stores/validation/index.ts b/apps/web/stores/validation/index.ts index bb166e7..e0bf708 100644 --- a/apps/web/stores/validation/index.ts +++ b/apps/web/stores/validation/index.ts @@ -1,8 +1,8 @@ import type RootStore from '../root'; import type { RemoveError, ValidationConfig, ValidationError, ValidationParams } from './types'; +import { notification } from '@/Components/Common/Notification'; import { makeAutoObservable } from 'mobx'; import { isServer } from 'tools'; -import { notification } from 'ui/elements'; export default class Validation { private root: RootStore; @@ -41,6 +41,7 @@ export default class Validation { description: message, key: this.params.err_key, message: this.params.err_title, + placement: 'bottomRight', type: this.root.$process.has('Unlimited') ? 'warning' : 'error', }); diff --git a/packages/ui/elements/Config.tsx b/packages/ui/elements/Config.tsx index 8b8bb6e..c96a0ed 100644 --- a/packages/ui/elements/Config.tsx +++ b/packages/ui/elements/Config.tsx @@ -3,12 +3,10 @@ import type { ConfigProviderProps } from 'antd/es/config-provider'; import ru_RU from 'antd/lib/locale/ru_RU'; import type { ReactNode } from 'react'; -function AntdConfig({ children, ...config }: ConfigProviderProps & { children: ReactNode }) { +export function Config({ children, ...config }: ConfigProviderProps & { children: ReactNode }) { return ( {children} ); } - -export default AntdConfig; diff --git a/packages/ui/elements/index.ts b/packages/ui/elements/index.ts index 9c926f7..1071de9 100644 --- a/packages/ui/elements/index.ts +++ b/packages/ui/elements/index.ts @@ -1,14 +1,3 @@ -import { message, notification } from 'antd'; - -message.config({ - maxCount: 3, - top: 70, -}); - -notification.config({ - placement: 'bottomRight', -}); - export * from './Button'; export * from './Checkbox'; export * from './Config';