@cimpress/react-components
Version:
React components to support the MCP styleguide
66 lines • 3.46 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { Draggable } from 'react-beautiful-dnd';
import { css, cx } from '@emotion/css';
import { merge } from 'lodash';
import cvar from '../theme/cvar';
const withDraggableStyle = css `
display: flex;
border: 0.5px solid ${cvar('color-border-light')};
border-radius: 3px;
margin-bottom: 10px;
background-color: ${cvar('color-background')};
padding: 10px 10px 10px 0;
`;
const clonePlaceholderStyle = css `
${withDraggableStyle}
~ div {
// This the transform property for adjacent draggables when the clone is added to the document
// A custom style could be passed instead, using a mix of isDragging or isDropAnimating,
// or isDraggingOver to indicate one item in the droppable is being dragged over
// see https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/drop-animation.md
transform: none !important;
}
`;
const flexItemStyle = css `
flex-grow: 1;
`;
const gripDragStyle = css `
min-width: 19px;
visibility: initial;
display: flex;
align-items: center;
`;
const gripDragDisabledStyle = css `
visibility: collapse;
`;
export const withDraggable = (WrappedComponent) => (_a) => {
var { draggableId, index, isDragDisabled, showPlaceholderWhileDragging = false, style, icon: Icon } = _a, restProps = __rest(_a, ["draggableId", "index", "isDragDisabled", "showPlaceholderWhileDragging", "style", "icon"]);
return (React.createElement(Draggable, { draggableId: draggableId, index: index, isDragDisabled: isDragDisabled }, (provided, snapshot) => {
const wrappedProps = Object.assign(Object.assign({}, restProps), { snapshot, provided });
// merge the passed style with the react-beautiful-dnd props avoid overwriting styling the library sets
const withDraggableWrapperProps = merge({}, provided.draggableProps, provided.dragHandleProps, { style });
return (React.createElement(React.Fragment, null,
React.createElement("div", Object.assign({ className: withDraggableStyle, ref: provided.innerRef }, withDraggableWrapperProps),
React.createElement("div", { className: cx(gripDragStyle, { [gripDragDisabledStyle]: isDragDisabled }) },
React.createElement(Icon, { size: "lg" })),
React.createElement("div", { className: flexItemStyle },
React.createElement(WrappedComponent, Object.assign({}, wrappedProps)))),
snapshot.isDragging && showPlaceholderWhileDragging && (React.createElement("div", { className: clonePlaceholderStyle },
React.createElement("div", { className: cx(gripDragStyle, { [gripDragDisabledStyle]: isDragDisabled }) },
React.createElement(Icon, { size: "lg" })),
React.createElement("div", { className: flexItemStyle },
React.createElement(WrappedComponent, Object.assign({}, wrappedProps)))))));
}));
};
//# sourceMappingURL=withDraggable.js.map