@bigbinary/neeto-molecules 3.6.0-beta-1 → 3.6.0-beta1
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/Builder.js +255 -155
- package/dist/Builder.js.map +1 -1
- package/dist/FileUpload.js +115 -86
- package/dist/FileUpload.js.map +1 -1
- package/dist/FloatingActionMenu.js +31 -18
- package/dist/FloatingActionMenu.js.map +1 -1
- package/dist/Onboarding.js +7 -2
- package/dist/Onboarding.js.map +1 -1
- package/dist/ProductEmbed.js +10 -7
- package/dist/ProductEmbed.js.map +1 -1
- package/dist/SessionEnvironment.js +2 -2
- package/dist/SessionEnvironment.js.map +1 -1
- package/dist/StatusDropdown.js +1 -1
- package/dist/cjs/Builder.js +254 -150
- package/dist/cjs/Builder.js.map +1 -1
- package/dist/cjs/FileUpload.js +116 -87
- package/dist/cjs/FileUpload.js.map +1 -1
- package/dist/cjs/FloatingActionMenu.js +29 -16
- package/dist/cjs/FloatingActionMenu.js.map +1 -1
- package/dist/cjs/Onboarding.js +7 -2
- package/dist/cjs/Onboarding.js.map +1 -1
- package/dist/cjs/ProductEmbed.js +10 -7
- package/dist/cjs/ProductEmbed.js.map +1 -1
- package/dist/cjs/SessionEnvironment.js +2 -2
- package/dist/cjs/SessionEnvironment.js.map +1 -1
- package/dist/cjs/StatusDropdown.js +1 -1
- package/package.json +2 -2
- package/src/translations/en.json +3 -1
- package/types/Builder.d.ts +2 -5
- package/types/FileUpload.d.ts +0 -2
package/dist/Builder.js
CHANGED
|
@@ -2,67 +2,105 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
|
2
2
|
import { createElement, useState, useMemo, memo, useRef, useEffect } from 'react';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { noop, isPresent, isNotEmpty, findById, hyphenate } from '@bigbinary/neeto-cist';
|
|
5
|
-
import { useBreakpoints } from '@bigbinary/neeto-commons-frontend/react-utils';
|
|
5
|
+
import { withT, useBreakpoints } from '@bigbinary/neeto-commons-frontend/react-utils';
|
|
6
6
|
import Collapse from '@bigbinary/neeto-icons/Collapse';
|
|
7
7
|
import Button from '@bigbinary/neetoui/Button';
|
|
8
|
-
import { isEmpty, mergeRight } from 'ramda';
|
|
9
8
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
10
9
|
import { joinHyphenCase, withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils/general';
|
|
11
10
|
import Search from '@bigbinary/neeto-icons/Search';
|
|
12
11
|
import Input from '@bigbinary/neetoui/Input';
|
|
12
|
+
import { isEmpty, assoc, mergeRight } from 'ramda';
|
|
13
13
|
import { useTranslation } from 'react-i18next';
|
|
14
14
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
15
15
|
import { n } from './inject-css-c86de496.js';
|
|
16
16
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
17
|
+
import { Draggable, Droppable } from '@hello-pangea/dnd';
|
|
17
18
|
import Typography from '@bigbinary/neetoui/Typography';
|
|
18
19
|
import Tooltip from '@bigbinary/neetoui/Tooltip';
|
|
19
|
-
import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
|
|
20
20
|
import MoreDropdown from './MoreDropdown.js';
|
|
21
21
|
import { PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
|
|
22
22
|
import Flash from '@bigbinary/neeto-icons/Flash';
|
|
23
23
|
import Close from '@bigbinary/neeto-icons/Close';
|
|
24
|
-
import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
|
|
24
|
+
import withT$1 from '@bigbinary/neeto-commons-frontend/react-utils/withT';
|
|
25
25
|
import DownArrow from '@bigbinary/neeto-icons/DownArrow';
|
|
26
26
|
import '@bigbinary/neeto-icons/MenuHorizontal';
|
|
27
27
|
import '@bigbinary/neeto-icons/MenuVertical';
|
|
28
28
|
import '@bigbinary/neetoui/Dropdown';
|
|
29
29
|
|
|
30
|
-
var
|
|
30
|
+
var SELECTED_ELEMENTS_LIST_DROPPABLE_ID = "droppable-selected-element-container";
|
|
31
|
+
var ELEMENTS_LIST_DROPPABLE_ID = "droppable-element-container";
|
|
32
|
+
var PREVIEW_CONTAINER_DROPPABLE_ID = "droppable-form-preview-container";
|
|
33
|
+
var DROPPABLE_TYPES = {
|
|
34
|
+
ELEMENT: "element",
|
|
35
|
+
SELECTED_ELEMENT: "selected_element"
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
var css = ":root{--neeto-molecule-builder-left-sidebar-width:288px;--neeto-molecule-builder-left-sidebar-width-lg:360px;--neeto-molecule-builder-left-sidebar-header-height:70px;--neeto-molecule-builder-left-sidebar-search-height:40px;--neeto-molecule-builder-right-sidebar-width:420px}.neeto-molecules-builder-elements-list-panel__wrapper{height:100%;min-width:360px;min-width:var(--neeto-molecule-builder-left-sidebar-width-lg);position:relative;transition:all .15s;width:360px;width:var(--neeto-molecule-builder-left-sidebar-width-lg);z-index:101}@media screen and (min-width:768px) and (max-width:1279px){.neeto-molecules-builder-elements-list-panel__wrapper{min-width:288px;min-width:var(--neeto-molecule-builder-left-sidebar-width);width:288px;width:var(--neeto-molecule-builder-left-sidebar-width)}}@media screen and (max-width:767px){.neeto-molecules-builder-elements-list-panel__wrapper{left:0;position:fixed;top:0;transition:none}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel__wrapper{height:100%;max-width:100%;min-width:0;width:100%}}.neeto-molecules-builder-elements-list-panel__wrapper--collapsed{max-width:0;min-width:0;width:0}.neeto-molecules-builder-elements-list-panel__wrapper--collapsed .neeto-molecules-builder-elements-list-panel__toggler{transform:scale(-1)}@media screen and (max-width:767px){.neeto-molecules-builder-elements-list-panel__wrapper--collapsed .neeto-molecules-builder-elements-list-panel__toggler{top:109px}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel__wrapper--collapsed .neeto-molecules-builder-elements-list-panel__toggler{left:8px;right:auto}}.neeto-molecules-builder-elements-list-panel__container{height:100%;overflow:hidden;width:100%}.neeto-molecules-builder-elements-list-panel{border-right:1px solid rgb(var(--neeto-ui-gray-200));height:100%;min-width:360px;min-width:var(--neeto-molecule-builder-left-sidebar-width-lg);width:360px;width:var(--neeto-molecule-builder-left-sidebar-width-lg)}@media screen and (min-width:768px) and (max-width:1279px){.neeto-molecules-builder-elements-list-panel{min-width:288px;min-width:var(--neeto-molecule-builder-left-sidebar-width);width:288px;width:var(--neeto-molecule-builder-left-sidebar-width)}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel{min-width:0;padding-top:24px;width:100%}}.neeto-molecules-builder-elements-list-panel__toggler{flex-shrink:0;left:calc(100% + 8px);position:absolute;top:8px;transition:color .3s ease-in-out}@media screen and (min-width:1024px){.neeto-molecules-builder-elements-list-panel__toggler{opacity:0;pointer-events:none}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel__toggler{left:24px}}.neeto-molecules-builder-questions-list-panel__scroll{height:calc(100% - 70px);height:calc(100% - var(--neeto-molecule-builder-left-sidebar-header-height));overflow-y:auto;padding:8px 24px;width:100%}.neeto-molecules-builder-questions-list-panel__scroll.neeto-molecules-builder-questions-list-panel__scroll--small{height:calc(100% - 110px);height:calc(100% - var(--neeto-molecule-builder-left-sidebar-header-height) - var(--neeto-molecule-builder-left-sidebar-search-height))}.neeto-molecules-builder-element-properties-panel__wrapper{border-left:1px solid rgb(var(--neeto-ui-gray-200));height:100%;min-width:420px;min-width:var(--neeto-molecule-builder-right-sidebar-width);position:relative;transition:all .15s;width:420px;width:var(--neeto-molecule-builder-right-sidebar-width);z-index:101}.neeto-molecules-builder-element-properties-panel__wrapper .neeto-molecules-builder-properties-panel__close{opacity:0;pointer-events:none;position:absolute;right:8px;top:8px}@media screen and (max-width:1279px){.neeto-molecules-builder-element-properties-panel__wrapper .neeto-molecules-builder-properties-panel__close{opacity:1;pointer-events:all}.neeto-molecules-builder-element-properties-panel__wrapper{position:fixed;right:0;top:0;transition:none}}@media screen and (max-width:576px){.neeto-molecules-builder-element-properties-panel__wrapper{height:100%;max-width:100%;min-width:0;width:100%}}.neeto-molecules-builder-element-properties-panel__wrapper--collapsed{max-width:0;min-width:0;width:0}.neeto-molecules-builder-element-properties-panel{display:flex;flex-direction:column;height:100%;min-width:0;overflow-y:auto;padding-left:24px;padding-top:24px;width:100%}.neeto-molecules-builder-element-properties-panel--collapsed{max-width:0;min-width:0;padding:0;width:0}@media screen and (max-width:1279px){.neeto-molecules-builder-element-properties-panel{padding-top:48px}}.neeto-molecules-builder-element--active{border-color:rgb(var(--neeto-ui-primary-500))!important;box-shadow:0 0 0 1px rgb(var(--neeto-ui-primary-500))!important}.neeto-molecules-builder-panel__backdrop{background-color:rgba(var(--neeto-ui-black),.4);display:none;height:100%;left:0;position:fixed;top:0;visibility:hidden;width:100%;z-index:101}@media screen and (max-width:767px){.neeto-molecules-builder-panel__backdrop{display:block;visibility:visible}}@media screen and (max-width:1279px){.neeto-molecules-builder-panel__backdrop--extended{display:block;visibility:visible}}";
|
|
31
39
|
n(css,{});
|
|
32
40
|
|
|
33
41
|
var _excluded$2 = ["size"];
|
|
34
|
-
function ownKeys$
|
|
35
|
-
function _objectSpread$
|
|
42
|
+
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; }
|
|
43
|
+
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), !0).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; }
|
|
36
44
|
var Body = function Body(_ref) {
|
|
37
45
|
var size = _ref.size,
|
|
38
46
|
props = _objectWithoutProperties(_ref, _excluded$2);
|
|
39
|
-
return /*#__PURE__*/jsx("div", _objectSpread$
|
|
47
|
+
return /*#__PURE__*/jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
|
|
40
48
|
className: classnames("neeto-molecules-builder-questions-list-panel__scroll", {
|
|
41
49
|
"neeto-molecules-builder-questions-list-panel__scroll--small": size === "small"
|
|
42
50
|
})
|
|
43
51
|
}));
|
|
44
52
|
};
|
|
45
53
|
|
|
54
|
+
var _excluded$1 = ["size"];
|
|
55
|
+
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; }
|
|
56
|
+
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), !0).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; }
|
|
57
|
+
var DragIcon = function DragIcon(_ref) {
|
|
58
|
+
var _ref$size = _ref.size,
|
|
59
|
+
size = _ref$size === void 0 ? 16 : _ref$size,
|
|
60
|
+
otherProps = _objectWithoutProperties(_ref, _excluded$1);
|
|
61
|
+
return /*#__PURE__*/jsx("svg", _objectSpread$4(_objectSpread$4({
|
|
62
|
+
fill: "currentColor",
|
|
63
|
+
height: size,
|
|
64
|
+
viewBox: "0 -960 960 960",
|
|
65
|
+
width: size,
|
|
66
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
67
|
+
}, otherProps), {}, {
|
|
68
|
+
children: /*#__PURE__*/jsx("path", {
|
|
69
|
+
d: "M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160zM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400zM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640z"
|
|
70
|
+
})
|
|
71
|
+
}));
|
|
72
|
+
};
|
|
73
|
+
|
|
46
74
|
var Element = function Element(_ref) {
|
|
47
75
|
var label = _ref.label,
|
|
48
76
|
Icon = _ref.icon,
|
|
49
77
|
_ref$isCreatable = _ref.isCreatable,
|
|
50
78
|
isCreatable = _ref$isCreatable === void 0 ? true : _ref$isCreatable,
|
|
51
79
|
onClick = _ref.onClick,
|
|
52
|
-
|
|
80
|
+
_ref$isDragDisabled = _ref.isDragDisabled,
|
|
81
|
+
isDragDisabled = _ref$isDragDisabled === void 0 ? false : _ref$isDragDisabled,
|
|
82
|
+
disabledElementTooltip = _ref.disabledElementTooltip,
|
|
83
|
+
isPlaceholder = _ref.isPlaceholder,
|
|
84
|
+
isDraggingOver = _ref.isDraggingOver;
|
|
53
85
|
return /*#__PURE__*/jsx(Tooltip, {
|
|
54
86
|
content: disabledElementTooltip === null || disabledElementTooltip === void 0 ? void 0 : disabledElementTooltip(label),
|
|
55
|
-
disabled: !disabledElementTooltip || isCreatable,
|
|
87
|
+
disabled: !disabledElementTooltip || isCreatable || isDraggingOver,
|
|
56
88
|
position: "top",
|
|
57
89
|
touch: ["hold", 500],
|
|
58
|
-
children: /*#__PURE__*/
|
|
90
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
59
91
|
"data-cy": "add-".concat(joinHyphenCase(label), "-element"),
|
|
60
|
-
className: classnames("neeto-ui-border-gray-400 neeto-ui-bg-white hover:neeto-ui-bg-gray-200 neeto-ui-rounded-lg mb-2 flex h-10 items-center gap-2 border p-3 transition-all duration-300 ease-in-out", {
|
|
92
|
+
className: classnames("neeto-ui-border-gray-400 neeto-ui-bg-white hover:neeto-ui-bg-gray-200 neeto-ui-rounded-lg relative mb-2 flex h-10 items-center gap-2 border p-3 transition-all duration-300 ease-in-out", {
|
|
61
93
|
"neeto-ui-bg-gray-300 cursor-not-allowed": !isCreatable,
|
|
62
|
-
"cursor-pointer": isCreatable
|
|
94
|
+
"cursor-pointer": isCreatable,
|
|
95
|
+
"opacity-50": isPlaceholder
|
|
63
96
|
}),
|
|
64
97
|
onClick: isCreatable ? onClick : noop,
|
|
65
|
-
children: /*#__PURE__*/
|
|
98
|
+
children: [!isDragDisabled && /*#__PURE__*/jsx("span", {
|
|
99
|
+
className: "absolute right-full top-1/2 flex-shrink-0 -translate-y-1/2 cursor-grab",
|
|
100
|
+
children: /*#__PURE__*/jsx(DragIcon, {
|
|
101
|
+
size: 16
|
|
102
|
+
})
|
|
103
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
66
104
|
className: "flex flex-grow items-center gap-2",
|
|
67
105
|
children: [Icon && /*#__PURE__*/jsx(Icon, {
|
|
68
106
|
"data-cy": "form-icon"
|
|
@@ -71,19 +109,74 @@ var Element = function Element(_ref) {
|
|
|
71
109
|
style: "body2",
|
|
72
110
|
children: label
|
|
73
111
|
})]
|
|
74
|
-
})
|
|
112
|
+
})]
|
|
75
113
|
})
|
|
76
114
|
});
|
|
77
115
|
};
|
|
78
116
|
|
|
79
117
|
function ownKeys$3(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; }
|
|
80
118
|
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
119
|
+
var ElementContainer = function ElementContainer(_ref) {
|
|
120
|
+
var index = _ref.index,
|
|
121
|
+
isDragDisabled = _ref.isDragDisabled,
|
|
122
|
+
element = _ref.element,
|
|
123
|
+
disabledElementTooltip = _ref.disabledElementTooltip,
|
|
124
|
+
isCreatable = _ref.isCreatable,
|
|
125
|
+
onSelect = _ref.onSelect,
|
|
126
|
+
isDraggingOver = _ref.isDraggingOver;
|
|
127
|
+
var isCreatableElement = isCreatable(element.value);
|
|
128
|
+
if (isDragDisabled) {
|
|
129
|
+
return /*#__PURE__*/jsx(Element, _objectSpread$3(_objectSpread$3({}, _objectSpread$3(_objectSpread$3({}, element), {}, {
|
|
130
|
+
disabledElementTooltip: disabledElementTooltip,
|
|
131
|
+
isDragDisabled: isDragDisabled
|
|
132
|
+
})), {}, {
|
|
133
|
+
isCreatable: isCreatableElement,
|
|
134
|
+
onClick: function onClick() {
|
|
135
|
+
return onSelect(element);
|
|
136
|
+
}
|
|
137
|
+
}));
|
|
138
|
+
}
|
|
139
|
+
return /*#__PURE__*/createElement(Draggable, {
|
|
140
|
+
index: index,
|
|
141
|
+
draggableId: element.value,
|
|
142
|
+
isDragDisabled: isDragDisabled || !isCreatableElement,
|
|
143
|
+
key: element.label
|
|
144
|
+
}, function (provided, snapshot) {
|
|
145
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
146
|
+
children: [/*#__PURE__*/jsx("div", _objectSpread$3(_objectSpread$3(_objectSpread$3({
|
|
147
|
+
ref: provided.innerRef
|
|
148
|
+
}, provided.draggableProps), provided.dragHandleProps), {}, {
|
|
149
|
+
style: _objectSpread$3(_objectSpread$3({}, provided.draggableProps.style), !snapshot.isDragging && {
|
|
150
|
+
transform: "none"
|
|
151
|
+
}),
|
|
152
|
+
children: /*#__PURE__*/jsx(Element, _objectSpread$3(_objectSpread$3({}, _objectSpread$3(_objectSpread$3({}, element), {}, {
|
|
153
|
+
disabledElementTooltip: disabledElementTooltip,
|
|
154
|
+
isDragDisabled: isDragDisabled,
|
|
155
|
+
isDraggingOver: isDraggingOver
|
|
156
|
+
})), {}, {
|
|
157
|
+
isCreatable: isCreatableElement,
|
|
158
|
+
onClick: function onClick() {
|
|
159
|
+
return onSelect(element);
|
|
160
|
+
}
|
|
161
|
+
}))
|
|
162
|
+
})), snapshot.isDragging && /*#__PURE__*/jsx(Element, _objectSpread$3(_objectSpread$3({
|
|
163
|
+
disabledElementTooltip: null
|
|
164
|
+
}, _objectSpread$3({}, element)), {}, {
|
|
165
|
+
isCreatable: false,
|
|
166
|
+
onClick: noop
|
|
167
|
+
}))]
|
|
168
|
+
});
|
|
169
|
+
});
|
|
170
|
+
};
|
|
171
|
+
|
|
81
172
|
var Section = function Section(_ref) {
|
|
82
173
|
var title = _ref.title,
|
|
83
174
|
elements = _ref.elements,
|
|
84
175
|
onSelect = _ref.onSelect,
|
|
85
176
|
isCreatable = _ref.isCreatable,
|
|
86
|
-
disabledElementTooltip = _ref.disabledElementTooltip
|
|
177
|
+
disabledElementTooltip = _ref.disabledElementTooltip,
|
|
178
|
+
isDragDisabled = _ref.isDragElementsDisabled,
|
|
179
|
+
isDraggingOver = _ref.isDraggingOver;
|
|
87
180
|
if (isEmpty(elements)) {
|
|
88
181
|
return null;
|
|
89
182
|
}
|
|
@@ -94,27 +187,62 @@ var Section = function Section(_ref) {
|
|
|
94
187
|
textTransform: "uppercase",
|
|
95
188
|
children: title
|
|
96
189
|
}), elements.map(function (element) {
|
|
97
|
-
return /*#__PURE__*/createElement(
|
|
98
|
-
disabledElementTooltip: disabledElementTooltip
|
|
99
|
-
|
|
100
|
-
isCreatable: isCreatable
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
190
|
+
return /*#__PURE__*/createElement(ElementContainer, {
|
|
191
|
+
disabledElementTooltip: disabledElementTooltip,
|
|
192
|
+
element: element,
|
|
193
|
+
isCreatable: isCreatable,
|
|
194
|
+
isDragDisabled: isDragDisabled,
|
|
195
|
+
isDraggingOver: isDraggingOver,
|
|
196
|
+
onSelect: onSelect,
|
|
197
|
+
index: element.elementIndex,
|
|
198
|
+
key: element.label
|
|
199
|
+
});
|
|
106
200
|
})]
|
|
107
201
|
});
|
|
108
202
|
};
|
|
109
203
|
|
|
110
|
-
|
|
111
|
-
|
|
204
|
+
function ownKeys$2(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; }
|
|
205
|
+
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
206
|
+
var SectionsContainer = function SectionsContainer(_ref) {
|
|
207
|
+
var isDragElementsDisabled = _ref.isDragElementsDisabled,
|
|
208
|
+
filteredSections = _ref.filteredSections,
|
|
209
|
+
onSelect = _ref.onSelect;
|
|
210
|
+
if (isDragElementsDisabled) {
|
|
211
|
+
return /*#__PURE__*/jsx(Fragment, {
|
|
212
|
+
children: filteredSections.map(function (section) {
|
|
213
|
+
return /*#__PURE__*/createElement(Section, _objectSpread$2(_objectSpread$2({}, _objectSpread$2({
|
|
214
|
+
isDragElementsDisabled: isDragElementsDisabled,
|
|
215
|
+
onSelect: onSelect
|
|
216
|
+
}, section)), {}, {
|
|
217
|
+
key: section.key
|
|
218
|
+
}));
|
|
219
|
+
})
|
|
220
|
+
});
|
|
221
|
+
}
|
|
222
|
+
return /*#__PURE__*/jsx(Droppable, {
|
|
223
|
+
droppableId: ELEMENTS_LIST_DROPPABLE_ID,
|
|
224
|
+
type: DROPPABLE_TYPES.ELEMENT,
|
|
225
|
+
children: function children(provided, snapshot) {
|
|
226
|
+
return /*#__PURE__*/jsx("div", {
|
|
227
|
+
ref: provided.innerRef,
|
|
228
|
+
children: filteredSections.map(function (section) {
|
|
229
|
+
return /*#__PURE__*/createElement(Section, _objectSpread$2(_objectSpread$2({}, _objectSpread$2({
|
|
230
|
+
isDragElementsDisabled: isDragElementsDisabled,
|
|
231
|
+
onSelect: onSelect
|
|
232
|
+
}, section)), {}, {
|
|
233
|
+
isDraggingOver: snapshot.isDraggingOver,
|
|
234
|
+
key: section.key
|
|
235
|
+
}));
|
|
236
|
+
})
|
|
237
|
+
});
|
|
238
|
+
}
|
|
239
|
+
});
|
|
240
|
+
};
|
|
241
|
+
|
|
242
|
+
var TitleBar$1 = withT(function (_ref) {
|
|
243
|
+
var t = _ref.t,
|
|
244
|
+
setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
|
|
112
245
|
isSelectedElementsEmpty = _ref.isSelectedElementsEmpty;
|
|
113
|
-
var _useTranslation = useTranslation(),
|
|
114
|
-
t = _useTranslation.t;
|
|
115
|
-
var onCancel = function onCancel() {
|
|
116
|
-
return setIsElementsListVisible(false);
|
|
117
|
-
};
|
|
118
246
|
return /*#__PURE__*/jsxs("div", {
|
|
119
247
|
className: "flex items-center justify-between p-6 pb-4",
|
|
120
248
|
"data-testid": "elements-panel-title",
|
|
@@ -126,22 +254,25 @@ var TitleBar$1 = function TitleBar(_ref) {
|
|
|
126
254
|
children: t("neetoMolecules.builderSidebar.addNewElement")
|
|
127
255
|
}), !isSelectedElementsEmpty && /*#__PURE__*/jsx(Button, {
|
|
128
256
|
"data-cy": "cancel-button",
|
|
129
|
-
label: t("neetoMolecules.builderSidebar.
|
|
257
|
+
label: t("neetoMolecules.builderSidebar.summary"),
|
|
130
258
|
size: "small",
|
|
131
|
-
style: "
|
|
132
|
-
onClick:
|
|
259
|
+
style: "secondary",
|
|
260
|
+
onClick: function onClick() {
|
|
261
|
+
return setIsSummaryPanelVisible(true);
|
|
262
|
+
}
|
|
133
263
|
})]
|
|
134
264
|
});
|
|
135
|
-
};
|
|
265
|
+
});
|
|
136
266
|
|
|
137
|
-
function ownKeys$
|
|
138
|
-
function _objectSpread$
|
|
267
|
+
function ownKeys$1(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; }
|
|
268
|
+
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
139
269
|
var ElementList = function ElementList(_ref) {
|
|
140
|
-
var
|
|
270
|
+
var setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
|
|
141
271
|
_ref$elementSections = _ref.elementSections,
|
|
142
272
|
elementSections = _ref$elementSections === void 0 ? [] : _ref$elementSections,
|
|
143
273
|
onSelect = _ref.onSelect,
|
|
144
|
-
isSelectedElementsEmpty = _ref.isSelectedElementsEmpty
|
|
274
|
+
isSelectedElementsEmpty = _ref.isSelectedElementsEmpty,
|
|
275
|
+
isDragElementsDisabled = _ref.isDragElementsDisabled;
|
|
145
276
|
var _useTranslation = useTranslation(),
|
|
146
277
|
t = _useTranslation.t;
|
|
147
278
|
var _useState = useState(""),
|
|
@@ -149,10 +280,13 @@ var ElementList = function ElementList(_ref) {
|
|
|
149
280
|
searchString = _useState2[0],
|
|
150
281
|
setSearchString = _useState2[1];
|
|
151
282
|
var filteredSections = useMemo(function () {
|
|
283
|
+
var elementIndex = 0;
|
|
152
284
|
return elementSections.map(function (section) {
|
|
153
|
-
return _objectSpread$
|
|
285
|
+
return _objectSpread$1(_objectSpread$1({}, section), {}, {
|
|
154
286
|
elements: section.elements.filter(function (element) {
|
|
155
287
|
return element.label.toLowerCase().includes(searchString.toLowerCase());
|
|
288
|
+
}).map(function (element) {
|
|
289
|
+
return assoc("elementIndex", elementIndex++, element);
|
|
156
290
|
})
|
|
157
291
|
});
|
|
158
292
|
}).filter(function (section) {
|
|
@@ -162,7 +296,7 @@ var ElementList = function ElementList(_ref) {
|
|
|
162
296
|
return /*#__PURE__*/jsxs(Fragment, {
|
|
163
297
|
children: [/*#__PURE__*/jsx(TitleBar$1, {
|
|
164
298
|
isSelectedElementsEmpty: isSelectedElementsEmpty,
|
|
165
|
-
|
|
299
|
+
setIsSummaryPanelVisible: setIsSummaryPanelVisible
|
|
166
300
|
}), /*#__PURE__*/jsx("div", {
|
|
167
301
|
className: "mb-2 px-6",
|
|
168
302
|
children: /*#__PURE__*/jsx(Input, {
|
|
@@ -176,40 +310,15 @@ var ElementList = function ElementList(_ref) {
|
|
|
176
310
|
}), /*#__PURE__*/jsx(Body, {
|
|
177
311
|
"data-testid": "elements-container",
|
|
178
312
|
size: "small",
|
|
179
|
-
children:
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
elements: section.elements,
|
|
184
|
-
isCreatable: section.isCreatable,
|
|
185
|
-
key: section.key,
|
|
186
|
-
title: section.title
|
|
187
|
-
});
|
|
313
|
+
children: /*#__PURE__*/jsx(SectionsContainer, {
|
|
314
|
+
filteredSections: filteredSections,
|
|
315
|
+
isDragElementsDisabled: isDragElementsDisabled,
|
|
316
|
+
onSelect: onSelect
|
|
188
317
|
})
|
|
189
318
|
})]
|
|
190
319
|
});
|
|
191
320
|
};
|
|
192
321
|
|
|
193
|
-
var _excluded$1 = ["size"];
|
|
194
|
-
function ownKeys$1(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; }
|
|
195
|
-
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
196
|
-
var DragIcon = function DragIcon(_ref) {
|
|
197
|
-
var _ref$size = _ref.size,
|
|
198
|
-
size = _ref$size === void 0 ? 16 : _ref$size,
|
|
199
|
-
otherProps = _objectWithoutProperties(_ref, _excluded$1);
|
|
200
|
-
return /*#__PURE__*/jsx("svg", _objectSpread$1(_objectSpread$1({
|
|
201
|
-
fill: "currentColor",
|
|
202
|
-
height: size,
|
|
203
|
-
viewBox: "0 -960 960 960",
|
|
204
|
-
width: size,
|
|
205
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
206
|
-
}, otherProps), {}, {
|
|
207
|
-
children: /*#__PURE__*/jsx("path", {
|
|
208
|
-
d: "M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160zM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400zM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640z"
|
|
209
|
-
})
|
|
210
|
-
}));
|
|
211
|
-
};
|
|
212
|
-
|
|
213
322
|
var _excluded = ["element", "isActive", "handleSelectElement", "isSelectable", "errors", "actions", "isDraggable"];
|
|
214
323
|
var SelectedElement = function SelectedElement(_ref) {
|
|
215
324
|
var element = _ref.element,
|
|
@@ -278,6 +387,9 @@ var SelectedElement = function SelectedElement(_ref) {
|
|
|
278
387
|
menuItems: menuItems,
|
|
279
388
|
isDisabled: element.isPending,
|
|
280
389
|
dropdownButtonProps: {
|
|
390
|
+
onClick: function onClick(e) {
|
|
391
|
+
return e.stopPropagation();
|
|
392
|
+
},
|
|
281
393
|
className: "min-h-0 flex-shrink-0",
|
|
282
394
|
"data-testid": "".concat(hyphenate(element.label), "-more-dropdown"),
|
|
283
395
|
"data-cy": "".concat(hyphenate(element.label, "new-element"), "-more-dropdown"),
|
|
@@ -288,18 +400,14 @@ var SelectedElement = function SelectedElement(_ref) {
|
|
|
288
400
|
};
|
|
289
401
|
var SelectedElement$1 = /*#__PURE__*/memo(SelectedElement);
|
|
290
402
|
|
|
291
|
-
var TitleBar = function
|
|
292
|
-
var
|
|
403
|
+
var TitleBar = withT(function (_ref) {
|
|
404
|
+
var t = _ref.t,
|
|
405
|
+
setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
|
|
293
406
|
isLoading = _ref.isLoading,
|
|
294
407
|
showElementsFillButton = _ref.showElementsFillButton,
|
|
295
408
|
isAddingAllElements = _ref.isAddingAllElements,
|
|
296
409
|
addAllElements = _ref.addAllElements,
|
|
297
410
|
isAddingNewElement = _ref.isAddingNewElement;
|
|
298
|
-
var _useTranslation = useTranslation(),
|
|
299
|
-
t = _useTranslation.t;
|
|
300
|
-
var handleAddElement = function handleAddElement() {
|
|
301
|
-
return setIsElementsListVisible(true);
|
|
302
|
-
};
|
|
303
411
|
return /*#__PURE__*/jsxs("div", {
|
|
304
412
|
className: "flex items-center justify-between p-6 pb-4",
|
|
305
413
|
"data-testid": "selected-elements-title",
|
|
@@ -315,11 +423,13 @@ var TitleBar = function TitleBar(_ref) {
|
|
|
315
423
|
"data-cy": "add-element-button",
|
|
316
424
|
"data-testid": "add-element-button",
|
|
317
425
|
disabled: isLoading,
|
|
318
|
-
label: t("neetoMolecules.
|
|
426
|
+
label: t("neetoMolecules.common.actions.close"),
|
|
319
427
|
loading: isAddingNewElement,
|
|
320
428
|
size: "small",
|
|
321
429
|
style: "secondary",
|
|
322
|
-
onClick:
|
|
430
|
+
onClick: function onClick() {
|
|
431
|
+
return setIsSummaryPanelVisible(false);
|
|
432
|
+
}
|
|
323
433
|
}), showElementsFillButton && /*#__PURE__*/jsx(Button, {
|
|
324
434
|
"data-cy": "add-all-elements-button",
|
|
325
435
|
disabled: isAddingAllElements,
|
|
@@ -335,18 +445,17 @@ var TitleBar = function TitleBar(_ref) {
|
|
|
335
445
|
})]
|
|
336
446
|
})]
|
|
337
447
|
});
|
|
338
|
-
};
|
|
448
|
+
});
|
|
339
449
|
|
|
340
450
|
function ownKeys(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; }
|
|
341
451
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
342
452
|
var SelectedElementsList = function SelectedElementsList(_ref) {
|
|
343
|
-
var
|
|
344
|
-
|
|
345
|
-
isDragDisabled = _ref.isDragDisabled,
|
|
453
|
+
var handleSelectElement = _ref.handleSelectElement,
|
|
454
|
+
isReorderDisabled = _ref.isReorderDisabled,
|
|
346
455
|
isElementVisible = _ref.isElementVisible,
|
|
347
456
|
selectedElementId = _ref.selectedElementId,
|
|
348
457
|
selectedElements = _ref.selectedElements,
|
|
349
|
-
|
|
458
|
+
setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
|
|
350
459
|
fixedLastElement = _ref.fixedLastElement,
|
|
351
460
|
fixedFirstElement = _ref.fixedFirstElement,
|
|
352
461
|
selectedElementActions = _ref.selectedElementActions,
|
|
@@ -373,55 +482,53 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
|
|
|
373
482
|
addAllElements: addAllElements,
|
|
374
483
|
isAddingAllElements: isAddingAllElements,
|
|
375
484
|
isAddingNewElement: isAddingNewElement,
|
|
376
|
-
|
|
485
|
+
setIsSummaryPanelVisible: setIsSummaryPanelVisible,
|
|
377
486
|
showElementsFillButton: showElementsFillButton
|
|
378
487
|
}), /*#__PURE__*/jsxs(Body, {
|
|
379
488
|
"data-testid": "selected-elements-container",
|
|
380
|
-
children: [Array.isArray(fixedFirstElement) ? isNotEmpty(fixedFirstElement) && fixedFirstElement.map(renderSelectedElement) : isPresent(fixedFirstElement) && renderSelectedElement(fixedFirstElement), /*#__PURE__*/jsx(
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
}
|
|
424
|
-
})
|
|
489
|
+
children: [Array.isArray(fixedFirstElement) ? isNotEmpty(fixedFirstElement) && fixedFirstElement.map(renderSelectedElement) : isPresent(fixedFirstElement) && renderSelectedElement(fixedFirstElement), /*#__PURE__*/jsx(Droppable, {
|
|
490
|
+
droppableId: SELECTED_ELEMENTS_LIST_DROPPABLE_ID,
|
|
491
|
+
type: DROPPABLE_TYPES.SELECTED_ELEMENT,
|
|
492
|
+
children: function children(_ref2) {
|
|
493
|
+
var innerRef = _ref2.innerRef,
|
|
494
|
+
droppableProps = _ref2.droppableProps,
|
|
495
|
+
placeholder = _ref2.placeholder;
|
|
496
|
+
return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
|
|
497
|
+
ref: innerRef
|
|
498
|
+
}, droppableProps), {}, {
|
|
499
|
+
"data-testid": "selected-elements-droppable-container",
|
|
500
|
+
children: [selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.map(function (element, index) {
|
|
501
|
+
var _isElementVisible, _element$id, _element$id2;
|
|
502
|
+
var isVisible = (_isElementVisible = isElementVisible === null || isElementVisible === void 0 ? void 0 : isElementVisible(element)) !== null && _isElementVisible !== void 0 ? _isElementVisible : true;
|
|
503
|
+
if (!isVisible) return null;
|
|
504
|
+
var key = (_element$id = element.id) !== null && _element$id !== void 0 ? _element$id : "element-".concat(joinHyphenCase(element.label));
|
|
505
|
+
return /*#__PURE__*/createElement(Draggable, {
|
|
506
|
+
index: index,
|
|
507
|
+
draggableId: (_element$id2 = element.id) !== null && _element$id2 !== void 0 ? _element$id2 : "element-".concat(index),
|
|
508
|
+
isDragDisabled: isReorderDisabled,
|
|
509
|
+
key: key
|
|
510
|
+
}, function (_ref3) {
|
|
511
|
+
var _element$id3;
|
|
512
|
+
var innerRef = _ref3.innerRef,
|
|
513
|
+
draggableProps = _ref3.draggableProps,
|
|
514
|
+
dragHandleProps = _ref3.dragHandleProps;
|
|
515
|
+
return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
|
|
516
|
+
ref: innerRef
|
|
517
|
+
}, draggableProps), dragHandleProps), {}, {
|
|
518
|
+
children: /*#__PURE__*/createElement(SelectedElement$1, {
|
|
519
|
+
element: element,
|
|
520
|
+
handleSelectElement: handleSelectElement,
|
|
521
|
+
isSelectable: true,
|
|
522
|
+
actions: selectedElementActions,
|
|
523
|
+
isActive: selectedElementId === element.id,
|
|
524
|
+
isDraggable: !isReorderDisabled,
|
|
525
|
+
key: (_element$id3 = element.id) !== null && _element$id3 !== void 0 ? _element$id3 : index
|
|
526
|
+
})
|
|
527
|
+
}));
|
|
528
|
+
});
|
|
529
|
+
}), placeholder]
|
|
530
|
+
}));
|
|
531
|
+
}
|
|
425
532
|
}), isPresent(fixedLastElement) && /*#__PURE__*/jsx(SelectedElement$1, {
|
|
426
533
|
handleSelectElement: handleSelectElement,
|
|
427
534
|
isSelectable: true,
|
|
@@ -444,10 +551,10 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
444
551
|
_ref$fixedFirstElemen = _ref.fixedFirstElement,
|
|
445
552
|
fixedFirstElement = _ref$fixedFirstElemen === void 0 ? [] : _ref$fixedFirstElemen,
|
|
446
553
|
fixedLastElement = _ref.fixedLastElement,
|
|
447
|
-
_ref$
|
|
448
|
-
|
|
449
|
-
_ref$
|
|
450
|
-
|
|
554
|
+
_ref$isReorderDisable = _ref.isReorderDisabled,
|
|
555
|
+
isReorderDisabled = _ref$isReorderDisable === void 0 ? true : _ref$isReorderDisable,
|
|
556
|
+
_ref$isDragElementsDi = _ref.isDragElementsDisabled,
|
|
557
|
+
isDragElementsDisabled = _ref$isDragElementsDi === void 0 ? true : _ref$isDragElementsDi,
|
|
451
558
|
handleSelectElement = _ref.handleSelectElement,
|
|
452
559
|
selectedElementId = _ref.selectedElementId,
|
|
453
560
|
selectedElementActions = _ref.selectedElementActions,
|
|
@@ -461,8 +568,8 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
461
568
|
isAddingNewElement = _ref$isAddingNewEleme === void 0 ? false : _ref$isAddingNewEleme;
|
|
462
569
|
var _useState = useState(false),
|
|
463
570
|
_useState2 = _slicedToArray(_useState, 2),
|
|
464
|
-
|
|
465
|
-
|
|
571
|
+
isSummaryPanelVisible = _useState2[0],
|
|
572
|
+
setIsSummaryPanelVisible = _useState2[1];
|
|
466
573
|
var _useBreakpoints = useBreakpoints(),
|
|
467
574
|
isSize = _useBreakpoints.isSize;
|
|
468
575
|
var isLargerScreen = !isSize("mobile");
|
|
@@ -470,12 +577,6 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
470
577
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
471
578
|
isElementsPanelCollapsed = _useState4[0],
|
|
472
579
|
setIsElementsPanelCollapsed = _useState4[1];
|
|
473
|
-
var isSelectedElementsEmpty = isEmpty(selectedElements);
|
|
474
|
-
var shouldShowElementsList = isSelectedElementsEmpty || isElementsListVisible;
|
|
475
|
-
var handleElementSelect = function handleElementSelect(element) {
|
|
476
|
-
setIsElementsListVisible(false);
|
|
477
|
-
handleAddElement(element);
|
|
478
|
-
};
|
|
479
580
|
useEffect(function () {
|
|
480
581
|
setIsElementsPanelCollapsed(!isLargerScreen);
|
|
481
582
|
}, [isLargerScreen]);
|
|
@@ -496,26 +597,25 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
496
597
|
onClick: function onClick(event) {
|
|
497
598
|
return event.stopPropagation();
|
|
498
599
|
},
|
|
499
|
-
children:
|
|
500
|
-
elementSections: elementSections,
|
|
501
|
-
isSelectedElementsEmpty: isSelectedElementsEmpty,
|
|
502
|
-
setIsElementsListVisible: setIsElementsListVisible,
|
|
503
|
-
onSelect: handleElementSelect
|
|
504
|
-
}) : /*#__PURE__*/jsx(SelectedElementsList, {
|
|
600
|
+
children: isSummaryPanelVisible ? /*#__PURE__*/jsx(SelectedElementsList, {
|
|
505
601
|
addAllElements: addAllElements,
|
|
506
602
|
fixedFirstElement: fixedFirstElement,
|
|
507
603
|
fixedLastElement: fixedLastElement,
|
|
508
|
-
handleDragEnd: handleDragEnd,
|
|
509
604
|
handleSelectElement: handleSelectElement,
|
|
510
605
|
isAddingAllElements: isAddingAllElements,
|
|
511
606
|
isAddingNewElement: isAddingNewElement,
|
|
512
|
-
isDragDisabled: isDragDisabled,
|
|
513
607
|
isElementVisible: isElementVisible,
|
|
608
|
+
isReorderDisabled: isReorderDisabled,
|
|
514
609
|
selectedElementActions: selectedElementActions,
|
|
515
610
|
selectedElementId: selectedElementId,
|
|
516
611
|
selectedElements: selectedElements,
|
|
517
|
-
|
|
612
|
+
setIsSummaryPanelVisible: setIsSummaryPanelVisible,
|
|
518
613
|
showElementsFillButton: showElementsFillButton
|
|
614
|
+
}) : /*#__PURE__*/jsx(ElementList, {
|
|
615
|
+
elementSections: elementSections,
|
|
616
|
+
isDragElementsDisabled: isDragElementsDisabled,
|
|
617
|
+
setIsSummaryPanelVisible: setIsSummaryPanelVisible,
|
|
618
|
+
onSelect: handleAddElement
|
|
519
619
|
})
|
|
520
620
|
})
|
|
521
621
|
}), /*#__PURE__*/jsx(Button, {
|
|
@@ -530,7 +630,7 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
530
630
|
});
|
|
531
631
|
};
|
|
532
632
|
|
|
533
|
-
var EmptyProperty = withT(function (_ref) {
|
|
633
|
+
var EmptyProperty = withT$1(function (_ref) {
|
|
534
634
|
var t = _ref.t;
|
|
535
635
|
return /*#__PURE__*/jsxs("div", {
|
|
536
636
|
className: "space-y-4 pb-6 pr-6",
|
|
@@ -551,7 +651,7 @@ var EmptyProperty = withT(function (_ref) {
|
|
|
551
651
|
});
|
|
552
652
|
});
|
|
553
653
|
|
|
554
|
-
var Skeleton = withT(function (_ref) {
|
|
654
|
+
var Skeleton = withT$1(function (_ref) {
|
|
555
655
|
var t = _ref.t;
|
|
556
656
|
return /*#__PURE__*/jsxs("div", {
|
|
557
657
|
className: "space-y-4 pb-6 pr-6",
|
|
@@ -623,5 +723,5 @@ var PropertiesPanel = function PropertiesPanel(_ref) {
|
|
|
623
723
|
};
|
|
624
724
|
PropertiesPanel.EmptyProperty = EmptyProperty;
|
|
625
725
|
|
|
626
|
-
export { ElementsPanel, PropertiesPanel };
|
|
726
|
+
export { DROPPABLE_TYPES, ELEMENTS_LIST_DROPPABLE_ID, ElementsPanel, PREVIEW_CONTAINER_DROPPABLE_ID, PropertiesPanel, SELECTED_ELEMENTS_LIST_DROPPABLE_ID };
|
|
627
727
|
//# sourceMappingURL=Builder.js.map
|