71 lines
1.9 KiB
JavaScript
71 lines
1.9 KiB
JavaScript
import EditGrayA from "@/components/icons/EditGrayA";
|
|
import EditOrangeA from "@/components/icons/EditOrangeA";
|
|
import { Button, TextField } from "@mui/material";
|
|
|
|
function EditField({
|
|
changeData,
|
|
multiline,
|
|
icon,
|
|
placeholder,
|
|
data,
|
|
name,
|
|
iconGray,
|
|
isTransparent,
|
|
noDisable,
|
|
type,
|
|
props,
|
|
}) {
|
|
console.log(data);
|
|
return (
|
|
<div className="relative w-full">
|
|
<TextField
|
|
{...props}
|
|
value={data?.value}
|
|
rows={multiline}
|
|
multiline={multiline}
|
|
disabled={noDisable ? false : !data?.isEdit}
|
|
placeholder={placeholder || ""}
|
|
type={type || "text"}
|
|
className={`!w-full res-field-account dark:!bg-transparent ${
|
|
isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
|
|
}`}
|
|
onChange={(e) => {
|
|
changeData(e.target.value, "value", name);
|
|
}}
|
|
sx={{
|
|
"& .MuiFormLabel-root": {
|
|
top: "-4px !important",
|
|
},
|
|
"& .MuiInputBase-input": { padding: "12.5px 14px" },
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
border: "1px solid #D7D7D7 !important",
|
|
},
|
|
"& .MuiInputBase-root": {
|
|
padding: "0 !important",
|
|
borderRadius: "8px !important",
|
|
},
|
|
".Mui-focused": {
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
border: "1px solid #5559CE !important",
|
|
transition: "0.5s all",
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
{!type && (
|
|
<Button
|
|
className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
|
|
${multiline ? "!top-[24px]" : "!top-1/2"}`}
|
|
onClick={() => {
|
|
changeData(!data.isEdit, "isEdit", name);
|
|
}}
|
|
>
|
|
{icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default EditField;
|