@bigbinary/neeto-molecules 3.11.1 → 3.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/BoardView.js +377 -0
- package/dist/BoardView.js.map +1 -0
- package/dist/OptionFields.js +5 -3
- package/dist/OptionFields.js.map +1 -1
- package/dist/cjs/BoardView.js +379 -0
- package/dist/cjs/BoardView.js.map +1 -0
- package/dist/cjs/OptionFields.js +5 -3
- package/dist/cjs/OptionFields.js.map +1 -1
- package/package.json +5 -1
- package/types/BoardView.d.ts +148 -0
|
@@ -0,0 +1,379 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var core = require('@dnd-kit/core');
|
|
6
|
+
var injectCss = require('./inject-css-vQvjPR2x.js');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
var index = require('./index-JY2zVpnv.js');
|
|
9
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
10
|
+
var classnames = require('classnames');
|
|
11
|
+
var reactIntersectionObserver = require('react-intersection-observer');
|
|
12
|
+
require('./_commonjsHelpers-BJu3ubxk.js');
|
|
13
|
+
|
|
14
|
+
var css = ".neeto-molecules-boardview-section{flex-shrink:0;width:320px}@media screen and (max-width:1024px){.neeto-molecules-boardview-section{width:300px}}@media screen and (max-width:768px){.neeto-molecules-boardview-section{width:280px}}";
|
|
15
|
+
injectCss.n(css,{});
|
|
16
|
+
|
|
17
|
+
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
|
|
18
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
19
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
20
|
+
// Customised collision detection algorithm based on `closestCenter` implementation for dnd-kit
|
|
21
|
+
// Extracts collisions by respecting `accepts` property
|
|
22
|
+
|
|
23
|
+
var distanceBetween = function distanceBetween(p1, p2) {
|
|
24
|
+
return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
|
|
25
|
+
};
|
|
26
|
+
var centerOfRectangle = function centerOfRectangle(rect) {
|
|
27
|
+
var left = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : rect.left;
|
|
28
|
+
var top = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : rect.top;
|
|
29
|
+
return {
|
|
30
|
+
x: left + rect.width * 0.5,
|
|
31
|
+
y: top + rect.height * 0.5
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
var matchType = function matchType(draggable, droppable) {
|
|
35
|
+
return droppable.data.current.accepts.includes(draggable.data.current.type);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
// `active` attribute from the `dnd-kit` is unreliable since the data can be lost on unmount during a drag.
|
|
39
|
+
var closestCenter = function closestCenter(_ref) {
|
|
40
|
+
var active = _ref.active;
|
|
41
|
+
return function (_ref2) {
|
|
42
|
+
var collisionRect = _ref2.collisionRect,
|
|
43
|
+
droppableRects = _ref2.droppableRects,
|
|
44
|
+
droppableContainers = _ref2.droppableContainers;
|
|
45
|
+
var centerRect = centerOfRectangle(collisionRect, collisionRect.left, collisionRect.top);
|
|
46
|
+
var minDistance = Number.POSITIVE_INFINITY;
|
|
47
|
+
var collision = {
|
|
48
|
+
id: undefined
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
// eslint-disable-next-line @bigbinary/neeto/use-array-methods
|
|
52
|
+
var _iterator = _createForOfIteratorHelper(droppableContainers),
|
|
53
|
+
_step;
|
|
54
|
+
try {
|
|
55
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
56
|
+
var droppableContainer = _step.value;
|
|
57
|
+
var rect = droppableRects.get(droppableContainer.id);
|
|
58
|
+
if (!rect || droppableContainer.id === active.id) continue;else if (!matchType(active, droppableContainer)) continue;
|
|
59
|
+
var distance = distanceBetween(centerOfRectangle(rect), centerRect);
|
|
60
|
+
if (distance < minDistance) {
|
|
61
|
+
minDistance = distance;
|
|
62
|
+
collision = {
|
|
63
|
+
id: droppableContainer.id,
|
|
64
|
+
data: {
|
|
65
|
+
droppableContainer: droppableContainer,
|
|
66
|
+
value: distance
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
} catch (err) {
|
|
72
|
+
_iterator.e(err);
|
|
73
|
+
} finally {
|
|
74
|
+
_iterator.f();
|
|
75
|
+
}
|
|
76
|
+
return [collision];
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
var DRAGGABLE_TYPES = {
|
|
81
|
+
SECTION: "section",
|
|
82
|
+
ITEM: "item"
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
var DndOverlay = function DndOverlay(_ref) {
|
|
86
|
+
var _state$active;
|
|
87
|
+
var props = _ref.props,
|
|
88
|
+
state = _ref.state;
|
|
89
|
+
var renderSectionOverlay = props.renderSectionOverlay,
|
|
90
|
+
renderItemOverlay = props.renderItemOverlay;
|
|
91
|
+
var data = ((_state$active = state.active) === null || _state$active === void 0 ? void 0 : _state$active.data.current) || {};
|
|
92
|
+
return /*#__PURE__*/jsxRuntime.jsxs(core.DragOverlay, {
|
|
93
|
+
children: [data.type === DRAGGABLE_TYPES.ITEM && (renderItemOverlay === null || renderItemOverlay === void 0 ? void 0 : renderItemOverlay(data)), data.type === DRAGGABLE_TYPES.SECTION && (renderSectionOverlay === null || renderSectionOverlay === void 0 ? void 0 : renderSectionOverlay(data))]
|
|
94
|
+
});
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
var DndIndicator = function DndIndicator(_ref) {
|
|
98
|
+
var _ref$layout = _ref.layout,
|
|
99
|
+
layout = _ref$layout === void 0 ? "vertical" : _ref$layout;
|
|
100
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
101
|
+
className: classnames("neeto-ui-rounded-xl neeto-ui-bg-accent-600 absolute", {
|
|
102
|
+
"-bottom-3 left-0 right-0 h-1": layout === "horizontal",
|
|
103
|
+
"-right-2 bottom-0 top-0 w-1": layout === "vertical"
|
|
104
|
+
})
|
|
105
|
+
});
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
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; }
|
|
109
|
+
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; }
|
|
110
|
+
var ItemContainer = function ItemContainer(_ref) {
|
|
111
|
+
var id = _ref.id,
|
|
112
|
+
index = _ref.index,
|
|
113
|
+
data = _ref.data,
|
|
114
|
+
render = _ref.render;
|
|
115
|
+
var mutables = React.useRef({
|
|
116
|
+
containerHeight: 128
|
|
117
|
+
}).current;
|
|
118
|
+
var _useDraggable = core.useDraggable({
|
|
119
|
+
data: _objectSpread$3(_objectSpread$3({}, data), {}, {
|
|
120
|
+
index: index,
|
|
121
|
+
type: DRAGGABLE_TYPES.ITEM
|
|
122
|
+
}),
|
|
123
|
+
id: id
|
|
124
|
+
}),
|
|
125
|
+
attributes = _useDraggable.attributes,
|
|
126
|
+
listeners = _useDraggable.listeners,
|
|
127
|
+
isDragging = _useDraggable.isDragging,
|
|
128
|
+
setDraggableNodeRef = _useDraggable.setNodeRef;
|
|
129
|
+
var _useDroppable = core.useDroppable({
|
|
130
|
+
data: _objectSpread$3(_objectSpread$3({}, data), {}, {
|
|
131
|
+
accepts: [DRAGGABLE_TYPES.ITEM],
|
|
132
|
+
index: index + 1
|
|
133
|
+
}),
|
|
134
|
+
id: id
|
|
135
|
+
}),
|
|
136
|
+
isOver = _useDroppable.isOver,
|
|
137
|
+
setDroppableNodeRef = _useDroppable.setNodeRef;
|
|
138
|
+
var _useInView = reactIntersectionObserver.useInView({
|
|
139
|
+
onChange: function onChange(inView, entry) {
|
|
140
|
+
if (inView) return; // We need the last height value when elements moves out.
|
|
141
|
+
mutables.containerHeight = entry.target.clientHeight;
|
|
142
|
+
}
|
|
143
|
+
}),
|
|
144
|
+
_useInView2 = _slicedToArray(_useInView, 2),
|
|
145
|
+
setViewRef = _useInView2[0],
|
|
146
|
+
inView = _useInView2[1];
|
|
147
|
+
var isIndicatorVisible = !isDragging && isOver;
|
|
148
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$3(_objectSpread$3({
|
|
149
|
+
className: classnames("relative mt-4", {
|
|
150
|
+
"opacity-65": isDragging
|
|
151
|
+
}),
|
|
152
|
+
ref: function ref(node) {
|
|
153
|
+
setDraggableNodeRef(node);
|
|
154
|
+
setDroppableNodeRef(node);
|
|
155
|
+
setViewRef(node);
|
|
156
|
+
}
|
|
157
|
+
}, _objectSpread$3(_objectSpread$3({
|
|
158
|
+
id: id
|
|
159
|
+
}, attributes), listeners)), {}, {
|
|
160
|
+
style: {
|
|
161
|
+
height: inView ? undefined : mutables.containerHeight
|
|
162
|
+
},
|
|
163
|
+
children: [inView && render(), isIndicatorVisible && /*#__PURE__*/jsxRuntime.jsx(DndIndicator, {
|
|
164
|
+
layout: "horizontal"
|
|
165
|
+
})]
|
|
166
|
+
}));
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
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; }
|
|
170
|
+
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; }
|
|
171
|
+
var ItemPlaceholder = function ItemPlaceholder(_ref) {
|
|
172
|
+
var data = _ref.data,
|
|
173
|
+
_ref$index = _ref.index,
|
|
174
|
+
index = _ref$index === void 0 ? 0 : _ref$index;
|
|
175
|
+
var id = React.useId();
|
|
176
|
+
var _useDroppable = core.useDroppable({
|
|
177
|
+
data: _objectSpread$2(_objectSpread$2({}, data), {}, {
|
|
178
|
+
accepts: [DRAGGABLE_TYPES.ITEM],
|
|
179
|
+
index: index
|
|
180
|
+
}),
|
|
181
|
+
id: id
|
|
182
|
+
}),
|
|
183
|
+
isOver = _useDroppable.isOver,
|
|
184
|
+
setNodeRef = _useDroppable.setNodeRef;
|
|
185
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
186
|
+
className: "relative",
|
|
187
|
+
ref: setNodeRef,
|
|
188
|
+
children: isOver && /*#__PURE__*/jsxRuntime.jsx(DndIndicator, {
|
|
189
|
+
layout: "horizontal"
|
|
190
|
+
})
|
|
191
|
+
});
|
|
192
|
+
};
|
|
193
|
+
|
|
194
|
+
var Section = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
195
|
+
var section = _ref.section,
|
|
196
|
+
items = _ref.items,
|
|
197
|
+
renderItem = _ref.renderItem;
|
|
198
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
199
|
+
ref: ref,
|
|
200
|
+
className: "relative min-h-0 flex-1 basis-0 overflow-auto",
|
|
201
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(ItemPlaceholder, {
|
|
202
|
+
data: {
|
|
203
|
+
section: section
|
|
204
|
+
}
|
|
205
|
+
}), items.map(function (item, index) {
|
|
206
|
+
return /*#__PURE__*/React.createElement(ItemContainer, {
|
|
207
|
+
index: index,
|
|
208
|
+
data: {
|
|
209
|
+
section: section,
|
|
210
|
+
item: item
|
|
211
|
+
},
|
|
212
|
+
id: item.id,
|
|
213
|
+
key: item.id,
|
|
214
|
+
render: function render() {
|
|
215
|
+
return renderItem({
|
|
216
|
+
index: index,
|
|
217
|
+
item: item,
|
|
218
|
+
section: section
|
|
219
|
+
});
|
|
220
|
+
}
|
|
221
|
+
});
|
|
222
|
+
})]
|
|
223
|
+
});
|
|
224
|
+
});
|
|
225
|
+
Section.displayName = "Section";
|
|
226
|
+
Section.propTypes = {
|
|
227
|
+
/** A reference to the section container element. */
|
|
228
|
+
ref: index.PropTypes.any,
|
|
229
|
+
/** The current section data */
|
|
230
|
+
section: index.PropTypes.shape({
|
|
231
|
+
id: index.PropTypes.string.isRequired
|
|
232
|
+
}).isRequired,
|
|
233
|
+
/** An array of items belonging to the current section. */
|
|
234
|
+
items: index.PropTypes.arrayOf(index.PropTypes.shape({
|
|
235
|
+
id: index.PropTypes.string.isRequired
|
|
236
|
+
})).isRequired,
|
|
237
|
+
/** A function that renders the content of each item in the list. */
|
|
238
|
+
renderItem: index.PropTypes.func.isRequired
|
|
239
|
+
};
|
|
240
|
+
|
|
241
|
+
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; }
|
|
242
|
+
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; }
|
|
243
|
+
var SectionContainer = function SectionContainer(_ref) {
|
|
244
|
+
var id = _ref.id,
|
|
245
|
+
index = _ref.index,
|
|
246
|
+
data = _ref.data,
|
|
247
|
+
render = _ref.render;
|
|
248
|
+
var _useInView = reactIntersectionObserver.useInView(),
|
|
249
|
+
_useInView2 = _slicedToArray(_useInView, 2),
|
|
250
|
+
setViewRef = _useInView2[0],
|
|
251
|
+
inView = _useInView2[1];
|
|
252
|
+
var _useDraggable = core.useDraggable({
|
|
253
|
+
data: _objectSpread$1(_objectSpread$1({}, data), {}, {
|
|
254
|
+
type: DRAGGABLE_TYPES.SECTION,
|
|
255
|
+
index: index
|
|
256
|
+
}),
|
|
257
|
+
id: id
|
|
258
|
+
}),
|
|
259
|
+
attributes = _useDraggable.attributes,
|
|
260
|
+
listeners = _useDraggable.listeners,
|
|
261
|
+
isDragging = _useDraggable.isDragging,
|
|
262
|
+
setDraggableNodeRef = _useDraggable.setNodeRef;
|
|
263
|
+
var _useDroppable = core.useDroppable({
|
|
264
|
+
data: _objectSpread$1(_objectSpread$1({}, data), {}, {
|
|
265
|
+
accepts: [DRAGGABLE_TYPES.SECTION],
|
|
266
|
+
index: index + 1
|
|
267
|
+
}),
|
|
268
|
+
id: id
|
|
269
|
+
}),
|
|
270
|
+
isOver = _useDroppable.isOver,
|
|
271
|
+
setDroppableNodeRef = _useDroppable.setNodeRef;
|
|
272
|
+
var isIndicatorVisible = !isDragging && isOver;
|
|
273
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$1(_objectSpread$1(_objectSpread$1({}, listeners), attributes), {}, {
|
|
274
|
+
className: classnames("neeto-molecules-boardview-section relative ml-3 flex h-full flex-col", {
|
|
275
|
+
"opacity-65": isDragging
|
|
276
|
+
}),
|
|
277
|
+
ref: function ref(node) {
|
|
278
|
+
setDraggableNodeRef(node);
|
|
279
|
+
setDroppableNodeRef(node);
|
|
280
|
+
setViewRef(node);
|
|
281
|
+
},
|
|
282
|
+
children: [inView && render(), isIndicatorVisible && /*#__PURE__*/jsxRuntime.jsx(DndIndicator, {
|
|
283
|
+
layout: "vertical"
|
|
284
|
+
})]
|
|
285
|
+
}));
|
|
286
|
+
};
|
|
287
|
+
|
|
288
|
+
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; }
|
|
289
|
+
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; }
|
|
290
|
+
var SectionPlaceholder = function SectionPlaceholder(_ref) {
|
|
291
|
+
var data = _ref.data,
|
|
292
|
+
_ref$index = _ref.index,
|
|
293
|
+
index = _ref$index === void 0 ? 0 : _ref$index;
|
|
294
|
+
var id = React.useId();
|
|
295
|
+
var _useDroppable = core.useDroppable({
|
|
296
|
+
data: _objectSpread(_objectSpread({}, data), {}, {
|
|
297
|
+
accepts: [DRAGGABLE_TYPES.SECTION],
|
|
298
|
+
index: index
|
|
299
|
+
}),
|
|
300
|
+
id: id
|
|
301
|
+
}),
|
|
302
|
+
isOver = _useDroppable.isOver,
|
|
303
|
+
setNodeRef = _useDroppable.setNodeRef;
|
|
304
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
305
|
+
className: "relative",
|
|
306
|
+
ref: setNodeRef,
|
|
307
|
+
children: isOver && /*#__PURE__*/jsxRuntime.jsx(DndIndicator, {
|
|
308
|
+
layout: "vertical"
|
|
309
|
+
})
|
|
310
|
+
});
|
|
311
|
+
};
|
|
312
|
+
|
|
313
|
+
var sensorConfig = {
|
|
314
|
+
activationConstraint: {
|
|
315
|
+
distance: 8
|
|
316
|
+
}
|
|
317
|
+
};
|
|
318
|
+
var measuringConfig = {
|
|
319
|
+
droppable: {
|
|
320
|
+
frequency: 500
|
|
321
|
+
}
|
|
322
|
+
};
|
|
323
|
+
var BoardView = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
324
|
+
var sections = props.sections,
|
|
325
|
+
onMoveSection = props.onMoveSection,
|
|
326
|
+
onMoveItem = props.onMoveItem,
|
|
327
|
+
renderSection = props.renderSection;
|
|
328
|
+
var _useState = React.useState({}),
|
|
329
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
330
|
+
dragState = _useState2[0],
|
|
331
|
+
setDragState = _useState2[1];
|
|
332
|
+
var sensors = core.useSensors(core.useSensor(core.PointerSensor, sensorConfig));
|
|
333
|
+
var onDragEnd = function onDragEnd(drag) {
|
|
334
|
+
var _drag$over;
|
|
335
|
+
var active = dragState.active.data.current;
|
|
336
|
+
var over = (_drag$over = drag.over) === null || _drag$over === void 0 ? void 0 : _drag$over.data.current;
|
|
337
|
+
if (!active || !over) return;
|
|
338
|
+
if (active.type === DRAGGABLE_TYPES.ITEM) {
|
|
339
|
+
onMoveItem === null || onMoveItem === void 0 ? void 0 : onMoveItem(active, over);
|
|
340
|
+
} else if (active.type === DRAGGABLE_TYPES.SECTION) {
|
|
341
|
+
onMoveSection === null || onMoveSection === void 0 ? void 0 : onMoveSection(active, over);
|
|
342
|
+
}
|
|
343
|
+
};
|
|
344
|
+
return /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, {
|
|
345
|
+
onDragEnd: onDragEnd,
|
|
346
|
+
sensors: sensors,
|
|
347
|
+
collisionDetection: closestCenter(dragState),
|
|
348
|
+
measuring: measuringConfig,
|
|
349
|
+
onDragStart: setDragState,
|
|
350
|
+
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
351
|
+
ref: ref,
|
|
352
|
+
className: "flex w-full flex-1 overflow-x-auto p-3",
|
|
353
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(SectionPlaceholder, {}), sections.map(function (section, index) {
|
|
354
|
+
return /*#__PURE__*/React.createElement(SectionContainer, {
|
|
355
|
+
index: index,
|
|
356
|
+
data: {
|
|
357
|
+
section: section
|
|
358
|
+
},
|
|
359
|
+
id: section.id,
|
|
360
|
+
key: section.id,
|
|
361
|
+
render: function render() {
|
|
362
|
+
return renderSection({
|
|
363
|
+
index: index,
|
|
364
|
+
section: section
|
|
365
|
+
});
|
|
366
|
+
}
|
|
367
|
+
});
|
|
368
|
+
})]
|
|
369
|
+
}), /*#__PURE__*/jsxRuntime.jsx(DndOverlay, {
|
|
370
|
+
props: props,
|
|
371
|
+
state: dragState
|
|
372
|
+
})]
|
|
373
|
+
});
|
|
374
|
+
});
|
|
375
|
+
BoardView.displayName = "BoardView";
|
|
376
|
+
BoardView.Section = Section;
|
|
377
|
+
|
|
378
|
+
module.exports = BoardView;
|
|
379
|
+
//# sourceMappingURL=BoardView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BoardView.js","sources":["../../src/components/BoardView/closestCenter.js","../../src/components/BoardView/constants.js","../../src/components/BoardView/Overlay.jsx","../../src/components/BoardView/Indicator.jsx","../../src/components/BoardView/Item/Container.jsx","../../src/components/BoardView/Item/Placeholder.jsx","../../src/components/BoardView/Section/index.jsx","../../src/components/BoardView/Section/Container.jsx","../../src/components/BoardView/Section/Placeholder.jsx","../../src/components/BoardView/index.jsx"],"sourcesContent":["// Customised collision detection algorithm based on `closestCenter` implementation for dnd-kit\n// Extracts collisions by respecting `accepts` property\n\nconst distanceBetween = (p1, p2) =>\n Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));\n\nconst centerOfRectangle = (rect, left = rect.left, top = rect.top) => ({\n x: left + rect.width * 0.5,\n y: top + rect.height * 0.5,\n});\n\nconst matchType = (draggable, droppable) =>\n droppable.data.current.accepts.includes(draggable.data.current.type);\n\n// `active` attribute from the `dnd-kit` is unreliable since the data can be lost on unmount during a drag.\nexport const closestCenter =\n ({ active }) =>\n ({ collisionRect, droppableRects, droppableContainers }) => {\n const centerRect = centerOfRectangle(\n collisionRect,\n collisionRect.left,\n collisionRect.top\n );\n\n let minDistance = Number.POSITIVE_INFINITY;\n let collision = { id: undefined };\n\n // eslint-disable-next-line @bigbinary/neeto/use-array-methods\n for (const droppableContainer of droppableContainers) {\n const rect = droppableRects.get(droppableContainer.id);\n\n if (!rect || droppableContainer.id === active.id) continue;\n else if (!matchType(active, droppableContainer)) continue;\n\n const distance = distanceBetween(centerOfRectangle(rect), centerRect);\n if (distance < minDistance) {\n minDistance = distance;\n collision = {\n id: droppableContainer.id,\n data: { droppableContainer, value: distance },\n };\n }\n }\n\n return [collision];\n };\n","export const DRAGGABLE_TYPES = { SECTION: \"section\", ITEM: \"item\" };\n","import { DragOverlay } from \"@dnd-kit/core\";\n\nimport { DRAGGABLE_TYPES } from \"./constants\";\n\nconst DndOverlay = ({ props, state }) => {\n const { renderSectionOverlay, renderItemOverlay } = props;\n const data = state.active?.data.current || {};\n\n return (\n <DragOverlay>\n {data.type === DRAGGABLE_TYPES.ITEM && renderItemOverlay?.(data)}\n {data.type === DRAGGABLE_TYPES.SECTION && renderSectionOverlay?.(data)}\n </DragOverlay>\n );\n};\n\nexport default DndOverlay;\n","import classNames from \"classnames\";\n\nconst DndIndicator = ({ layout = \"vertical\" }) => (\n <div\n className={classNames(\n \"neeto-ui-rounded-xl neeto-ui-bg-accent-600 absolute\",\n {\n \"-bottom-3 left-0 right-0 h-1\": layout === \"horizontal\",\n \"-right-2 bottom-0 top-0 w-1\": layout === \"vertical\",\n }\n )}\n />\n);\n\nexport default DndIndicator;\n","import { useRef } from \"react\";\n\nimport { useDraggable, useDroppable } from \"@dnd-kit/core\";\nimport classNames from \"classnames\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { DRAGGABLE_TYPES } from \"../constants\";\nimport DndIndicator from \"../Indicator\";\n\nconst ItemContainer = ({ id, index, data, render }) => {\n const mutables = useRef({ containerHeight: 128 }).current;\n\n const {\n attributes,\n listeners,\n isDragging,\n setNodeRef: setDraggableNodeRef,\n } = useDraggable({\n data: { ...data, index, type: DRAGGABLE_TYPES.ITEM },\n id,\n });\n\n const { isOver, setNodeRef: setDroppableNodeRef } = useDroppable({\n data: { ...data, accepts: [DRAGGABLE_TYPES.ITEM], index: index + 1 },\n id,\n });\n\n const [setViewRef, inView] = useInView({\n onChange: (inView, entry) => {\n if (inView) return; // We need the last height value when elements moves out.\n mutables.containerHeight = entry.target.clientHeight;\n },\n });\n\n const isIndicatorVisible = !isDragging && isOver;\n\n return (\n <div\n className={classNames(\"relative mt-4\", {\n \"opacity-65\": isDragging,\n })}\n ref={node => {\n setDraggableNodeRef(node);\n setDroppableNodeRef(node);\n setViewRef(node);\n }}\n {...{ id, ...attributes, ...listeners }}\n style={{ height: inView ? undefined : mutables.containerHeight }}\n >\n {inView && render()}\n {isIndicatorVisible && <DndIndicator layout=\"horizontal\" />}\n </div>\n );\n};\n\nexport default ItemContainer;\n","import { useId } from \"react\";\n\nimport { useDroppable } from \"@dnd-kit/core\";\n\nimport { DRAGGABLE_TYPES } from \"../constants\";\nimport DndIndicator from \"../Indicator\";\n\nconst ItemPlaceholder = ({ data, index = 0 }) => {\n const id = useId();\n\n const { isOver, setNodeRef } = useDroppable({\n data: { ...data, accepts: [DRAGGABLE_TYPES.ITEM], index },\n id,\n });\n\n return (\n <div className=\"relative\" ref={setNodeRef}>\n {isOver && <DndIndicator layout=\"horizontal\" />}\n </div>\n );\n};\n\nexport default ItemPlaceholder;\n","import { forwardRef } from \"react\";\n\nimport PropTypes from \"prop-types\";\n\nimport ItemContainer from \"../Item/Container\";\nimport ItemPlaceholder from \"../Item/Placeholder\";\n\nconst Section = forwardRef(({ section, items, renderItem }, ref) => (\n <div {...{ ref }} className=\"relative min-h-0 flex-1 basis-0 overflow-auto\">\n <ItemPlaceholder data={{ section }} />\n {items.map((item, index) => (\n <ItemContainer\n {...{ index }}\n data={{ section, item }}\n id={item.id}\n key={item.id}\n render={() => renderItem({ index, item, section })}\n />\n ))}\n </div>\n));\n\nSection.displayName = \"Section\";\nSection.propTypes = {\n /** A reference to the section container element. */\n ref: PropTypes.any,\n\n /** The current section data */\n section: PropTypes.shape({ id: PropTypes.string.isRequired }).isRequired,\n\n /** An array of items belonging to the current section. */\n items: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string.isRequired }))\n .isRequired,\n\n /** A function that renders the content of each item in the list. */\n renderItem: PropTypes.func.isRequired,\n};\n\nexport default Section;\n","import { useDraggable, useDroppable } from \"@dnd-kit/core\";\nimport classNames from \"classnames\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { DRAGGABLE_TYPES } from \"../constants\";\nimport DndIndicator from \"../Indicator\";\n\nconst SectionContainer = ({ id, index, data, render }) => {\n const [setViewRef, inView] = useInView();\n\n const {\n attributes,\n listeners,\n isDragging,\n setNodeRef: setDraggableNodeRef,\n } = useDraggable({\n data: { ...data, type: DRAGGABLE_TYPES.SECTION, index },\n id,\n });\n\n const { isOver, setNodeRef: setDroppableNodeRef } = useDroppable({\n data: { ...data, accepts: [DRAGGABLE_TYPES.SECTION], index: index + 1 },\n id,\n });\n\n const isIndicatorVisible = !isDragging && isOver;\n\n return (\n <div\n {...listeners}\n {...attributes}\n className={classNames(\n \"neeto-molecules-boardview-section relative ml-3 flex h-full flex-col\",\n { \"opacity-65\": isDragging }\n )}\n ref={node => {\n setDraggableNodeRef(node);\n setDroppableNodeRef(node);\n setViewRef(node);\n }}\n >\n {inView && render()}\n {isIndicatorVisible && <DndIndicator layout=\"vertical\" />}\n </div>\n );\n};\n\nexport default SectionContainer;\n","import { useId } from \"react\";\n\nimport { useDroppable } from \"@dnd-kit/core\";\n\nimport { DRAGGABLE_TYPES } from \"../constants\";\nimport DndIndicator from \"../Indicator\";\n\nconst SectionPlaceholder = ({ data, index = 0 }) => {\n const id = useId();\n\n const { isOver, setNodeRef } = useDroppable({\n data: { ...data, accepts: [DRAGGABLE_TYPES.SECTION], index },\n id,\n });\n\n return (\n <div className=\"relative\" ref={setNodeRef}>\n {isOver && <DndIndicator layout=\"vertical\" />}\n </div>\n );\n};\n\nexport default SectionPlaceholder;\n","import { forwardRef, useState } from \"react\";\n\nimport {\n DndContext,\n PointerSensor,\n useSensor,\n useSensors,\n} from \"@dnd-kit/core\";\nimport PropTypes from \"prop-types\";\n\nimport \"./boardview.scss\";\nimport { closestCenter } from \"./closestCenter\";\nimport { DRAGGABLE_TYPES } from \"./constants\";\nimport DndOverlay from \"./Overlay\";\nimport Section from \"./Section\";\nimport SectionContainer from \"./Section/Container\";\nimport SectionPlaceholder from \"./Section/Placeholder\";\n\nconst sensorConfig = { activationConstraint: { distance: 8 } };\nconst measuringConfig = { droppable: { frequency: 500 } };\n\nconst BoardView = forwardRef((props, ref) => {\n const { sections, onMoveSection, onMoveItem, renderSection } = props;\n\n const [dragState, setDragState] = useState({});\n const sensors = useSensors(useSensor(PointerSensor, sensorConfig));\n\n const onDragEnd = drag => {\n const active = dragState.active.data.current;\n const over = drag.over?.data.current;\n if (!active || !over) return;\n\n if (active.type === DRAGGABLE_TYPES.ITEM) {\n onMoveItem?.(active, over);\n } else if (active.type === DRAGGABLE_TYPES.SECTION) {\n onMoveSection?.(active, over);\n }\n };\n\n return (\n <DndContext\n {...{ onDragEnd, sensors }}\n collisionDetection={closestCenter(dragState)}\n measuring={measuringConfig}\n onDragStart={setDragState}\n >\n <div {...{ ref }} className=\"flex w-full flex-1 overflow-x-auto p-3\">\n <SectionPlaceholder />\n {sections.map((section, index) => (\n <SectionContainer\n {...{ index }}\n data={{ section }}\n id={section.id}\n key={section.id}\n render={() => renderSection({ index, section })}\n />\n ))}\n </div>\n <DndOverlay {...{ props }} state={dragState} />\n </DndContext>\n );\n});\n\nBoardView.displayName = \"BoardView\";\nBoardView.Section = Section;\nBoardView.propTypes = {\n /** A reference to the container element. */\n ref: PropTypes.any,\n\n /**\n An array of sections, each defined by an object with an `id` string.\n */\n sections: PropTypes.arrayOf(\n PropTypes.shape({ id: PropTypes.string.isRequired })\n ).isRequired,\n\n /** function to render each section content in the board view */\n renderSection: PropTypes.func.isRequired,\n\n /** A function to render a drag overlay for individual sections (drag preview) */\n renderSectionOverlay: PropTypes.func.isRequired,\n\n /** A function to render a drag overlay for individual items (drag preview) */\n renderItemOverlay: PropTypes.func.isRequired,\n\n /** Callback function triggered when a section is reordered */\n onMoveSection: PropTypes.func,\n\n /** Callback function triggered when an item is moved */\n onMoveItem: PropTypes.func,\n};\n\nexport default BoardView;\n"],"names":["distanceBetween","p1","p2","Math","sqrt","pow","x","y","centerOfRectangle","rect","left","arguments","length","undefined","top","width","height","matchType","draggable","droppable","data","current","accepts","includes","type","closestCenter","_ref","active","_ref2","collisionRect","droppableRects","droppableContainers","centerRect","minDistance","Number","POSITIVE_INFINITY","collision","id","_iterator","_createForOfIteratorHelper","_step","s","n","done","droppableContainer","value","get","distance","err","e","f","DRAGGABLE_TYPES","SECTION","ITEM","DndOverlay","_state$active","props","state","renderSectionOverlay","renderItemOverlay","_jsxs","DragOverlay","children","DndIndicator","_ref$layout","layout","_jsx","className","classNames","ItemContainer","index","render","mutables","useRef","containerHeight","_useDraggable","useDraggable","_objectSpread","attributes","listeners","isDragging","setDraggableNodeRef","setNodeRef","_useDroppable","useDroppable","isOver","setDroppableNodeRef","_useInView","useInView","onChange","inView","entry","target","clientHeight","_useInView2","_slicedToArray","setViewRef","isIndicatorVisible","ref","node","style","ItemPlaceholder","_ref$index","useId","Section","forwardRef","section","items","renderItem","map","item","_createElement","key","displayName","propTypes","PropTypes","any","shape","string","isRequired","arrayOf","func","SectionContainer","SectionPlaceholder","sensorConfig","activationConstraint","measuringConfig","frequency","BoardView","sections","onMoveSection","onMoveItem","renderSection","_useState","useState","_useState2","dragState","setDragState","sensors","useSensors","useSensor","PointerSensor","onDragEnd","drag","_drag$over","over","DndContext","collisionDetection","measuring","onDragStart"],"mappings":"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"}
|
package/dist/cjs/OptionFields.js
CHANGED
|
@@ -157,7 +157,8 @@ var useOptionFields = function useOptionFields(_ref) {
|
|
|
157
157
|
shouldResetEmptyOptionOnBlur = _ref.shouldResetEmptyOptionOnBlur,
|
|
158
158
|
name = _ref.name,
|
|
159
159
|
destroyFlagName = _ref.destroyFlagName,
|
|
160
|
-
isNewItemsPrefilled = _ref.isNewItemsPrefilled
|
|
160
|
+
isNewItemsPrefilled = _ref.isNewItemsPrefilled,
|
|
161
|
+
isAddOptionEnabled = _ref.isAddOptionEnabled;
|
|
161
162
|
var _useState = React.useState(false),
|
|
162
163
|
_useState2 = _slicedToArray(_useState, 2),
|
|
163
164
|
shouldFocus = _useState2[0],
|
|
@@ -252,7 +253,7 @@ var useOptionFields = function useOptionFields(_ref) {
|
|
|
252
253
|
var inputs = Array.from(form.querySelectorAll("input"));
|
|
253
254
|
var currentInput = inputs.indexOf(event.target);
|
|
254
255
|
if (currentInput >= inputs.length - 1) {
|
|
255
|
-
handleAddOption();
|
|
256
|
+
isAddOptionEnabled && handleAddOption();
|
|
256
257
|
} else {
|
|
257
258
|
var _inputs;
|
|
258
259
|
(_inputs = inputs[currentInput + 1]) === null || _inputs === void 0 ? void 0 : _inputs.focus();
|
|
@@ -569,7 +570,8 @@ var OptionFields = function OptionFields(_ref) {
|
|
|
569
570
|
shouldResetEmptyOptionOnBlur: shouldResetEmptyOptionOnBlur,
|
|
570
571
|
destroyFlagName: destroyFlagName,
|
|
571
572
|
name: name,
|
|
572
|
-
isNewItemsPrefilled: isNewItemsPrefilled
|
|
573
|
+
isNewItemsPrefilled: isNewItemsPrefilled,
|
|
574
|
+
isAddOptionEnabled: isAddOptionEnabled
|
|
573
575
|
}),
|
|
574
576
|
shouldFocus = _useOptionFields.shouldFocus,
|
|
575
577
|
handleAddOption = _useOptionFields.handleAddOption,
|