blsmedia/bot
2
0
Fork 0
Code Activity

feat(integration): ✨ Add Google Analytics integration

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-19 14:25:15 +01:00
parent 44b478550f
commit 3506d86d50
21 changed files with 528 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/builder/components/shared/InputWithVariable.tsx → apps/builder/components/shared/InputWithVariableButton.tsx
View File

@@ -14,23 +14,23 @@ import React, { useEffect, useRef, useState } from 'react'
import { useDebounce } from 'use-debounce'
import { VariableSearchInput } from './VariableSearchInput'
export const InputWithVariable = ({
export const InputWithVariableButton = ({
initialValue,
noAbsolute,
onValueChange,
onChange,
delay,
...props
}: {
initialValue: string
onValueChange: (value: string) => void
noAbsolute?: boolean
} & InputProps) => {
onChange: (value: string) => void
delay?: number
} & Omit<InputProps, 'onChange'>) => {
const inputRef = useRef<HTMLInputElement | null>(null)
const [value, setValue] = useState(initialValue)
const [debouncedValue] = useDebounce(value, 100)
const [debouncedValue] = useDebounce(value, delay ?? 100)
const [carretPosition, setCarretPosition] = useState<number>(0)
useEffect(() => {
onValueChange(debouncedValue)
onChange(debouncedValue)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedValue])
@@ -77,10 +77,7 @@ export const InputWithVariable = ({
{...props}
bgColor={'white'}
/>
<InputRightElement
pos={noAbsolute ? 'relative' : 'absolute'}
zIndex={noAbsolute ? 'unset' : '1'}
>
<InputRightElement>
<Popover matchWidth isLazy>
<PopoverTrigger>
<IconButton

109
apps/builder/components/shared/VariableSearchInput.tsx
View File

@@ -9,6 +9,7 @@ import {
Button,
InputProps,
IconButton,
Portal,
} from '@chakra-ui/react'
import { PlusIcon, TrashIcon } from 'assets/icons'
import { useTypebot } from 'contexts/TypebotContext'
@@ -110,60 +111,62 @@ export const VariableSearchInput = ({
{...inputProps}
/>
</PopoverTrigger>
<PopoverContent
maxH="35vh"
overflowY="scroll"
spacing="0"
role="menu"
w="inherit"
shadow="lg"
>
{(inputValue?.length ?? 0) > 0 &&
!isDefined(variables.find((v) => v.name === inputValue)) && (
<Button
role="menuitem"
minH="40px"
onClick={handleCreateNewVariableClick}
fontSize="16px"
fontWeight="normal"
rounded="none"
colorScheme="gray"
variant="ghost"
justifyContent="flex-start"
leftIcon={<PlusIcon />}
>
Create "{inputValue}"
</Button>
<Portal>
<PopoverContent
maxH="35vh"
overflowY="scroll"
spacing="0"
role="menu"
w="inherit"
shadow="lg"
>
{(inputValue?.length ?? 0) > 0 &&
!isDefined(variables.find((v) => v.name === inputValue)) && (
<Button
role="menuitem"
minH="40px"
onClick={handleCreateNewVariableClick}
fontSize="16px"
fontWeight="normal"
rounded="none"
colorScheme="gray"
variant="ghost"
justifyContent="flex-start"
leftIcon={<PlusIcon />}
>
Create "{inputValue}"
</Button>
)}
{filteredItems.length > 0 && (
<>
{filteredItems.map((item, idx) => {
return (
<Button
role="menuitem"
minH="40px"
key={idx}
onClick={handleVariableNameClick(item)}
fontSize="16px"
fontWeight="normal"
rounded="none"
colorScheme="gray"
variant="ghost"
justifyContent="space-between"
>
{item.name}
<IconButton
icon={<TrashIcon />}
aria-label="Remove variable"
size="xs"
onClick={handleDeleteVariableClick(item)}
/>
</Button>
)
})}
</>
)}
{filteredItems.length > 0 && (
<>
{filteredItems.map((item, idx) => {
return (
<Button
role="menuitem"
minH="40px"
key={idx}
onClick={handleVariableNameClick(item)}
fontSize="16px"
fontWeight="normal"
rounded="none"
colorScheme="gray"
variant="ghost"
justifyContent="space-between"
>
{item.name}
<IconButton
icon={<TrashIcon />}
aria-label="Remove variable"
size="xs"
onClick={handleDeleteVariableClick(item)}
/>
</Button>
)
})}
</>
)}
</PopoverContent>
</PopoverContent>
</Portal>
</Popover>
</Flex>
)