diff --git a/Components/Calculation/Form/Payments/PaymentsParams.jsx b/Components/Calculation/Form/Payments/PaymentsParams.jsx new file mode 100644 index 0000000..4f3174f --- /dev/null +++ b/Components/Calculation/Form/Payments/PaymentsParams.jsx @@ -0,0 +1,45 @@ +import { observer } from 'mobx-react-lite'; +import { useStore } from 'stores/hooks'; +import { Flex } from 'UIKit/grid'; +import elementsRender from '../../config/elements-render'; +import { elements } from './config'; + +function PaymentsParams() { + const renderedElements = elements.map((elementName) => { + const render = elementsRender[elementName]?.render; + + return render(); + }); + + const [selectSeasonType, tbxParmentsDecreasePercent, selectHighSeasonStart] = renderedElements; + + const { $calculation } = useStore(); + const graphType = $calculation.getElementValue('radioGraphType'); + + switch (graphType) { + case 100_000_000: + return null; + case 100_000_001: { + return {selectSeasonType}; + } + case 100_000_002: { + return {tbxParmentsDecreasePercent}; + } + case 100_000_003: { + return ( + + {selectSeasonType} + {selectHighSeasonStart} + + ); + } + case 100_000_004: { + return null; + } + + default: + break; + } +} + +export default observer(PaymentsParams); diff --git a/Components/Calculation/Form/Payments/config.ts b/Components/Calculation/Form/Payments/config.ts index e95a193..796b0c7 100644 --- a/Components/Calculation/Form/Payments/config.ts +++ b/Components/Calculation/Form/Payments/config.ts @@ -4,7 +4,6 @@ export const id = 'payments'; export const title = 'Платежи'; export const elements: ElementsRow['0'] = [ - 'radioGraphType', 'selectSeasonType', 'tbxParmentsDecreasePercent', 'selectHighSeasonStart', diff --git a/Components/Calculation/Form/Payments/index.jsx b/Components/Calculation/Form/Payments/index.jsx index c32133c..11f0673 100644 --- a/Components/Calculation/Form/Payments/index.jsx +++ b/Components/Calculation/Form/Payments/index.jsx @@ -1,18 +1,11 @@ import { Box, Flex } from 'UIKit/grid'; import elementsRender from '../../config/elements-render'; -import { elements, id, title } from './config'; +import { id, title } from './config'; +import PaymentsParams from './PaymentsParams'; import PaymentsTable from './PaymentsTable'; function Payments() { - const renderedElements = elements.map((elementName) => { - const render = elementsRender[elementName]?.render; - - return render(); - }); - - // eslint-disable-next-line operator-linebreak - const [radioGraphType, selectSeasonType, tbxParmentsDecreasePercent, selectHighSeasonStart] = - renderedElements; + const radioGraphType = elementsRender.radioGraphType.render(); return ( @@ -24,11 +17,7 @@ function Payments() { }} > {radioGraphType} - - {selectSeasonType} - {tbxParmentsDecreasePercent} - {selectHighSeasonStart} - + diff --git a/Components/Calculation/config/elements-render/override.tsx b/Components/Calculation/config/elements-render/override.tsx index 506120e..2e08e79 100644 --- a/Components/Calculation/config/elements-render/override.tsx +++ b/Components/Calculation/config/elements-render/override.tsx @@ -2,7 +2,9 @@ import { Container, Head } from 'Components/Layout/Element'; import Link from 'Elements/Link'; import Tooltip from 'Elements/Tooltip'; +import { observer } from 'mobx-react-lite'; import type { ComponentProps } from 'react'; +import { useStore } from 'stores/hooks'; import buildReadonly from '../../builders/build-readonly'; import builders from '../elements-builders'; import components from '../elements-components'; @@ -162,6 +164,42 @@ const overrideRender: Partial> = { ); }, }, + + selectSeasonType: { + render: () => { + const elementName = 'selectSeasonType'; + const valueName = map.selectSeasonType; + const Component = components.selectSeasonType; + const props = elementsProps.selectSeasonType; + const builder = builders.selectSeasonType; + + const Element = builder(Component, { + elementName, + valueName, + }); + + const Title = observer(() => { + const { $calculation } = useStore(); + const graphType = $calculation.getElementValue('radioGraphType'); + + switch (graphType) { + case 100_000_001: + return Тип дегрессии; + case 100_000_003: + return Тип сезонности; + default: + return {titles.selectSeasonType}; + } + }); + + return ( + + } /> + + + ); + }, + }, }; export default overrideRender; diff --git a/Components/Layout/Element.tsx b/Components/Layout/Element.tsx index 0d7570a..5f968d5 100644 --- a/Components/Layout/Element.tsx +++ b/Components/Layout/Element.tsx @@ -23,7 +23,7 @@ export function Head({ addon, htmlFor, }: { - title: string; + title: ReactNode; addon?: ReactNode; htmlFor: string; }) {