mirror of https://github.com/ctk-hq/ctk
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
import { Fragment, FunctionComponent, ReactElement, useCallback } from "react";
|
|
import { styled } from "@mui/joy";
|
|
import IconButton from "@mui/joy/IconButton";
|
|
import { MinusSmIcon } from "@heroicons/react/solid";
|
|
import TextField from "./global/FormElements/TextField";
|
|
import Toggle from "./global/FormElements/Toggle";
|
|
|
|
export interface IFieldType {
|
|
name: string;
|
|
placeholder: string;
|
|
required?: boolean;
|
|
type: "text" | "toggle";
|
|
options?: {
|
|
text: string;
|
|
value: string;
|
|
}[];
|
|
}
|
|
|
|
export interface IRecordProps {
|
|
fields: IFieldType[];
|
|
index: number;
|
|
onRemove: (index: number) => void;
|
|
}
|
|
|
|
const Root = styled("div")`
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
column-gap: ${({ theme }) => theme.spacing(2)};
|
|
@media (max-width: 768px) {
|
|
column-gap: ${({ theme }) => theme.spacing(1)};
|
|
}
|
|
`;
|
|
|
|
const RemoveButton = styled(IconButton)``;
|
|
|
|
const Record: FunctionComponent<IRecordProps> = (
|
|
props: IRecordProps
|
|
): ReactElement => {
|
|
const { fields, index, onRemove } = props;
|
|
|
|
const handleRemove = useCallback(() => {
|
|
onRemove(index);
|
|
}, [index, onRemove]);
|
|
|
|
return (
|
|
<Root>
|
|
{fields.map(({ type, name, placeholder, required, options }) => (
|
|
<Fragment key={name}>
|
|
{type === "text" && (
|
|
<TextField
|
|
id={name}
|
|
name={name}
|
|
placeholder={placeholder + (required ? "*" : "")}
|
|
required={required}
|
|
/>
|
|
)}
|
|
{type === "toggle" && (
|
|
<Toggle name={name} label={placeholder} options={options || []} />
|
|
)}
|
|
</Fragment>
|
|
))}
|
|
<RemoveButton
|
|
variant="soft"
|
|
size="sm"
|
|
color="danger"
|
|
onClick={handleRemove}
|
|
>
|
|
<MinusSmIcon className="h-5 w-5" />
|
|
</RemoveButton>
|
|
</Root>
|
|
);
|
|
};
|
|
|
|
export default Record;
|