@bigbinary/neeto-molecules 1.0.111 → 1.0.112
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/README.md +1 -0
- package/dist/NavigationHeader.cjs.js +615 -0
- package/dist/NavigationHeader.cjs.js.map +1 -0
- package/dist/NavigationHeader.js +609 -0
- package/dist/NavigationHeader.js.map +1 -0
- package/dist/PublishBlock.cjs.js +60 -25
- package/dist/PublishBlock.cjs.js.map +1 -1
- package/dist/PublishBlock.js +61 -26
- package/dist/PublishBlock.js.map +1 -1
- package/package.json +1 -1
- package/src/translations/en.json +5 -0
- package/types/NavigationHeader.d.ts +145 -0
package/README.md
CHANGED
|
@@ -30,6 +30,7 @@ https://neeto-molecules.neeto.com/
|
|
|
30
30
|
- [KeyboardShortcuts](./docs/components.md#keyboardshortcuts)
|
|
31
31
|
- [LoginPage](./docs/components.md#loginpage)
|
|
32
32
|
- [NeetoWidget](./docs/components.md#neetowidget)
|
|
33
|
+
- [NavigationHeader](./docs/components.md#NavigationHeader)
|
|
33
34
|
- [PublishBlock](./docs/components.md#publishblock)
|
|
34
35
|
- [Schedule](./docs/components.md#schedule)
|
|
35
36
|
- [ShareViaEmail](./docs/components.md#shareviaemail)
|
|
@@ -0,0 +1,615 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var pure = require('@bigbinary/neeto-commons-frontend/pure');
|
|
5
|
+
var neetoui = require('@bigbinary/neetoui');
|
|
6
|
+
var ramda = require('ramda');
|
|
7
|
+
var reactRouterDom = require('react-router-dom');
|
|
8
|
+
var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
|
|
9
|
+
var neetoIcons = require('@bigbinary/neeto-icons');
|
|
10
|
+
var reactI18next = require('react-i18next');
|
|
11
|
+
var i18next = require('i18next');
|
|
12
|
+
var utils = require('@bigbinary/neeto-commons-frontend/utils');
|
|
13
|
+
|
|
14
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
|
+
|
|
16
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
17
|
+
|
|
18
|
+
function _extends() {
|
|
19
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
20
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
21
|
+
var source = arguments[i];
|
|
22
|
+
for (var key in source) {
|
|
23
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
24
|
+
target[key] = source[key];
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
return target;
|
|
29
|
+
};
|
|
30
|
+
return _extends.apply(this, arguments);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function _arrayWithHoles(arr) {
|
|
34
|
+
if (Array.isArray(arr)) return arr;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function _iterableToArrayLimit(arr, i) {
|
|
38
|
+
var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
|
|
39
|
+
if (null != _i) {
|
|
40
|
+
var _s,
|
|
41
|
+
_e,
|
|
42
|
+
_x,
|
|
43
|
+
_r,
|
|
44
|
+
_arr = [],
|
|
45
|
+
_n = !0,
|
|
46
|
+
_d = !1;
|
|
47
|
+
try {
|
|
48
|
+
if (_x = (_i = _i.call(arr)).next, 0 === i) {
|
|
49
|
+
if (Object(_i) !== _i) return;
|
|
50
|
+
_n = !1;
|
|
51
|
+
} else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
|
|
52
|
+
} catch (err) {
|
|
53
|
+
_d = !0, _e = err;
|
|
54
|
+
} finally {
|
|
55
|
+
try {
|
|
56
|
+
if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
|
|
57
|
+
} finally {
|
|
58
|
+
if (_d) throw _e;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
return _arr;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function _arrayLikeToArray(arr, len) {
|
|
66
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
67
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
68
|
+
return arr2;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
72
|
+
if (!o) return;
|
|
73
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
74
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
75
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
76
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
|
77
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
function _nonIterableRest() {
|
|
81
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
function _slicedToArray(arr, i) {
|
|
85
|
+
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
var classnames = {exports: {}};
|
|
89
|
+
|
|
90
|
+
/*!
|
|
91
|
+
Copyright (c) 2018 Jed Watson.
|
|
92
|
+
Licensed under the MIT License (MIT), see
|
|
93
|
+
http://jedwatson.github.io/classnames
|
|
94
|
+
*/
|
|
95
|
+
|
|
96
|
+
(function (module) {
|
|
97
|
+
/* global define */
|
|
98
|
+
|
|
99
|
+
(function () {
|
|
100
|
+
|
|
101
|
+
var hasOwn = {}.hasOwnProperty;
|
|
102
|
+
|
|
103
|
+
function classNames() {
|
|
104
|
+
var classes = [];
|
|
105
|
+
|
|
106
|
+
for (var i = 0; i < arguments.length; i++) {
|
|
107
|
+
var arg = arguments[i];
|
|
108
|
+
if (!arg) continue;
|
|
109
|
+
|
|
110
|
+
var argType = typeof arg;
|
|
111
|
+
|
|
112
|
+
if (argType === 'string' || argType === 'number') {
|
|
113
|
+
classes.push(arg);
|
|
114
|
+
} else if (Array.isArray(arg)) {
|
|
115
|
+
if (arg.length) {
|
|
116
|
+
var inner = classNames.apply(null, arg);
|
|
117
|
+
if (inner) {
|
|
118
|
+
classes.push(inner);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
} else if (argType === 'object') {
|
|
122
|
+
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
|
|
123
|
+
classes.push(arg.toString());
|
|
124
|
+
continue;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
for (var key in arg) {
|
|
128
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
129
|
+
classes.push(key);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
return classes.join(' ');
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
if (module.exports) {
|
|
139
|
+
classNames.default = classNames;
|
|
140
|
+
module.exports = classNames;
|
|
141
|
+
} else {
|
|
142
|
+
window.classNames = classNames;
|
|
143
|
+
}
|
|
144
|
+
}());
|
|
145
|
+
} (classnames));
|
|
146
|
+
|
|
147
|
+
var classNames = classnames.exports;
|
|
148
|
+
|
|
149
|
+
var MIN_WIDTH = 150;
|
|
150
|
+
|
|
151
|
+
var DummySpan = function DummySpan(_ref) {
|
|
152
|
+
var name = _ref.name,
|
|
153
|
+
placeholderRef = _ref.placeholderRef,
|
|
154
|
+
setInputWidth = _ref.setInputWidth;
|
|
155
|
+
React.useEffect(function () {
|
|
156
|
+
var _placeholderRef$curre;
|
|
157
|
+
//To handle the input width on initial render.
|
|
158
|
+
var placeholderSpanWidth = (_placeholderRef$curre = placeholderRef.current) === null || _placeholderRef$curre === void 0 ? void 0 : _placeholderRef$curre.offsetWidth;
|
|
159
|
+
setInputWidth(placeholderSpanWidth);
|
|
160
|
+
}, [name]);
|
|
161
|
+
return (
|
|
162
|
+
/*#__PURE__*/
|
|
163
|
+
// Dummy element to calculate the width to be set for the input. Do not remove.
|
|
164
|
+
React__default["default"].createElement("div", {
|
|
165
|
+
className: "dummy-span pointer-events-none invisible absolute",
|
|
166
|
+
ref: placeholderRef
|
|
167
|
+
}, name.split(" ").join("."))
|
|
168
|
+
);
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
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}}
|
|
172
|
+
|
|
173
|
+
var css$2 = ".neeto-molecules-rename__input{height:32px;margin-left:4px;max-width:100%;position:relative;transition:width .2s ease-in-out;width:-moz-max-content;width:max-content}.neeto-molecules-rename__input .neeto-ui-input{border-color:transparent}.neeto-molecules-rename__input .neeto-ui-input:focus-within{border-color:rgb(var(--neeto-ui-primary-500))}.neeto-molecules-rename__input .neeto-ui-input .neeto-ui-input__suffix{margin-right:0!important}.neeto-molecules-rename__input .neeto-ui-input input{min-width:150px}.neeto-molecules-rename__text{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-white));border-radius:var(--neeto-ui-rounded);cursor:pointer;font-size:var(--neeto-ui-text-sm);font-weight:400;letter-spacing:.005em;line-height:1;margin:0 1px;max-height:32px;max-width:448px;padding:8px 5px;transition:var(--neeto-ui-transition)}.neeto-molecules-rename__breadcrumb-text{color:rgb(var(--neeto-ui-gray-500))}.neeto-molecules-rename__breadcrumb-text:hover,.neeto-molecules-rename__display-text{color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-rename__display-text:hover{border:thin solid rgb(var(--neeto-ui-gray-300))}.neeto-molecules-breadcrumb__divider{font-weight:400;letter-spacing:.005em;line-height:16px;max-height:32px;padding:0;pointer-events:none}.dummy-span{font-size:14px;font-weight:400;padding:5px 8px}";
|
|
174
|
+
n(css$2,{});
|
|
175
|
+
|
|
176
|
+
var mergeRefs = function mergeRefs() {
|
|
177
|
+
for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
178
|
+
refs[_key] = arguments[_key];
|
|
179
|
+
}
|
|
180
|
+
return function (node) {
|
|
181
|
+
return refs.forEach(function (ref) {
|
|
182
|
+
return typeof ref === "function" ? ref(node) : ref.current = node;
|
|
183
|
+
});
|
|
184
|
+
};
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
var Menu = neetoui.Dropdown.Menu,
|
|
188
|
+
MenuItem = neetoui.Dropdown.MenuItem;
|
|
189
|
+
var Rename = function Rename(_ref) {
|
|
190
|
+
var value = _ref.value,
|
|
191
|
+
_ref$onRename = _ref.onRename,
|
|
192
|
+
onRename = _ref$onRename === void 0 ? pure.noop : _ref$onRename,
|
|
193
|
+
_ref$isOpen = _ref.isOpen,
|
|
194
|
+
isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
|
|
195
|
+
_ref$isLoading = _ref.isLoading,
|
|
196
|
+
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
|
|
197
|
+
_ref$placeholder = _ref.placeholder,
|
|
198
|
+
placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
|
|
199
|
+
_ref$hideMenu = _ref.hideMenu,
|
|
200
|
+
hideMenu = _ref$hideMenu === void 0 ? false : _ref$hideMenu,
|
|
201
|
+
_ref$disabled = _ref.disabled,
|
|
202
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
203
|
+
_ref$dropdownItems = _ref.dropdownItems,
|
|
204
|
+
dropdownItems = _ref$dropdownItems === void 0 ? [] : _ref$dropdownItems,
|
|
205
|
+
_ref$breadcrumbs = _ref.breadcrumbs,
|
|
206
|
+
breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
|
|
207
|
+
_ref$textProps = _ref.textProps,
|
|
208
|
+
textProps = _ref$textProps === void 0 ? {} : _ref$textProps,
|
|
209
|
+
_ref$inputProps = _ref.inputProps,
|
|
210
|
+
inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
|
|
211
|
+
_ref$className = _ref.className,
|
|
212
|
+
className = _ref$className === void 0 ? "" : _ref$className,
|
|
213
|
+
formatText = _ref.formatText;
|
|
214
|
+
var _useTranslation = reactI18next.useTranslation(),
|
|
215
|
+
t = _useTranslation.t;
|
|
216
|
+
var _useStateWithDependen = reactUtils.useStateWithDependency(value !== null && value !== void 0 ? value : ""),
|
|
217
|
+
_useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
|
|
218
|
+
name = _useStateWithDependen2[0],
|
|
219
|
+
setName = _useStateWithDependen2[1];
|
|
220
|
+
var _useState = React.useState(isOpen),
|
|
221
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
222
|
+
editMode = _useState2[0],
|
|
223
|
+
setEditMode = _useState2[1];
|
|
224
|
+
var _useState3 = React.useState(MIN_WIDTH),
|
|
225
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
226
|
+
inputWidth = _useState4[0],
|
|
227
|
+
setInputWidth = _useState4[1];
|
|
228
|
+
var renameRef = React.useRef(null);
|
|
229
|
+
var placeholderRef = React.useRef(null);
|
|
230
|
+
reactUtils.useOnClickOutside(renameRef, function () {
|
|
231
|
+
return editMode && handleClose();
|
|
232
|
+
});
|
|
233
|
+
var handleRename = function handleRename(name) {
|
|
234
|
+
onRename(name);
|
|
235
|
+
setEditMode(false);
|
|
236
|
+
};
|
|
237
|
+
var handleClose = function handleClose() {
|
|
238
|
+
setName(value);
|
|
239
|
+
setEditMode(false);
|
|
240
|
+
};
|
|
241
|
+
var handleRenameButton = function handleRenameButton(event) {
|
|
242
|
+
event.stopPropagation();
|
|
243
|
+
setEditMode(true);
|
|
244
|
+
};
|
|
245
|
+
var closeRef = reactUtils.useHotKeys("escape", handleClose, {
|
|
246
|
+
mode: "scoped",
|
|
247
|
+
enabled: editMode
|
|
248
|
+
});
|
|
249
|
+
var submitRef = reactUtils.useHotKeys(["command+return", "return"], function () {
|
|
250
|
+
return pure.isNotEmpty(name) && handleRename(name);
|
|
251
|
+
}, {
|
|
252
|
+
mode: "scoped",
|
|
253
|
+
enabled: editMode
|
|
254
|
+
});
|
|
255
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
256
|
+
ref: renameRef,
|
|
257
|
+
className: classNames("flex min-w-0 max-w-md flex-row items-center", className)
|
|
258
|
+
}, breadcrumbs.map(function (_ref2) {
|
|
259
|
+
var text = _ref2.text,
|
|
260
|
+
link = _ref2.link;
|
|
261
|
+
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
|
|
262
|
+
key: text
|
|
263
|
+
}, /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, _extends({
|
|
264
|
+
className: "neeto-molecules-rename__text neeto-molecules-rename__breadcrumb-text",
|
|
265
|
+
"data-testid": "neeto-molecules-value-display",
|
|
266
|
+
to: link
|
|
267
|
+
}, textProps), text), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
|
|
268
|
+
className: "neeto-molecules-rename__breadcrumb-text neeto-molecules-breadcrumb__divider",
|
|
269
|
+
component: "span"
|
|
270
|
+
}, "/"));
|
|
271
|
+
}), /*#__PURE__*/React__default["default"].createElement(DummySpan, {
|
|
272
|
+
name: name,
|
|
273
|
+
placeholderRef: placeholderRef,
|
|
274
|
+
setInputWidth: setInputWidth
|
|
275
|
+
}), editMode ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
276
|
+
className: "flex min-w-0 max-w-full flex-grow"
|
|
277
|
+
}, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({
|
|
278
|
+
autoFocus: true,
|
|
279
|
+
className: "neeto-molecules-rename__input flex-grow",
|
|
280
|
+
"data-cy": "form-rename-text-field",
|
|
281
|
+
"data-testid": "neeto-molecules-name-input",
|
|
282
|
+
placeholder: placeholder,
|
|
283
|
+
ref: mergeRefs(closeRef, submitRef),
|
|
284
|
+
style: {
|
|
285
|
+
width: inputWidth
|
|
286
|
+
},
|
|
287
|
+
value: name,
|
|
288
|
+
suffix: /*#__PURE__*/React__default["default"].createElement("div", {
|
|
289
|
+
className: "flex items-center justify-end"
|
|
290
|
+
}, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
|
|
291
|
+
className: "neeto-ui-rounded-none",
|
|
292
|
+
"data-cy": "form-rename-submit-button",
|
|
293
|
+
"data-testid": "neeto-molecules-rename-button",
|
|
294
|
+
disabled: ramda.isEmpty(name) || isLoading,
|
|
295
|
+
icon: neetoIcons.Check,
|
|
296
|
+
loading: isLoading,
|
|
297
|
+
style: "text",
|
|
298
|
+
onClick: function onClick() {
|
|
299
|
+
return handleRename(name);
|
|
300
|
+
}
|
|
301
|
+
}), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
|
|
302
|
+
className: "neeto-ui-rounded-none",
|
|
303
|
+
"data-cy": "form-rename-close-button",
|
|
304
|
+
"data-testid": "neeto-molecules-cancel-button",
|
|
305
|
+
disabled: isLoading,
|
|
306
|
+
icon: neetoIcons.Close,
|
|
307
|
+
style: "text",
|
|
308
|
+
onClick: handleClose
|
|
309
|
+
})),
|
|
310
|
+
onChange: function onChange(event) {
|
|
311
|
+
return setName(event.target.value);
|
|
312
|
+
}
|
|
313
|
+
}, inputProps))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, _extends({
|
|
314
|
+
component: "p",
|
|
315
|
+
"data-cy": "form-title",
|
|
316
|
+
"data-testid": "neeto-molecules-value-display",
|
|
317
|
+
style: "body2",
|
|
318
|
+
className: classNames("neeto-molecules-rename__text neeto-molecules-rename__display-text w-full truncate", {
|
|
319
|
+
"cursor-pointer": !disabled,
|
|
320
|
+
"pointer-events-none cursor-text": disabled
|
|
321
|
+
}),
|
|
322
|
+
onClick: function onClick() {
|
|
323
|
+
return !disabled && setEditMode(!editMode);
|
|
324
|
+
}
|
|
325
|
+
}, textProps), typeof formatText === "function" ? formatText(name) : name), !hideMenu && (pure.isNotEmpty(dropdownItems) || !disabled) && /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
|
|
326
|
+
buttonStyle: "text",
|
|
327
|
+
icon: neetoIcons.MenuHorizontal,
|
|
328
|
+
position: "bottom-start",
|
|
329
|
+
buttonProps: {
|
|
330
|
+
"data-testid": "neeto-molecules-menu-button",
|
|
331
|
+
className: "flex-shrink-0"
|
|
332
|
+
},
|
|
333
|
+
onClick: function onClick(event) {
|
|
334
|
+
return event.stopPropagation();
|
|
335
|
+
}
|
|
336
|
+
}, /*#__PURE__*/React__default["default"].createElement(Menu, null, !disabled && /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
|
|
337
|
+
"data-cy": "form-rename-button",
|
|
338
|
+
onClick: handleRenameButton
|
|
339
|
+
}, t("neetoMolecules.common.actions.rename")), dropdownItems.map(function (item) {
|
|
340
|
+
return /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, _extends({
|
|
341
|
+
"data-cy": "form-clone-button",
|
|
342
|
+
key: item.label
|
|
343
|
+
}, item), item.label);
|
|
344
|
+
})))));
|
|
345
|
+
};
|
|
346
|
+
|
|
347
|
+
var DEFAULT_HOME_BUTTON_PROPS = {
|
|
348
|
+
tooltip: {
|
|
349
|
+
content: i18next.t("neetoMolecules.navigationHeader.home"),
|
|
350
|
+
position: "bottom"
|
|
351
|
+
},
|
|
352
|
+
homeUrl: "/",
|
|
353
|
+
icon: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Home, null)
|
|
354
|
+
};
|
|
355
|
+
|
|
356
|
+
var LeftBlock = function LeftBlock(_ref) {
|
|
357
|
+
var customHomeButtonProps = _ref.homeButtonProps,
|
|
358
|
+
homeUrl = _ref.homeUrl,
|
|
359
|
+
renameProps = _ref.renameProps,
|
|
360
|
+
children = _ref.children;
|
|
361
|
+
var homeButtonProps = ramda.mergeDeepRight(DEFAULT_HOME_BUTTON_PROPS, customHomeButtonProps);
|
|
362
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
363
|
+
className: "flex items-center gap-2",
|
|
364
|
+
"data-testid": "navigation-header-left-block"
|
|
365
|
+
}, /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
|
|
366
|
+
content: homeButtonProps.tooltip.content,
|
|
367
|
+
position: homeButtonProps.tooltip.position
|
|
368
|
+
}, /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
|
|
369
|
+
"data-cy": "home-button",
|
|
370
|
+
"data-testid": "home-button",
|
|
371
|
+
to: homeUrl
|
|
372
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
373
|
+
className: "neeto-ui-rounded hover:neeto-ui-bg-gray-200 p-1"
|
|
374
|
+
}, homeButtonProps.icon))), pure.isPresent(renameProps) && /*#__PURE__*/React__default["default"].createElement(Rename, {
|
|
375
|
+
dropdownItems: renameProps.dropdownItems,
|
|
376
|
+
value: renameProps.value,
|
|
377
|
+
renameProps: renameProps
|
|
378
|
+
}), children);
|
|
379
|
+
};
|
|
380
|
+
|
|
381
|
+
var NavigationLinks = function NavigationLinks(_ref) {
|
|
382
|
+
var headerLinks = _ref.headerLinks;
|
|
383
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
384
|
+
className: "flex w-full items-center justify-center gap-6",
|
|
385
|
+
"data-testid": "navigation-header-navigation-links"
|
|
386
|
+
}, headerLinks.map(function (headerLink) {
|
|
387
|
+
return /*#__PURE__*/React__default["default"].createElement(reactRouterDom.NavLink, {
|
|
388
|
+
activeClassName: "active",
|
|
389
|
+
className: "neeto-form-builder-header__link capitalize no-underline",
|
|
390
|
+
"data-cy": "".concat(utils.joinHyphenCase(headerLink.key), "-tab"),
|
|
391
|
+
key: headerLink.key,
|
|
392
|
+
to: headerLink.to
|
|
393
|
+
}, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
|
|
394
|
+
lineHeight: "normal",
|
|
395
|
+
style: "h4",
|
|
396
|
+
weight: "semibold"
|
|
397
|
+
}, headerLink.label));
|
|
398
|
+
}));
|
|
399
|
+
};
|
|
400
|
+
|
|
401
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
402
|
+
if (source == null) return {};
|
|
403
|
+
var target = {};
|
|
404
|
+
var sourceKeys = Object.keys(source);
|
|
405
|
+
var key, i;
|
|
406
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
407
|
+
key = sourceKeys[i];
|
|
408
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
409
|
+
target[key] = source[key];
|
|
410
|
+
}
|
|
411
|
+
return target;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
function _objectWithoutProperties(source, excluded) {
|
|
415
|
+
if (source == null) return {};
|
|
416
|
+
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
417
|
+
var key, i;
|
|
418
|
+
if (Object.getOwnPropertySymbols) {
|
|
419
|
+
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
420
|
+
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
421
|
+
key = sourceSymbolKeys[i];
|
|
422
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
423
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
424
|
+
target[key] = source[key];
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
return target;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
var AlertBlock = function AlertBlock(props) {
|
|
431
|
+
var _useTranslation = reactI18next.useTranslation(),
|
|
432
|
+
t = _useTranslation.t;
|
|
433
|
+
return /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, _extends({
|
|
434
|
+
"data-cy": "reset-alert",
|
|
435
|
+
"data-testid": "reset-alert",
|
|
436
|
+
submitButtonLabel: t("neetoMolecules.common.actions.reset")
|
|
437
|
+
}, props));
|
|
438
|
+
};
|
|
439
|
+
|
|
440
|
+
var css$1 = ".neeto-molecules-publish-block{align-items:center;display:flex;gap:12px;justify-content:flex-end}.neeto-molecules-publish-block__action-btn{align-items:center;display:inline-flex;flex-direction:row;gap:1px;justify-content:center}.neeto-molecules-publish-block__action-btn>.neeto-ui-btn:first-child{border-bottom-right-radius:0;border-top-right-radius:0}.neeto-molecules-publish-block__action-btn>.neeto-ui-btn:last-child{border-bottom-left-radius:0;border-top-left-radius:0}";
|
|
441
|
+
n(css$1,{});
|
|
442
|
+
|
|
443
|
+
var _excluded = ["t"],
|
|
444
|
+
_excluded2 = ["t"],
|
|
445
|
+
_excluded3 = ["t"],
|
|
446
|
+
_excluded4 = ["t"];
|
|
447
|
+
var ViewDraftButton = reactUtils.withT(function (_ref) {
|
|
448
|
+
var t = _ref.t,
|
|
449
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
450
|
+
return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
|
|
451
|
+
"data-cy": "view-draft-button",
|
|
452
|
+
"data-testid": "view-draft-button",
|
|
453
|
+
icon: neetoIcons.ExternalLink,
|
|
454
|
+
style: "secondary",
|
|
455
|
+
target: "_blank",
|
|
456
|
+
tooltipProps: {
|
|
457
|
+
content: t("neetoMolecules.publishBlock.viewDraftVersion"),
|
|
458
|
+
position: "top"
|
|
459
|
+
}
|
|
460
|
+
}, props));
|
|
461
|
+
});
|
|
462
|
+
var ResetDraftButton = reactUtils.withT(function (_ref2) {
|
|
463
|
+
var t = _ref2.t,
|
|
464
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
465
|
+
return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
|
|
466
|
+
"data-cy": "draft-button",
|
|
467
|
+
"data-testid": "draft-button",
|
|
468
|
+
icon: neetoIcons.Undo,
|
|
469
|
+
style: "secondary",
|
|
470
|
+
tooltipProps: {
|
|
471
|
+
content: t("neetoMolecules.publishBlock.deleteDraftVersion"),
|
|
472
|
+
position: "top"
|
|
473
|
+
}
|
|
474
|
+
}, props));
|
|
475
|
+
});
|
|
476
|
+
var PublishButton = reactUtils.withT(function (_ref3) {
|
|
477
|
+
var t = _ref3.t,
|
|
478
|
+
props = _objectWithoutProperties(_ref3, _excluded3);
|
|
479
|
+
return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
|
|
480
|
+
"data-cy": "publish-button",
|
|
481
|
+
"data-testid": "publish-button",
|
|
482
|
+
label: t("neetoMolecules.common.actions.publish")
|
|
483
|
+
}, props));
|
|
484
|
+
});
|
|
485
|
+
var PublishPreviewButton = reactUtils.withT(function (_ref4) {
|
|
486
|
+
var t = _ref4.t,
|
|
487
|
+
props = _objectWithoutProperties(_ref4, _excluded4);
|
|
488
|
+
return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
|
|
489
|
+
"data-cy": "publish-preview-button",
|
|
490
|
+
"data-testid": "publish-preview-button",
|
|
491
|
+
icon: neetoIcons.ExternalLink,
|
|
492
|
+
target: "_blank",
|
|
493
|
+
className: classNames({
|
|
494
|
+
"pointer-events-none": props.disabled
|
|
495
|
+
}, props.className),
|
|
496
|
+
tooltipProps: {
|
|
497
|
+
content: t("neetoMolecules.publishBlock.viewPublishedVersion"),
|
|
498
|
+
position: "top"
|
|
499
|
+
}
|
|
500
|
+
}, props));
|
|
501
|
+
});
|
|
502
|
+
var PublishBlock = function PublishBlock(_ref5) {
|
|
503
|
+
var renderDraftButtons = _ref5.renderDraftButtons,
|
|
504
|
+
renderPublishButtons = _ref5.renderPublishButtons;
|
|
505
|
+
var _useTranslation = reactI18next.useTranslation(),
|
|
506
|
+
t = _useTranslation.t;
|
|
507
|
+
var draftBlockButtons = renderDraftButtons({
|
|
508
|
+
ViewDraftButton: ViewDraftButton,
|
|
509
|
+
ResetDraftButton: ResetDraftButton
|
|
510
|
+
});
|
|
511
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
512
|
+
className: "neeto-molecules-publish-block",
|
|
513
|
+
"data-testid": "neeto-molecules-publish-block"
|
|
514
|
+
}, draftBlockButtons && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
515
|
+
className: "flex items-center gap-2"
|
|
516
|
+
}, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
|
|
517
|
+
className: "neeto-ui-text-gray-700",
|
|
518
|
+
lineHeight: "normal",
|
|
519
|
+
style: "body2"
|
|
520
|
+
}, t("neetoMolecules.common.actions.draft")), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
521
|
+
className: "space-x-1"
|
|
522
|
+
}, draftBlockButtons)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
523
|
+
className: "neeto-ui-bg-gray-300 h-full w-px"
|
|
524
|
+
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
525
|
+
className: "neeto-molecules-publish-block__action-btn"
|
|
526
|
+
}, renderPublishButtons({
|
|
527
|
+
PublishButton: PublishButton,
|
|
528
|
+
PublishPreviewButton: PublishPreviewButton
|
|
529
|
+
})));
|
|
530
|
+
};
|
|
531
|
+
PublishBlock.Alert = AlertBlock;
|
|
532
|
+
|
|
533
|
+
var css = ".standalone-publish-preview-button{border-radius:var(--neeto-ui-rounded)!important}";
|
|
534
|
+
n(css,{});
|
|
535
|
+
|
|
536
|
+
var RightBlock = function RightBlock(_ref) {
|
|
537
|
+
var isDraftBlockHidden = _ref.isDraftBlockHidden,
|
|
538
|
+
previewDraftUrl = _ref.previewDraftUrl,
|
|
539
|
+
isResetDraftButtonVisible = _ref.isResetDraftButtonVisible,
|
|
540
|
+
onResetClick = _ref.onResetClick,
|
|
541
|
+
isResetting = _ref.isResetting,
|
|
542
|
+
isPublishDisabled = _ref.isPublishDisabled,
|
|
543
|
+
isPublishing = _ref.isPublishing,
|
|
544
|
+
handlePublish = _ref.handlePublish,
|
|
545
|
+
isPublishPreviewDisabled = _ref.isPublishPreviewDisabled,
|
|
546
|
+
previewPublishedUrl = _ref.previewPublishedUrl,
|
|
547
|
+
isPublishButtonVisible = _ref.isPublishButtonVisible,
|
|
548
|
+
isResetAlertOpen = _ref.isResetAlertOpen,
|
|
549
|
+
setIsResetAlertOpen = _ref.setIsResetAlertOpen,
|
|
550
|
+
handleReset = _ref.handleReset,
|
|
551
|
+
publishAlertTitle = _ref.publishAlertTitle,
|
|
552
|
+
publishAlertDescription = _ref.publishAlertDescription;
|
|
553
|
+
var _useTranslation = reactI18next.useTranslation(),
|
|
554
|
+
t = _useTranslation.t;
|
|
555
|
+
var renderDraftButtons = function renderDraftButtons(_ref2) {
|
|
556
|
+
var ViewDraftButton = _ref2.ViewDraftButton,
|
|
557
|
+
ResetDraftButton = _ref2.ResetDraftButton;
|
|
558
|
+
return !isDraftBlockHidden && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ViewDraftButton, {
|
|
559
|
+
to: previewDraftUrl
|
|
560
|
+
}), isResetDraftButtonVisible && /*#__PURE__*/React__default["default"].createElement(ResetDraftButton, {
|
|
561
|
+
loading: isResetting,
|
|
562
|
+
onClick: function onClick() {
|
|
563
|
+
return onResetClick();
|
|
564
|
+
}
|
|
565
|
+
}));
|
|
566
|
+
};
|
|
567
|
+
var renderPublishButtons = function renderPublishButtons(_ref3) {
|
|
568
|
+
var PublishButton = _ref3.PublishButton,
|
|
569
|
+
PublishPreviewButton = _ref3.PublishPreviewButton;
|
|
570
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isPublishButtonVisible && /*#__PURE__*/React__default["default"].createElement(PublishButton, {
|
|
571
|
+
disabled: isPublishDisabled,
|
|
572
|
+
loading: isPublishing,
|
|
573
|
+
onClick: function onClick() {
|
|
574
|
+
return handlePublish();
|
|
575
|
+
}
|
|
576
|
+
}), /*#__PURE__*/React__default["default"].createElement(PublishPreviewButton, {
|
|
577
|
+
disabled: isPublishPreviewDisabled,
|
|
578
|
+
to: previewPublishedUrl,
|
|
579
|
+
className: classNames({
|
|
580
|
+
"standalone-publish-preview-button": !isPublishButtonVisible
|
|
581
|
+
})
|
|
582
|
+
}));
|
|
583
|
+
};
|
|
584
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(PublishBlock, {
|
|
585
|
+
renderDraftButtons: renderDraftButtons,
|
|
586
|
+
renderPublishButtons: renderPublishButtons
|
|
587
|
+
}), /*#__PURE__*/React__default["default"].createElement(PublishBlock.Alert, {
|
|
588
|
+
isOpen: isResetAlertOpen,
|
|
589
|
+
isSubmitting: isResetting,
|
|
590
|
+
message: publishAlertDescription || t("neetoMolecules.navigationHeader.resetDescription"),
|
|
591
|
+
title: publishAlertTitle || t("neetoMolecules.navigationHeader.resetTitle"),
|
|
592
|
+
onClose: function onClose() {
|
|
593
|
+
return setIsResetAlertOpen(false);
|
|
594
|
+
},
|
|
595
|
+
onSubmit: handleReset
|
|
596
|
+
}));
|
|
597
|
+
};
|
|
598
|
+
|
|
599
|
+
var NavigationHeader = function NavigationHeader(_ref) {
|
|
600
|
+
var leftActionBlock = _ref.leftActionBlock,
|
|
601
|
+
navigationLinks = _ref.navigationLinks,
|
|
602
|
+
rightActionBlock = _ref.rightActionBlock;
|
|
603
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
604
|
+
className: "neeto-form-builder-header neeto-ui-border-gray-200 neeto-ui-bg-white flex h-16 w-full flex-shrink-0 items-center border-b px-6 py-2",
|
|
605
|
+
"data-testid": "navigation-header"
|
|
606
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
607
|
+
className: "grid w-full grid-cols-3 gap-2"
|
|
608
|
+
}, leftActionBlock, navigationLinks, rightActionBlock));
|
|
609
|
+
};
|
|
610
|
+
NavigationHeader.LeftActionBlock = LeftBlock;
|
|
611
|
+
NavigationHeader.NavigationLinks = NavigationLinks;
|
|
612
|
+
NavigationHeader.RightActionBlock = RightBlock;
|
|
613
|
+
|
|
614
|
+
module.exports = NavigationHeader;
|
|
615
|
+
//# sourceMappingURL=NavigationHeader.cjs.js.map
|