@cimpress/react-components
Version:
React components to support the MCP styleguide
21 lines • 1.18 kB
JavaScript
import React from 'react';
import { Droppable as BeautifulDroppable } from 'react-beautiful-dnd';
import { css, cx } from '@emotion/css';
import { FlexBox } from '../FlexBox';
import cvar from '../theme/cvar';
const droppableStyle = css `
border-radius: 3px;
padding: ${cvar('spacing-8')};
min-height: 64px;
`;
const draggingStyle = css `
background-color: ${cvar('color-drag-background-dragging')};
`;
const emptyStyle = css `
border: ${cvar('spacing-2')} dashed ${cvar('color-border-interactive')};
`;
export const Droppable = ({ children, droppableId, isEmpty = false, emptyPlaceholder }) => (React.createElement(BeautifulDroppable, { droppableId: droppableId }, (provided, snapshot) => (React.createElement("div", { ref: provided.innerRef, className: cx(droppableStyle, { [draggingStyle]: snapshot.isDraggingOver, [emptyStyle]: isEmpty }) },
React.createElement(FlexBox, { style: { padding: `${cvar('spacing-8')} 0px` }, flexFlow: "column nowrap", alignItems: isEmpty ? 'center' : 'initial' }, !isEmpty ? (React.createElement(React.Fragment, null,
children,
provided.placeholder)) : (emptyPlaceholder))))));
//# sourceMappingURL=Droppable.js.map