121 lines
3.3 KiB
TypeScript
121 lines
3.3 KiB
TypeScript
import {
|
|
StackProps,
|
|
Stack,
|
|
Flex,
|
|
Heading,
|
|
FormControl,
|
|
FormLabel,
|
|
Switch,
|
|
Input,
|
|
HStack,
|
|
Text,
|
|
} from '@chakra-ui/react'
|
|
import { DropdownList } from 'components/shared/DropdownList'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
type StandardEmbedWindowSettingsProps = {
|
|
onUpdateWindowSettings: (windowSettings: {
|
|
heightLabel: string
|
|
widthLabel: string
|
|
}) => void
|
|
}
|
|
export const StandardEmbedWindowSettings = ({
|
|
onUpdateWindowSettings,
|
|
...props
|
|
}: StandardEmbedWindowSettingsProps & StackProps) => {
|
|
const [fullscreen, setFullscreen] = useState(false)
|
|
const [inputValues, setInputValues] = useState({
|
|
widthValue: '100',
|
|
widthType: '%',
|
|
heightValue: '600',
|
|
heightType: 'px',
|
|
})
|
|
|
|
useEffect(() => {
|
|
onUpdateWindowSettings({
|
|
widthLabel: fullscreen
|
|
? '100%'
|
|
: inputValues.widthValue + inputValues.widthType,
|
|
heightLabel: fullscreen
|
|
? '100vh'
|
|
: inputValues.heightValue + inputValues.heightType,
|
|
})
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [inputValues, fullscreen])
|
|
|
|
const handleWidthTypeSelect = (widthType: string) =>
|
|
setInputValues({ ...inputValues, widthType })
|
|
const handleHeightTypeSelect = (heightType: string) =>
|
|
setInputValues({ ...inputValues, heightType })
|
|
|
|
return (
|
|
<Stack {...props}>
|
|
<Flex alignItems="center" justifyContent="space-between">
|
|
<Heading fontSize="md" fontWeight="semibold" style={{ flexShrink: 0 }}>
|
|
Window settings
|
|
</Heading>
|
|
<FormControl
|
|
display="flex"
|
|
alignItems="center"
|
|
w="full"
|
|
justifyContent="flex-end"
|
|
>
|
|
<FormLabel htmlFor="fullscreen-option" mb="1">
|
|
Set to fullscreen?
|
|
</FormLabel>
|
|
<Switch
|
|
id="fullscreen-option"
|
|
onChange={() => setFullscreen(!fullscreen)}
|
|
isChecked={fullscreen}
|
|
/>
|
|
</FormControl>
|
|
</Flex>
|
|
|
|
{!fullscreen && (
|
|
<>
|
|
<Flex justify="space-between" align="center" mb="2">
|
|
<Text>Width</Text>
|
|
<HStack>
|
|
<Input
|
|
onChange={(e) =>
|
|
setInputValues({
|
|
...inputValues,
|
|
widthValue: e.target.value,
|
|
})
|
|
}
|
|
w="70px"
|
|
value={inputValues.widthValue}
|
|
/>
|
|
<DropdownList<string>
|
|
items={['px', '%']}
|
|
onItemSelect={handleWidthTypeSelect}
|
|
currentItem={inputValues.widthType}
|
|
/>
|
|
</HStack>
|
|
</Flex>
|
|
<Flex justify="space-between" align="center" mb="2">
|
|
<Text>Height</Text>
|
|
<HStack>
|
|
<Input
|
|
onChange={(e) =>
|
|
setInputValues({
|
|
...inputValues,
|
|
heightValue: e.target.value,
|
|
})
|
|
}
|
|
w="70px"
|
|
value={inputValues.heightValue}
|
|
/>
|
|
<DropdownList<string>
|
|
items={['px', '%']}
|
|
onItemSelect={handleHeightTypeSelect}
|
|
currentItem={inputValues.heightType}
|
|
/>
|
|
</HStack>
|
|
</Flex>
|
|
</>
|
|
)}
|
|
</Stack>
|
|
)
|
|
}
|