@magicbe/design
Version:
React + Antd Drag Drop Visual design
58 lines (57 loc) • 3.36 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx } from "react/jsx-runtime";
import React, { Fragment, useEffect } from "react";
import createInstance from "@emotion/css/create-instance";
import { useDesignViewsContext, useSchemaContext } from "./Context";
import { DATA_DROP, DATA_DROP_WAPPER, DATA_WIDGET } from "../utils/const";
import { theme } from "antd";
var _a = createInstance({ key: "drop" }), css = _a.css, cx = _a.cx;
/**容器、子元素放置区域 */
var Drop = function (props) {
var _a, _b;
var children = props.children, _c = props.size, size = _c === void 0 ? ["70px", "70px"] : _c;
var _d = size, minWidth = _d[0], minHeight = _d[1];
var emptyRef = React.createRef();
var token = theme.useToken().token;
var schema = useSchemaContext().schema;
var _e = useDesignViewsContext(), holderToDrop = _e.holderToDrop, wapperRef = _e.wapperRef;
/**给父级元素做标记 */
useEffect(function () {
var _a;
if (!emptyRef.current)
return;
(_a = emptyRef.current.parentElement) === null || _a === void 0 ? void 0 : _a.setAttribute(DATA_DROP_WAPPER, schema.uuid);
}, [emptyRef]);
useEffect(function () {
var schemas = children.props.schemas;
schemas.forEach(function (_a) {
var _b, _c, _d;
var uuid = _a.uuid;
(_d = (_c = (_b = wapperRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("*[".concat(DATA_WIDGET, "=\"").concat(uuid, "\"]"))) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.setAttribute(DATA_DROP_WAPPER, schema.uuid);
});
}, [children]);
/**给父级元素做标记 */
var class_name = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n "], ["\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n "])));
var active_class = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid ", ";\n opacity: 0.6;\n "], ["\n background-color: ", ";\n border: 2px solid ", ";\n opacity: 0.6;\n "])), token.colorPrimaryBg, token.colorPrimaryActive);
var childLen = children.props.schemas.length;
var active = holderToDrop === schema.uuid;
if (!childLen)
return (_jsx("div", __assign({ ref: emptyRef, style: { minWidth: minWidth, minHeight: minHeight }, className: cx(class_name, (_a = {}, _a[active_class] = active, _a)) }, (_b = {}, _b[DATA_DROP] = schema.uuid, _b))));
return (_jsx(Fragment, { children: children }));
};
export default Drop;
var templateObject_1, templateObject_2;