@bigbinary/neeto-molecules 1.0.36 → 1.0.37

package/dist/ShareViaLink.js

@@ -1,10 +1,13 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { slugify, noop } from '@bigbinary/neeto-commons-frontend/pure';
-import { copyToClipboard, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
-import { Copy, ExternalLink, MenuHorizontal, Facebook, Linkedin, Twitter, QrCode } from '@bigbinary/neeto-icons';
-import { Modal, Typography, Input, Button, Dropdown, Tooltip } from '@bigbinary/neetoui';
+import { buildUrl, copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils';
+import { Facebook, Linkedin, Twitter, Copy, ExternalLink, MenuHorizontal, QrCode } from '@bigbinary/neeto-icons';
+import { Modal, Typography, Input as Input$1, Button as Button$1, Dropdown, Tooltip } from '@bigbinary/neetoui';
 import { useTranslation } from 'react-i18next';
-import { t } from 'i18next';
+import { Formik, Form } from 'formik';
+import { Input, Button } from '@bigbinary/neetoui/formik';
+import { t as t$1 } from 'i18next';
+import * as yup from 'yup';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -61,11 +64,150 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+var facebookShareLink = function facebookShareLink(_ref) {
+  var id = _ref.id;
+  return buildUrl("https://www.facebook.com/sharer/sharer.php", {
+    u: "https://".concat(window.location.host, "/").concat(id)
+  });
+};
+var linkedInShareLink = function linkedInShareLink(_ref2) {
+  var id = _ref2.id,
+    title = _ref2.title;
+  return buildUrl("https://www.linkedin.com/shareArticle", {
+    mini: true,
+    url: "https://".concat(window.location.host, "/").concat(id),
+    title: title
+  });
+};
+var twitterShareLink = function twitterShareLink(_ref3) {
+  var id = _ref3.id,
+    title = _ref3.title;
+  return buildUrl("http://twitter.com/share", {
+    text: title,
+    url: "https://".concat(window.location.host, "/").concat(id)
+  });
+};
+var downloadCanvas = function downloadCanvas(canvas) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$name = options.name,
+    name = _options$name === void 0 ? "image" : _options$name,
+    _options$extension = options.extension,
+    extension = _options$extension === void 0 ? "png" : _options$extension;
+  var canvasUrl = canvas.toDataURL("image/".concat(extension));
+  var element = document.createElement("a");
+  element.href = canvasUrl;
+  element.download = "".concat(name, ".").concat(extension);
+  element.click();
+  element.remove();
+};
+var getPathname = function getPathname(url) {
+  return new URL(url).pathname.slice(1);
+};
+var getPrefixFromUrl = function getPrefixFromUrl(url) {
+  return "".concat(new URL(url).origin, "/");
+};
+var truncatePrefix = function truncatePrefix(url) {
+  return url.length > MAX_PREFIX_SIZE ? "...".concat(url.slice(-MAX_PREFIX_SIZE)) : url;
+};
+
+var SOCIAL_MEDIA_OPTIONS = {
+  FACEBOOK: {
+    label: t$1("neetoMolecules.shareViaLink.socialMediaShare.facebook"),
+    icon: Facebook,
+    generateShareUrl: facebookShareLink
+  },
+  LINKEDIN: {
+    label: t$1("neetoMolecules.shareViaLink.socialMediaShare.linkedIn"),
+    icon: Linkedin,
+    generateShareUrl: linkedInShareLink
+  },
+  TWITTER: {
+    label: t$1("neetoMolecules.shareViaLink.socialMediaShare.twitter"),
+    icon: Twitter,
+    generateShareUrl: twitterShareLink
+  }
+};
+var PATH_VALIDATION_SCHEMA = yup.object().shape({
+  path: yup.string().required(t$1("neetoMolecules.shareViaLink.editUrl.validationError")).matches(/^[A-Za-z0-9]([\w/-])*$/, t$1("neetoMolecules.shareViaLink.editUrl.validationError"))
+});
+var MAX_PREFIX_SIZE = 30;
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ".no-padding .neeto-ui-input.neeto-ui-input--medium input{padding:0}.no-padding .neeto-ui-input__prefix{color:rgb(var(--neeto-ui-gray-600))!important}";
+n(css,{});
+
+var EditURL = function EditURL(_ref) {
+  var editUrlProps = _ref.editUrlProps,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    url = _ref.url,
+    isLoading = _ref.isLoading,
+    handleEdit = _ref.handleEdit;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var focusRef = useRef(null);
+  var handleSubmit = function handleSubmit(values) {
+    handleEdit(values.path);
+    onClose();
+  };
+  return /*#__PURE__*/React.createElement(Modal, {
+    "data-testid": "edit-url-modal",
+    initialFocusRef: focusRef,
+    isOpen: isOpen,
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    lineHeight: "normal",
+    style: "h2",
+    weight: "semibold"
+  }, t("neetoMolecules.shareViaLink.editUrl.title"))), /*#__PURE__*/React.createElement(Formik, {
+    enableReinitialize: true,
+    initialValues: {
+      path: (editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.editablePath) || getPathname(url)
+    },
+    validationSchema: PATH_VALIDATION_SCHEMA,
+    onSubmit: handleSubmit
+  }, function (_ref2) {
+    var isSubmitting = _ref2.isSubmitting,
+      dirty = _ref2.dirty;
+    return /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(Modal.Body, {
+      className: "w-full space-y-6"
+    }, /*#__PURE__*/React.createElement(Input, {
+      className: "no-padding",
+      "data-testid": "edit-url-input",
+      label: t("neetoMolecules.shareViaLink.editUrl.inputLabel"),
+      maxLength: editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.maxLength,
+      name: "path",
+      ref: focusRef,
+      prefix: truncatePrefix((editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.prefix) || getPrefixFromUrl(url))
+    }), /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-ui-text-gray-700",
+      lineHeight: "normal",
+      style: "body2"
+    }, t("neetoMolecules.shareViaLink.editUrl.description"))), /*#__PURE__*/React.createElement(Modal.Footer, {
+      className: "space-x-2"
+    }, /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "edit-url-confirm-button",
+      disabled: isSubmitting || !dirty,
+      loading: isLoading,
+      type: "submit",
+      label: t("neetoMolecules.shareViaLink.editUrl.submitButtonLabel")
+    }), /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "edit-url-cancel-button",
+      disabled: isSubmitting,
+      style: "text",
+      type: "reset",
+      label: t("neetoMolecules.shareViaLink.editUrl.cancelButtonLabel"),
+      onClick: onClose
+    })));
+  }));
+};
+
 var RegenerateURL = function RegenerateURL(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     url = _ref.url,
-    isRegenerating = _ref.isRegenerating,
+    isLoading = _ref.isLoading,
     handleRegenerate = _ref.handleRegenerate;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -79,7 +221,7 @@ var RegenerateURL = function RegenerateURL(_ref) {
     weight: "semibold"
   }, t("neetoMolecules.shareViaLink.regenerateUrl.title"))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
     className: "w-full space-y-6"
-  }, /*#__PURE__*/React.createElement(Input, {
+  }, /*#__PURE__*/React.createElement(Input$1, {
     disabled: true,
     label: t("neetoMolecules.shareViaLink.regenerateUrl.inputLabel"),
     value: url
@@ -87,21 +229,17 @@ var RegenerateURL = function RegenerateURL(_ref) {
     className: "neeto-ui-text-gray-700",
     lineHeight: "normal",
     style: "body2"
-  }, t("neetoMolecules.shareViaLink.regenerateUrl.description")), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-700",
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoMolecules.shareViaLink.regenerateUrl.confirmation")))), /*#__PURE__*/React.createElement(Modal.Footer, {
+  }, t("neetoMolecules.shareViaLink.regenerateUrl.description")))), /*#__PURE__*/React.createElement(Modal.Footer, {
     className: "space-x-2"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button$1, {
     "data-testid": "regenerate-url-confirm-button",
-    loading: isRegenerating,
+    loading: isLoading,
     label: t("neetoMolecules.shareViaLink.regenerateUrl.submitButtonLabel"),
     onClick: function onClick() {
       handleRegenerate();
       onClose();
     }
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(Button$1, {
     "data-testid": "regenerate-url-cancel-button",
     style: "text",
     label: t("neetoMolecules.shareViaLink.regenerateUrl.cancelButtonLabel"),
@@ -112,18 +250,25 @@ var RegenerateURL = function RegenerateURL(_ref) {
 var Menu = Dropdown.Menu,
   MenuItem = Dropdown.MenuItem;
 var Link = function Link(_ref) {
-  var enableRegenerateUrl = _ref.enableRegenerateUrl,
+  var editUrlProps = _ref.editUrlProps,
+    enabledOptions = _ref.enabledOptions,
     entityName = _ref.entityName,
+    handleEdit = _ref.handleEdit,
     handleRegenerate = _ref.handleRegenerate,
-    isRegenerating = _ref.isRegenerating,
+    isLoading = _ref.isLoading,
     previewUrl = _ref.previewUrl,
     url = _ref.url;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isRegenerateURLModalOpen = _useState2[0],
     setIsRegenerateURLModalOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isEditURLModalOpen = _useState4[0],
+    setIsEditURLModalOpen = _useState4[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var isDropdownEnabled = enabledOptions.regenerate || enabledOptions.edit;
   return /*#__PURE__*/React.createElement("div", {
     className: "space-y-4",
     "data-testid": "link-block"
@@ -143,17 +288,17 @@ var Link = function Link(_ref) {
     entity: entityName
   }))), /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-1"
-  }, /*#__PURE__*/React.createElement(Input, {
+  }, /*#__PURE__*/React.createElement(Input$1, {
     readOnly: true,
     value: url
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(Button$1, {
     "data-testid": "link-copy-button",
     icon: Copy,
     label: t("neetoMolecules.shareViaLink.copyLink"),
     onClick: function onClick() {
       return copyToClipboard(url);
     }
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(Button$1, {
     "data-testid": "preview-button",
     href: previewUrl || url,
     icon: ExternalLink,
@@ -165,80 +310,40 @@ var Link = function Link(_ref) {
       }),
       position: "top"
     }
-  }), enableRegenerateUrl && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+  }), isDropdownEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
     buttonStyle: "text",
     icon: MenuHorizontal
-  }, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
+  }, /*#__PURE__*/React.createElement(Menu, null, enabledOptions.regenerate && /*#__PURE__*/React.createElement(MenuItem.Button, {
     "data-testid": "regenerate-url-button",
+    isDisabled: !enabledOptions.regenerate,
     onClick: function onClick() {
       return setIsRegenerateURLModalOpen(true);
     }
-  }, t("neetoMolecules.shareViaLink.regenerateUrl.title")))), /*#__PURE__*/React.createElement(RegenerateURL, {
+  }, t("neetoMolecules.shareViaLink.regenerateUrl.title")), enabledOptions.edit && /*#__PURE__*/React.createElement(MenuItem.Button, {
+    "data-testid": "edit-url-button",
+    onClick: function onClick() {
+      return setIsEditURLModalOpen(true);
+    }
+  }, t("neetoMolecules.shareViaLink.editUrl.title")))), /*#__PURE__*/React.createElement(RegenerateURL, {
     handleRegenerate: handleRegenerate,
+    isLoading: isLoading,
     isOpen: isRegenerateURLModalOpen,
-    isRegenerating: isRegenerating,
     url: url,
     onClose: function onClose() {
       return setIsRegenerateURLModalOpen(false);
     }
+  }), /*#__PURE__*/React.createElement(EditURL, {
+    editUrlProps: editUrlProps,
+    handleEdit: handleEdit,
+    isLoading: isLoading,
+    isOpen: isEditURLModalOpen,
+    url: url,
+    onClose: function onClose() {
+      return setIsEditURLModalOpen(false);
+    }
   }))));
 };
 
-var facebookShareLink = function facebookShareLink(_ref) {
-  var id = _ref.id;
-  return buildUrl("https://www.facebook.com/sharer/sharer.php", {
-    u: "https://".concat(window.location.host, "/").concat(id)
-  });
-};
-var linkedInShareLink = function linkedInShareLink(_ref2) {
-  var id = _ref2.id,
-    title = _ref2.title;
-  return buildUrl("https://www.linkedin.com/shareArticle", {
-    mini: true,
-    url: "https://".concat(window.location.host, "/").concat(id),
-    title: title
-  });
-};
-var twitterShareLink = function twitterShareLink(_ref3) {
-  var id = _ref3.id,
-    title = _ref3.title;
-  return buildUrl("http://twitter.com/share", {
-    text: title,
-    url: "https://".concat(window.location.host, "/").concat(id)
-  });
-};
-var downloadCanvas = function downloadCanvas(canvas) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var _options$name = options.name,
-    name = _options$name === void 0 ? "image" : _options$name,
-    _options$extension = options.extension,
-    extension = _options$extension === void 0 ? "png" : _options$extension;
-  var canvasUrl = canvas.toDataURL("image/".concat(extension));
-  var element = document.createElement("a");
-  element.href = canvasUrl;
-  element.download = "".concat(name, ".").concat(extension);
-  element.click();
-  element.remove();
-};
-
-var SOCIAL_MEDIA_OPTIONS = {
-  FACEBOOK: {
-    label: t("neetoMolecules.shareViaLink.socialMediaShare.facebook"),
-    icon: Facebook,
-    generateShareUrl: facebookShareLink
-  },
-  LINKEDIN: {
-    label: t("neetoMolecules.shareViaLink.socialMediaShare.linkedIn"),
-    icon: Linkedin,
-    generateShareUrl: linkedInShareLink
-  },
-  TWITTER: {
-    label: t("neetoMolecules.shareViaLink.socialMediaShare.twitter"),
-    icon: Twitter,
-    generateShareUrl: twitterShareLink
-  }
-};
-
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -1135,11 +1240,11 @@ var QRCodeModal = function QRCodeModal(_ref) {
     value: url
   })), /*#__PURE__*/React.createElement(Modal.Footer, {
     className: "space-x-2"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button$1, {
     "data-testid": "qr-code-download-button",
     label: t("neetoMolecules.shareViaLink.socialMediaShare.qrCodeDownload"),
     onClick: handleDownload
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(Button$1, {
     label: t("neetoMolecules.common.actions.cancel"),
     style: "text",
     onClick: onClose
@@ -1209,12 +1314,22 @@ var SocialMedia = function SocialMedia(_ref) {
 };
 
 var ShareViaLink = function ShareViaLink(_ref) {
-  var _ref$isRegenerating = _ref.isRegenerating,
-    isRegenerating = _ref$isRegenerating === void 0 ? false : _ref$isRegenerating,
-    _ref$enableRegenerate = _ref.enableRegenerateUrl,
-    enableRegenerateUrl = _ref$enableRegenerate === void 0 ? false : _ref$enableRegenerate,
+  var _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$enabledOptions = _ref.enabledOptions,
+    enabledOptions = _ref$enabledOptions === void 0 ? {
+      regenerate: false,
+      edit: false
+    } : _ref$enabledOptions,
+    _ref$editUrlProps = _ref.editUrlProps,
+    editUrlProps = _ref$editUrlProps === void 0 ? {
+      prefix: "",
+      editablePath: ""
+    } : _ref$editUrlProps,
     entity = _ref.entity,
     entityName = _ref.entityName,
+    _ref$handleEdit = _ref.handleEdit,
+    handleEdit = _ref$handleEdit === void 0 ? noop : _ref$handleEdit,
     _ref$handleRegenerate = _ref.handleRegenerate,
     handleRegenerate = _ref$handleRegenerate === void 0 ? noop : _ref$handleRegenerate,
     _ref$previewUrl = _ref.previewUrl,
@@ -1225,10 +1340,12 @@ var ShareViaLink = function ShareViaLink(_ref) {
     className: "neeto-ui-border-gray-400 neeto-ui-shadow-xs neeto-ui-rounded-lg neeto-ui-bg-white col-span-2 space-y-4 border p-8",
     "data-testid": "share-via-link"
   }, /*#__PURE__*/React.createElement(Link, {
-    enableRegenerateUrl: enableRegenerateUrl,
+    editUrlProps: editUrlProps,
+    enabledOptions: enabledOptions,
     entityName: entityName,
+    handleEdit: handleEdit,
     handleRegenerate: handleRegenerate,
-    isRegenerating: isRegenerating,
+    isLoading: isLoading,
     previewUrl: previewUrl,
     url: url
   }), /*#__PURE__*/React.createElement(SocialMedia, {