@magicbe/design/dist/maps/WidgetsGroup.js

React + Antd Drag Drop Visual design

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, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment } from "react";
import Draggable from "./Draggable";
import createInstance from "@emotion/css/create-instance";
import { groupBy } from "lodash";
import { SchemaUtil } from "../utils/schema";
var _a = createInstance({ key: "widgets-group" }), css = _a.css, cx = _a.cx;
var WidgetsGroup = function (_a) {
    var className = _a.className, _b = _a.group, group = _b === void 0 ? groupBy(SchemaUtil.getWidgets(), "group") : _b;
    var cls = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: inline-block;\n        vertical-align: top;\n        box-sizing: border-box;\n        height: 100%;\n        overflow-y: auto;\n        padding: 10px;\n    "], ["\n        display: inline-block;\n        vertical-align: top;\n        box-sizing: border-box;\n        height: 100%;\n        overflow-y: auto;\n        padding: 10px;\n    "])));
    return (_jsx("div", __assign({ className: cx(cls, className) }, { children: Object.keys(group).map(function (name) { return (_jsx(WidgetItems, { label: name, name: name, items: group[name] }, name)); }) })));
};
export default WidgetsGroup;
export var WidgetItems = function (_a) {
    var label = _a.label, items = _a.items;
    var title_cls = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        font-weight: 600;\n        margin-bottom: 15px;\n    "], ["\n        font-weight: 600;\n        margin-bottom: 15px;\n    "])));
    var items_cls = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        margin-bottom: 10px;\n    "], ["\n        margin-bottom: 10px;\n    "])));
    var draggable_cls = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        display: inline-block;\n    "], ["\n        display: inline-block;\n    "])));
    return (_jsxs(Fragment, { children: [_jsx("div", __assign({ className: title_cls }, { children: label })), _jsx("div", __assign({ className: items_cls }, { children: items.map(function (item, index) { return (_jsx(Draggable, __assign({ className: draggable_cls, widget: item.widget, group: item.group }, { children: _jsx(WidgetItem, __assign({}, item)) }), index)); }) }))] }));
};
export var WidgetItem = function (_a) {
    var widget = _a.widget;
    var cls = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        display: inline-block;\n        width: 100px;\n        height: 40px;\n        box-sizing: border-box;\n        border: 1px solid #eeeeee;\n        text-align: center;\n        line-height: 40px;\n    "], ["\n        display: inline-block;\n        width: 100px;\n        height: 40px;\n        box-sizing: border-box;\n        border: 1px solid #eeeeee;\n        text-align: center;\n        line-height: 40px;\n    "])));
    var title_cls = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        font-size: 10px;\n    "], ["\n        font-size: 10px;\n    "])));
    return (_jsx("div", __assign({ className: cls }, { children: _jsx("span", __assign({ className: title_cls }, { children: widget })) })));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;