@cimpress/react-components/dist/src/DragAndDrop/Droppable.js

React components to support the MCP styleguide

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Droppable = void 0;
const react_1 = __importDefault(require("react"));
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const css_1 = require("@emotion/css");
const FlexBox_1 = require("../FlexBox");
const cvar_1 = __importDefault(require("../theme/cvar"));
const droppableStyle = (0, css_1.css) `
  border-radius: 3px;
  padding: ${(0, cvar_1.default)('spacing-8')};
  min-height: 64px;
`;
const draggingStyle = (0, css_1.css) `
  background-color: ${(0, cvar_1.default)('color-drag-background-dragging')};
`;
const emptyStyle = (0, css_1.css) `
  border: ${(0, cvar_1.default)('spacing-2')} dashed ${(0, cvar_1.default)('color-border-interactive')};
`;
const Droppable = ({ children, droppableId, isEmpty = false, emptyPlaceholder }) => (react_1.default.createElement(react_beautiful_dnd_1.Droppable, { droppableId: droppableId }, (provided, snapshot) => (react_1.default.createElement("div", { ref: provided.innerRef, className: (0, css_1.cx)(droppableStyle, { [draggingStyle]: snapshot.isDraggingOver, [emptyStyle]: isEmpty }) },
    react_1.default.createElement(FlexBox_1.FlexBox, { style: { padding: `${(0, cvar_1.default)('spacing-8')} 0px` }, flexFlow: "column nowrap", alignItems: isEmpty ? 'center' : 'initial' }, !isEmpty ? (react_1.default.createElement(react_1.default.Fragment, null,
        children,
        provided.placeholder)) : (emptyPlaceholder))))));
exports.Droppable = Droppable;
//# sourceMappingURL=Droppable.js.map