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.
68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
import { FunctionComponent, ReactElement, useCallback } from "react";
|
|
import { styled } from "@mui/joy";
|
|
import IconButton from "@mui/joy/IconButton";
|
|
import { MinusSmIcon } from "@heroicons/react/solid";
|
|
import lodash from "lodash";
|
|
|
|
export interface IFieldType {
|
|
name: string;
|
|
placeholder: string;
|
|
required?: boolean;
|
|
}
|
|
|
|
export interface IRecordProps {
|
|
formik: any;
|
|
fields: IFieldType[];
|
|
index: number;
|
|
onRemove: (index: number) => void;
|
|
}
|
|
|
|
const Root = styled("div")`
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
column-gap: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
const RemoveButton = styled(IconButton)``;
|
|
|
|
const Record: FunctionComponent<IRecordProps> = (
|
|
props: IRecordProps
|
|
): ReactElement => {
|
|
const { formik, fields, index, onRemove } = props;
|
|
|
|
const handleRemove = useCallback(() => {
|
|
onRemove(index);
|
|
}, [index, onRemove]);
|
|
|
|
return (
|
|
<Root>
|
|
{fields.map(({ name, placeholder, required }) => (
|
|
<input
|
|
key={name}
|
|
id={name}
|
|
name={name}
|
|
type="text"
|
|
placeholder={placeholder + (required ? "*" : "")}
|
|
autoComplete="none"
|
|
className="input-util"
|
|
required={required}
|
|
onChange={formik.handleChange}
|
|
value={lodash.get(formik.values, name)}
|
|
/>
|
|
))}
|
|
<RemoveButton
|
|
variant="soft"
|
|
size="sm"
|
|
color="danger"
|
|
onClick={handleRemove}
|
|
>
|
|
<MinusSmIcon className="h-5 w-5" />
|
|
</RemoveButton>
|
|
</Root>
|
|
);
|
|
};
|
|
|
|
export default Record;
|