2024-02-18 23:05:15 +00:00
|
|
|
import variables from 'config/variables';
|
2023-03-15 18:34:02 +00:00
|
|
|
|
2023-03-21 19:59:16 +00:00
|
|
|
import { useState, memo } from 'react';
|
2022-10-19 13:36:33 +00:00
|
|
|
import { TextareaAutosize } from '@mui/material';
|
|
|
|
import { MdAddLink, MdClose } from 'react-icons/md';
|
2024-02-18 23:05:15 +00:00
|
|
|
import { Tooltip } from 'components/Elements';
|
2023-03-14 17:07:14 +00:00
|
|
|
function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, editLink }) {
|
2022-10-19 13:36:33 +00:00
|
|
|
const [name, setName] = useState(edit ? editData.name : '');
|
|
|
|
const [url, setUrl] = useState(edit ? editData.url : '');
|
2023-12-31 22:20:35 +00:00
|
|
|
const [icon, setIcon] = useState(edit ? editData.icon : '');
|
2022-10-19 13:36:33 +00:00
|
|
|
|
|
|
|
return (
|
2024-02-03 01:21:18 +00:00
|
|
|
<div className="addLinkModal">
|
2022-10-19 13:36:33 +00:00
|
|
|
<div className="shareHeader">
|
2023-12-31 22:20:35 +00:00
|
|
|
<span className="title">
|
|
|
|
{edit
|
|
|
|
? variables.getMessage('widgets.quicklinks.edit')
|
|
|
|
: variables.getMessage('widgets.quicklinks.new')}
|
|
|
|
</span>
|
2022-10-19 13:36:33 +00:00
|
|
|
<Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
|
|
|
|
<div className="close" onClick={() => closeModal()}>
|
|
|
|
<MdClose />
|
|
|
|
</div>
|
|
|
|
</Tooltip>
|
|
|
|
</div>
|
|
|
|
<div className="quicklinkModalTextbox">
|
|
|
|
<TextareaAutosize
|
|
|
|
maxRows={1}
|
|
|
|
placeholder={variables.getMessage('widgets.quicklinks.name')}
|
|
|
|
value={name}
|
2023-03-14 23:53:05 +00:00
|
|
|
onChange={(e) => setName(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
|
2024-02-03 01:21:18 +00:00
|
|
|
style={{ gridColumn: 'span 2' }}
|
2022-10-19 13:36:33 +00:00
|
|
|
/>
|
|
|
|
<TextareaAutosize
|
|
|
|
maxRows={10}
|
|
|
|
placeholder={variables.getMessage('widgets.quicklinks.url')}
|
|
|
|
value={url}
|
2023-03-14 23:53:05 +00:00
|
|
|
onChange={(e) => setUrl(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
|
2022-10-19 13:36:33 +00:00
|
|
|
/>
|
|
|
|
<TextareaAutosize
|
|
|
|
maxRows={10}
|
2023-03-14 17:07:14 +00:00
|
|
|
maxLines={1}
|
2022-10-19 13:36:33 +00:00
|
|
|
placeholder={variables.getMessage('widgets.quicklinks.icon')}
|
|
|
|
value={icon}
|
2023-03-14 23:53:05 +00:00
|
|
|
onChange={(e) => setIcon(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
|
2022-10-19 13:36:33 +00:00
|
|
|
/>
|
2024-02-03 01:21:18 +00:00
|
|
|
</div>
|
|
|
|
<div className="addFooter">
|
|
|
|
<span className="dropdown-error">
|
|
|
|
{iconError} {urlError}
|
|
|
|
</span>
|
2022-10-19 13:36:33 +00:00
|
|
|
{edit ? (
|
2023-01-29 18:14:33 +00:00
|
|
|
<button
|
|
|
|
style={{
|
|
|
|
height: '16px',
|
|
|
|
fontSize: '15px',
|
|
|
|
}}
|
|
|
|
onClick={() => editLink(editData, name, url, icon)}
|
|
|
|
>
|
|
|
|
<MdAddLink /> {variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
|
2022-10-19 13:36:33 +00:00
|
|
|
</button>
|
|
|
|
) : (
|
2023-01-29 18:14:33 +00:00
|
|
|
<button
|
|
|
|
style={{
|
|
|
|
height: '16px',
|
|
|
|
fontSize: '15px',
|
|
|
|
}}
|
2024-02-10 19:39:15 +00:00
|
|
|
className="btn-settings"
|
2023-01-29 18:14:33 +00:00
|
|
|
onClick={() => addLink(name, url, icon)}
|
|
|
|
>
|
2022-10-19 13:36:33 +00:00
|
|
|
<MdAddLink /> {variables.getMessage('widgets.quicklinks.add')}
|
|
|
|
</button>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2022-10-30 16:56:26 +00:00
|
|
|
|
2024-02-24 20:17:11 +00:00
|
|
|
const MemoizedAddModal = memo(AddModal);
|
2024-03-19 21:45:17 +00:00
|
|
|
export { MemoizedAddModal as default, MemoizedAddModal as AddModal };
|