UniqAI/hexabot
1
0
Fork 0
mirror of https://github.com/hexastack/hexabot synced 2025-05-10 23:50:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #460 from Hexastack/fix/buttons-display

Browse Source 
fix: Buttons display in the list/carousel block form
This commit is contained in:
Med Marrouchi 2024-12-19 06:45:54 +01:00 committed by GitHub
commit db9bc43560
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 93 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app-components/inputs/ToggleableInput.tsx
View File

@ -41,7 +41,7 @@ export const ToggleableInput = forwardRef(
}, [readOnlyValue, isDisabled, defaultValue]); }, [readOnlyValue, isDisabled, defaultValue]);
return ( return (
<Box display="flex"> <Box display="flex" flex={1}>
<Switch <Switch
onChange={() => { onChange={() => {
const newIsDisabled = !isDisabled; const newIsDisabled = !isDisabled;

4
frontend/src/components/visual-editor/form/ListMessageForm.tsx
View File

@ -166,7 +166,7 @@ const ListMessageForm = () => {
</ContentItem> </ContentItem>
</Grid> </Grid>
<Grid item xs={1}> <Grid item xs={1}>
<Divider orientation="vertical" sx={{ margin: "2rem" }} /> <Divider orientation="vertical" sx={{ marginX: "2rem" }} />
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<FormLabel component="h4" sx={{ marginBottom: "1rem" }}> <FormLabel component="h4" sx={{ marginBottom: "1rem" }}>
@ -278,7 +278,7 @@ const ListMessageForm = () => {
/> />
</ContentItem> </ContentItem>
</Grid> </Grid>
<ContentItem> <ContentItem width="100%">
<FormSectionTitle title={t("label.buttons")} Icon={ButtonsIcon} /> <FormSectionTitle title={t("label.buttons")} Icon={ButtonsIcon} />
<Controller <Controller
name="options.content.buttons" name="options.content.buttons"

20
frontend/src/components/visual-editor/form/inputs/message/ButtonInput.tsx
View File

@ -6,7 +6,7 @@
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
*/ */
import { Grid } from "@mui/material"; import { Box } from "@mui/material";
import { FC } from "react"; import { FC } from "react";
import { FieldPath, useFormContext } from "react-hook-form"; import { FieldPath, useFormContext } from "react-hook-form";
@ -48,13 +48,13 @@ const ButtonInput: FC<ButtonInputProps> = ({
} = useFormContext<IBlockAttributes>(); } = useFormContext<IBlockAttributes>();
return ( return (
<> <Box display="flex" flex={1} flexGrow={1} gap={2}>
<Grid item xs={5}>
<Input <Input
fullWidth fullWidth={false}
required required
placeholder={t("label.title")} label={t("label.title")}
value={button.title} value={button.title}
sx={{ flex: 1 }}
inputProps={{ inputProps={{
maxLength: 20, maxLength: 20,
}} }}
@ -72,8 +72,6 @@ const ButtonInput: FC<ButtonInputProps> = ({
: null) : null)
} }
/> />
</Grid>
<Grid item xs={6}>
{button.type === ButtonType.postback ? ( {button.type === ButtonType.postback ? (
<ToggleableInput <ToggleableInput
defaultValue={button.payload} defaultValue={button.payload}
@ -102,9 +100,10 @@ const ButtonInput: FC<ButtonInputProps> = ({
) : ( ) : (
<Input <Input
required required
type="ur" type="url"
placeholder="URL" label={t("label.url")}
value={button.url} value={button.url}
sx={{ flex: 1 }}
{...register(buildFieldPath(fieldPath, idx, "url"), { {...register(buildFieldPath(fieldPath, idx, "url"), {
validate: { validate: {
required: (value) => { required: (value) => {
@ -128,8 +127,7 @@ const ButtonInput: FC<ButtonInputProps> = ({
helperText={errors.message?.["buttons"]?.[idx]?.url?.message} helperText={errors.message?.["buttons"]?.[idx]?.url?.message}
/> />
)} )}
</Grid> </Box>
</>
); );
}; };

27
frontend/src/components/visual-editor/form/inputs/message/ButtonsInput.tsx
View File

@ -8,8 +8,8 @@
import { KeyboardReturn, Link, RemoveCircleOutline } from "@mui/icons-material"; import { KeyboardReturn, Link, RemoveCircleOutline } from "@mui/icons-material";
import AddIcon from "@mui/icons-material/Add"; import AddIcon from "@mui/icons-material/Add";
import { Box, Grid, IconButton } from "@mui/material"; import { Box, IconButton } from "@mui/material";
import { FC, Fragment, useEffect, useMemo, useState } from "react"; import { FC, useEffect, useMemo, useState } from "react";
import { FieldPath } from "react-hook-form"; import { FieldPath } from "react-hook-form";
import DropdownButton, { import DropdownButton, {
@ -96,19 +96,10 @@ const ButtonsInput: FC<ButtonsInput> = ({
}, [buttons]); }, [buttons]);
return ( return (
<Box> <Box display="flex" flexDirection="column">
<Grid container spacing={2}> <Box display="flex" flexDirection="column">
<Grid item xs={5}>
{t("label.title")}
</Grid>
<Grid item xs={6}>
{t("label.payload")} / {t("label.url")}
</Grid>
<Grid item xs={1}>
&nbsp;
</Grid>
{buttons.map(({ value, id }, idx) => ( {buttons.map(({ value, id }, idx) => (
<Fragment key={id}> <Box display="flex" flex={1} mt={2} key={id}>
<ButtonInput <ButtonInput
fieldPath={fieldPath} fieldPath={fieldPath}
idx={idx} idx={idx}
@ -116,7 +107,6 @@ const ButtonsInput: FC<ButtonsInput> = ({
onChange={updateInput(idx)} onChange={updateInput(idx)}
disablePayload={disablePayload} disablePayload={disablePayload}
/> />
<Grid item xs={1}>
<IconButton <IconButton
color="error" color="error"
onClick={() => removeInput(idx)} onClick={() => removeInput(idx)}
@ -124,12 +114,11 @@ const ButtonsInput: FC<ButtonsInput> = ({
> >
<RemoveCircleOutline /> <RemoveCircleOutline />
</IconButton> </IconButton>
</Grid> </Box>
</Fragment>
))} ))}
</Grid> </Box>
<DropdownButton <DropdownButton
sx={{ m: 1, float: "right", padding: "16px" }} sx={{ alignSelf: "end", marginTop: 2 }}
label={t("button.add_button")} label={t("button.add_button")}
actions={actions} actions={actions}
onClick={(action) => addInput(action.defaultValue)} onClick={(action) => addInput(action.defaultValue)}