lucid-ui
Version:
A UI component library from Xandr.
103 lines • 4.79 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Interactive = void 0;
var lodash_1 = __importStar(require("lodash"));
var react_1 = __importStar(require("react"));
var DragCaptureZone_1 = __importDefault(require("./DragCaptureZone"));
exports.default = {
title: 'Utility/DragCaptureZone',
component: DragCaptureZone_1.default,
parameters: {
docs: {
description: {
component: DragCaptureZone_1.default.peek.description,
},
},
},
args: DragCaptureZone_1.default.defaultProps,
decorators: [
function (Story) { return (react_1.default.createElement("div", { style: { margin: '2em' } },
react_1.default.createElement(Story, null))); },
],
};
/* Interactive */
var Interactive = function (args) {
var _a = (0, react_1.useState)([]), events = _a[0], setEvents = _a[1];
var handleDragEnded = function (coordinates) {
var newEndEvents = (0, lodash_1.concat)(events, { type: 'end', coordinates: coordinates });
setEvents(__spreadArray([], newEndEvents, true));
};
var handleDragStarted = function (coordinates) {
var newStartEvents = (0, lodash_1.concat)(events, { type: 'start', coordinates: coordinates });
setEvents(__spreadArray([], newStartEvents, true));
};
var handleDragged = function (coordinates) {
var lastEvent = lodash_1.default.last(events);
var alreadyDragging = lastEvent.type === 'start';
var newDraggedEvents = (0, lodash_1.concat)(alreadyDragging ? events : (0, lodash_1.slice)(events, 0, -1), { type: 'drag', coordinates: coordinates });
setEvents(__spreadArray([], newDraggedEvents, true));
};
return (react_1.default.createElement("section", { style: {
alignItems: 'center',
display: 'flex',
} },
react_1.default.createElement(DragCaptureZone_1.default, { onDrag: handleDragged, onDragEnd: handleDragEnded, onDragStart: handleDragStarted },
react_1.default.createElement("div", { style: {
alignItems: 'center',
backgroundColor: '#b7b7b7',
display: 'flex',
fontFamily: 'Helvetica, sans-serif',
fontSize: '24px',
fontWeight: 300,
height: 300,
justifyContent: 'center',
textTransform: 'uppercase',
width: 400,
} }, "Go wild!")),
react_1.default.createElement("div", { style: {
height: 300,
marginLeft: 50,
overflow: 'auto',
width: 600,
} }, (0, lodash_1.reverse)((0, lodash_1.map)(events, function (_a, index) {
var type = _a.type, coordinates = _a.coordinates;
return (react_1.default.createElement("div", { key: index },
react_1.default.createElement("div", { style: {
fontWeight: 'bold',
} }, type),
react_1.default.createElement("div", null, "dx: ".concat(coordinates.dX, ", dy: ").concat(coordinates.dY, ",\n\t\t\t\t\t\t\t\t\tpx: ").concat(coordinates.pageX, ", py: ").concat(coordinates.pageY))));
})))));
};
exports.Interactive = Interactive;
//# sourceMappingURL=DragCaptureZone.stories.js.map