feat: adjust delete icon

This commit is contained in:
hexastack 2024-12-09 11:36:54 +01:00
parent 62e59069dd
commit da25df6bb9
3 changed files with 35 additions and 32 deletions

View File

@ -6,8 +6,8 @@
* 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 { RemoveCircleOutline } from "@mui/icons-material";
import AddIcon from "@mui/icons-material/Add";
import DeleteIcon from "@mui/icons-material/Delete";
import {
Box,
Button,
@ -130,12 +130,6 @@ const MultipleInput = forwardRef<HTMLDivElement, MultipleInputProps>(
gap={1}
mb={1}
>
<IconButton
onClick={() => handleRemoveInput(input.id)}
disabled={inputs.length <= minInput}
>
<DeleteIcon />
</IconButton>
<Input
{...(getInputProps ? getInputProps(idx) : null)}
{...rest}
@ -146,6 +140,13 @@ const MultipleInput = forwardRef<HTMLDivElement, MultipleInputProps>(
}}
fullWidth
/>
<IconButton
color="error"
onClick={() => handleRemoveInput(input.id)}
disabled={inputs.length <= minInput}
>
<RemoveCircleOutline />
</IconButton>
</Box>
))}
<Box

View File

@ -6,8 +6,8 @@
* 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 { RemoveCircleOutline } from "@mui/icons-material";
import AddIcon from "@mui/icons-material/Add";
import DeleteIcon from "@mui/icons-material/Delete";
import { Box, Button, Grid, IconButton } from "@mui/material";
import { FC, Fragment, useEffect, useState } from "react";
import { FieldPath } from "react-hook-form";
@ -75,9 +75,6 @@ const ButtonsInput: FC<ButtonsInput> = ({
return (
<Box>
<Grid container spacing={2}>
<Grid item xs={1}>
&nbsp;
</Grid>
<Grid item xs={2}>
{t("label.type")}
</Grid>
@ -90,16 +87,11 @@ const ButtonsInput: FC<ButtonsInput> = ({
<Grid item xs={2}>
{t("label.webview")}
</Grid>
<Grid item xs={1}>
&nbsp;
</Grid>
{buttons.map(({ value, id }, idx) => (
<Fragment key={id}>
<Grid item xs={1}>
<IconButton
onClick={() => removeInput(idx)}
disabled={buttons.length <= minInput}
>
<DeleteIcon />
</IconButton>
</Grid>
<ButtonInput
fieldPath={fieldPath}
idx={idx}
@ -107,6 +99,15 @@ const ButtonsInput: FC<ButtonsInput> = ({
onChange={updateInput(idx)}
disablePayload={disablePayload}
/>
<Grid item xs={1}>
<IconButton
color="error"
onClick={() => removeInput(idx)}
disabled={buttons.length <= minInput}
>
<RemoveCircleOutline />
</IconButton>
</Grid>
</Fragment>
))}
</Grid>

View File

@ -6,8 +6,8 @@
* 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 { RemoveCircleOutline } from "@mui/icons-material";
import AddIcon from "@mui/icons-material/Add";
import DeleteIcon from "@mui/icons-material/Delete";
import { Box, Button, Grid, IconButton } from "@mui/material";
import { FC, Fragment, useEffect, useState } from "react";
@ -71,9 +71,6 @@ const QuickRepliesInput: FC<QuickRepliesInput> = ({
return (
<Box>
<Grid container spacing={2}>
<Grid item xs={1}>
&nbsp;
</Grid>
<Grid item xs={2}>
{t("label.type")}
</Grid>
@ -84,22 +81,26 @@ const QuickRepliesInput: FC<QuickRepliesInput> = ({
<Grid item xs={4}>
{t("label.payload")}
</Grid>
<Grid item xs={1}>
&nbsp;
</Grid>
{quickReplies.map(({ value, id }, idx) => (
<Fragment key={id}>
<Grid item xs={1}>
<IconButton
size="medium"
onClick={() => removeInput(idx)}
disabled={quickReplies.length <= minInput}
>
<DeleteIcon />
</IconButton>
</Grid>
<QuickReplyInput
value={value}
idx={idx}
onChange={updateInput(idx)}
/>
<Grid item xs={1}>
<IconButton
color="error"
size="medium"
onClick={() => removeInput(idx)}
disabled={quickReplies.length <= minInput}
>
<RemoveCircleOutline />
</IconButton>
</Grid>
</Fragment>
))}
</Grid>