88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
import {DataGrid, type DataGridProps, type GridColumnVisibilityModel} from '@mui/x-data-grid'
|
|
import {Stack, Button} from '@mui/material'
|
|
import React, {useState, useEffect, useMemo} from 'react'
|
|
import Cookies from 'js-cookie'
|
|
|
|
interface CustomDataGridProps extends DataGridProps {
|
|
hasCoordinates?: boolean
|
|
}
|
|
|
|
const DEV_FIELDS = ['id', 'city_id', 'carrier_id'] as const
|
|
|
|
export const CustomDataGrid = ({hasCoordinates = false, columns = [], ...props}: CustomDataGridProps) => {
|
|
const isDev = import.meta.env.DEV
|
|
|
|
const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
|
|
const initialShowDevData = Cookies.get('showDevData') === 'true'
|
|
|
|
const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
|
|
const [showDevData, setShowDevData] = useState(initialShowDevData)
|
|
|
|
const availableDevFields = useMemo(() => DEV_FIELDS.filter((field) => columns.some((column) => column.field === field)), [columns])
|
|
|
|
const initialVisibilityModel = useMemo(() => {
|
|
const model: GridColumnVisibilityModel = {}
|
|
|
|
availableDevFields.forEach((field) => {
|
|
model[field] = initialShowDevData
|
|
})
|
|
|
|
if (hasCoordinates) {
|
|
model.latitude = initialShowCoordinates
|
|
model.longitude = initialShowCoordinates
|
|
}
|
|
|
|
return model
|
|
}, [availableDevFields, hasCoordinates, initialShowCoordinates, initialShowDevData])
|
|
|
|
const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>(initialVisibilityModel)
|
|
|
|
useEffect(() => {
|
|
setColumnVisibilityModel((prevModel) => {
|
|
const newModel = {...prevModel}
|
|
|
|
availableDevFields.forEach((field) => {
|
|
newModel[field] = showDevData
|
|
})
|
|
|
|
if (hasCoordinates) {
|
|
newModel.latitude = showCoordinates
|
|
newModel.longitude = showCoordinates
|
|
}
|
|
|
|
return newModel
|
|
})
|
|
|
|
if (hasCoordinates) {
|
|
Cookies.set('showCoordinates', String(showCoordinates))
|
|
}
|
|
Cookies.set('showDevData', String(showDevData))
|
|
}, [showCoordinates, showDevData, hasCoordinates, availableDevFields])
|
|
|
|
const toggleCoordinates = () => {
|
|
setShowCoordinates((prev) => !prev)
|
|
}
|
|
|
|
const toggleDevData = () => {
|
|
setShowDevData((prev) => !prev)
|
|
}
|
|
|
|
return (
|
|
<Stack spacing={2}>
|
|
<DataGrid {...props} columns={columns} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={setColumnVisibilityModel} />
|
|
<Stack direction="row" spacing={2} sx={{mb: 2}}>
|
|
{hasCoordinates && (
|
|
<Button variant="contained" onClick={toggleCoordinates}>
|
|
{showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
|
|
</Button>
|
|
)}
|
|
{isDev && availableDevFields.length > 0 && (
|
|
<Button variant="contained" onClick={toggleDevData}>
|
|
{showDevData ? 'Скрыть служебные данные' : 'Показать служебные данные'}
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
)
|
|
}
|