2
0

🛂 Temporarily disable Make.com

This commit is contained in:
Baptiste Arnaud
2022-04-29 19:13:34 -07:00
parent 7b4dc47f11
commit cff5ec67de
2 changed files with 39 additions and 29 deletions

View File

@ -1,4 +1,4 @@
import { Flex, HStack, StackProps, Text } from '@chakra-ui/react' import { Flex, HStack, StackProps, Text, Tooltip } from '@chakra-ui/react'
import { StepType, DraggableStepType } from 'models' import { StepType, DraggableStepType } from 'models'
import { useStepDnd } from 'contexts/GraphDndContext' import { useStepDnd } from 'contexts/GraphDndContext'
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
@ -8,8 +8,10 @@ import { StepTypeLabel } from './StepTypeLabel'
export const StepCard = ({ export const StepCard = ({
type, type,
onMouseDown, onMouseDown,
isDisabled = false,
}: { }: {
type: DraggableStepType type: DraggableStepType
isDisabled?: boolean
onMouseDown: (e: React.MouseEvent, type: DraggableStepType) => void onMouseDown: (e: React.MouseEvent, type: DraggableStepType) => void
}) => { }) => {
const { draggedStepType } = useStepDnd() const { draggedStepType } = useStepDnd()
@ -22,33 +24,36 @@ export const StepCard = ({
const handleMouseDown = (e: React.MouseEvent) => onMouseDown(e, type) const handleMouseDown = (e: React.MouseEvent) => onMouseDown(e, type)
return ( return (
<Flex pos="relative"> <Tooltip label="Coming soon!" isDisabled={!isDisabled}>
<HStack <Flex pos="relative">
borderWidth="1px" <HStack
borderColor="gray.200" borderWidth="1px"
rounded="lg" borderColor="gray.200"
flex="1" rounded="lg"
cursor={'grab'} flex="1"
opacity={isMouseDown ? '0.4' : '1'} cursor={'grab'}
onMouseDown={handleMouseDown} opacity={isMouseDown || isDisabled ? '0.4' : '1'}
bgColor="gray.50" onMouseDown={handleMouseDown}
px="4" bgColor="gray.50"
py="2" px="4"
_hover={{ shadow: 'md' }} py="2"
transition="box-shadow 200ms" _hover={{ shadow: 'md' }}
> transition="box-shadow 200ms"
{!isMouseDown ? ( pointerEvents={isDisabled ? 'none' : 'auto'}
<> >
<StepIcon type={type} /> {!isMouseDown ? (
<StepTypeLabel type={type} /> <>
</> <StepIcon type={type} />
) : ( <StepTypeLabel type={type} />
<Text color="white" userSelect="none"> </>
Placeholder ) : (
</Text> <Text color="white" userSelect="none">
)} Placeholder
</HStack> </Text>
</Flex> )}
</HStack>
</Flex>
</Tooltip>
) )
} }

View File

@ -150,7 +150,12 @@ export const StepsSideBar = () => {
</Text> </Text>
<SimpleGrid columns={2} spacing="3"> <SimpleGrid columns={2} spacing="3">
{Object.values(IntegrationStepType).map((type) => ( {Object.values(IntegrationStepType).map((type) => (
<StepCard key={type} type={type} onMouseDown={handleMouseDown} /> <StepCard
key={type}
type={type}
onMouseDown={handleMouseDown}
isDisabled={type === IntegrationStepType.MAKE_COM}
/>
))} ))}
</SimpleGrid> </SimpleGrid>
</Stack> </Stack>