@bigbinary/neeto-molecules 1.1.6 → 1.1.8

package/dist/ShareViaLink.js

@@ -1,11 +1,12 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { slugify, noop } from '@bigbinary/neeto-commons-frontend/pure';
-import { Facebook, Linkedin, Twitter, ExternalLink, MenuHorizontal } from '@bigbinary/neeto-icons';
+import { MenuVertical, MenuHorizontal, Facebook, Linkedin, Twitter, ExternalLink } from '@bigbinary/neeto-icons';
 import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
-import { Modal, Typography, Input as Input$1, Button as Button$1, Dropdown } from '@bigbinary/neetoui';
+import { Dropdown, Tooltip, Button, Modal, Typography, Input as Input$1 } from '@bigbinary/neetoui';
 import { useTranslation, Trans } from 'react-i18next';
+import { mergeRight } from 'ramda';
 import { Formik, Form } from 'formik';
-import { Input, Button } from '@bigbinary/neetoui/formik';
+import { Input, Button as Button$1 } from '@bigbinary/neetoui/formik';
 import { t as t$1 } from 'i18next';
 import * as yup from 'yup';
 import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
@@ -65,6 +66,161 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+var MENU_ITEM_TYPES = {
+  menuItem: "menuItem",
+  divider: "divider"
+};
+var DEFAULT_TOOLTIP_PROPS = {
+  disabled: true,
+  position: "bottom"
+};
+
+var _excluded = ["key", "onClick", "label", "type", "isVisible"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Menu = Dropdown.Menu,
+  MenuItem = Dropdown.MenuItem,
+  Divider = Dropdown.Divider;
+var MoreDropdown = function MoreDropdown(_ref) {
+  var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
+    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
+    _ref$isVertical = _ref.isVertical,
+    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
+    menuTopChildren = _ref.menuTopChildren,
+    menuBottomChildren = _ref.menuBottomChildren,
+    _ref$menuItems = _ref.menuItems,
+    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems;
+  var tooltipProps = mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
+  var targetIcon = isVertical ? MenuVertical : MenuHorizontal;
+  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
+  if (isDropdownDisabled && !tooltipProps.disabled) {
+    return /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, _extends({
+      disabled: true,
+      "data-testid": "nui-dropdown-button",
+      icon: targetIcon,
+      iconPosition: "right",
+      size: "medium",
+      style: "text"
+    }, dropdownButtonProps))));
+  }
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+    autoWidth: true,
+    className: "flex",
+    disabled: isDisabled,
+    icon: targetIcon,
+    buttonProps: _objectSpread({
+      className: "min-h-0 flex-shrink-0",
+      style: "text"
+    }, dropdownButtonProps)
+  }, dropdownProps), /*#__PURE__*/React.createElement(Menu, null, menuTopChildren, menuItems.map(function (_ref2) {
+    var key = _ref2.key,
+      onClick = _ref2.onClick,
+      label = _ref2.label,
+      _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? MENU_ITEM_TYPES.menuItem : _ref2$type,
+      _ref2$isVisible = _ref2.isVisible,
+      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
+      menuItemProps = _objectWithoutProperties(_ref2, _excluded);
+    if (!isVisible) return null;
+    return type === MENU_ITEM_TYPES.menuItem ? /*#__PURE__*/React.createElement(MenuItem.Button, _extends({
+      key: key
+    }, _objectSpread({
+      onClick: onClick
+    }, menuItemProps)), label) : /*#__PURE__*/React.createElement(Divider, {
+      key: key
+    });
+  }), menuBottomChildren));
+};
+
 var facebookShareLink = function facebookShareLink(_ref) {
   var id = _ref.id;
   return buildUrl("https://www.facebook.com/sharer/sharer.php", {
@@ -187,13 +343,13 @@ var EditURL = function EditURL(_ref) {
       style: "body2"
     }, t("neetoMolecules.shareViaLink.editUrl.description"))), /*#__PURE__*/React.createElement(Modal.Footer, {
       className: "space-x-2"
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Button$1, {
       "data-testid": "edit-url-confirm-button",
       disabled: isSubmitting || !dirty,
       loading: isLoading,
       type: "submit",
       label: t("neetoMolecules.shareViaLink.editUrl.submitButtonLabel")
-    }), /*#__PURE__*/React.createElement(Button, {
+    }), /*#__PURE__*/React.createElement(Button$1, {
       "data-testid": "edit-url-cancel-button",
       disabled: isSubmitting,
       style: "text",
@@ -232,7 +388,7 @@ var RegenerateURL = function RegenerateURL(_ref) {
     style: "body2"
   }, t("neetoMolecules.shareViaLink.regenerateUrl.description")))), /*#__PURE__*/React.createElement(Modal.Footer, {
     className: "space-x-2"
-  }, /*#__PURE__*/React.createElement(Button$1, {
+  }, /*#__PURE__*/React.createElement(Button, {
     "data-testid": "regenerate-url-confirm-button",
     loading: isLoading,
     label: t("neetoMolecules.shareViaLink.regenerateUrl.submitButtonLabel"),
@@ -240,7 +396,7 @@ var RegenerateURL = function RegenerateURL(_ref) {
       handleRegenerate();
       onClose();
     }
-  }), /*#__PURE__*/React.createElement(Button$1, {
+  }), /*#__PURE__*/React.createElement(Button, {
     "data-testid": "regenerate-url-cancel-button",
     style: "text",
     label: t("neetoMolecules.shareViaLink.regenerateUrl.cancelButtonLabel"),
@@ -248,8 +404,6 @@ var RegenerateURL = function RegenerateURL(_ref) {
   })));
 };
 
-var Menu = Dropdown.Menu,
-  MenuItem = Dropdown.MenuItem;
 var Link = function Link(_ref) {
   var editUrlProps = _ref.editUrlProps,
     enabledOptions = _ref.enabledOptions,
@@ -296,7 +450,7 @@ var Link = function Link(_ref) {
     "data-testid": "link-copy-button",
     label: t("neetoMolecules.shareViaLink.copyLink"),
     value: url
-  }), /*#__PURE__*/React.createElement(Button$1, {
+  }), /*#__PURE__*/React.createElement(Button, {
     "data-testid": "preview-button",
     href: previewUrl || url,
     icon: ExternalLink,
@@ -308,21 +462,25 @@ var Link = function Link(_ref) {
       }),
       position: "top"
     }
-  }), isDropdownEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
-    buttonStyle: "text",
-    icon: MenuHorizontal
-  }, /*#__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")), 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, {
+  }), isDropdownEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MoreDropdown, {
+    menuItems: [{
+      isVisible: enabledOptions.regenerate,
+      "data-testid": "regenerate-url-button",
+      onClick: function onClick() {
+        return setIsRegenerateURLModalOpen(true);
+      },
+      label: t("neetoMolecules.shareViaLink.regenerateUrl.title"),
+      key: "regenerate-url-option"
+    }, {
+      isVisible: enabledOptions.edit,
+      "data-testid": "edit-url-button",
+      onClick: function onClick() {
+        return setIsEditURLModalOpen(true);
+      },
+      label: t("neetoMolecules.shareViaLink.editUrl.title"),
+      key: "edit-url-option"
+    }]
+  }), /*#__PURE__*/React.createElement(RegenerateURL, {
     handleRegenerate: handleRegenerate,
     isLoading: isLoading,
     url: url,
@@ -1223,7 +1381,7 @@ var QRCode = function QRCode(_ref) {
   }, /*#__PURE__*/React.createElement(Trans, {
     i18nKey: "neetoMolecules.shareViaLink.socialMediaShare.qrCodeInfo",
     components: {
-      button: /*#__PURE__*/React.createElement(Button$1, {
+      button: /*#__PURE__*/React.createElement(Button, {
         "data-testid": "qr-code-download-button",
         style: "link",
         onClick: handleDownload