@bigbinary/neeto-molecules 3.5.1 → 3.5.2-beta-2
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 +252 -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/ProductEmbed.js +1 -1
- package/dist/ProductEmbed.js.map +1 -1
- package/dist/SessionEnvironment.js +2 -2
- package/dist/SessionEnvironment.js.map +1 -1
- package/dist/cjs/Builder.js +251 -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/ProductEmbed.js +1 -1
- package/dist/cjs/ProductEmbed.js.map +1 -1
- package/dist/cjs/SessionEnvironment.js +2 -2
- package/dist/cjs/SessionEnvironment.js.map +1 -1
- package/package.json +1 -1
- 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,
|
|
@@ -288,18 +397,14 @@ var SelectedElement = function SelectedElement(_ref) {
|
|
|
288
397
|
};
|
|
289
398
|
var SelectedElement$1 = /*#__PURE__*/memo(SelectedElement);
|
|
290
399
|
|
|
291
|
-
var TitleBar = function
|
|
292
|
-
var
|
|
400
|
+
var TitleBar = withT(function (_ref) {
|
|
401
|
+
var t = _ref.t,
|
|
402
|
+
setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
|
|
293
403
|
isLoading = _ref.isLoading,
|
|
294
404
|
showElementsFillButton = _ref.showElementsFillButton,
|
|
295
405
|
isAddingAllElements = _ref.isAddingAllElements,
|
|
296
406
|
addAllElements = _ref.addAllElements,
|
|
297
407
|
isAddingNewElement = _ref.isAddingNewElement;
|
|
298
|
-
var _useTranslation = useTranslation(),
|
|
299
|
-
t = _useTranslation.t;
|
|
300
|
-
var handleAddElement = function handleAddElement() {
|
|
301
|
-
return setIsElementsListVisible(true);
|
|
302
|
-
};
|
|
303
408
|
return /*#__PURE__*/jsxs("div", {
|
|
304
409
|
className: "flex items-center justify-between p-6 pb-4",
|
|
305
410
|
"data-testid": "selected-elements-title",
|
|
@@ -315,11 +420,13 @@ var TitleBar = function TitleBar(_ref) {
|
|
|
315
420
|
"data-cy": "add-element-button",
|
|
316
421
|
"data-testid": "add-element-button",
|
|
317
422
|
disabled: isLoading,
|
|
318
|
-
label: t("neetoMolecules.
|
|
423
|
+
label: t("neetoMolecules.common.actions.close"),
|
|
319
424
|
loading: isAddingNewElement,
|
|
320
425
|
size: "small",
|
|
321
426
|
style: "secondary",
|
|
322
|
-
onClick:
|
|
427
|
+
onClick: function onClick() {
|
|
428
|
+
return setIsSummaryPanelVisible(false);
|
|
429
|
+
}
|
|
323
430
|
}), showElementsFillButton && /*#__PURE__*/jsx(Button, {
|
|
324
431
|
"data-cy": "add-all-elements-button",
|
|
325
432
|
disabled: isAddingAllElements,
|
|
@@ -335,18 +442,17 @@ var TitleBar = function TitleBar(_ref) {
|
|
|
335
442
|
})]
|
|
336
443
|
})]
|
|
337
444
|
});
|
|
338
|
-
};
|
|
445
|
+
});
|
|
339
446
|
|
|
340
447
|
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
448
|
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
449
|
var SelectedElementsList = function SelectedElementsList(_ref) {
|
|
343
|
-
var
|
|
344
|
-
|
|
345
|
-
isDragDisabled = _ref.isDragDisabled,
|
|
450
|
+
var handleSelectElement = _ref.handleSelectElement,
|
|
451
|
+
isReorderDisabled = _ref.isReorderDisabled,
|
|
346
452
|
isElementVisible = _ref.isElementVisible,
|
|
347
453
|
selectedElementId = _ref.selectedElementId,
|
|
348
454
|
selectedElements = _ref.selectedElements,
|
|
349
|
-
|
|
455
|
+
setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
|
|
350
456
|
fixedLastElement = _ref.fixedLastElement,
|
|
351
457
|
fixedFirstElement = _ref.fixedFirstElement,
|
|
352
458
|
selectedElementActions = _ref.selectedElementActions,
|
|
@@ -373,55 +479,53 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
|
|
|
373
479
|
addAllElements: addAllElements,
|
|
374
480
|
isAddingAllElements: isAddingAllElements,
|
|
375
481
|
isAddingNewElement: isAddingNewElement,
|
|
376
|
-
|
|
482
|
+
setIsSummaryPanelVisible: setIsSummaryPanelVisible,
|
|
377
483
|
showElementsFillButton: showElementsFillButton
|
|
378
484
|
}), /*#__PURE__*/jsxs(Body, {
|
|
379
485
|
"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
|
-
})
|
|
486
|
+
children: [Array.isArray(fixedFirstElement) ? isNotEmpty(fixedFirstElement) && fixedFirstElement.map(renderSelectedElement) : isPresent(fixedFirstElement) && renderSelectedElement(fixedFirstElement), /*#__PURE__*/jsx(Droppable, {
|
|
487
|
+
droppableId: SELECTED_ELEMENTS_LIST_DROPPABLE_ID,
|
|
488
|
+
type: DROPPABLE_TYPES.SELECTED_ELEMENT,
|
|
489
|
+
children: function children(_ref2) {
|
|
490
|
+
var innerRef = _ref2.innerRef,
|
|
491
|
+
droppableProps = _ref2.droppableProps,
|
|
492
|
+
placeholder = _ref2.placeholder;
|
|
493
|
+
return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
|
|
494
|
+
ref: innerRef
|
|
495
|
+
}, droppableProps), {}, {
|
|
496
|
+
"data-testid": "selected-elements-droppable-container",
|
|
497
|
+
children: [selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.map(function (element, index) {
|
|
498
|
+
var _isElementVisible, _element$id, _element$id2;
|
|
499
|
+
var isVisible = (_isElementVisible = isElementVisible === null || isElementVisible === void 0 ? void 0 : isElementVisible(element)) !== null && _isElementVisible !== void 0 ? _isElementVisible : true;
|
|
500
|
+
if (!isVisible) return null;
|
|
501
|
+
var key = (_element$id = element.id) !== null && _element$id !== void 0 ? _element$id : "element-".concat(joinHyphenCase(element.label));
|
|
502
|
+
return /*#__PURE__*/createElement(Draggable, {
|
|
503
|
+
index: index,
|
|
504
|
+
draggableId: (_element$id2 = element.id) !== null && _element$id2 !== void 0 ? _element$id2 : "element-".concat(index),
|
|
505
|
+
isDragDisabled: isReorderDisabled,
|
|
506
|
+
key: key
|
|
507
|
+
}, function (_ref3) {
|
|
508
|
+
var _element$id3;
|
|
509
|
+
var innerRef = _ref3.innerRef,
|
|
510
|
+
draggableProps = _ref3.draggableProps,
|
|
511
|
+
dragHandleProps = _ref3.dragHandleProps;
|
|
512
|
+
return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
|
|
513
|
+
ref: innerRef
|
|
514
|
+
}, draggableProps), dragHandleProps), {}, {
|
|
515
|
+
children: /*#__PURE__*/createElement(SelectedElement$1, {
|
|
516
|
+
element: element,
|
|
517
|
+
handleSelectElement: handleSelectElement,
|
|
518
|
+
isSelectable: true,
|
|
519
|
+
actions: selectedElementActions,
|
|
520
|
+
isActive: selectedElementId === element.id,
|
|
521
|
+
isDraggable: !isReorderDisabled,
|
|
522
|
+
key: (_element$id3 = element.id) !== null && _element$id3 !== void 0 ? _element$id3 : index
|
|
523
|
+
})
|
|
524
|
+
}));
|
|
525
|
+
});
|
|
526
|
+
}), placeholder]
|
|
527
|
+
}));
|
|
528
|
+
}
|
|
425
529
|
}), isPresent(fixedLastElement) && /*#__PURE__*/jsx(SelectedElement$1, {
|
|
426
530
|
handleSelectElement: handleSelectElement,
|
|
427
531
|
isSelectable: true,
|
|
@@ -444,10 +548,10 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
444
548
|
_ref$fixedFirstElemen = _ref.fixedFirstElement,
|
|
445
549
|
fixedFirstElement = _ref$fixedFirstElemen === void 0 ? [] : _ref$fixedFirstElemen,
|
|
446
550
|
fixedLastElement = _ref.fixedLastElement,
|
|
447
|
-
_ref$
|
|
448
|
-
|
|
449
|
-
_ref$
|
|
450
|
-
|
|
551
|
+
_ref$isReorderDisable = _ref.isReorderDisabled,
|
|
552
|
+
isReorderDisabled = _ref$isReorderDisable === void 0 ? true : _ref$isReorderDisable,
|
|
553
|
+
_ref$isDragElementsDi = _ref.isDragElementsDisabled,
|
|
554
|
+
isDragElementsDisabled = _ref$isDragElementsDi === void 0 ? true : _ref$isDragElementsDi,
|
|
451
555
|
handleSelectElement = _ref.handleSelectElement,
|
|
452
556
|
selectedElementId = _ref.selectedElementId,
|
|
453
557
|
selectedElementActions = _ref.selectedElementActions,
|
|
@@ -461,8 +565,8 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
461
565
|
isAddingNewElement = _ref$isAddingNewEleme === void 0 ? false : _ref$isAddingNewEleme;
|
|
462
566
|
var _useState = useState(false),
|
|
463
567
|
_useState2 = _slicedToArray(_useState, 2),
|
|
464
|
-
|
|
465
|
-
|
|
568
|
+
isSummaryPanelVisible = _useState2[0],
|
|
569
|
+
setIsSummaryPanelVisible = _useState2[1];
|
|
466
570
|
var _useBreakpoints = useBreakpoints(),
|
|
467
571
|
isSize = _useBreakpoints.isSize;
|
|
468
572
|
var isLargerScreen = !isSize("mobile");
|
|
@@ -470,12 +574,6 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
470
574
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
471
575
|
isElementsPanelCollapsed = _useState4[0],
|
|
472
576
|
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
577
|
useEffect(function () {
|
|
480
578
|
setIsElementsPanelCollapsed(!isLargerScreen);
|
|
481
579
|
}, [isLargerScreen]);
|
|
@@ -496,26 +594,25 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
496
594
|
onClick: function onClick(event) {
|
|
497
595
|
return event.stopPropagation();
|
|
498
596
|
},
|
|
499
|
-
children:
|
|
500
|
-
elementSections: elementSections,
|
|
501
|
-
isSelectedElementsEmpty: isSelectedElementsEmpty,
|
|
502
|
-
setIsElementsListVisible: setIsElementsListVisible,
|
|
503
|
-
onSelect: handleElementSelect
|
|
504
|
-
}) : /*#__PURE__*/jsx(SelectedElementsList, {
|
|
597
|
+
children: isSummaryPanelVisible ? /*#__PURE__*/jsx(SelectedElementsList, {
|
|
505
598
|
addAllElements: addAllElements,
|
|
506
599
|
fixedFirstElement: fixedFirstElement,
|
|
507
600
|
fixedLastElement: fixedLastElement,
|
|
508
|
-
handleDragEnd: handleDragEnd,
|
|
509
601
|
handleSelectElement: handleSelectElement,
|
|
510
602
|
isAddingAllElements: isAddingAllElements,
|
|
511
603
|
isAddingNewElement: isAddingNewElement,
|
|
512
|
-
isDragDisabled: isDragDisabled,
|
|
513
604
|
isElementVisible: isElementVisible,
|
|
605
|
+
isReorderDisabled: isReorderDisabled,
|
|
514
606
|
selectedElementActions: selectedElementActions,
|
|
515
607
|
selectedElementId: selectedElementId,
|
|
516
608
|
selectedElements: selectedElements,
|
|
517
|
-
|
|
609
|
+
setIsSummaryPanelVisible: setIsSummaryPanelVisible,
|
|
518
610
|
showElementsFillButton: showElementsFillButton
|
|
611
|
+
}) : /*#__PURE__*/jsx(ElementList, {
|
|
612
|
+
elementSections: elementSections,
|
|
613
|
+
isDragElementsDisabled: isDragElementsDisabled,
|
|
614
|
+
setIsSummaryPanelVisible: setIsSummaryPanelVisible,
|
|
615
|
+
onSelect: handleAddElement
|
|
519
616
|
})
|
|
520
617
|
})
|
|
521
618
|
}), /*#__PURE__*/jsx(Button, {
|
|
@@ -530,7 +627,7 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
530
627
|
});
|
|
531
628
|
};
|
|
532
629
|
|
|
533
|
-
var EmptyProperty = withT(function (_ref) {
|
|
630
|
+
var EmptyProperty = withT$1(function (_ref) {
|
|
534
631
|
var t = _ref.t;
|
|
535
632
|
return /*#__PURE__*/jsxs("div", {
|
|
536
633
|
className: "space-y-4 pb-6 pr-6",
|
|
@@ -551,7 +648,7 @@ var EmptyProperty = withT(function (_ref) {
|
|
|
551
648
|
});
|
|
552
649
|
});
|
|
553
650
|
|
|
554
|
-
var Skeleton = withT(function (_ref) {
|
|
651
|
+
var Skeleton = withT$1(function (_ref) {
|
|
555
652
|
var t = _ref.t;
|
|
556
653
|
return /*#__PURE__*/jsxs("div", {
|
|
557
654
|
className: "space-y-4 pb-6 pr-6",
|
|
@@ -623,5 +720,5 @@ var PropertiesPanel = function PropertiesPanel(_ref) {
|
|
|
623
720
|
};
|
|
624
721
|
PropertiesPanel.EmptyProperty = EmptyProperty;
|
|
625
722
|
|
|
626
|
-
export { ElementsPanel, PropertiesPanel };
|
|
723
|
+
export { DROPPABLE_TYPES, ELEMENTS_LIST_DROPPABLE_ID, ElementsPanel, PREVIEW_CONTAINER_DROPPABLE_ID, PropertiesPanel, SELECTED_ELEMENTS_LIST_DROPPABLE_ID };
|
|
627
724
|
//# sourceMappingURL=Builder.js.map
|