@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
56 lines • 4.9 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { RenderLinkItem } from '../MediaWidget/LinkItemWidget';
import Button from '../ui/Button';
import Modal from '../ui/Modal';
const AttachmentLinkModal = ({ visible, onCancel, onOk }) => {
var _a, _b, _c;
const { t } = useTranslation();
const [newLink, setNewLink] = useState({
url: '',
title: '',
});
const onKeyPress = (e) => {
if (e.key === 'Enter') {
if ((newLink === null || newLink === void 0 ? void 0 : newLink.url.length) === 0 || (newLink === null || newLink === void 0 ? void 0 : newLink.title.length) === 0)
return;
let saveButton = document.getElementById('save-link-button');
if (saveButton) {
saveButton.click();
}
}
};
return (_jsx(Modal, { open: visible, title: t('media.addLinkLabel'), className: "attachment-link-modal", closable: true, width: "100%", widthMd: "80%", onClose: () => {
if (onCancel)
onCancel();
}, footer: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: onCancel, children: t('cancel') }), _jsx(Button, { id: "save-link-button", primary: true, onClick: () => {
if ((newLink === null || newLink === void 0 ? void 0 : newLink.url.length) === 0 || (newLink === null || newLink === void 0 ? void 0 : newLink.title.length) === 0)
return;
onOk(newLink);
setNewLink({ url: '', title: '' });
}, disabled: (newLink === null || newLink === void 0 ? void 0 : newLink.url.length) === 0 || (newLink === null || newLink === void 0 ? void 0 : newLink.title.length) === 0, children: t('confirm') })] }), children: _jsxs("div", { className: "attachment-link-modal--row", children: [_jsxs("div", { className: "attachment-link-modal--column", children: [_jsxs("label", { htmlFor: "new-link-url", className: "attachment-link-modal--label", children: [t('media.linkKey'), ":"] }), _jsx("input", { type: "url", className: "attachment-link-modal--input ", onChange: e => {
let value = e.target.value.startsWith('http') || e.target.value.length === 0
? e.target.value
: `https://${e.target.value}`;
setNewLink(l => { var _a; return ({ title: (_a = l === null || l === void 0 ? void 0 : l.title) !== null && _a !== void 0 ? _a : '', url: value }); });
}, placeholder: "https://memori.ai/...", value: newLink === null || newLink === void 0 ? void 0 : newLink.url, name: "url", onKeyDown: onKeyPress }), _jsxs("label", { htmlFor: "new-link-title", className: "attachment-link-modal--label", children: [t('media.linkValue'), ":"] }), _jsx("input", { type: "text", className: "attachment-link-modal--input ", onChange: e => setNewLink(l => { var _a; return ({ url: (_a = l === null || l === void 0 ? void 0 : l.url) !== null && _a !== void 0 ? _a : '', title: e.target.value }); }), value: newLink === null || newLink === void 0 ? void 0 : newLink.title, name: "title", onKeyDown: onKeyPress })] }), _jsx("div", { className: "attachment-link-modal--column", children: _jsx("div", { className: "attachment-link-modal--centered", children: _jsx(RenderLinkItem, { item: {
title: (_a = newLink === null || newLink === void 0 ? void 0 : newLink.title) !== null && _a !== void 0 ? _a : '',
url: (_b = newLink === null || newLink === void 0 ? void 0 : newLink.url) !== null && _b !== void 0 ? _b : '',
mediumID: '',
mimeType: 'text/html',
}, onLinkPreviewInfo: data => {
var _a;
if (!((_a = newLink === null || newLink === void 0 ? void 0 : newLink.title) === null || _a === void 0 ? void 0 : _a.length)) {
setNewLink(l => {
var _a;
return ({
...l,
title: (_a = data === null || data === void 0 ? void 0 : data.title) !== null && _a !== void 0 ? _a : '',
});
});
}
} }, (_c = newLink === null || newLink === void 0 ? void 0 : newLink.url) !== null && _c !== void 0 ? _c : '') }) })] }) }));
};
export default AttachmentLinkModal;
//# sourceMappingURL=AttachmentLinkModal.js.map