56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
|
import {
|
||
|
|
StackProps,
|
||
|
|
Stack,
|
||
|
|
Flex,
|
||
|
|
Heading,
|
||
|
|
NumberInput,
|
||
|
|
NumberInputField,
|
||
|
|
NumberInputStepper,
|
||
|
|
NumberIncrementStepper,
|
||
|
|
NumberDecrementStepper,
|
||
|
|
} from '@chakra-ui/react'
|
||
|
|
import { useState, useEffect } from 'react'
|
||
|
|
import { PopupParams } from 'typebot-js'
|
||
|
|
|
||
|
|
type PopupEmbedSettingsProps = {
|
||
|
|
onUpdateSettings: (windowSettings: Pick<PopupParams, 'delay'>) => void
|
||
|
|
}
|
||
|
|
export const PopupEmbedSettings = ({
|
||
|
|
onUpdateSettings,
|
||
|
|
...props
|
||
|
|
}: PopupEmbedSettingsProps & StackProps) => {
|
||
|
|
const [inputValue, setInputValue] = useState(0)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
onUpdateSettings({
|
||
|
|
delay: inputValue * 1000,
|
||
|
|
})
|
||
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
|
|
}, [inputValue])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Stack {...props}>
|
||
|
|
<Flex alignItems="center" justifyContent="space-between">
|
||
|
|
<Heading fontSize="md" fontWeight="semibold">
|
||
|
|
Popup settings
|
||
|
|
</Heading>
|
||
|
|
</Flex>
|
||
|
|
|
||
|
|
<Flex justify="space-between" align="center" mb="2">
|
||
|
|
<p>Appearance delay</p>
|
||
|
|
<NumberInput
|
||
|
|
onChange={(_, val) => setInputValue(val)}
|
||
|
|
value={inputValue}
|
||
|
|
min={0}
|
||
|
|
>
|
||
|
|
<NumberInputField />
|
||
|
|
<NumberInputStepper>
|
||
|
|
<NumberIncrementStepper />
|
||
|
|
<NumberDecrementStepper />
|
||
|
|
</NumberInputStepper>
|
||
|
|
</NumberInput>
|
||
|
|
</Flex>
|
||
|
|
</Stack>
|
||
|
|
)
|
||
|
|
}
|