Частична улучшена типизация Editable table

src/components/Table/Columns/index.ts

@@ -12,6 +12,7 @@ export {
     makeNumericColumnPlanFact,
     makeNumericStartEnd,
     makeNumericMinMax,
+    makeNumericAvgRange,
 } from './numeric'
 export { makeColumnsPlanFact } from './plan_fact'
 export { makeSelectColumn } from './select'

src/components/Table/Columns/numeric.tsx

@@ -1,15 +1,15 @@
+import { ColumnFilterItem } from 'antd/lib/table/interface'
 import { InputNumber } from 'antd'
 import { ReactNode } from 'react'
 
 import { makeNumericSorter } from '../sorters'
 import makeColumn, { columnPropsOther, DataType, makeGroupColumn, RenderMethod } from '.'
-import { ColumnFilterItem, CompareFn } from 'antd/lib/table/interface'
 
 export const RegExpIsFloat = /^[-+]?\d+\.?\d*$/
 
 type FilterMethod<T> = (value: string | number | boolean, record: DataType<T>) => boolean
 
-export const makeNumericRender = <T extends unknown>(fixed?: number): RenderMethod<T> => (value: T) => {
+export const makeNumericRender = <T,>(fixed?: number): RenderMethod<T> => (value: T) => {
     let val = '-'
     if ((value ?? null) !== null && Number.isFinite(+value)) {
         val = (fixed ?? null) !== null
@@ -24,7 +24,7 @@ export const makeNumericRender = <T extends unknown>(fixed?: number): RenderMeth
     )
 }
 
-export const makeNumericColumnOptions = <T extends unknown = any>(fixed?: number, sorterKey?: string): columnPropsOther<T> => ({
+export const makeNumericColumnOptions = <T,>(fixed?: number, sorterKey?: string): columnPropsOther<T> => ({
     editable: true,
     initialValue: 0,
     width: 100,
@@ -37,7 +37,7 @@ export const makeNumericColumnOptions = <T extends unknown = any>(fixed?: number
     render: makeNumericRender<T>(fixed),
 })
 
-export const makeNumericColumn = <T extends unknown = any>(
+export const makeNumericColumn = <T,>(
     title: ReactNode,
     key: string,
     filters?: ColumnFilterItem[],
@@ -48,7 +48,7 @@ export const makeNumericColumn = <T extends unknown = any>(
 ) => makeColumn(title, key, {
     filters,
     onFilter: filterDelegate ? filterDelegate(key) : undefined,
-    sorter: makeNumericSorter(key),
+    sorter: makeNumericSorter<T>(key),
     width,
     input: <InputNumber style={{ width: '100%' }}/>,
     render: renderDelegate ?? makeNumericRender<T>(2),
@@ -56,7 +56,7 @@ export const makeNumericColumn = <T extends unknown = any>(
     ...other
 })
 
-export const makeNumericColumnPlanFact = <T extends unknown = any>(
+export const makeNumericColumnPlanFact = <T,>(
     title: ReactNode,
     key: string,
     filters?: ColumnFilterItem[],
@@ -68,7 +68,7 @@ export const makeNumericColumnPlanFact = <T extends unknown = any>(
     makeNumericColumn<T>('ф', key + 'Fact', filters, filterDelegate, renderDelegate, width),
 ])
 
-export const makeNumericStartEnd = <T extends unknown = any>(
+export const makeNumericStartEnd = <T,>(
     title: ReactNode,
     key: string,
     fixed: number,
@@ -77,11 +77,11 @@ export const makeNumericStartEnd = <T extends unknown = any>(
     renderDelegate?: RenderMethod<T>,
     width?: string | number,
 ) => makeGroupColumn(title, [
-    makeNumericColumn<T>('старт', key + 'Start', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'Start')),
-    makeNumericColumn<T>('конец', key + 'End', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'End'))
+    makeNumericColumn<T>('старт', key + 'Start', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, key + 'Start')),
+    makeNumericColumn<T>('конец', key + 'End', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, key + 'End'))
 ])
 
-export const makeNumericMinMax = <T extends unknown = any>(
+export const makeNumericMinMax = <T,>(
     title: ReactNode,
     key: string,
     fixed: number,
@@ -90,8 +90,22 @@ export const makeNumericMinMax = <T extends unknown = any>(
     renderDelegate?: RenderMethod<T>,
     width?: string | number,
 ) => makeGroupColumn(title, [
-    makeNumericColumn<T>('мин', key + 'Min', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'Min')),
-    makeNumericColumn<T>('макс', key + 'Max', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'Max')),
+    makeNumericColumn<T>('мин', key + 'Min', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, key + 'Min')),
+    makeNumericColumn<T>('макс', key + 'Max', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, key + 'Max')),
+])
+
+export const makeNumericAvgRange = <T,>(
+    title: ReactNode,
+    dataIndex: string,
+    fixed: number,
+    filters: ColumnFilterItem[],
+    filterDelegate: (key: string | number) => FilterMethod<T>,
+    renderDelegate: RenderMethod<T>,
+    width: string
+) => makeGroupColumn(title, [
+    makeNumericColumn<T>('мин', dataIndex + 'Min', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, dataIndex + 'Min')),
+    makeNumericColumn<T>('сред', dataIndex + 'Avg', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, dataIndex + 'Avg')),
+    makeNumericColumn<T>('макс', dataIndex + 'Max', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions<T>(fixed, dataIndex + 'Max'))
 ])
 
 export default makeNumericColumn

src/components/Table/EditableTable.tsx

@@ -1,39 +1,72 @@
-import { memo, useCallback, useState, useEffect, useMemo } from 'react'
-import { Form, Button, Popconfirm } from 'antd'
+import { memo, useCallback, useState, useEffect, useMemo, Dispatch, SetStateAction, ReactNode } from 'react'
+import { Form, Button, Popconfirm, TableProps } from 'antd'
 import { EditOutlined, SaveOutlined, PlusOutlined, CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons'
 
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { hasPermission } from '@utils'
+import { hasPermission, isDev } from '@utils'
 
-import { Table } from '.'
+import { Table, TableColumns } from '.'
 import { EditableCell } from './EditableCell'
+import { ColumnsType } from 'antd/lib/table'
+import { ArrayElement } from '@asb/utils/types'
 
 const newRowKeyValue = 'newRow'
 
-const actions = {
+type CrudObject = {
+    id?: string | number
+    key?: string | number
+}
+
+interface CrudService<T extends CrudObject> {
+    insert: (((data: T) => Promise<number>) | ((idWell: number, data: T) => Promise<number>))
+    insertRange: (((data: T[]) => Promise<number>) | ((idWell: number, data: T[]) => Promise<number>))
+    update: (((data: T) => Promise<number> | ((idWell: number, data: T) => Promise<number>) | ((idWell: number, id: number, data: T) => Promise<number>)))
+    delete: (((id: number) => Promise<number>) | ((idWell: number, id: number) => Promise<number>))
+    new(...args: any[]): any
+}
+
+type TableAction<T extends CrudObject> = Record<keyof CrudService<T>, (data: T, idWell?: number, idRecord?: number) => any[]>
+
+const makeActions = <T extends CrudObject>(): TableAction<T> => ({
     insert: (data, idWell) => [idWell, data],
     insertRange: (data, idWell) => [idWell, [data].flat(1)],
     update: (data, idWell, idRecord) => [idWell, idRecord && data.id, data],
     delete: (data, idWell) => [idWell, data.id],
+})
+
+type TableActionProps<T extends CrudObject, S extends CrudService<T>> = {
+    service?: S
+    permission?: string | string[]
+    action?: keyof CrudService<T>
+    actionName?: string
+    recordParser?: (record: T) => T
+    idWell?: number
+    idRecord?: number
+    setLoader?: Dispatch<SetStateAction<boolean>>
+    errorMsg?: string
+    onComplete?: () => Promise<void>
 }
 
-export const makeTableAction = ({
+export const makeTableAction = <T extends CrudObject, S extends CrudService<T>>({
     service,
     permission,
     action,
     actionName,
     recordParser,
     idWell,
-    idRecord = false,
+    idRecord,
     setLoader,
     errorMsg = 'Не удалось выполнить операцию',
     onComplete,
-}) => hasPermission(permission) && service && action && (
-    (record) => invokeWebApiWrapperAsync(
+}: TableActionProps<T, S>) => {
+    if (!hasPermission(permission) || !service || !action) return async (record: T) => {}
+    const actions = makeActions<T>()
+    return async (record: T) => await invokeWebApiWrapperAsync(
         async () => {
             const data = recordParser?.(record) ?? record
             const params = actions[action]?.(data, idWell, idRecord).filter(Boolean)
             if (params?.length > 0)
+                //@ts-ignore
                 await service[action](...params)
             await onComplete?.()
         },
@@ -41,25 +74,34 @@ export const makeTableAction = ({
         errorMsg,
         { actionName }
     )
-)
+}
 
-export const tryAddKeys = (items) => {
-    if (!items?.length || !items[0])
-        return []
-    if (items[0].key)
-        return items
+export const tryAddKeys = <T extends object & Record<string, any>>(items?: T[]): T[] => {
+    if (!items?.length || !items[0]) return items ?? []
+    if (items[0].key) return items
     return items.map((item, index) => ({...item, key: item.key ?? item.id ?? index }))
 }
 
 const EditableTableComponents = { body: { cell: EditableCell }}
 
+export type EditableTableProps<T extends CrudObject, S extends CrudService<T>> = TableProps<T> & {
+    columns: ColumnsType<T> & TableColumns<T>
+    dataSource?: T[]
+    onChange?: ((data: T[]) => Promise<void>)
+    onRowAdd?: TableActionProps<T, S> | ((record: T) => Promise<void>)
+    onRowEdit?: TableActionProps<T, S> | ((record: T) => Promise<void>)
+    onRowDelete?: TableActionProps<T, S> | ((record: T) => Promise<void>)
+    additionalButtons?: (record: T, editingKey: string | number) => ReactNode
+    buttonsWidth
+}
+
 /**
  * @param onChange - Метод вызывается со всем dataSource с измененными элементами после любого действия
  * @param onRowAdd - Метод вызывается с новой добавленной записью. Если метод не определен, то кнопка добавления строки не показывается
  * @param onRowEdit - Метод вызывается с новой отредактированной записью. Если метод не поределен, то кнопка редактирования строки не показывается
  * @param onRowDelete - Метод вызывается с удаленной записью. Если метод не поределен, то кнопка удаления строки не показывается
  */
-export const EditableTable = memo(({
+const _EditableTable = <T extends CrudObject, S extends CrudService<T>>({
     columns,
     dataSource,
     onChange,
@@ -69,96 +111,92 @@ export const EditableTable = memo(({
     additionalButtons,
     buttonsWidth,
     ...otherTableProps
-}) => {
+}: EditableTableProps<T, S>) => {
 
     const [form] = Form.useForm()
-    const [data, setData] = useState(tryAddKeys(dataSource))
-    const [editingKey, setEditingKey] = useState('')
+    const [data, setData] = useState<T[]>(tryAddKeys(dataSource))
+    const [editingKey, setEditingKey] = useState<string | number>('')
 
     const onAdd = useMemo(() => onRowAdd && typeof onRowAdd !== 'function' ? makeTableAction(onRowAdd) : onRowAdd, [onRowAdd])
     const onEdit = useMemo(() => onRowEdit && typeof onRowEdit !== 'function' ? makeTableAction(onRowEdit) : onRowEdit, [onRowEdit])
     const onDelete = useMemo(() => onRowDelete && typeof onRowDelete !== 'function' ? makeTableAction(onRowDelete) : onRowDelete, [onRowDelete])
 
-    const isEditing = useCallback((record) => record?.key === editingKey, [editingKey])
+    const isEditing = useCallback((record: T) => record?.key === editingKey, [editingKey])
 
-    const edit = useCallback((record) => {
+    const edit = useCallback((record: T) => {
+        if (!record.key) return
         form.setFieldsValue({...record})
         setEditingKey(record.key)
     }, [form])
 
     const cancel = useCallback(() => {
-        if (editingKey === newRowKeyValue) {
-            const newData = [...data]
-            const index = newData.findIndex((item) => newRowKeyValue === item.key)
-            newData.splice(index, 1)
-            setData(newData)
-        }
-        setEditingKey('')
-    }, [data, editingKey])
+        setEditingKey((prev) => {
+            if (prev === newRowKeyValue) {
+                setData((prev) => {
+                    const newData = [...prev]
+                    const index = newData.findIndex((item) => newRowKeyValue === item.key)
+                    newData.splice(index, 1)
+                    return newData
+                })
+            }
+
+            return ''
+        })
+    }, [])
 
     const addNewRow = useCallback(async () => {
-        let newRow = {
-            ...form.initialValues,
-            key:newRowKeyValue
-        }
-
-        const newData = [newRow, ...data]
-        setData(newData)
+        const newRow: any = { key: newRowKeyValue } // TODO: Исправить тип
+        setData((prevData) => [newRow, ...prevData])
         edit(newRow)
-    }, [data, edit, form.initialValues])
+    }, [edit])
 
-    const save = useCallback(async (record) => {
+    const save = useCallback(async (record: T) => {
+        let row
         try {
-            const row = await form.validateFields()
-            const newData = [...data]
-            const index = newData.findIndex((item) => record.key === item.key)
-            const item = newData[index]
-            const newItem = { ...item, ...row }
-
-            newData.splice(index, 1, newItem)
-
-            if (item.key === newRowKeyValue)
-                item.key = newRowKeyValue + newData.length
-
-            const isAdding = editingKey === newRowKeyValue
-            setEditingKey('')
-            setData(newData)
-
-            if (isAdding)
-                try {
-                    onAdd(newItem)
-                } catch (err) {
-                    console.log('callback onRowAdd fault:', err)
-                }
-            else
-                try {
-                    onEdit(newItem)
-                } catch (err) {
-                    console.log('callback onRowEdit fault:', err)
-                }
-
-            try {
-                onChange?.(newData)
-            } catch (err) {
-                console.log('callback onChange fault:', err)
-            }
+            row = await form.validateFields()
         } catch (errInfo) {
-            console.log('Validate Failed:', errInfo)
+            if (isDev())
+                console.warn('Validate Failed:', errInfo)
+            return
         }
+
+        const newData = [...data]
+        const index = newData.findIndex((item) => record.key === item.key)
+        const item = newData[index]
+        const newItem = { ...item, ...row }
+
+        newData.splice(index, 1, newItem)
+
+        if (item.key === newRowKeyValue)
+            item.key += newData.length
+
+        try {
+            if (editingKey === newRowKeyValue)
+                await onAdd?.(newItem)
+            else
+                await onEdit?.(newItem)
+            await onChange?.(newData)
+        } catch (err) {
+            if (isDev())
+                console.warn(err)
+        }
+
+        setEditingKey('')
+        setData(newData)
     }, [data, editingKey, form, onChange, onAdd, onEdit])
 
-    const deleteRow = useCallback((record) => {
+    const deleteRow = useCallback((record: T) => {
         const newData = [...data]
         const index = newData.findIndex((item) => record.key === item.key)
 
         newData.splice(index, 1)
         setData(newData)
 
-        onDelete(record)
+        onDelete?.(record)
         onChange?.(newData)
     }, [data, onChange, onDelete])
 
-    const handleColumn = useCallback((col) => {
+    const handleColumn = useCallback((col: any) => { // TODO: Исправить тип
         if (col.children)
             col.children = col.children.map(handleColumn)
 
@@ -167,7 +205,7 @@ export const EditableTable = memo(({
 
         return {
             ...col,
-            onCell: (record) => ({
+            onCell: (record: T) => ({
                 ...col.onCell?.(record),
                 editing: isEditing(record),
                 record,
@@ -194,7 +232,7 @@ export const EditableTable = memo(({
             />
         ),
         dataIndex: 'operation',
-        render: (_, record) => isEditing(record) ? (
+        render: (_: any, record: T) => isEditing(record) ? (
             <span>
                 <Button onClick={() => save(record)} icon={<SaveOutlined/>}/>
                 <Button onClick={cancel} icon={<CloseCircleOutlined/>}/>
@@ -219,15 +257,13 @@ export const EditableTable = memo(({
         ),
     }), [onAdd, onEdit, onDelete, isEditing, editingKey, save, cancel, edit, deleteRow])
 
-    const mergedColumns = useMemo(() => [...columns.map(handleColumn), operationColumn], [columns, handleColumn, operationColumn])
+    const mergedColumns: TableColumns<T> = useMemo(() => [...columns.map(handleColumn), operationColumn], [columns, handleColumn, operationColumn])
 
-    useEffect(() => {
-        setData(tryAddKeys(dataSource))
-    }, [dataSource])
+    useEffect(() => setData(tryAddKeys(dataSource)), [dataSource])
 
     return (
         <Form form={form}>
-            <Table
+            <Table<T>
                 components={EditableTableComponents}
                 columns={mergedColumns}
                 dataSource={data}
@@ -235,4 +271,8 @@ export const EditableTable = memo(({
             />
         </Form>
     )
-})
+}
+
+export const EditableTable = memo(_EditableTable) as typeof _EditableTable
+
+export default EditableTable

src/components/Table/Table.tsx

@@ -1,26 +1,58 @@
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, ReactNode, useCallback, useEffect, useState } from 'react'
 import { ColumnGroupType, ColumnType } from 'antd/lib/table'
 import { Table as RawTable, TableProps } from 'antd'
+import { NamePath } from 'antd/lib/form/interface'
 
 import type { OmitExtends } from '@utils/types'
 import { applyTableSettings, getTableSettings, setTableSettings, TableColumnSettings, TableSettings } from '@utils'
 
 import TableSettingsChanger from './TableSettingsChanger'
+import { DataType, RenderMethod } from './Columns'
 import { tryAddKeys } from './EditableTable'
 
 import '@styles/index.css'
 
 export type BaseTableColumn<T> = ColumnGroupType<T> | ColumnType<T>
-export type TableColumns<T> = OmitExtends<BaseTableColumn<T>, TableColumnSettings>[]
+export type TableColumns<T> = (OmitExtends<Omit<BaseTableColumn<T>, 'key' | 'render'>, TableColumnSettings> & {
+    key: NamePath
+    render: RenderMethod<T | null>
+})[]
 
-export type TableContainer<T> = TableProps<T> & {
+type MergedTableColumns<T> = (OmitExtends<Omit<BaseTableColumn<T>, 'render'>, TableColumnSettings> & {
+    render: RenderMethod<T | null>
+})[]
+
+export type TableContainer<T> = Omit<TableProps<T>, 'columns' | 'dataSource'> & {
     columns: TableColumns<T>
     tableName?: string
     showSettingsChanger?: boolean
+    dataSource: DataType<T>[]
 }
 
-const _Table = <T extends object>({ columns, dataSource, tableName, showSettingsChanger, ...other }: TableContainer<T>) => {
-    const [newColumns, setNewColumns] = useState<TableColumns<T>>([])
+export const keyToString = (key: NamePath): string => Array.isArray(key) ? key.join('.') : String(key)
+
+const defaultRender = <T,>(data: T): ReactNode => <>{data}</>
+
+const getValueFromKey = <T,>(key: NamePath, record: DataType<T>): T | null => {
+    if (!key) return null
+    if (!Array.isArray(key))
+        return record[String(key)]
+    if (key.length <= 0) return null
+    const child = record[key[0]]
+    if (key.length === 1) return child
+    if (typeof child !== 'object') return null
+    return getValueFromKey(key.slice(1), child as DataType<T>)
+}
+
+const columnRenderWrapper = <T,>(key: NamePath, render?: RenderMethod<T | null>): RenderMethod<T | null> => (_: T | null, record?: DataType<T | null>, index?: number) => {
+    if (!record) return '-'
+    if (render)
+        return render(getValueFromKey(key, record), record, index)
+    return defaultRender(getValueFromKey(key, record))
+}
+
+const _Table = <T extends Record<string, any>>({ columns, dataSource, tableName, showSettingsChanger, ...other }: TableContainer<T>) => {
+    const [newColumns, setNewColumns] = useState<MergedTableColumns<T>>([])
     const [settings, setSettings] = useState<TableSettings>({})
 
     const onSettingsChanged = useCallback((settings?: TableSettings | null) => {
@@ -31,7 +63,12 @@ const _Table = <T extends object>({ columns, dataSource, tableName, showSettings
 
     useEffect(() => setSettings(tableName ? getTableSettings(tableName) : {}), [tableName])
     useEffect(() => setNewColumns(() => {
-        const newColumns = applyTableSettings(columns, settings)
+        const mergedColumns = applyTableSettings(columns, settings)
+        const newColumns = mergedColumns.map((column) => ({
+            ...column,
+            render: columnRenderWrapper(column.key, column.render),
+            key: keyToString(column.key),
+        }))
         if (tableName && showSettingsChanger) {
             const oldTitle = newColumns[0].title
             newColumns[0].title = (props) => (
@@ -45,9 +82,9 @@ const _Table = <T extends object>({ columns, dataSource, tableName, showSettings
     }), [settings, columns, onSettingsChanged, showSettingsChanger, tableName])
 
     return (
-        <RawTable
+        <RawTable<DataType<T>>
             columns={newColumns}
-            dataSource={tryAddKeys(dataSource)}
+            dataSource={tryAddKeys<DataType<T>>(dataSource)}
             {...other}
         />
     )

src/components/Table/index.tsx

@@ -20,6 +20,7 @@ export {
     makeNumericColumnPlanFact,
     makeNumericStartEnd,
     makeNumericMinMax,
+    makeNumericAvgRange,
     makeSelectColumn,
     makeTagColumn,
     makeTagInput,

src/pages/WellOperations/WellDrillParams.jsx

@@ -1,89 +1,18 @@
 import { useState, useEffect, useCallback, memo, useMemo } from 'react'
-import { InputNumber } from 'antd'
 
 import { useWell } from '@asb/context'
 import {
     EditableTable,
     makeSelectColumn,
-    makeGroupColumn,
-    makeNumericRender,
     makeNumericSorter,
-    RegExpIsFloat,
+    makeNumericAvgRange,
 } from '@components/Table'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DrillParamsService, WellOperationService } from '@api'
 import { arrayOrDefault } from '@utils'
 
-import { makeNumericObjSorter } from '@components/Table/sorters'
-
-const makeNumericObjRender = (fixed, columnKey) => (value, obj) => {
-    let val = '-'
-    const isSelected = obj && columnKey && obj[columnKey[0]] ? obj[columnKey[0]][columnKey[1]] : false
-
-    if ((value ?? null) !== null && Number.isFinite(+value)) {
-        val = (fixed ?? null) !== null
-            ? (+value).toFixed(fixed)
-            : (+value).toPrecision(5)
-    }
-
-    return (
-        <div className={`text-align-r-container ${isSelected ? 'color-pale-green' : ''}`}>
-            <span>{val}</span>
-        </div>
-    )
-}
-
-const makeNumericColumnOptionsWithColor = (fixed, sorterKey, columnKey) => ({
-    editable: true,
-    initialValue: 0,
-    width: 100,
-    sorter: sorterKey ? makeNumericObjSorter(sorterKey) : undefined,
-    formItemRules: [{
-        required: true,
-        message: 'Введите число',
-        pattern: RegExpIsFloat,
-    }],
-    render: makeNumericObjRender(fixed, columnKey),
-})
-
-const makeNumericObjColumn = (
-    title,
-    dataIndex,
-    filters,
-    filterDelegate,
-    renderDelegate,
-    width,
-    other
-) => ({
-    title: title,
-    dataIndex: dataIndex,
-    key: dataIndex,
-    filters: filters,
-    onFilter: filterDelegate ? filterDelegate(dataIndex) : null,
-    sorter: makeNumericObjSorter(dataIndex),
-    width: width,
-    input: <InputNumber style={{ width: '100%' }}/>,
-    render: renderDelegate ?? makeNumericRender(),
-    align: 'right',
-    ...other
-})
-
-const makeNumericAvgRange = (
-    title,
-    dataIndex,
-    fixed,
-    filters,
-    filterDelegate,
-    renderDelegate,
-    width
-) => makeGroupColumn(title, [
-    makeNumericObjColumn('мин', [dataIndex, 'min'], filters, filterDelegate, renderDelegate, width, makeNumericColumnOptionsWithColor(fixed, [dataIndex, 'min'], [dataIndex, 'isMin'])),
-    makeNumericObjColumn('сред', [dataIndex, 'avg'], filters, filterDelegate, renderDelegate, width, makeNumericColumnOptionsWithColor(fixed, [dataIndex, 'avg'])),
-    makeNumericObjColumn('макс', [dataIndex, 'max'], filters, filterDelegate, renderDelegate, width, makeNumericColumnOptionsWithColor(fixed, [dataIndex, 'max'], [dataIndex, 'isMax']))
-])
-
-export const getColumns = async (idWell) => {
+export const getColumns = async (idWell, makeAvgRange = makeNumericAvgRange) => {
     let sectionTypes = await WellOperationService.getSectionTypes(idWell)
     sectionTypes = Object.entries(sectionTypes).map(([id, value]) => ({
         label: value,
@@ -96,11 +25,11 @@ export const getColumns = async (idWell) => {
             width: 160,
             sorter: makeNumericSorter('idWellSectionType'),
         }),
-        makeNumericAvgRange('Нагрузка, т', 'axialLoad', 1),
-        makeNumericAvgRange('Давление, атм', 'pressure', 1),
-        makeNumericAvgRange('Момент на ВСП, кН·м', 'rotorTorque', 1),
-        makeNumericAvgRange('Обороты на ВСП, об/мин', 'rotorSpeed', 1),
-        makeNumericAvgRange('Расход, л/с', 'flow', 1),
+        makeAvgRange('Нагрузка, т', 'axialLoad', 1),
+        makeAvgRange('Давление, атм', 'pressure', 1),
+        makeAvgRange('Момент на ВСП, кН·м', 'rotorTorque', 1),
+        makeAvgRange('Обороты на ВСП, об/мин', 'rotorSpeed', 1),
+        makeAvgRange('Расход, л/с', 'flow', 1),
     ]
 }
 

src/utils/types/index.ts

@@ -9,3 +9,5 @@
 export type OmitExtends<T, R> = T & Omit<R, keyof T>
 
 export type ArgumentTypes<F extends Function> = F extends (...args: infer A) => any ? A : never
+
+export type ArrayElement<ArrType> = ArrType extends readonly (infer ElementType)[] ? ElementType : never