98 lines
2.4 KiB
TypeScript
98 lines
2.4 KiB
TypeScript
import {
|
|
Heading,
|
|
Modal,
|
|
ModalBody,
|
|
ModalCloseButton,
|
|
ModalContent,
|
|
ModalOverlay,
|
|
Stack,
|
|
Text,
|
|
Radio,
|
|
VStack,
|
|
RadioGroup,
|
|
HStack,
|
|
} from '@chakra-ui/react'
|
|
import { LaptopIcon, MouseIcon } from 'assets/icons'
|
|
import { useUser } from 'contexts/UserContext'
|
|
import { GraphNavigation } from 'db'
|
|
import React, { useEffect, useState } from 'react'
|
|
|
|
type Props = {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
export const EditorSettingsModal = ({ isOpen, onClose }: Props) => {
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose} size="xl">
|
|
<ModalOverlay />
|
|
<ModalContent>
|
|
<ModalCloseButton />
|
|
<ModalBody pt="12" pb="8" px="8">
|
|
<EditorSettings />
|
|
</ModalBody>
|
|
</ModalContent>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const EditorSettings = () => {
|
|
const { user, saveUser } = useUser()
|
|
const [value, setValue] = useState<string>(
|
|
user?.graphNavigation ?? GraphNavigation.TRACKPAD
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (user?.graphNavigation === value) return
|
|
saveUser({ graphNavigation: value as GraphNavigation }).then()
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [value])
|
|
|
|
const options = [
|
|
{
|
|
value: GraphNavigation.MOUSE,
|
|
label: 'Mouse',
|
|
description:
|
|
'Move by dragging the board and zoom in/out using the scroll wheel',
|
|
icon: <MouseIcon boxSize="35px" />,
|
|
},
|
|
{
|
|
value: GraphNavigation.TRACKPAD,
|
|
label: 'Trackpad',
|
|
description: 'Move the board using 2 fingers and zoom in/out by pinching',
|
|
icon: <LaptopIcon boxSize="35px" />,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<Stack spacing={4}>
|
|
<Heading size="md">Navigation</Heading>
|
|
<RadioGroup onChange={setValue} value={value}>
|
|
<HStack spacing={4} w="full">
|
|
{options.map((option) => (
|
|
<VStack
|
|
key={option.value}
|
|
as="label"
|
|
htmlFor={option.label}
|
|
cursor="pointer"
|
|
borderWidth="1px"
|
|
borderRadius="md"
|
|
w="full"
|
|
p="6"
|
|
spacing={6}
|
|
>
|
|
{option.icon}
|
|
<Stack>
|
|
<Text fontWeight="bold">{option.label}</Text>
|
|
<Text>{option.description}</Text>
|
|
</Stack>
|
|
|
|
<Radio value={option.value} id={option.label} />
|
|
</VStack>
|
|
))}
|
|
</HStack>
|
|
</RadioGroup>
|
|
</Stack>
|
|
)
|
|
}
|