@cimpress/react-components
Version:
React components to support the MCP styleguide
74 lines • 4.2 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.withDraggable = void 0;
const react_1 = __importDefault(require("react"));
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const css_1 = require("@emotion/css");
const ts_deepmerge_1 = require("ts-deepmerge");
const cvar_1 = __importDefault(require("../theme/cvar"));
const withDraggableStyle = (0, css_1.css) `
display: flex;
border: 0.5px solid ${(0, cvar_1.default)('color-border-light')};
border-radius: 3px;
margin-bottom: 10px;
background-color: ${(0, cvar_1.default)('color-background')};
padding: 10px 10px 10px 0;
`;
const clonePlaceholderStyle = (0, css_1.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 = (0, css_1.css) `
flex-grow: 1;
`;
const gripDragStyle = (0, css_1.css) `
min-width: 19px;
visibility: initial;
display: flex;
align-items: center;
`;
const gripDragDisabledStyle = (0, css_1.css) `
visibility: collapse;
`;
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_1.default.createElement(react_beautiful_dnd_1.Draggable, { draggableId: draggableId, index: index, isDragDisabled: isDragDisabled }, (provided, snapshot) => {
var _a;
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 = ts_deepmerge_1.merge.withOptions({ allowUndefinedOverrides: false }, {}, provided.draggableProps, (_a = provided.dragHandleProps) !== null && _a !== void 0 ? _a : {}, { style });
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", Object.assign({ className: withDraggableStyle, ref: provided.innerRef }, withDraggableWrapperProps),
react_1.default.createElement("div", { className: (0, css_1.cx)(gripDragStyle, { [gripDragDisabledStyle]: isDragDisabled }) },
react_1.default.createElement(Icon, { size: "lg" })),
react_1.default.createElement("div", { className: flexItemStyle },
react_1.default.createElement(WrappedComponent, Object.assign({}, wrappedProps)))),
snapshot.isDragging && showPlaceholderWhileDragging && (react_1.default.createElement("div", { className: clonePlaceholderStyle },
react_1.default.createElement("div", { className: (0, css_1.cx)(gripDragStyle, { [gripDragDisabledStyle]: isDragDisabled }) },
react_1.default.createElement(Icon, { size: "lg" })),
react_1.default.createElement("div", { className: flexItemStyle },
react_1.default.createElement(WrappedComponent, Object.assign({}, wrappedProps)))))));
}));
};
exports.withDraggable = withDraggable;
//# sourceMappingURL=withDraggable.js.map