55 lines
2.1 KiB
JavaScript
55 lines
2.1 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 }) {
|
|
return (
|
|
<div className="relative w-full">
|
|
<TextField
|
|
value={data?.value}
|
|
rows={multiline}
|
|
multiline={multiline}
|
|
disabled={!data?.isEdit}
|
|
placeholder={placeholder || ''}
|
|
type='text'
|
|
className={`!w-full res-field-account ${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'
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
<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 |