Вьюшки перенесены в отдельную директорию

src/components/CompanyView.jsx

@@ -1,25 +0,0 @@
-import {Tooltip} from 'antd'
-import {BankOutlined} from '@ant-design/icons'
-import {Grid, GridItem} from './Grid'
-
-export const CompanyView = ({company}) => {
-  if(!company)
-    return <Tooltip title='нет данных'>-</Tooltip>
-
-  const displayName = company?.caption
-
-  const tooltipInfo = <Grid columnGap='8px'>
-    <GridItem row={1} col={1}>
-      тип:
-    </GridItem>
-    <GridItem row={1} col={2}>
-      {company?.companyTypeCaption}
-    </GridItem>
-  </Grid>
-
-  return <Tooltip title={tooltipInfo}>
-    <BankOutlined style={{marginRight:8}}/>
-    {displayName}
-  </Tooltip>
-  
-}

src/components/Mark.jsx

@@ -1,25 +0,0 @@
-import {Tooltip, Tag, Typography, Popconfirm, Button } from 'antd'
-import {UserView} from './UserView'
-
-const markTypes = {
-  0 : {color:"orange", text : "неизвестно"},
-  1 : {color:"green", text : "согласовано"},
-}
-
-const {Text} = Typography
-
-export const Mark = ({mark, onDelete}) => {
-  const markType = markTypes[mark.idMarkType]??markTypes[0]
-  return <Tooltip title={<UserView user={mark.user}/>}>
-    <Tag color={markType.color}>
-      <Text delete={mark?.isDeleted}>
-        {`${markType.text} ${new Date(mark.dateCreated).toLocaleString()}`}
-      </Text>
-      {(!mark?.isDeleted)&&
-        <Popconfirm title="Отозвать согласование?" onConfirm={onDelete}>
-          <Button type="link">x</Button>
-        </Popconfirm>
-      }
-    </Tag >
-  </Tooltip>
-}

src/components/UserView.tsx

@@ -1,29 +0,0 @@
-import {Tooltip} from 'antd'
-import { UserOutlined } from '@ant-design/icons'
-import { Grid, GridItem } from './Grid'
-import { UserDto } from '../services/api'
-
-interface UserViewProps {
-  user: UserDto
-}
-
-export const UserView = ({ user } : UserViewProps) => (user ? (
-    <Tooltip title={(
-      <Grid style={{ columnGap: '8px' }}>
-        <GridItem row={1} col={1}>Фамилия:</GridItem>
-        <GridItem row={1} col={2}>{user?.surname}</GridItem>
-        <GridItem row={2} col={1}>Имя:</GridItem>
-        <GridItem row={2} col={2}>{user?.name}</GridItem>
-        <GridItem row={3} col={1}>Отчество:</GridItem>
-        <GridItem row={3} col={2}>{user?.patronymic}</GridItem>
-        <GridItem row={4} col={1}>Компания:</GridItem>
-        <GridItem row={4} col={2}>{user?.company?.caption}</GridItem>
-      </Grid>
-    )}>
-      <UserOutlined style={{ marginRight: 8 }}/>
-      {user?.login}
-    </Tooltip>
-  ) : (
-    <Tooltip title='нет пользователя'>-</Tooltip>
-  )
-)

src/components/Views/CompanyView.tsx

@@ -0,0 +1,23 @@
+import { memo } from 'react'
+import { Tooltip } from 'antd'
+import { BankOutlined } from '@ant-design/icons'
+import { CompanyDto } from '../../services/api'
+import { Grid, GridItem } from '../Grid'
+
+export type CompanyViewProps = {
+  company?: CompanyDto
+}
+
+export const CompanyView = memo<CompanyViewProps>(({ company }) => company ? (
+  <Tooltip title={
+    <Grid style={{ columnGap: '8px' }}>
+      <GridItem row={1} col={1}>тип:</GridItem>
+      <GridItem row={1} col={2}>{company?.companyTypeCaption}</GridItem>
+    </Grid>
+  }>
+    <BankOutlined style={{ marginRight: 8 }}/>
+    {company?.caption}
+  </Tooltip>
+) : (
+  <Tooltip title='нет данных'>-</Tooltip>
+))

src/components/Views/MarkView.tsx

@@ -0,0 +1,32 @@
+import { Tooltip, Tag, Typography, Popconfirm, Button } from 'antd'
+import { memo } from 'react'
+import { FileMarkDto } from '../../services/api'
+import { UserView } from './UserView'
+
+const markTypes: { [id: number]: {color: string, text: string} } = {
+  0: {color: 'orange', text: 'неизвестно'},
+  1: {color: 'green', text: 'согласовано'},
+}
+
+const { Text } = Typography
+
+export type MarkViewProps = {
+  mark: FileMarkDto
+  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void
+}
+
+export const MarkView = memo<MarkViewProps>(({ mark, onDelete }) => {
+  const markType = markTypes[mark.idMarkType ?? 0] ?? markTypes[0]
+  return <Tooltip title={<UserView user={mark.user}/>}>
+    <Tag color={markType.color}>
+      <Text delete={mark?.isDeleted}>
+        {`${markType.text} ${new Date(mark.dateCreated ?? 0).toLocaleString()}`}
+      </Text>
+      {!mark?.isDeleted && (
+        <Popconfirm title='Отозвать согласование?' onConfirm={onDelete}>
+          <Button type='link'>x</Button>
+        </Popconfirm>
+      )}
+    </Tag >
+  </Tooltip>
+})

src/components/Views/UserView.tsx

@@ -0,0 +1,32 @@
+import { memo } from 'react'
+import { Tooltip } from 'antd'
+import { UserOutlined } from '@ant-design/icons'
+import { UserDto } from '../../services/api'
+import { Grid, GridItem } from '../Grid'
+
+export type UserViewProps = {
+  user?: UserDto
+}
+
+export const UserView = memo<UserViewProps>(({ user }) => user ? (
+  <Tooltip title={(
+    <Grid style={{ columnGap: '8px' }}>
+      <GridItem row={1} col={1}>Фамилия:</GridItem>
+      <GridItem row={1} col={2}>{user?.surname}</GridItem>
+
+      <GridItem row={2} col={1}>Имя:</GridItem>
+      <GridItem row={2} col={2}>{user?.name}</GridItem>
+
+      <GridItem row={3} col={1}>Отчество:</GridItem>
+      <GridItem row={3} col={2}>{user?.patronymic}</GridItem>
+
+      <GridItem row={4} col={1}>Компания:</GridItem>
+      <GridItem row={4} col={2}>{user?.company?.caption}</GridItem>
+    </Grid>
+  )}>
+    <UserOutlined style={{ marginRight: 8 }}/>
+    {user?.login}
+  </Tooltip>
+) : (
+  <Tooltip title='нет пользователя'>-</Tooltip>
+))

src/components/Views/index.ts

@@ -0,0 +1,7 @@
+export type { CompanyViewProps } from './CompanyView'
+export type { MarkViewProps } from './MarkView'
+export type { UserViewProps } from './UserView'
+
+export { CompanyView } from './CompanyView'
+export { MarkView } from './MarkView'
+export { UserView } from './UserView'

src/pages/Documents/DocumentsTemplate.jsx

@@ -6,8 +6,7 @@ import { invokeWebApiWrapperAsync, downloadFile, formatBytes } from '../../compo
 import { EditableTable, makePaginationObject } from '../../components/Table'
 import { UploadForm } from '../../components/UploadForm'
 import LoaderPortal from '../../components/LoaderPortal'
-import { UserView } from  '../../components/UserView'
-import { CompanyView } from  '../../components/CompanyView'
+import { CompanyView, UserView } from  '../../components/Views'
 
 const pageSize = 12
 const { RangePicker } = DatePicker

src/pages/Documents/DrillingProgram.jsx

@@ -2,11 +2,10 @@ import { useEffect, useState } from 'react'
 import { FileExcelOutlined } from '@ant-design/icons'
 import { Popconfirm, Button, Tooltip, Typography } from 'antd'
 import { Flex } from '../../components/Grid'
-import { Mark } from  '../../components/Mark'
-import { UserView } from  '../../components/UserView'
+import { MarkView, UserView } from  '../../components/Views'
 import LoaderPortal from '../../components/LoaderPortal'
 import { invokeWebApiWrapperAsync, download, formatBytes } from '../../components/factory'
-import {DrillingProgramService, WellService} from '../../services/api'
+import { DrillingProgramService, WellService } from '../../services/api'
 import DocumentsTemplate from './DocumentsTemplate'
 
 const idFileCategoryDrillingProgramItems = 13
@@ -80,7 +79,7 @@ export default function DrillingProgram({ idWell }) {
   const renderMarksColumn=(idFile, marks)=>{
     const validMarks = marks?.filter(m => !(m?.isDeleted))
     if(validMarks?.length)
-      return validMarks.map(mark => <Mark mark = {mark} onDelete={() => deleteMark(mark.id)}/>)
+      return validMarks.map(mark => <MarkView mark = {mark} onDelete={() => deleteMark(mark.id)}/>)
 
     return (
       <Popconfirm title={'Согласовать файл?'} onConfirm={() => addMarkToFile(idFile)}>

src/pages/TelemetryView/SetpointViewer.jsx

@@ -2,7 +2,7 @@ import moment from 'moment'
 import { memo } from 'react'
 import { Modal, Input } from 'antd'
 import { Table } from '../../components/Table'
-import { UserView } from '../../components/UserView'
+import { UserView } from '../../components/Views'
 import { Grid, GridItem } from '../../components/Grid'
 import { periodToString } from '../../utils/datetime'
 

src/pages/TelemetryView/Setpoints.jsx

@@ -2,7 +2,7 @@ import moment from 'moment'
 import { Button, Modal } from 'antd'
 import { useState, useEffect } from 'react'
 import { Table } from '../../components/Table'
-import { UserView } from '../../components/UserView'
+import { UserView } from '../../components/Views'
 import LoaderPortal from '../../components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '../../components/factory'
 import { makeStringCutter } from '../../utils/string'