test-jsonforms-react-spectrum-renderers
Version:
React Spectrum Renderer Set for JSONForms
109 lines • 6.14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var react_spectrum_1 = require("@adobe/react-spectrum");
var DragHandle_1 = tslib_1.__importDefault(require("@spectrum-icons/workflow/DragHandle"));
var SpectrumArrayModalItem_1 = tslib_1.__importDefault(require("../SpectrumArrayModalItem"));
var utils_1 = require("../utils");
var web_1 = require("@react-spring/web");
var react_2 = require("@use-gesture/react");
// Drag and Drop
function DragAndDrop(_a) {
var path = _a.path, data = _a.data, renderers = _a.renderers, schema = _a.schema, uischema = _a.uischema, uischemas = _a.uischemas, removeItems = _a.removeItems, indexOfFittingSchemaArray = _a.indexOfFittingSchemaArray, handleRemoveItem = _a.handleRemoveItem;
var stringified = function (arr) {
return arr.map(function (item) {
return JSON.stringify(item);
});
};
var order = react_1.default.useRef(Array.from(Array(data)).map(function (data, _) { return data; }));
var HEIGHT_OF_COMPONENT = 88;
var fn = function (order, active, originalIndex, curIndex, y) {
if (active === void 0) { active = false; }
if (originalIndex === void 0) { originalIndex = 0; }
if (curIndex === void 0) { curIndex = 0; }
if (y === void 0) { y = 0; }
return function (index) {
return active && index === originalIndex
? {
y: curIndex * HEIGHT_OF_COMPONENT + y,
scale: 1.03,
zIndex: 50,
shadow: 15,
immediate: function (key) { return key === 'zIndex'; },
config: function (key) {
return key === 'y' ? web_1.config.stiff : web_1.config.default;
},
}
: {
y: stringified(order).indexOf(JSON.stringify(data[index])) *
HEIGHT_OF_COMPONENT,
scale: 1,
zIndex: 20,
shadow: 1,
immediate: false,
};
};
};
var _b = web_1.useSprings(data === null || data === void 0 ? void 0 : data.length, fn(order.current[0])), springs = _b[0], api = _b[1];
var DragHandleRef = web_1.useSpringRef();
var _c = react_1.useState(null), grabbedIndex = _c[0], setGrabbedIndex = _c[1];
var bind = react_2.useDrag(function (_a) {
var originalIndex = _a.args[0], active = _a.active, _b = _a.movement, y = _b[1];
console.log(y);
if (grabbedIndex !== null) {
var curRow = utils_1.clamp(Math.round((grabbedIndex * HEIGHT_OF_COMPONENT + y) / HEIGHT_OF_COMPONENT), 0, data.length - 1);
console.log(curRow);
var newOrder = utils_1.swap(order.current[0], stringified(order.current[0]).indexOf(JSON.stringify(order.current[0][grabbedIndex])), stringified(order.current[0]).indexOf(JSON.stringify(order.current[0][curRow])));
api.start(fn(newOrder, active, originalIndex, curRow, y)); // Feed springs new style data, they'll animate the view without causing a single render
if (stringified(order.current[0]).indexOf(JSON.stringify(order.current[0][grabbedIndex])) ===
stringified(order.current[0]).indexOf(JSON.stringify(order.current[0][curRow]))) {
return;
}
else {
if (data === newOrder) {
return;
}
data.splice(0, data.length);
data.push.apply(data, newOrder);
}
if (!active) {
order.current[0] = newOrder;
setGrabbedIndex(null);
removeItems(path, [999999999])();
api.start(fn(newOrder, active, originalIndex, curRow, y));
}
}
});
var duplicateContent = function (index) {
data.push(data[index]);
removeItems(path, [999999999])();
};
return (react_1.default.createElement("div", { style: {
display: 'flex',
flexDirection: 'column',
height: HEIGHT_OF_COMPONENT * data.length,
touchAction: 'none',
transformOrigin: '50% 50% 0px',
position: 'relative',
} }, springs.map(function (_a, index) {
var zIndex = _a.zIndex, shadow = _a.shadow, y = _a.y, scale = _a.scale;
return (react_1.default.createElement(web_1.animated.div, tslib_1.__assign({}, bind(index), { key: index, style: {
zIndex: zIndex,
boxShadow: shadow.to(function (s) { return "rgba(0, 0, 0, 0.15) 0px " + s + "px " + 2 * s + "px 0px"; }),
y: y,
scale: scale,
width: '100%',
touchAction: 'none',
transformOrigin: '50% 50% 0px',
position: 'absolute',
}, height: HEIGHT_OF_COMPONENT + 'px' }),
react_1.default.createElement(react_spectrum_1.Flex, { direction: 'row', alignItems: 'stretch', flex: 'auto inherit' },
react_1.default.createElement(SpectrumArrayModalItem_1.default, { index: index, indexOfFittingSchema: indexOfFittingSchemaArray[index], path: path, removeItem: handleRemoveItem, duplicateItem: duplicateContent, renderers: renderers, schema: schema, uischema: uischema, uischemas: uischemas }),
react_1.default.createElement("div", { ref: DragHandleRef, className: 'grabbable', onMouseDown: function () { return setGrabbedIndex(index); } },
react_1.default.createElement(DragHandle_1.default, { "aria-label": 'Drag and Drop Handle', size: 'L', alignSelf: 'center', width: '100%' })),
react_1.default.createElement("p", { onClick: function () { return duplicateContent(index); } }, JSON.stringify(y)))));
})));
}
exports.default = DragAndDrop;
//# sourceMappingURL=DragAndDrop.js.map