blsmedia/bot
2
0
Fork 0
Code Activity

🚸 (fileUpload) Add success labels cutomization

Browse Source 
Closes #515
This commit is contained in:
Baptiste Arnaud
2024-02-05 14:11:04 +01:00
parent 27b95c1f0b
commit 9fc05cb150
8 changed files with 125 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx
View File

@ -1,4 +1,12 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import {
Accordion,
AccordionButton,
AccordionIcon,
AccordionItem,
AccordionPanel,
FormLabel,
Stack,
} from '@chakra-ui/react'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { FileInputBlock, Variable } from '@typebot.io/schemas'
import React from 'react'
@ -45,6 +53,24 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
visibility: (typeof fileVisibilityOptions)[number]
) => onOptionsChange({ ...options, visibility })
const updateSingleFileSuccessLabel = (single: string) =>
onOptionsChange({
...options,
labels: {
...options?.labels,
success: { ...options?.labels?.success, single },
},
})
const updateMultipleFilesSuccessLabel = (multiple: string) =>
onOptionsChange({
...options,
labels: {
...options?.labels,
success: { ...options?.labels?.success, multiple },
},
})
return (
<Stack spacing={4}>
<SwitchWithLabel
@ -75,30 +101,66 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
withVariableButton={false}
/>
</Stack>
<TextInput
label={t('blocks.inputs.settings.button.label')}
defaultValue={
options?.labels?.button ?? defaultFileInputOptions.labels.button
}
onChange={handleButtonLabelChange}
withVariableButton={false}
/>
<TextInput
label={t('blocks.inputs.file.settings.clear.label')}
defaultValue={
options?.labels?.clear ?? defaultFileInputOptions.labels.clear
}
onChange={updateClearButtonLabel}
withVariableButton={false}
/>
<TextInput
label={t('blocks.inputs.file.settings.skip.label')}
defaultValue={
options?.labels?.skip ?? defaultFileInputOptions.labels.skip
}
onChange={updateSkipButtonLabel}
withVariableButton={false}
/>
<Accordion allowToggle>
<AccordionItem>
<AccordionButton justifyContent="space-between">
Labels
<AccordionIcon />
</AccordionButton>
<AccordionPanel as={Stack} spacing={4}>
<TextInput
label={t('blocks.inputs.settings.button.label')}
defaultValue={
options?.labels?.button ?? defaultFileInputOptions.labels.button
}
onChange={handleButtonLabelChange}
withVariableButton={false}
/>
{options?.isMultipleAllowed && (
<TextInput
label={t('blocks.inputs.file.settings.clear.label')}
defaultValue={
options?.labels?.clear ?? defaultFileInputOptions.labels.clear
}
onChange={updateClearButtonLabel}
withVariableButton={false}
/>
)}
{!(options?.isRequired ?? defaultFileInputOptions.isRequired) && (
<TextInput
label={t('blocks.inputs.file.settings.skip.label')}
defaultValue={
options?.labels?.skip ?? defaultFileInputOptions.labels.skip
}
onChange={updateSkipButtonLabel}
withVariableButton={false}
/>
)}
<TextInput
label="Single file success"
defaultValue={
options?.labels?.success?.single ??
defaultFileInputOptions.labels.success.single
}
onChange={updateSingleFileSuccessLabel}
withVariableButton={false}
/>
{options?.isMultipleAllowed && (
<TextInput
label="Multi files success"
moreInfoTooltip="Include {total} to show the total number of files uploaded"
defaultValue={
options?.labels?.success?.multiple ??
defaultFileInputOptions.labels.success.multiple
}
onChange={updateMultipleFilesSuccessLabel}
withVariableButton={false}
/>
)}
</AccordionPanel>
</AccordionItem>
</Accordion>
<DropdownList
label="Visibility:"
moreInfoTooltip='This setting determines who can see the uploaded files. "Public" means that anyone who has the link can see the files. "Private" means that only a members of this workspace can see the files.'