@magicbe/design
Version:
React + Antd Drag Drop Visual design
114 lines (113 loc) • 7.09 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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, useMemo } from "react";
import { useDesignContext } from "../context";
import { find, set } from "lodash";
import { Button, Card, Empty, Tabs, message } from "antd";
import createInstance from "@emotion/css/create-instance";
import { SchemaUtil } from "../utils/schema";
var _a = createInstance({ key: "settings" }), css = _a.css, cx = _a.cx;
var DesignSettings = /** @class */ (function (_super) {
__extends(DesignSettings, _super);
function DesignSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
DesignSettings.setMap = function (maps) {
DesignSettings.items = maps.map(function (_a) {
var label = _a.label, key = _a.key, children = _a.component;
return ({
label: label,
key: key,
children: children
});
});
};
DesignSettings.getMap = function () {
return DesignSettings.items;
};
DesignSettings.prototype.render = function () {
return _jsx(SettingsMain, { className: this.props.className });
};
DesignSettings.items = [];
return DesignSettings;
}(React.Component));
export default DesignSettings;
var SettingsMain = function (_a) {
var className = _a.className;
var _b = useDesignContext(), activeSchemaKey = _b.activeSchemaKey, schemas = _b.schemas;
var activeSchema = useMemo(function () { return find(schemas, { uuid: activeSchemaKey }); }, [activeSchemaKey, schemas]);
var title = useMemo(function () { return activeSchema ? activeSchema.title : "页面"; }, [activeSchema]);
var onCopyId = function () {
navigator.clipboard.writeText(activeSchema.uuid)
.then(function () { return message.success("复制成功"); })
.catch(function () { return message.error("复制失败"); });
};
var extra = activeSchema ? (_jsx(Button, __assign({ type: "link", size: "small", onClick: onCopyId }, { children: "\u590D\u5236ID" }))) : _jsx(Fragment, {});
var body_style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .ant-card-body {\n padding: 0;\n }\n "], ["\n .ant-card-body {\n padding: 0;\n }\n "])));
return (_jsx(Card, __assign({ size: "small", title: title, bordered: false, className: cx(body_style, className), extra: extra }, { children: _jsx(Settings, {}) })));
};
export var Settings = function (_a) {
var className = _a.className;
var _b = useDesignContext(), activeSchemaKey = _b.activeSchemaKey, schemas = _b.schemas, setSchemas = _b.setSchemas;
var widgets = SchemaUtil.getWidgets();
var Widget = useMemo(function () {
var schema = find(schemas, { uuid: activeSchemaKey });
if (!activeSchemaKey || !schema || !schemas.length)
return;
return find(widgets, { widget: schema.widget, group: schema.group });
}, [widgets, activeSchemaKey]);
var items = useMemo(function () {
var _a, _b;
var properties = (_a = find(schemas, { uuid: activeSchemaKey })) === null || _a === void 0 ? void 0 : _a.properties;
var onChange = function (value) {
if (value === void 0) { value = {}; }
var schema = find(schemas, { uuid: activeSchemaKey });
set(schema, "properties", __assign(__assign({}, properties), value));
setSchemas(schemas);
};
return (_b = Widget === null || Widget === void 0 ? void 0 : Widget.settings) === null || _b === void 0 ? void 0 : _b.map(function (Widget, index) { return ({
label: Widget.settingLabel,
key: index.toString(),
children: _jsx(Widget, { value: properties, onChange: onChange }, "".concat(activeSchemaKey, "_").concat(index)),
}); });
}, [Widget, schemas, activeSchemaKey]);
var cls = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .ant-tabs-tab {\n border-radius: 0 !important;\n\n &:first-child {\n border-left: none;\n }\n }\n \n .ant-tabs-content {\n height: calc(100vh - 105px);\n padding: 0 10px;\n overflow-y: auto;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n \n &::-webkit-scrollbar {\n display: none;\n }\n }\n "], ["\n .ant-tabs-tab {\n border-radius: 0 !important;\n\n &:first-child {\n border-left: none;\n }\n }\n \n .ant-tabs-content {\n height: calc(100vh - 105px);\n padding: 0 10px;\n overflow-y: auto;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n \n &::-webkit-scrollbar {\n display: none;\n }\n }\n "])));
var empty_style = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 30px;\n "], ["\n margin: 30px;\n "])));
if (!Widget || !(items === null || items === void 0 ? void 0 : items.length)) {
var items_1 = DesignSettings.getMap();
if (!(items_1 === null || items_1 === void 0 ? void 0 : items_1.length))
return _jsx(Empty, { className: empty_style });
return (_jsx(Tabs, { type: "card", items: items_1, className: cx(cls, className), tabBarGutter: -1 }));
}
return (_jsx(Tabs, { type: "card", items: items, className: cx(cls, className), tabBarGutter: -1 }));
};
var templateObject_1, templateObject_2, templateObject_3;