use typescript for Form/ELT

apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.jsx

@@ -1,33 +0,0 @@
-import { useStore } from '@/stores/hooks';
-import { observer } from 'mobx-react-lite';
-import { Table } from 'ui/antd';
-
-export const PolicyTable = observer(({ getter, ...props }) => {
-  const { $tables } = useStore();
-  const { getRows, setSelectedKey, getSelectedRow } = getter($tables.elt);
-
-  return (
-    <Table
-      size="small"
-      pagination={false}
-      dataSource={getRows}
-      scroll={{
-        x: true,
-      }}
-      rowSelection={{
-        getCheckboxProps: (record) => ({ disabled: !record.sum || record.isFetching }),
-        hideSelectAll: true,
-        onSelect: (record) => {
-          if (record.sum > 0) setSelectedKey(record.key);
-        },
-        selectedRowKeys: getSelectedRow ? [getSelectedRow.key] : [],
-        type: 'radio',
-      }}
-      expandable={{
-        expandedRowRender: (record) => record.message,
-        rowExpandable: (record) => record.message || record.children,
-      }}
-      {...props}
-    />
-  );
-});

apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.tsx

@@ -0,0 +1,37 @@
+import type { columns } from '../lib/config';
+import type { Getter } from '../types';
+import { useStore } from '@/stores/hooks';
+import { observer } from 'mobx-react-lite';
+import { Table } from 'ui/antd';
+
+export const PolicyTable = observer(
+  ({ getter, ...props }: { columns: typeof columns; getter: Getter }) => {
+    const { $tables } = useStore();
+    const { getRows, setSelectedKey, getSelectedRow } = getter($tables.elt);
+
+    return (
+      <Table
+        size="small"
+        pagination={false}
+        dataSource={getRows}
+        scroll={{
+          x: true,
+        }}
+        rowSelection={{
+          getCheckboxProps: (record) => ({ disabled: !record.sum || record.isFetching }),
+          hideSelectAll: true,
+          onSelect: (record) => {
+            if (record.sum > 0) setSelectedKey(record.key);
+          },
+          selectedRowKeys: getSelectedRow ? [getSelectedRow.key] : [],
+          type: 'radio',
+        }}
+        expandable={{
+          expandedRowRender: (record) => record.message,
+          rowExpandable: (record) => Boolean(record.message),
+        }}
+        {...props}
+      />
+    );
+  }
+);

apps/web/Components/Calculation/Form/ELT/Components/ReloadButton.tsx

@@ -1,9 +1,10 @@
+import type { Getter } from '../types';
 import { useStore } from '@/stores/hooks';
 import { observer } from 'mobx-react-lite';
 import { Button } from 'ui/antd';
 import { ReloadOutlined } from 'ui/elements/icons';
 
-export const ReloadButton = observer(({ getter }) => {
+export const ReloadButton = observer(({ getter }: { getter: Getter }) => {
   const { $tables } = useStore();
   const { validation } = getter($tables.elt);
 

apps/web/Components/Calculation/Form/ELT/Components/Validation.tsx

@@ -1,8 +1,9 @@
+import type { Getter } from '../types';
 import { useStore } from '@/stores/hooks';
 import { observer } from 'mobx-react-lite';
 import { Alert } from 'ui/antd';
 
-export const Validation = observer(({ getter }) => {
+export const Validation = observer(({ getter }: { getter: Getter }) => {
   const { $tables, $process } = useStore();
   const { validation } = getter($tables.elt);
 
@@ -18,5 +19,5 @@ export const Validation = observer(({ getter }) => {
     );
   }
 
-  return false;
+  return null;
 });

apps/web/Components/Calculation/Form/ELT/Kasko.tsx

@@ -1,11 +1,10 @@
 import { PolicyTable, ReloadButton, Validation } from './Components';
 import { columns } from './lib/config';
+import type { Getter } from './types';
 import { clone } from 'tools';
 import { Flex } from 'ui/grid';
 
-function getter(eltStore) {
-  return eltStore.kasko;
-}
+const getter: Getter = ({ osago }) => osago;
 
 const kaskoColumns = clone(columns);
 kaskoColumns[0].title = 'Страховая компания КАСКО';

apps/web/Components/Calculation/Form/ELT/Osago.tsx

@@ -1,11 +1,10 @@
 import { PolicyTable, ReloadButton, Validation } from './Components';
 import { columns } from './lib/config';
+import type { Getter } from './types';
 import { clone } from 'tools';
 import { Flex } from 'ui/grid';
 
-function getter(eltStore) {
-  return eltStore.osago;
-}
+const getter: Getter = ({ osago }) => osago;
 
 const osagoColumns = clone(columns);
 osagoColumns[0].title = 'Страховая компания ОСАГО';

apps/web/Components/Calculation/Form/ELT/types.ts

@@ -1,4 +1,7 @@
 import type { RowSchema } from '@/config/schema/elt';
+import type ELTStore from '@/stores/tables/elt';
+import type PolicyStore from '@/stores/tables/elt/policy';
 import type { z } from 'zod';
 
 export type Row = z.infer<typeof RowSchema>;
+export type Getter = (eltStore: ELTStore) => PolicyStore;