@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/cjs/Builder.js
CHANGED
|
@@ -9,18 +9,18 @@ var neetoCist = require('@bigbinary/neeto-cist');
|
|
|
9
9
|
var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
|
|
10
10
|
var Collapse = require('@bigbinary/neeto-icons/Collapse');
|
|
11
11
|
var Button = require('@bigbinary/neetoui/Button');
|
|
12
|
-
var ramda = require('ramda');
|
|
13
12
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
14
13
|
var general = require('@bigbinary/neeto-commons-frontend/utils/general');
|
|
15
14
|
var Search = require('@bigbinary/neeto-icons/Search');
|
|
16
15
|
var Input = require('@bigbinary/neetoui/Input');
|
|
16
|
+
var ramda = require('ramda');
|
|
17
17
|
var reactI18next = require('react-i18next');
|
|
18
18
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
19
19
|
var injectCss = require('./inject-css-80a5faa3.js');
|
|
20
20
|
var jsxRuntime = require('react/jsx-runtime');
|
|
21
|
+
var dnd = require('@hello-pangea/dnd');
|
|
21
22
|
var Typography = require('@bigbinary/neetoui/Typography');
|
|
22
23
|
var Tooltip = require('@bigbinary/neetoui/Tooltip');
|
|
23
|
-
var dnd = require('@hello-pangea/dnd');
|
|
24
24
|
var MoreDropdown = require('./MoreDropdown.js');
|
|
25
25
|
var constants = require('@bigbinary/neeto-commons-frontend/constants');
|
|
26
26
|
var Flash = require('@bigbinary/neeto-icons/Flash');
|
|
@@ -48,42 +48,80 @@ var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
|
|
|
48
48
|
var withT__default = /*#__PURE__*/_interopDefaultLegacy(withT);
|
|
49
49
|
var DownArrow__default = /*#__PURE__*/_interopDefaultLegacy(DownArrow);
|
|
50
50
|
|
|
51
|
-
var
|
|
51
|
+
var SELECTED_ELEMENTS_LIST_DROPPABLE_ID = "droppable-selected-element-container";
|
|
52
|
+
var ELEMENTS_LIST_DROPPABLE_ID = "droppable-element-container";
|
|
53
|
+
var PREVIEW_CONTAINER_DROPPABLE_ID = "droppable-form-preview-container";
|
|
54
|
+
var DROPPABLE_TYPES = {
|
|
55
|
+
ELEMENT: "element",
|
|
56
|
+
SELECTED_ELEMENT: "selected_element"
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
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}}";
|
|
52
60
|
injectCss.n(css,{});
|
|
53
61
|
|
|
54
62
|
var _excluded$2 = ["size"];
|
|
55
|
-
function ownKeys$
|
|
56
|
-
function _objectSpread$
|
|
63
|
+
function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
64
|
+
function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](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; }
|
|
57
65
|
var Body = function Body(_ref) {
|
|
58
66
|
var size = _ref.size,
|
|
59
67
|
props = _objectWithoutProperties__default["default"](_ref, _excluded$2);
|
|
60
|
-
return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$
|
|
68
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
|
|
61
69
|
className: classnames__default["default"]("neeto-molecules-builder-questions-list-panel__scroll", {
|
|
62
70
|
"neeto-molecules-builder-questions-list-panel__scroll--small": size === "small"
|
|
63
71
|
})
|
|
64
72
|
}));
|
|
65
73
|
};
|
|
66
74
|
|
|
75
|
+
var _excluded$1 = ["size"];
|
|
76
|
+
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; }
|
|
77
|
+
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__default["default"](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; }
|
|
78
|
+
var DragIcon = function DragIcon(_ref) {
|
|
79
|
+
var _ref$size = _ref.size,
|
|
80
|
+
size = _ref$size === void 0 ? 16 : _ref$size,
|
|
81
|
+
otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$1);
|
|
82
|
+
return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$4(_objectSpread$4({
|
|
83
|
+
fill: "currentColor",
|
|
84
|
+
height: size,
|
|
85
|
+
viewBox: "0 -960 960 960",
|
|
86
|
+
width: size,
|
|
87
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
88
|
+
}, otherProps), {}, {
|
|
89
|
+
children: /*#__PURE__*/jsxRuntime.jsx("path", {
|
|
90
|
+
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"
|
|
91
|
+
})
|
|
92
|
+
}));
|
|
93
|
+
};
|
|
94
|
+
|
|
67
95
|
var Element = function Element(_ref) {
|
|
68
96
|
var label = _ref.label,
|
|
69
97
|
Icon = _ref.icon,
|
|
70
98
|
_ref$isCreatable = _ref.isCreatable,
|
|
71
99
|
isCreatable = _ref$isCreatable === void 0 ? true : _ref$isCreatable,
|
|
72
100
|
onClick = _ref.onClick,
|
|
73
|
-
|
|
101
|
+
_ref$isDragDisabled = _ref.isDragDisabled,
|
|
102
|
+
isDragDisabled = _ref$isDragDisabled === void 0 ? false : _ref$isDragDisabled,
|
|
103
|
+
disabledElementTooltip = _ref.disabledElementTooltip,
|
|
104
|
+
isPlaceholder = _ref.isPlaceholder,
|
|
105
|
+
isDraggingOver = _ref.isDraggingOver;
|
|
74
106
|
return /*#__PURE__*/jsxRuntime.jsx(Tooltip__default["default"], {
|
|
75
107
|
content: disabledElementTooltip === null || disabledElementTooltip === void 0 ? void 0 : disabledElementTooltip(label),
|
|
76
|
-
disabled: !disabledElementTooltip || isCreatable,
|
|
108
|
+
disabled: !disabledElementTooltip || isCreatable || isDraggingOver,
|
|
77
109
|
position: "top",
|
|
78
110
|
touch: ["hold", 500],
|
|
79
|
-
children: /*#__PURE__*/jsxRuntime.
|
|
111
|
+
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
80
112
|
"data-cy": "add-".concat(general.joinHyphenCase(label), "-element"),
|
|
81
|
-
className: classnames__default["default"]("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", {
|
|
113
|
+
className: classnames__default["default"]("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", {
|
|
82
114
|
"neeto-ui-bg-gray-300 cursor-not-allowed": !isCreatable,
|
|
83
|
-
"cursor-pointer": isCreatable
|
|
115
|
+
"cursor-pointer": isCreatable,
|
|
116
|
+
"opacity-50": isPlaceholder
|
|
84
117
|
}),
|
|
85
118
|
onClick: isCreatable ? onClick : neetoCist.noop,
|
|
86
|
-
children: /*#__PURE__*/jsxRuntime.
|
|
119
|
+
children: [!isDragDisabled && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
120
|
+
className: "absolute right-full top-1/2 flex-shrink-0 -translate-y-1/2 cursor-grab",
|
|
121
|
+
children: /*#__PURE__*/jsxRuntime.jsx(DragIcon, {
|
|
122
|
+
size: 16
|
|
123
|
+
})
|
|
124
|
+
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
87
125
|
className: "flex flex-grow items-center gap-2",
|
|
88
126
|
children: [Icon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
|
|
89
127
|
"data-cy": "form-icon"
|
|
@@ -92,19 +130,74 @@ var Element = function Element(_ref) {
|
|
|
92
130
|
style: "body2",
|
|
93
131
|
children: label
|
|
94
132
|
})]
|
|
95
|
-
})
|
|
133
|
+
})]
|
|
96
134
|
})
|
|
97
135
|
});
|
|
98
136
|
};
|
|
99
137
|
|
|
100
138
|
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; }
|
|
101
139
|
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__default["default"](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; }
|
|
140
|
+
var ElementContainer = function ElementContainer(_ref) {
|
|
141
|
+
var index = _ref.index,
|
|
142
|
+
isDragDisabled = _ref.isDragDisabled,
|
|
143
|
+
element = _ref.element,
|
|
144
|
+
disabledElementTooltip = _ref.disabledElementTooltip,
|
|
145
|
+
isCreatable = _ref.isCreatable,
|
|
146
|
+
onSelect = _ref.onSelect,
|
|
147
|
+
isDraggingOver = _ref.isDraggingOver;
|
|
148
|
+
var isCreatableElement = isCreatable(element.value);
|
|
149
|
+
if (isDragDisabled) {
|
|
150
|
+
return /*#__PURE__*/jsxRuntime.jsx(Element, _objectSpread$3(_objectSpread$3({}, _objectSpread$3(_objectSpread$3({}, element), {}, {
|
|
151
|
+
disabledElementTooltip: disabledElementTooltip,
|
|
152
|
+
isDragDisabled: isDragDisabled
|
|
153
|
+
})), {}, {
|
|
154
|
+
isCreatable: isCreatableElement,
|
|
155
|
+
onClick: function onClick() {
|
|
156
|
+
return onSelect(element);
|
|
157
|
+
}
|
|
158
|
+
}));
|
|
159
|
+
}
|
|
160
|
+
return /*#__PURE__*/React.createElement(dnd.Draggable, {
|
|
161
|
+
index: index,
|
|
162
|
+
draggableId: element.value,
|
|
163
|
+
isDragDisabled: isDragDisabled || !isCreatableElement,
|
|
164
|
+
key: element.label
|
|
165
|
+
}, function (provided, snapshot) {
|
|
166
|
+
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
167
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$3(_objectSpread$3(_objectSpread$3({
|
|
168
|
+
ref: provided.innerRef
|
|
169
|
+
}, provided.draggableProps), provided.dragHandleProps), {}, {
|
|
170
|
+
style: _objectSpread$3(_objectSpread$3({}, provided.draggableProps.style), !snapshot.isDragging && {
|
|
171
|
+
transform: "none"
|
|
172
|
+
}),
|
|
173
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Element, _objectSpread$3(_objectSpread$3({}, _objectSpread$3(_objectSpread$3({}, element), {}, {
|
|
174
|
+
disabledElementTooltip: disabledElementTooltip,
|
|
175
|
+
isDragDisabled: isDragDisabled,
|
|
176
|
+
isDraggingOver: isDraggingOver
|
|
177
|
+
})), {}, {
|
|
178
|
+
isCreatable: isCreatableElement,
|
|
179
|
+
onClick: function onClick() {
|
|
180
|
+
return onSelect(element);
|
|
181
|
+
}
|
|
182
|
+
}))
|
|
183
|
+
})), snapshot.isDragging && /*#__PURE__*/jsxRuntime.jsx(Element, _objectSpread$3(_objectSpread$3({
|
|
184
|
+
disabledElementTooltip: null
|
|
185
|
+
}, _objectSpread$3({}, element)), {}, {
|
|
186
|
+
isCreatable: false,
|
|
187
|
+
onClick: neetoCist.noop
|
|
188
|
+
}))]
|
|
189
|
+
});
|
|
190
|
+
});
|
|
191
|
+
};
|
|
192
|
+
|
|
102
193
|
var Section = function Section(_ref) {
|
|
103
194
|
var title = _ref.title,
|
|
104
195
|
elements = _ref.elements,
|
|
105
196
|
onSelect = _ref.onSelect,
|
|
106
197
|
isCreatable = _ref.isCreatable,
|
|
107
|
-
disabledElementTooltip = _ref.disabledElementTooltip
|
|
198
|
+
disabledElementTooltip = _ref.disabledElementTooltip,
|
|
199
|
+
isDragDisabled = _ref.isDragElementsDisabled,
|
|
200
|
+
isDraggingOver = _ref.isDraggingOver;
|
|
108
201
|
if (ramda.isEmpty(elements)) {
|
|
109
202
|
return null;
|
|
110
203
|
}
|
|
@@ -115,27 +208,62 @@ var Section = function Section(_ref) {
|
|
|
115
208
|
textTransform: "uppercase",
|
|
116
209
|
children: title
|
|
117
210
|
}), elements.map(function (element) {
|
|
118
|
-
return /*#__PURE__*/React.createElement(
|
|
119
|
-
disabledElementTooltip: disabledElementTooltip
|
|
120
|
-
|
|
121
|
-
isCreatable: isCreatable
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
211
|
+
return /*#__PURE__*/React.createElement(ElementContainer, {
|
|
212
|
+
disabledElementTooltip: disabledElementTooltip,
|
|
213
|
+
element: element,
|
|
214
|
+
isCreatable: isCreatable,
|
|
215
|
+
isDragDisabled: isDragDisabled,
|
|
216
|
+
isDraggingOver: isDraggingOver,
|
|
217
|
+
onSelect: onSelect,
|
|
218
|
+
index: element.elementIndex,
|
|
219
|
+
key: element.label
|
|
220
|
+
});
|
|
127
221
|
})]
|
|
128
222
|
});
|
|
129
223
|
};
|
|
130
224
|
|
|
131
|
-
|
|
132
|
-
|
|
225
|
+
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; }
|
|
226
|
+
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__default["default"](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; }
|
|
227
|
+
var SectionsContainer = function SectionsContainer(_ref) {
|
|
228
|
+
var isDragElementsDisabled = _ref.isDragElementsDisabled,
|
|
229
|
+
filteredSections = _ref.filteredSections,
|
|
230
|
+
onSelect = _ref.onSelect;
|
|
231
|
+
if (isDragElementsDisabled) {
|
|
232
|
+
return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
233
|
+
children: filteredSections.map(function (section) {
|
|
234
|
+
return /*#__PURE__*/React.createElement(Section, _objectSpread$2(_objectSpread$2({}, _objectSpread$2({
|
|
235
|
+
isDragElementsDisabled: isDragElementsDisabled,
|
|
236
|
+
onSelect: onSelect
|
|
237
|
+
}, section)), {}, {
|
|
238
|
+
key: section.key
|
|
239
|
+
}));
|
|
240
|
+
})
|
|
241
|
+
});
|
|
242
|
+
}
|
|
243
|
+
return /*#__PURE__*/jsxRuntime.jsx(dnd.Droppable, {
|
|
244
|
+
droppableId: ELEMENTS_LIST_DROPPABLE_ID,
|
|
245
|
+
type: DROPPABLE_TYPES.ELEMENT,
|
|
246
|
+
children: function children(provided, snapshot) {
|
|
247
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
248
|
+
ref: provided.innerRef,
|
|
249
|
+
children: filteredSections.map(function (section) {
|
|
250
|
+
return /*#__PURE__*/React.createElement(Section, _objectSpread$2(_objectSpread$2({}, _objectSpread$2({
|
|
251
|
+
isDragElementsDisabled: isDragElementsDisabled,
|
|
252
|
+
onSelect: onSelect
|
|
253
|
+
}, section)), {}, {
|
|
254
|
+
isDraggingOver: snapshot.isDraggingOver,
|
|
255
|
+
key: section.key
|
|
256
|
+
}));
|
|
257
|
+
})
|
|
258
|
+
});
|
|
259
|
+
}
|
|
260
|
+
});
|
|
261
|
+
};
|
|
262
|
+
|
|
263
|
+
var TitleBar$1 = reactUtils.withT(function (_ref) {
|
|
264
|
+
var t = _ref.t,
|
|
265
|
+
setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
|
|
133
266
|
isSelectedElementsEmpty = _ref.isSelectedElementsEmpty;
|
|
134
|
-
var _useTranslation = reactI18next.useTranslation(),
|
|
135
|
-
t = _useTranslation.t;
|
|
136
|
-
var onCancel = function onCancel() {
|
|
137
|
-
return setIsElementsListVisible(false);
|
|
138
|
-
};
|
|
139
267
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
140
268
|
className: "flex items-center justify-between p-6 pb-4",
|
|
141
269
|
"data-testid": "elements-panel-title",
|
|
@@ -147,22 +275,25 @@ var TitleBar$1 = function TitleBar(_ref) {
|
|
|
147
275
|
children: t("neetoMolecules.builderSidebar.addNewElement")
|
|
148
276
|
}), !isSelectedElementsEmpty && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
|
|
149
277
|
"data-cy": "cancel-button",
|
|
150
|
-
label: t("neetoMolecules.builderSidebar.
|
|
278
|
+
label: t("neetoMolecules.builderSidebar.summary"),
|
|
151
279
|
size: "small",
|
|
152
|
-
style: "
|
|
153
|
-
onClick:
|
|
280
|
+
style: "secondary",
|
|
281
|
+
onClick: function onClick() {
|
|
282
|
+
return setIsSummaryPanelVisible(true);
|
|
283
|
+
}
|
|
154
284
|
})]
|
|
155
285
|
});
|
|
156
|
-
};
|
|
286
|
+
});
|
|
157
287
|
|
|
158
|
-
function ownKeys$
|
|
159
|
-
function _objectSpread$
|
|
288
|
+
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; }
|
|
289
|
+
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__default["default"](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; }
|
|
160
290
|
var ElementList = function ElementList(_ref) {
|
|
161
|
-
var
|
|
291
|
+
var setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
|
|
162
292
|
_ref$elementSections = _ref.elementSections,
|
|
163
293
|
elementSections = _ref$elementSections === void 0 ? [] : _ref$elementSections,
|
|
164
294
|
onSelect = _ref.onSelect,
|
|
165
|
-
isSelectedElementsEmpty = _ref.isSelectedElementsEmpty
|
|
295
|
+
isSelectedElementsEmpty = _ref.isSelectedElementsEmpty,
|
|
296
|
+
isDragElementsDisabled = _ref.isDragElementsDisabled;
|
|
166
297
|
var _useTranslation = reactI18next.useTranslation(),
|
|
167
298
|
t = _useTranslation.t;
|
|
168
299
|
var _useState = React.useState(""),
|
|
@@ -170,10 +301,13 @@ var ElementList = function ElementList(_ref) {
|
|
|
170
301
|
searchString = _useState2[0],
|
|
171
302
|
setSearchString = _useState2[1];
|
|
172
303
|
var filteredSections = React.useMemo(function () {
|
|
304
|
+
var elementIndex = 0;
|
|
173
305
|
return elementSections.map(function (section) {
|
|
174
|
-
return _objectSpread$
|
|
306
|
+
return _objectSpread$1(_objectSpread$1({}, section), {}, {
|
|
175
307
|
elements: section.elements.filter(function (element) {
|
|
176
308
|
return element.label.toLowerCase().includes(searchString.toLowerCase());
|
|
309
|
+
}).map(function (element) {
|
|
310
|
+
return ramda.assoc("elementIndex", elementIndex++, element);
|
|
177
311
|
})
|
|
178
312
|
});
|
|
179
313
|
}).filter(function (section) {
|
|
@@ -183,7 +317,7 @@ var ElementList = function ElementList(_ref) {
|
|
|
183
317
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
184
318
|
children: [/*#__PURE__*/jsxRuntime.jsx(TitleBar$1, {
|
|
185
319
|
isSelectedElementsEmpty: isSelectedElementsEmpty,
|
|
186
|
-
|
|
320
|
+
setIsSummaryPanelVisible: setIsSummaryPanelVisible
|
|
187
321
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
188
322
|
className: "mb-2 px-6",
|
|
189
323
|
children: /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
|
|
@@ -197,40 +331,15 @@ var ElementList = function ElementList(_ref) {
|
|
|
197
331
|
}), /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
198
332
|
"data-testid": "elements-container",
|
|
199
333
|
size: "small",
|
|
200
|
-
children:
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
elements: section.elements,
|
|
205
|
-
isCreatable: section.isCreatable,
|
|
206
|
-
key: section.key,
|
|
207
|
-
title: section.title
|
|
208
|
-
});
|
|
334
|
+
children: /*#__PURE__*/jsxRuntime.jsx(SectionsContainer, {
|
|
335
|
+
filteredSections: filteredSections,
|
|
336
|
+
isDragElementsDisabled: isDragElementsDisabled,
|
|
337
|
+
onSelect: onSelect
|
|
209
338
|
})
|
|
210
339
|
})]
|
|
211
340
|
});
|
|
212
341
|
};
|
|
213
342
|
|
|
214
|
-
var _excluded$1 = ["size"];
|
|
215
|
-
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; }
|
|
216
|
-
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__default["default"](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; }
|
|
217
|
-
var DragIcon = function DragIcon(_ref) {
|
|
218
|
-
var _ref$size = _ref.size,
|
|
219
|
-
size = _ref$size === void 0 ? 16 : _ref$size,
|
|
220
|
-
otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$1);
|
|
221
|
-
return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$1(_objectSpread$1({
|
|
222
|
-
fill: "currentColor",
|
|
223
|
-
height: size,
|
|
224
|
-
viewBox: "0 -960 960 960",
|
|
225
|
-
width: size,
|
|
226
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
227
|
-
}, otherProps), {}, {
|
|
228
|
-
children: /*#__PURE__*/jsxRuntime.jsx("path", {
|
|
229
|
-
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"
|
|
230
|
-
})
|
|
231
|
-
}));
|
|
232
|
-
};
|
|
233
|
-
|
|
234
343
|
var _excluded = ["element", "isActive", "handleSelectElement", "isSelectable", "errors", "actions", "isDraggable"];
|
|
235
344
|
var SelectedElement = function SelectedElement(_ref) {
|
|
236
345
|
var element = _ref.element,
|
|
@@ -309,18 +418,14 @@ var SelectedElement = function SelectedElement(_ref) {
|
|
|
309
418
|
};
|
|
310
419
|
var SelectedElement$1 = /*#__PURE__*/React.memo(SelectedElement);
|
|
311
420
|
|
|
312
|
-
var TitleBar = function
|
|
313
|
-
var
|
|
421
|
+
var TitleBar = reactUtils.withT(function (_ref) {
|
|
422
|
+
var t = _ref.t,
|
|
423
|
+
setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
|
|
314
424
|
isLoading = _ref.isLoading,
|
|
315
425
|
showElementsFillButton = _ref.showElementsFillButton,
|
|
316
426
|
isAddingAllElements = _ref.isAddingAllElements,
|
|
317
427
|
addAllElements = _ref.addAllElements,
|
|
318
428
|
isAddingNewElement = _ref.isAddingNewElement;
|
|
319
|
-
var _useTranslation = reactI18next.useTranslation(),
|
|
320
|
-
t = _useTranslation.t;
|
|
321
|
-
var handleAddElement = function handleAddElement() {
|
|
322
|
-
return setIsElementsListVisible(true);
|
|
323
|
-
};
|
|
324
429
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
325
430
|
className: "flex items-center justify-between p-6 pb-4",
|
|
326
431
|
"data-testid": "selected-elements-title",
|
|
@@ -336,11 +441,13 @@ var TitleBar = function TitleBar(_ref) {
|
|
|
336
441
|
"data-cy": "add-element-button",
|
|
337
442
|
"data-testid": "add-element-button",
|
|
338
443
|
disabled: isLoading,
|
|
339
|
-
label: t("neetoMolecules.
|
|
444
|
+
label: t("neetoMolecules.common.actions.close"),
|
|
340
445
|
loading: isAddingNewElement,
|
|
341
446
|
size: "small",
|
|
342
447
|
style: "secondary",
|
|
343
|
-
onClick:
|
|
448
|
+
onClick: function onClick() {
|
|
449
|
+
return setIsSummaryPanelVisible(false);
|
|
450
|
+
}
|
|
344
451
|
}), showElementsFillButton && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
|
|
345
452
|
"data-cy": "add-all-elements-button",
|
|
346
453
|
disabled: isAddingAllElements,
|
|
@@ -356,18 +463,17 @@ var TitleBar = function TitleBar(_ref) {
|
|
|
356
463
|
})]
|
|
357
464
|
})]
|
|
358
465
|
});
|
|
359
|
-
};
|
|
466
|
+
});
|
|
360
467
|
|
|
361
468
|
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; }
|
|
362
469
|
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__default["default"](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; }
|
|
363
470
|
var SelectedElementsList = function SelectedElementsList(_ref) {
|
|
364
|
-
var
|
|
365
|
-
|
|
366
|
-
isDragDisabled = _ref.isDragDisabled,
|
|
471
|
+
var handleSelectElement = _ref.handleSelectElement,
|
|
472
|
+
isReorderDisabled = _ref.isReorderDisabled,
|
|
367
473
|
isElementVisible = _ref.isElementVisible,
|
|
368
474
|
selectedElementId = _ref.selectedElementId,
|
|
369
475
|
selectedElements = _ref.selectedElements,
|
|
370
|
-
|
|
476
|
+
setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
|
|
371
477
|
fixedLastElement = _ref.fixedLastElement,
|
|
372
478
|
fixedFirstElement = _ref.fixedFirstElement,
|
|
373
479
|
selectedElementActions = _ref.selectedElementActions,
|
|
@@ -394,55 +500,53 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
|
|
|
394
500
|
addAllElements: addAllElements,
|
|
395
501
|
isAddingAllElements: isAddingAllElements,
|
|
396
502
|
isAddingNewElement: isAddingNewElement,
|
|
397
|
-
|
|
503
|
+
setIsSummaryPanelVisible: setIsSummaryPanelVisible,
|
|
398
504
|
showElementsFillButton: showElementsFillButton
|
|
399
505
|
}), /*#__PURE__*/jsxRuntime.jsxs(Body, {
|
|
400
506
|
"data-testid": "selected-elements-container",
|
|
401
|
-
children: [Array.isArray(fixedFirstElement) ? neetoCist.isNotEmpty(fixedFirstElement) && fixedFirstElement.map(renderSelectedElement) : neetoCist.isPresent(fixedFirstElement) && renderSelectedElement(fixedFirstElement), /*#__PURE__*/jsxRuntime.jsx(dnd.
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
}
|
|
445
|
-
})
|
|
507
|
+
children: [Array.isArray(fixedFirstElement) ? neetoCist.isNotEmpty(fixedFirstElement) && fixedFirstElement.map(renderSelectedElement) : neetoCist.isPresent(fixedFirstElement) && renderSelectedElement(fixedFirstElement), /*#__PURE__*/jsxRuntime.jsx(dnd.Droppable, {
|
|
508
|
+
droppableId: SELECTED_ELEMENTS_LIST_DROPPABLE_ID,
|
|
509
|
+
type: DROPPABLE_TYPES.SELECTED_ELEMENT,
|
|
510
|
+
children: function children(_ref2) {
|
|
511
|
+
var innerRef = _ref2.innerRef,
|
|
512
|
+
droppableProps = _ref2.droppableProps,
|
|
513
|
+
placeholder = _ref2.placeholder;
|
|
514
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
|
|
515
|
+
ref: innerRef
|
|
516
|
+
}, droppableProps), {}, {
|
|
517
|
+
"data-testid": "selected-elements-droppable-container",
|
|
518
|
+
children: [selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.map(function (element, index) {
|
|
519
|
+
var _isElementVisible, _element$id, _element$id2;
|
|
520
|
+
var isVisible = (_isElementVisible = isElementVisible === null || isElementVisible === void 0 ? void 0 : isElementVisible(element)) !== null && _isElementVisible !== void 0 ? _isElementVisible : true;
|
|
521
|
+
if (!isVisible) return null;
|
|
522
|
+
var key = (_element$id = element.id) !== null && _element$id !== void 0 ? _element$id : "element-".concat(general.joinHyphenCase(element.label));
|
|
523
|
+
return /*#__PURE__*/React.createElement(dnd.Draggable, {
|
|
524
|
+
index: index,
|
|
525
|
+
draggableId: (_element$id2 = element.id) !== null && _element$id2 !== void 0 ? _element$id2 : "element-".concat(index),
|
|
526
|
+
isDragDisabled: isReorderDisabled,
|
|
527
|
+
key: key
|
|
528
|
+
}, function (_ref3) {
|
|
529
|
+
var _element$id3;
|
|
530
|
+
var innerRef = _ref3.innerRef,
|
|
531
|
+
draggableProps = _ref3.draggableProps,
|
|
532
|
+
dragHandleProps = _ref3.dragHandleProps;
|
|
533
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread({
|
|
534
|
+
ref: innerRef
|
|
535
|
+
}, draggableProps), dragHandleProps), {}, {
|
|
536
|
+
children: /*#__PURE__*/React.createElement(SelectedElement$1, {
|
|
537
|
+
element: element,
|
|
538
|
+
handleSelectElement: handleSelectElement,
|
|
539
|
+
isSelectable: true,
|
|
540
|
+
actions: selectedElementActions,
|
|
541
|
+
isActive: selectedElementId === element.id,
|
|
542
|
+
isDraggable: !isReorderDisabled,
|
|
543
|
+
key: (_element$id3 = element.id) !== null && _element$id3 !== void 0 ? _element$id3 : index
|
|
544
|
+
})
|
|
545
|
+
}));
|
|
546
|
+
});
|
|
547
|
+
}), placeholder]
|
|
548
|
+
}));
|
|
549
|
+
}
|
|
446
550
|
}), neetoCist.isPresent(fixedLastElement) && /*#__PURE__*/jsxRuntime.jsx(SelectedElement$1, {
|
|
447
551
|
handleSelectElement: handleSelectElement,
|
|
448
552
|
isSelectable: true,
|
|
@@ -465,10 +569,10 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
465
569
|
_ref$fixedFirstElemen = _ref.fixedFirstElement,
|
|
466
570
|
fixedFirstElement = _ref$fixedFirstElemen === void 0 ? [] : _ref$fixedFirstElemen,
|
|
467
571
|
fixedLastElement = _ref.fixedLastElement,
|
|
468
|
-
_ref$
|
|
469
|
-
|
|
470
|
-
_ref$
|
|
471
|
-
|
|
572
|
+
_ref$isReorderDisable = _ref.isReorderDisabled,
|
|
573
|
+
isReorderDisabled = _ref$isReorderDisable === void 0 ? true : _ref$isReorderDisable,
|
|
574
|
+
_ref$isDragElementsDi = _ref.isDragElementsDisabled,
|
|
575
|
+
isDragElementsDisabled = _ref$isDragElementsDi === void 0 ? true : _ref$isDragElementsDi,
|
|
472
576
|
handleSelectElement = _ref.handleSelectElement,
|
|
473
577
|
selectedElementId = _ref.selectedElementId,
|
|
474
578
|
selectedElementActions = _ref.selectedElementActions,
|
|
@@ -482,8 +586,8 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
482
586
|
isAddingNewElement = _ref$isAddingNewEleme === void 0 ? false : _ref$isAddingNewEleme;
|
|
483
587
|
var _useState = React.useState(false),
|
|
484
588
|
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
485
|
-
|
|
486
|
-
|
|
589
|
+
isSummaryPanelVisible = _useState2[0],
|
|
590
|
+
setIsSummaryPanelVisible = _useState2[1];
|
|
487
591
|
var _useBreakpoints = reactUtils.useBreakpoints(),
|
|
488
592
|
isSize = _useBreakpoints.isSize;
|
|
489
593
|
var isLargerScreen = !isSize("mobile");
|
|
@@ -491,12 +595,6 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
491
595
|
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
492
596
|
isElementsPanelCollapsed = _useState4[0],
|
|
493
597
|
setIsElementsPanelCollapsed = _useState4[1];
|
|
494
|
-
var isSelectedElementsEmpty = ramda.isEmpty(selectedElements);
|
|
495
|
-
var shouldShowElementsList = isSelectedElementsEmpty || isElementsListVisible;
|
|
496
|
-
var handleElementSelect = function handleElementSelect(element) {
|
|
497
|
-
setIsElementsListVisible(false);
|
|
498
|
-
handleAddElement(element);
|
|
499
|
-
};
|
|
500
598
|
React.useEffect(function () {
|
|
501
599
|
setIsElementsPanelCollapsed(!isLargerScreen);
|
|
502
600
|
}, [isLargerScreen]);
|
|
@@ -517,26 +615,25 @@ var ElementsPanel = function ElementsPanel(_ref) {
|
|
|
517
615
|
onClick: function onClick(event) {
|
|
518
616
|
return event.stopPropagation();
|
|
519
617
|
},
|
|
520
|
-
children:
|
|
521
|
-
elementSections: elementSections,
|
|
522
|
-
isSelectedElementsEmpty: isSelectedElementsEmpty,
|
|
523
|
-
setIsElementsListVisible: setIsElementsListVisible,
|
|
524
|
-
onSelect: handleElementSelect
|
|
525
|
-
}) : /*#__PURE__*/jsxRuntime.jsx(SelectedElementsList, {
|
|
618
|
+
children: isSummaryPanelVisible ? /*#__PURE__*/jsxRuntime.jsx(SelectedElementsList, {
|
|
526
619
|
addAllElements: addAllElements,
|
|
527
620
|
fixedFirstElement: fixedFirstElement,
|
|
528
621
|
fixedLastElement: fixedLastElement,
|
|
529
|
-
handleDragEnd: handleDragEnd,
|
|
530
622
|
handleSelectElement: handleSelectElement,
|
|
531
623
|
isAddingAllElements: isAddingAllElements,
|
|
532
624
|
isAddingNewElement: isAddingNewElement,
|
|
533
|
-
isDragDisabled: isDragDisabled,
|
|
534
625
|
isElementVisible: isElementVisible,
|
|
626
|
+
isReorderDisabled: isReorderDisabled,
|
|
535
627
|
selectedElementActions: selectedElementActions,
|
|
536
628
|
selectedElementId: selectedElementId,
|
|
537
629
|
selectedElements: selectedElements,
|
|
538
|
-
|
|
630
|
+
setIsSummaryPanelVisible: setIsSummaryPanelVisible,
|
|
539
631
|
showElementsFillButton: showElementsFillButton
|
|
632
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(ElementList, {
|
|
633
|
+
elementSections: elementSections,
|
|
634
|
+
isDragElementsDisabled: isDragElementsDisabled,
|
|
635
|
+
setIsSummaryPanelVisible: setIsSummaryPanelVisible,
|
|
636
|
+
onSelect: handleAddElement
|
|
540
637
|
})
|
|
541
638
|
})
|
|
542
639
|
}), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
|
|
@@ -644,6 +741,10 @@ var PropertiesPanel = function PropertiesPanel(_ref) {
|
|
|
644
741
|
};
|
|
645
742
|
PropertiesPanel.EmptyProperty = EmptyProperty;
|
|
646
743
|
|
|
744
|
+
exports.DROPPABLE_TYPES = DROPPABLE_TYPES;
|
|
745
|
+
exports.ELEMENTS_LIST_DROPPABLE_ID = ELEMENTS_LIST_DROPPABLE_ID;
|
|
647
746
|
exports.ElementsPanel = ElementsPanel;
|
|
747
|
+
exports.PREVIEW_CONTAINER_DROPPABLE_ID = PREVIEW_CONTAINER_DROPPABLE_ID;
|
|
648
748
|
exports.PropertiesPanel = PropertiesPanel;
|
|
749
|
+
exports.SELECTED_ELEMENTS_LIST_DROPPABLE_ID = SELECTED_ELEMENTS_LIST_DROPPABLE_ID;
|
|
649
750
|
//# sourceMappingURL=Builder.js.map
|