@bigbinary/neeto-molecules 4.0.58 → 4.0.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/FloatingActionMenu.js +160 -47
- package/dist/FloatingActionMenu.js.map +1 -1
- package/dist/ProductEmbed.js +94 -58
- package/dist/ProductEmbed.js.map +1 -1
- package/dist/cjs/FloatingActionMenu.js +157 -44
- package/dist/cjs/FloatingActionMenu.js.map +1 -1
- package/dist/cjs/ProductEmbed.js +92 -56
- package/dist/cjs/ProductEmbed.js.map +1 -1
- package/package.json +1 -1
- package/types/ProductEmbed.d.ts +40 -18
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
2
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
3
|
-
import { memo, useState, useRef, useEffect, forwardRef } from 'react';
|
|
3
|
+
import { memo, useState, useRef, useEffect, useMemo, forwardRef } from 'react';
|
|
4
4
|
import { globalProps as globalProps$1 } from '@bigbinary/neeto-commons-frontend/initializers';
|
|
5
5
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
6
6
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
7
|
-
import { isNotPresent, isPresent, truncate,
|
|
7
|
+
import { isNotEmpty, isNotPresent, isPresent, truncate, humanize, noop } from '@bigbinary/neeto-cist';
|
|
8
8
|
import useHotkeys from '@bigbinary/neeto-hotkeys';
|
|
9
9
|
import Help from '@bigbinary/neeto-icons/Help';
|
|
10
10
|
import Profile from '@bigbinary/neeto-team-members-frontend/Profile';
|
|
11
11
|
import Avatar from '@bigbinary/neetoui/Avatar';
|
|
12
12
|
import Dropdown$1 from '@bigbinary/neetoui/Dropdown';
|
|
13
|
-
import { toLower, omit, mergeDeepLeft, not } from 'ramda';
|
|
13
|
+
import { isEmpty, toLower, omit, mergeDeepLeft, not } from 'ramda';
|
|
14
14
|
import KeyboardShortcuts from './KeyboardShortcuts.js';
|
|
15
15
|
import Modal$1 from '@bigbinary/neetoui/Modal';
|
|
16
16
|
import classnames from 'classnames';
|
|
@@ -19,12 +19,12 @@ import Input from '@bigbinary/neetoui/Input';
|
|
|
19
19
|
import Typography from '@bigbinary/neetoui/Typography';
|
|
20
20
|
import { useTranslation, Trans } from 'react-i18next';
|
|
21
21
|
import Spinner from '@bigbinary/neetoui/Spinner';
|
|
22
|
-
import { useQuery } from '@tanstack/react-query';
|
|
23
|
-
import axios from 'axios';
|
|
24
22
|
import Neeto from '@bigbinary/neeto-icons/typeface-logos/Neeto';
|
|
25
23
|
import * as AppIcons from '@bigbinary/neeto-icons/typeface-logos';
|
|
26
24
|
import { n } from './inject-css-C2dztUxs.js';
|
|
27
25
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
26
|
+
import { useQuery } from '@tanstack/react-query';
|
|
27
|
+
import axios from 'axios';
|
|
28
28
|
import { t } from 'i18next';
|
|
29
29
|
import Book from '@bigbinary/neeto-icons/Book';
|
|
30
30
|
import Community from '@bigbinary/neeto-icons/Community';
|
|
@@ -49,44 +49,32 @@ import '@bigbinary/neetoui/managers';
|
|
|
49
49
|
import '@bigbinary/neetoui/Kbd';
|
|
50
50
|
import './ua-parser-rRwDJPFB.js';
|
|
51
51
|
|
|
52
|
-
var
|
|
53
|
-
return axios.get("/api/v1/neeto_apps");
|
|
54
|
-
};
|
|
55
|
-
var neetoAppsApi = {
|
|
56
|
-
fetch: fetch$1
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
var QUERY_KEYS$1 = {
|
|
60
|
-
NEETO_APPS_LIST: "neeto-apps-list"
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
64
|
-
function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
65
|
-
var useFetchNeetoApps = function useFetchNeetoApps(options) {
|
|
66
|
-
return useQuery(_objectSpread$5({
|
|
67
|
-
queryKey: [QUERY_KEYS$1.NEETO_APPS_LIST],
|
|
68
|
-
queryFn: neetoAppsApi.fetch
|
|
69
|
-
}, options));
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
var css$1 = ".neeto-molecules-product-switcher__wrapper{align-items:flex-start;background-color:rgb(var(--neeto-ui-white));display:flex;flex-direction:column;justify-content:flex-start;max-width:100%;overflow-y:auto;padding:24px;position:relative;transition:all .3s;width:100%}@media screen and (max-width:768px){.neeto-molecules-product-switcher__wrapper{padding:16px}}.neeto-molecules-product-switcher__grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}@media only screen and (max-width:992px){.neeto-molecules-product-switcher__grid{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}}@media only screen and (max-width:640px){.neeto-molecules-product-switcher__grid{grid-template-columns:repeat(auto-fill,minmax(100%,1fr))}}.neeto-molecules-product-switcher__header{align-items:center;display:flex;gap:32px;justify-content:space-between;margin-bottom:32px;position:relative;width:100%}@media only screen and (max-width:768px){.neeto-molecules-product-switcher__header{align-items:flex-start;flex-direction:column;gap:24px}}@media only screen and (max-width:640px){.neeto-molecules-product-switcher__header h1{font-size:24px}}@media only screen and (max-width:768px){.neeto-molecules-product-switcher_modal-container .neeto-molecules-product-switcher__header-mobile{align-items:flex-start;margin-bottom:24px}}.neeto-molecules-product-switcher_modal-container .neeto-molecules-product-switcher__wrapper{padding:0}.neeto-molecules-product-switcher__close-btn{position:absolute;right:12px;top:12px}.neeto-molecules-product-switcher__search-wrapper{flex-grow:1}@media only screen and (min-width:992px){.neeto-molecules-product-switcher__search-wrapper{flex-grow:0;width:296px}}.neeto-molecules-product-switcher__body{display:flex;flex-direction:column;font-size:var(--neeto-ui-text-sm);gap:12px;margin-bottom:24px;width:100%}.neeto-molecules-product-switcher-link{background-color:rgb(var(--neeto-ui-white));border-color:rgb(var(--neeto-ui-gray-200));border-radius:var(--neeto-ui-rounded-lg);border-style:solid;border-width:1px;cursor:pointer;display:flex;flex-direction:column;gap:16px;max-width:100%;padding:10px 8px;text-decoration:none;transition:all .3s ease-in-out;width:100%}.neeto-molecules-product-switcher-link:focus,.neeto-molecules-product-switcher-link:focus-visible{outline:none}.neeto-molecules-product-switcher-link:focus-visible{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-molecules-product-switcher-link:not(.neeto-molecules-product-switcher-link--active):hover{border-color:rgb(var(--neeto-ui-primary-500))}.neeto-molecules-product-switcher-link--active{background-color:rgb(var(--neeto-ui-primary-50));border-color:rgb(var(--neeto-ui-primary-500))}.neeto-molecules-product-switcher-link__icon-holder{flex-grow:1;flex-shrink:0}.neeto-molecules-product-switcher-link__icon-holder svg{height:36px;width:auto}.neeto-molecules-product-switcher-link__icon-holder .neeto-molecules-product-switcher-link__icon-default{height:24px}.neeto-molecules-product-switcher-link__content{flex-shrink:0}.neeto-molecules-product-switcher-link__content span{display:block}.neeto-molecules-product-switcher_modal{z-index:100000}.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper--fullscreen{display:flex;flex-direction:column;height:100dvh!important;width:100vw!important}.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper--fullscreen .neeto-ui-modal__header{flex-shrink:0}.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper--fullscreen .neeto-ui-modal__body{--neeto-ui-modal-body-padding-top:24px;flex-grow:1;min-height:0;overflow-y:auto}.neeto-ui-theme--dark .neeto-molecules-product-switcher__wrapper [data-dark-mode-color=true]{fill:rgb(var(--neeto-ui-black))}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal{--neeto-molecules-product-switcher-modal-padding-y:24px;align-items:flex-start;padding-bottom:var(--neeto-molecules-product-switcher-modal-padding-y);padding-top:var(--neeto-molecules-product-switcher-modal-padding-y)}@media only screen and (min-width:1024px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal{--neeto-molecules-product-switcher-modal-padding-y:40px}}@media only screen and (min-width:1536px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal{--neeto-molecules-product-switcher-modal-padding-y:80px}}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large{--neeto-ui-modal-body-padding-top:24px;--neeto-ui-modal-body-padding-bottom:24px;--neeto-ui-modal-close-btn-top:12px;--neeto-ui-modal-close-btn-right:12px;--neeto-ui-modal-body-padding-x:0;--neeto-ui-text-h1:24px}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher-link__icon-holder svg{height:32px}@media only screen and (min-width:1024px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large{--neeto-ui-modal-wrapper-width:960px}}@media only screen and (min-width:1280px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large{--neeto-ui-modal-wrapper-width:1024px}}@media only screen and (min-width:1536px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large{--neeto-ui-modal-wrapper-width:1280px}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher-link__icon-holder svg{height:36px}}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher__header{background-color:rgb(var(--neeto-ui-white));margin-bottom:32px;padding-left:24px;padding-right:56px}@media only screen and (max-width:768px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher__header{gap:16px;margin-bottom:16px}}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher__body{height:calc(100vh - var(--neeto-molecules-product-switcher-modal-padding-y) - 164px);margin-bottom:0;overflow-y:auto;padding-left:24px;padding-right:24px}@media only screen and (max-width:768px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher__body{height:calc(90vh - var(--neeto-molecules-product-switcher-modal-padding-y) - 164px)}}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-ui-modal__close{z-index:2}";
|
|
52
|
+
var css$1 = ".neeto-molecules-product-switcher__wrapper{align-items:flex-start;background-color:rgb(var(--neeto-ui-white));display:flex;flex-direction:column;justify-content:flex-start;max-width:100%;overflow-y:auto;padding:24px;position:relative;transition:all .3s;width:100%}@media screen and (max-width:768px){.neeto-molecules-product-switcher__wrapper{padding:16px}}.neeto-molecules-product-switcher__grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}@media only screen and (max-width:992px){.neeto-molecules-product-switcher__grid{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}}@media only screen and (max-width:640px){.neeto-molecules-product-switcher__grid{grid-template-columns:repeat(auto-fill,minmax(100%,1fr))}}.neeto-molecules-product-switcher__header{align-items:center;display:flex;gap:32px;justify-content:space-between;margin-bottom:32px;position:relative;width:100%}@media only screen and (max-width:768px){.neeto-molecules-product-switcher__header{align-items:flex-start;flex-direction:column;gap:24px}}@media only screen and (max-width:640px){.neeto-molecules-product-switcher__header h1{font-size:24px}}@media only screen and (max-width:768px){.neeto-molecules-product-switcher_modal-container .neeto-molecules-product-switcher__header-mobile{align-items:flex-start;margin-bottom:24px}}.neeto-molecules-product-switcher_modal-container .neeto-molecules-product-switcher__wrapper{padding:0}.neeto-molecules-product-switcher__close-btn{position:absolute;right:12px;top:12px}.neeto-molecules-product-switcher__search-wrapper{flex-grow:1}@media only screen and (min-width:992px){.neeto-molecules-product-switcher__search-wrapper{flex-grow:0;width:296px}}.neeto-molecules-product-switcher__body{display:flex;flex-direction:column;font-size:var(--neeto-ui-text-sm);gap:12px;margin-bottom:24px;width:100%}.neeto-molecules-product-switcher-link{background-color:rgb(var(--neeto-ui-white));border-color:rgb(var(--neeto-ui-gray-200));border-radius:var(--neeto-ui-rounded-lg);border-style:solid;border-width:1px;cursor:pointer;display:flex;flex-direction:column;gap:16px;max-width:100%;padding:10px 8px;text-decoration:none;transition:all .3s ease-in-out;width:100%}.neeto-molecules-product-switcher-link:focus,.neeto-molecules-product-switcher-link:focus-visible{outline:none}.neeto-molecules-product-switcher-link:focus-visible{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-molecules-product-switcher-link:not(.neeto-molecules-product-switcher-link--active):hover{border-color:rgb(var(--neeto-ui-primary-500))}.neeto-molecules-product-switcher-link--active{background-color:rgb(var(--neeto-ui-primary-50));border-color:rgb(var(--neeto-ui-primary-500))}.neeto-molecules-product-switcher-link--highlighted{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-molecules-product-switcher-link__icon-holder{flex-grow:1;flex-shrink:0}.neeto-molecules-product-switcher-link__icon-holder svg{height:36px;width:auto}.neeto-molecules-product-switcher-link__icon-holder .neeto-molecules-product-switcher-link__icon-default{height:24px}.neeto-molecules-product-switcher-link__content{flex-shrink:0}.neeto-molecules-product-switcher-link__content span{display:block}.neeto-molecules-product-switcher_modal{z-index:100000}.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper--fullscreen{display:flex;flex-direction:column;height:100dvh!important;width:100vw!important}.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper--fullscreen .neeto-ui-modal__header{flex-shrink:0}.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper--fullscreen .neeto-ui-modal__body{--neeto-ui-modal-body-padding-top:24px;flex-grow:1;min-height:0;overflow-y:auto}.neeto-ui-theme--dark .neeto-molecules-product-switcher__wrapper [data-dark-mode-color=true]{fill:rgb(var(--neeto-ui-black))}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal{--neeto-molecules-product-switcher-modal-padding-y:24px;align-items:flex-start;padding-bottom:var(--neeto-molecules-product-switcher-modal-padding-y);padding-top:var(--neeto-molecules-product-switcher-modal-padding-y)}@media only screen and (min-width:1024px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal{--neeto-molecules-product-switcher-modal-padding-y:40px}}@media only screen and (min-width:1536px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal{--neeto-molecules-product-switcher-modal-padding-y:80px}}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large{--neeto-ui-modal-body-padding-top:24px;--neeto-ui-modal-body-padding-bottom:24px;--neeto-ui-modal-close-btn-top:12px;--neeto-ui-modal-close-btn-right:12px;--neeto-ui-modal-body-padding-x:0;--neeto-ui-text-h1:24px}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher-link__icon-holder svg{height:32px}@media only screen and (min-width:1024px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large{--neeto-ui-modal-wrapper-width:960px}}@media only screen and (min-width:1280px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large{--neeto-ui-modal-wrapper-width:1024px}}@media only screen and (min-width:1536px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large{--neeto-ui-modal-wrapper-width:1280px}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher-link__icon-holder svg{height:36px}}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher__header{background-color:rgb(var(--neeto-ui-white));margin-bottom:32px;padding-left:24px;padding-right:56px}@media only screen and (max-width:768px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher__header{gap:16px;margin-bottom:16px}}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher__body{height:calc(100dvh - var(--neeto-molecules-product-switcher-modal-padding-y)*2 - 124px);margin-bottom:0;overflow-y:auto;padding-left:24px;padding-right:24px}@media only screen and (max-width:768px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher__body{height:calc(90dvh - var(--neeto-molecules-product-switcher-modal-padding-y)*2 - 124px)}}.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-ui-modal__close{z-index:2}@media only screen and (min-width:1280px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher__search-wrapper{width:420px}}@media only screen and (min-width:1536px){.neeto-ui-modal__backdrop.neeto-molecules-product-switcher_modal .neeto-ui-modal__wrapper.neeto-ui-modal__wrapper--large .neeto-molecules-product-switcher__search-wrapper{width:500px}}";
|
|
73
53
|
n(css$1,{});
|
|
74
54
|
|
|
55
|
+
var _excluded$2 = ["name", "description", "url", "isHighlighted"];
|
|
56
|
+
function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
57
|
+
function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
75
58
|
var ProductLink = function ProductLink(_ref) {
|
|
76
59
|
var name = _ref.name,
|
|
77
60
|
description = _ref.description,
|
|
78
|
-
url = _ref.url
|
|
61
|
+
url = _ref.url,
|
|
62
|
+
_ref$isHighlighted = _ref.isHighlighted,
|
|
63
|
+
isHighlighted = _ref$isHighlighted === void 0 ? false : _ref$isHighlighted,
|
|
64
|
+
props = _objectWithoutProperties(_ref, _excluded$2);
|
|
79
65
|
var appName = "Neeto".concat(name.charAt(0)).concat(name.slice(1).toLowerCase());
|
|
80
66
|
var AppIcon = AppIcons[appName];
|
|
81
|
-
return /*#__PURE__*/jsxs("a", {
|
|
67
|
+
return /*#__PURE__*/jsxs("a", _objectSpread$6(_objectSpread$6({
|
|
82
68
|
"data-cy": "".concat(name, "-app-link"),
|
|
83
|
-
"data-
|
|
69
|
+
"data-testid": "neetoapp-link-".concat(name),
|
|
84
70
|
href: url,
|
|
85
71
|
rel: "noreferrer",
|
|
86
72
|
target: "_blank",
|
|
87
73
|
className: classnames("neeto-molecules-product-switcher-link", {
|
|
88
|
-
"neeto-molecules-product-switcher-link--active": globalProps.appName.includes(name)
|
|
89
|
-
|
|
74
|
+
"neeto-molecules-product-switcher-link--active": globalProps.appName.includes(name),
|
|
75
|
+
"neeto-molecules-product-switcher-link--highlighted": isHighlighted
|
|
76
|
+
})
|
|
77
|
+
}, props), {}, {
|
|
90
78
|
children: [/*#__PURE__*/jsx("div", {
|
|
91
79
|
className: "neeto-molecules-product-switcher-link__icon-holder",
|
|
92
80
|
children: AppIcon ? /*#__PURE__*/jsx(AppIcon, {}) : /*#__PURE__*/jsx(Neeto, {
|
|
@@ -102,24 +90,18 @@ var ProductLink = function ProductLink(_ref) {
|
|
|
102
90
|
children: description
|
|
103
91
|
})
|
|
104
92
|
})]
|
|
105
|
-
});
|
|
93
|
+
}));
|
|
106
94
|
};
|
|
107
95
|
var ProductLink$1 = /*#__PURE__*/memo(ProductLink);
|
|
108
96
|
|
|
109
|
-
function ownKeys$
|
|
110
|
-
function _objectSpread$
|
|
97
|
+
function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
98
|
+
function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
111
99
|
var Content = function Content(_ref) {
|
|
112
|
-
var
|
|
100
|
+
var highlightedIndex = _ref.highlightedIndex,
|
|
101
|
+
filteredApps = _ref.filteredApps,
|
|
102
|
+
isLoading = _ref.isLoading;
|
|
113
103
|
var _useTranslation = useTranslation(),
|
|
114
104
|
t = _useTranslation.t;
|
|
115
|
-
var _useFetchNeetoApps = useFetchNeetoApps(),
|
|
116
|
-
data = _useFetchNeetoApps.data,
|
|
117
|
-
isLoading = _useFetchNeetoApps.isLoading;
|
|
118
|
-
var substring = searchTerm.replace(/ /g, "").toLowerCase();
|
|
119
|
-
var filteredApps = data === null || data === void 0 ? void 0 : data.neetoApps.filter(function (_ref2) {
|
|
120
|
-
var name = _ref2.name;
|
|
121
|
-
return name.toLowerCase().includes(substring);
|
|
122
|
-
});
|
|
123
105
|
if (isLoading) {
|
|
124
106
|
return /*#__PURE__*/jsx("div", {
|
|
125
107
|
className: "flex items-center justify-center py-8",
|
|
@@ -128,8 +110,11 @@ var Content = function Content(_ref) {
|
|
|
128
110
|
}
|
|
129
111
|
return (filteredApps === null || filteredApps === void 0 ? void 0 : filteredApps.length) > 0 ? /*#__PURE__*/jsx("div", {
|
|
130
112
|
className: "neeto-molecules-product-switcher__grid",
|
|
131
|
-
children: filteredApps.map(function (app) {
|
|
132
|
-
return /*#__PURE__*/jsx(ProductLink$1, _objectSpread$
|
|
113
|
+
children: filteredApps.map(function (app, index) {
|
|
114
|
+
return /*#__PURE__*/jsx(ProductLink$1, _objectSpread$5(_objectSpread$5({}, app), {}, {
|
|
115
|
+
"data-highlighted-index": index,
|
|
116
|
+
isHighlighted: index === highlightedIndex
|
|
117
|
+
}), app.name);
|
|
133
118
|
})
|
|
134
119
|
}) : /*#__PURE__*/jsx(Typography, {
|
|
135
120
|
className: "neeto-ui-text-center",
|
|
@@ -139,6 +124,115 @@ var Content = function Content(_ref) {
|
|
|
139
124
|
});
|
|
140
125
|
};
|
|
141
126
|
|
|
127
|
+
var fetch$1 = function fetch() {
|
|
128
|
+
return axios.get("/api/v1/neeto_apps");
|
|
129
|
+
};
|
|
130
|
+
var neetoAppsApi = {
|
|
131
|
+
fetch: fetch$1
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
var QUERY_KEYS$1 = {
|
|
135
|
+
NEETO_APPS_LIST: "neeto-apps-list"
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
139
|
+
function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
140
|
+
var useFetchNeetoApps = function useFetchNeetoApps(options) {
|
|
141
|
+
return useQuery(_objectSpread$4({
|
|
142
|
+
queryKey: [QUERY_KEYS$1.NEETO_APPS_LIST],
|
|
143
|
+
queryFn: neetoAppsApi.fetch
|
|
144
|
+
}, options));
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
var useProductSwitcherNavigation = function useProductSwitcherNavigation() {
|
|
148
|
+
var filteredApps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
149
|
+
var _useState = useState(0),
|
|
150
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
151
|
+
highlightedIndex = _useState2[0],
|
|
152
|
+
setHighlightedIndex = _useState2[1];
|
|
153
|
+
var scrollContainerRef = useRef(null);
|
|
154
|
+
useEffect(function () {
|
|
155
|
+
return setHighlightedIndex(0);
|
|
156
|
+
}, [filteredApps]);
|
|
157
|
+
useEffect(function () {
|
|
158
|
+
if (!scrollContainerRef.current || isEmpty(filteredApps)) return;
|
|
159
|
+
var container = scrollContainerRef.current;
|
|
160
|
+
var highlightedElement = container.querySelector("[data-highlighted-index=\"".concat(highlightedIndex, "\"]"));
|
|
161
|
+
if (!highlightedElement) return;
|
|
162
|
+
var containerRect = container.getBoundingClientRect();
|
|
163
|
+
var elRect = highlightedElement.getBoundingClientRect();
|
|
164
|
+
if (elRect.top < containerRect.top) {
|
|
165
|
+
container.scrollTop += elRect.top - containerRect.top;
|
|
166
|
+
} else if (elRect.bottom > containerRect.bottom) {
|
|
167
|
+
container.scrollTop += elRect.bottom - containerRect.bottom;
|
|
168
|
+
}
|
|
169
|
+
}, [highlightedIndex, filteredApps]);
|
|
170
|
+
var getColumnsPerRow = function getColumnsPerRow() {
|
|
171
|
+
var width = window.innerWidth;
|
|
172
|
+
if (width < 768) return 1;
|
|
173
|
+
if (width < 1024) return 2;
|
|
174
|
+
if (width < 1536) return 3;
|
|
175
|
+
return 4;
|
|
176
|
+
};
|
|
177
|
+
var handleOpenHighlightedApp = function handleOpenHighlightedApp() {
|
|
178
|
+
var app = filteredApps[highlightedIndex];
|
|
179
|
+
if (!(app !== null && app !== void 0 && app.url)) return;
|
|
180
|
+
window.open(app.url, "_blank", "noopener,noreferrer");
|
|
181
|
+
};
|
|
182
|
+
var navigationHandlers = {
|
|
183
|
+
left: function left(prev) {
|
|
184
|
+
return prev === 0 ? filteredApps.length - 1 : prev - 1;
|
|
185
|
+
},
|
|
186
|
+
right: function right(prev) {
|
|
187
|
+
return prev === filteredApps.length - 1 ? 0 : prev + 1;
|
|
188
|
+
},
|
|
189
|
+
up: function up(prev) {
|
|
190
|
+
var columnsPerRow = getColumnsPerRow();
|
|
191
|
+
var newIndex = prev - columnsPerRow;
|
|
192
|
+
if (newIndex >= 0) return newIndex;
|
|
193
|
+
var currentCol = prev % columnsPerRow;
|
|
194
|
+
var lastIndex = filteredApps.length - 1;
|
|
195
|
+
return lastIndex - (lastIndex - currentCol) % columnsPerRow;
|
|
196
|
+
},
|
|
197
|
+
down: function down(prev) {
|
|
198
|
+
var columnsPerRow = getColumnsPerRow();
|
|
199
|
+
var newIndex = prev + columnsPerRow;
|
|
200
|
+
if (newIndex < filteredApps.length) return newIndex;
|
|
201
|
+
return prev % columnsPerRow;
|
|
202
|
+
}
|
|
203
|
+
};
|
|
204
|
+
var keyActions = {
|
|
205
|
+
Enter: handleOpenHighlightedApp,
|
|
206
|
+
ArrowLeft: function ArrowLeft() {
|
|
207
|
+
return setHighlightedIndex(navigationHandlers["left"]);
|
|
208
|
+
},
|
|
209
|
+
ArrowRight: function ArrowRight() {
|
|
210
|
+
return setHighlightedIndex(navigationHandlers["right"]);
|
|
211
|
+
},
|
|
212
|
+
ArrowUp: function ArrowUp() {
|
|
213
|
+
return setHighlightedIndex(navigationHandlers["up"]);
|
|
214
|
+
},
|
|
215
|
+
ArrowDown: function ArrowDown() {
|
|
216
|
+
return setHighlightedIndex(navigationHandlers["down"]);
|
|
217
|
+
},
|
|
218
|
+
Tab: function Tab(e) {
|
|
219
|
+
return setHighlightedIndex(navigationHandlers[e.shiftKey ? "left" : "right"]);
|
|
220
|
+
}
|
|
221
|
+
};
|
|
222
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
223
|
+
var action = keyActions[e.key];
|
|
224
|
+
if (!action) return;
|
|
225
|
+
e.preventDefault();
|
|
226
|
+
e.stopPropagation();
|
|
227
|
+
if (isNotEmpty(filteredApps)) action(e);
|
|
228
|
+
};
|
|
229
|
+
return {
|
|
230
|
+
highlightedIndex: highlightedIndex,
|
|
231
|
+
handleKeyDown: handleKeyDown,
|
|
232
|
+
scrollContainerRef: scrollContainerRef
|
|
233
|
+
};
|
|
234
|
+
};
|
|
235
|
+
|
|
142
236
|
var Menu$3 = function Menu(_ref) {
|
|
143
237
|
var _ref$isMobile = _ref.isMobile,
|
|
144
238
|
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
|
|
@@ -149,6 +243,21 @@ var Menu$3 = function Menu(_ref) {
|
|
|
149
243
|
_useState2 = _slicedToArray(_useState, 2),
|
|
150
244
|
searchTerm = _useState2[0],
|
|
151
245
|
setSearchTerm = _useState2[1];
|
|
246
|
+
var _useFetchNeetoApps = useFetchNeetoApps(),
|
|
247
|
+
data = _useFetchNeetoApps.data,
|
|
248
|
+
isLoading = _useFetchNeetoApps.isLoading;
|
|
249
|
+
var substring = searchTerm.replace(/ /g, "").toLowerCase();
|
|
250
|
+
var filteredApps = useMemo(function () {
|
|
251
|
+
if (!data) return [];
|
|
252
|
+
return data === null || data === void 0 ? void 0 : data.neetoApps.filter(function (_ref2) {
|
|
253
|
+
var name = _ref2.name;
|
|
254
|
+
return name.toLowerCase().includes(substring);
|
|
255
|
+
});
|
|
256
|
+
}, [data, substring]);
|
|
257
|
+
var _useProductSwitcherNa = useProductSwitcherNavigation(filteredApps),
|
|
258
|
+
highlightedIndex = _useProductSwitcherNa.highlightedIndex,
|
|
259
|
+
handleKeyDown = _useProductSwitcherNa.handleKeyDown,
|
|
260
|
+
scrollContainerRef = _useProductSwitcherNa.scrollContainerRef;
|
|
152
261
|
return /*#__PURE__*/jsxs("div", {
|
|
153
262
|
className: "neeto-molecules-product-switcher__wrapper",
|
|
154
263
|
"data-cy": "switcher-wrapper",
|
|
@@ -174,13 +283,17 @@ var Menu$3 = function Menu(_ref) {
|
|
|
174
283
|
value: searchTerm,
|
|
175
284
|
onChange: function onChange(e) {
|
|
176
285
|
return setSearchTerm(e.target.value);
|
|
177
|
-
}
|
|
286
|
+
},
|
|
287
|
+
onKeyDown: handleKeyDown
|
|
178
288
|
})
|
|
179
289
|
})]
|
|
180
290
|
}), /*#__PURE__*/jsx("div", {
|
|
291
|
+
ref: scrollContainerRef,
|
|
181
292
|
className: classnames("neeto-molecules-product-switcher__body", _defineProperty({}, "neeto-molecules-product-switcher__body-mobile", isMobile)),
|
|
182
293
|
children: /*#__PURE__*/jsx(Content, {
|
|
183
|
-
|
|
294
|
+
filteredApps: filteredApps,
|
|
295
|
+
highlightedIndex: highlightedIndex,
|
|
296
|
+
isLoading: isLoading
|
|
184
297
|
})
|
|
185
298
|
})]
|
|
186
299
|
}, "switcher-wrapper");
|