107 lines
4.2 KiB
TypeScript
107 lines
4.2 KiB
TypeScript
import { Button, Flex, FloatingIndicator, Popover, SegmentedControl } from '@mantine/core'
|
||
import { Mode, setMode, useMapStore } from '../../store/map'
|
||
import { IconChevronDown, IconCropLandscape, IconCropPortrait, IconEdit, IconEye, IconPrinter } from '@tabler/icons-react'
|
||
import { useEffect, useState } from 'react'
|
||
import { PrintOrientation, setPrintOrientation, usePrintStore } from '../../store/print'
|
||
|
||
const MapMode = ({
|
||
map_id
|
||
}: { map_id: string }) => {
|
||
const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
|
||
const [controlsRefs, setControlsRefs] = useState<Record<string, HTMLButtonElement | null>>({});
|
||
|
||
const { mode } = useMapStore().id[map_id]
|
||
|
||
const setControlRef = (item: Mode) => (node: HTMLButtonElement) => {
|
||
controlsRefs[item] = node;
|
||
setControlsRefs(controlsRefs);
|
||
}
|
||
|
||
const { printOrientation } = usePrintStore()
|
||
|
||
useEffect(() => {
|
||
|
||
}, [printOrientation])
|
||
|
||
return (
|
||
<Flex ref={setRootRef} p={4} gap={4}>
|
||
<Button
|
||
variant={mode === 'view' ? 'filled' : 'subtle'}
|
||
key={'view'}
|
||
ref={setControlRef('view' as Mode)}
|
||
onClick={() => {
|
||
setMode(map_id, 'view' as Mode)
|
||
}}
|
||
leftSection={<IconEye size={16} />}
|
||
mod={{ active: mode === 'view' as Mode }}
|
||
>
|
||
Просмотр
|
||
</Button>
|
||
|
||
<Button
|
||
variant={mode === 'edit' ? 'filled' : 'subtle'}
|
||
key={'edit'}
|
||
ref={setControlRef('edit' as Mode)}
|
||
onClick={() => {
|
||
setMode(map_id, 'edit' as Mode)
|
||
}}
|
||
leftSection={<IconEdit size={16} />}
|
||
mod={{ active: mode === 'edit' as Mode }}
|
||
>
|
||
Редактирование
|
||
</Button>
|
||
|
||
<Popover width='auto' position='bottom-end' >
|
||
<Popover.Target>
|
||
<Button.Group>
|
||
<Button
|
||
variant={mode === 'print' ? 'filled' : 'subtle'}
|
||
key={'print'}
|
||
ref={setControlRef('print' as Mode)}
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
setMode(map_id, 'print' as Mode)
|
||
}}
|
||
leftSection={<IconPrinter size={16} />}
|
||
mod={{ active: mode === 'print' as Mode }}
|
||
>
|
||
Печать
|
||
</Button>
|
||
<Button variant={mode === 'print' ? 'filled' : 'subtle'} w='auto' p={8} title='Ориентация'>
|
||
<IconChevronDown size={16} />
|
||
</Button>
|
||
</Button.Group>
|
||
</Popover.Target>
|
||
|
||
<Popover.Dropdown p={0} style={{ display: 'flex' }}>
|
||
<SegmentedControl
|
||
color='blue'
|
||
value={printOrientation}
|
||
onChange={(value) => {
|
||
setPrintOrientation(value as PrintOrientation)
|
||
setMode(map_id, 'print' as Mode)
|
||
}}
|
||
data={[
|
||
{
|
||
value: 'horizontal',
|
||
label: (
|
||
<IconCropLandscape title='Горизонтальная' style={{ display: 'block' }} size={20} />
|
||
),
|
||
},
|
||
{
|
||
value: 'vertical',
|
||
label: (
|
||
<IconCropPortrait title='Вертикальная' style={{ display: 'block' }} size={20} />
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
</Popover.Dropdown>
|
||
</Popover>
|
||
|
||
<FloatingIndicator target={controlsRefs[mode]} parent={rootRef} />
|
||
</Flex >
|
||
)
|
||
}
|
||
|
||
export default MapMode |