2
0
Files
bot/apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent.tsx

79 lines
2.0 KiB
TypeScript
Raw Normal View History

2022-01-08 07:40:55 +01:00
import { Flex, Text } from '@chakra-ui/react'
import { Step, StartStep, BubbleStepType, InputStepType } from 'models'
2022-01-12 09:10:59 +01:00
import { ChoiceItemsList } from './ChoiceInputStepNode/ChoiceItemsList'
2022-01-08 07:40:55 +01:00
2022-01-12 09:10:59 +01:00
type Props = {
step: Step | StartStep
isConnectable?: boolean
}
export const StepNodeContent = ({ step }: Props) => {
switch (step.type) {
2022-01-08 07:40:55 +01:00
case BubbleStepType.TEXT: {
return (
<Flex
flexDir={'column'}
2022-01-12 09:10:59 +01:00
opacity={step.content.html === '' ? '0.5' : '1'}
2022-01-08 07:40:55 +01:00
className="slate-html-container"
dangerouslySetInnerHTML={{
__html:
2022-01-12 09:10:59 +01:00
step.content.html === ''
2022-01-08 07:40:55 +01:00
? `<p>Click to edit...</p>`
2022-01-12 09:10:59 +01:00
: step.content.html,
2022-01-08 07:40:55 +01:00
}}
/>
)
}
case InputStepType.TEXT: {
return (
<Text color={'gray.500'}>
2022-01-12 09:10:59 +01:00
{step.options?.labels?.placeholder ?? 'Type your answer...'}
2022-01-08 07:40:55 +01:00
</Text>
)
}
case InputStepType.NUMBER: {
return (
<Text color={'gray.500'}>
2022-01-12 09:10:59 +01:00
{step.options?.labels?.placeholder ?? 'Type your answer...'}
2022-01-08 07:40:55 +01:00
</Text>
)
}
2022-01-08 08:20:54 +01:00
case InputStepType.EMAIL: {
return (
<Text color={'gray.500'}>
2022-01-12 09:10:59 +01:00
{step.options?.labels?.placeholder ?? 'Type your email...'}
2022-01-08 08:20:54 +01:00
</Text>
)
}
2022-01-09 07:36:29 +01:00
case InputStepType.URL: {
return (
<Text color={'gray.500'}>
2022-01-12 09:10:59 +01:00
{step.options?.labels?.placeholder ?? 'Type your URL...'}
2022-01-09 07:36:29 +01:00
</Text>
)
}
2022-01-10 08:05:03 +01:00
case InputStepType.DATE: {
return (
<Text color={'gray.500'}>
2022-01-12 09:10:59 +01:00
{step.options?.labels?.from ?? 'Pick a date...'}
2022-01-10 08:05:03 +01:00
</Text>
)
}
case InputStepType.PHONE: {
return (
<Text color={'gray.500'}>
2022-01-12 09:10:59 +01:00
{step.options?.labels?.placeholder ?? 'Your phone number...'}
</Text>
)
}
2022-01-12 09:10:59 +01:00
case InputStepType.CHOICE: {
return <ChoiceItemsList step={step} />
}
2022-01-08 07:40:55 +01:00
case 'start': {
2022-01-12 09:10:59 +01:00
return <Text>{step.label}</Text>
2022-01-08 07:40:55 +01:00
}
default: {
return <Text>No input</Text>
}
}
}