Components/Payments: dynamic UI Elements

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 <Flex flexDirection="column">{selectSeasonType}</Flex>;
+    }
+    case 100_000_002: {
+      return <Flex flexDirection="column">{tbxParmentsDecreasePercent}</Flex>;
+    }
+    case 100_000_003: {
+      return (
+        <Flex flexDirection="column">
+          {selectSeasonType}
+          {selectHighSeasonStart}
+        </Flex>
+      );
+    }
+    case 100_000_004: {
+      return null;
+    }
+
+    default:
+      break;
+  }
+}
+
+export default observer(PaymentsParams);

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',

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 (
     <Flex flexDirection="column">
@@ -24,11 +17,7 @@ function Payments() {
         }}
       >
         {radioGraphType}
-        <Flex flexDirection="column">
-          {selectSeasonType}
-          {tbxParmentsDecreasePercent}
-          {selectHighSeasonStart}
-        </Flex>
+        <PaymentsParams />
       </Box>
       <PaymentsTable />
     </Flex>

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<Record<keyof typeof map, RenderProps>> = {
       );
     },
   },
+
+  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 <span>Тип дегрессии</span>;
+          case 100_000_003:
+            return <span>Тип сезонности</span>;
+          default:
+            return <span>{titles.selectSeasonType}</span>;
+        }
+      });
+
+      return (
+        <Container>
+          <Head htmlFor={elementName} title={<Title />} />
+          <Element {...props} id={elementName} />
+        </Container>
+      );
+    },
+  },
 };
 
 export default overrideRender;

Components/Layout/Element.tsx

@@ -23,7 +23,7 @@ export function Head({
   addon,
   htmlFor,
 }: {
-  title: string;
+  title: ReactNode;
   addon?: ReactNode;
   htmlFor: string;
 }) {