gather-content-ui
Version:
GatherContent UI Library
77 lines (76 loc) • 3.88 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DndDropNotification = DndDropNotification;
var _react = _interopRequireWildcard(require("react"));
var _addonActions = require("@storybook/addon-actions");
var _Droppable = require("../Droppable");
var _bar = _interopRequireDefault(require("../../Notification/bar"));
var _DndProvider = require("../DndProvider");
var _ItemRow = require("../../ItemRow");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function Message(_ref) {
var children = _ref.children,
canDrop = _ref.canDrop,
isOver = _ref.isOver,
isDragging = _ref.isDragging;
var level = "information";
if (isDragging && canDrop) {
level = "warning";
}
if (isDragging && isOver) {
level = "success";
}
if (isDragging && isOver && !canDrop) {
level = "danger";
}
return /*#__PURE__*/_react["default"].createElement(_bar["default"], {
level: level,
style: {
height: "200px"
}
}, children);
}
function DndDropNotification() {
var _useContext = (0, _react.useContext)(_DndProvider.DndContext),
isDragging = _useContext.isDragging,
setFailurePreview = _useContext.setFailurePreview;
var failurePreview = /*#__PURE__*/_react["default"].createElement("div", {
style: {
maxWidth: "300px"
}
}, /*#__PURE__*/_react["default"].createElement(_ItemRow.ItemRow, {
bordered: true
}, /*#__PURE__*/_react["default"].createElement(_ItemRow.ItemRow.Name, null, "You cannot drag folders into here!")));
return /*#__PURE__*/_react["default"].createElement(_Droppable.Droppable, {
acceptDragTypes: ["item", "folder"],
onDrop: (0, _addonActions.action)("something was dropped"),
canDropChecker: function canDropChecker(_ref2, monitor) {
var type = _ref2.type;
var typeIsItem = type === "item";
if (!typeIsItem) {
setFailurePreview(failurePreview);
}
if (!monitor.isOver()) {
setFailurePreview(null);
}
return typeIsItem;
}
}, function (_ref3, defineDropRef) {
var canDrop = _ref3.canDrop,
isOver = _ref3.isOver;
return /*#__PURE__*/_react["default"].createElement("div", {
ref: defineDropRef,
className: "gui-h-margin-top"
}, /*#__PURE__*/_react["default"].createElement(Message, {
isDragging: isDragging,
isOver: isOver,
canDrop: canDrop
}, (!isDragging || !canDrop && !isOver) && "Start by dragging items in here.", isDragging && !isOver && canDrop && "Drag it here.", isDragging && isOver && canDrop && "Drop it!", isDragging && isOver && !canDrop && "You cannot drag here!"));
});
}
//# sourceMappingURL=DndDropNotification.js.map