@mdesignable/react 1.0.0-beta.64

package/esm/widgets/OutlineWidget/Insertion.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useMoveHelper, usePrefix } from '../../hooks';
+import { ClosestPosition } from '@mdesignable/core';
+import { observer } from '@formily/reactive-react';
+export var Insertion = observer(function (_a) {
+    var workspaceId = _a.workspaceId;
+    var moveHelper = useMoveHelper(workspaceId);
+    var prefix = usePrefix('outline-tree-insertion');
+    var createInsertionStyle = function () {
+        var closestDirection = moveHelper.outlineClosestDirection;
+        var closestRect = moveHelper.outlineClosestOffsetRect;
+        var baseStyle = {
+            position: 'absolute',
+            transform: 'perspective(1px) translate3d(0,0,0)',
+            top: 0,
+            left: 0,
+        };
+        if (!closestRect)
+            return baseStyle;
+        if (closestDirection === ClosestPosition.After ||
+            closestDirection === ClosestPosition.InnerAfter ||
+            closestDirection === ClosestPosition.Under ||
+            closestDirection === ClosestPosition.ForbidAfter ||
+            closestDirection === ClosestPosition.ForbidInnerAfter ||
+            closestDirection === ClosestPosition.ForbidUnder) {
+            baseStyle.width = closestRect.width;
+            baseStyle.height = 2;
+            baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y + closestRect.height - 2, "px,0)");
+        }
+        else if (closestDirection === ClosestPosition.Before ||
+            closestDirection === ClosestPosition.InnerBefore ||
+            closestDirection === ClosestPosition.Upper ||
+            closestDirection === ClosestPosition.ForbidBefore ||
+            closestDirection === ClosestPosition.ForbidInnerBefore ||
+            closestDirection === ClosestPosition.ForbidUpper) {
+            baseStyle.width = closestRect.width;
+            baseStyle.height = 2;
+            baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y, "px,0)");
+        }
+        if (closestDirection.includes('FORBID')) {
+            baseStyle.backgroundColor = 'red';
+        }
+        else {
+            baseStyle.backgroundColor = '';
+        }
+        return baseStyle;
+    };
+    if (!(moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.closestNode))
+        return null;
+    return React.createElement("div", { className: prefix, style: createInsertionStyle() });
+});
+Insertion.displayName = 'Insertion';

package/esm/widgets/OutlineWidget/OutlineNode.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+import './styles.less';
+export interface IOutlineTreeNodeProps {
+    node: TreeNode;
+    style?: React.CSSProperties;
+    className?: string;
+    workspaceId?: string;
+}
+export declare const OutlineTreeNode: React.FC<IOutlineTreeNodeProps>;

package/esm/widgets/OutlineWidget/OutlineNode.js

@@ -0,0 +1,140 @@
+import React, { useRef, useContext, useEffect } from 'react';
+import { ClosestPosition, CursorStatus, DragMoveEvent, } from '@mdesignable/core';
+import { isFn } from '@mdesignable/shared';
+import { autorun } from '@formily/reactive';
+import { observer } from '@formily/reactive-react';
+import { usePrefix, useCursor, useSelection, useMoveHelper, useDesigner, } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+import { NodeTitleWidget } from '../NodeTitleWidget';
+import { NodeContext } from './context';
+import cls from 'classnames';
+import './styles.less';
+export var OutlineTreeNode = observer(function (_a) {
+    var _b, _c;
+    var node = _a.node, className = _a.className, style = _a.style, workspaceId = _a.workspaceId;
+    var prefix = usePrefix('outline-tree-node');
+    var engine = useDesigner();
+    var ref = useRef();
+    var ctx = useContext(NodeContext);
+    var request = useRef(null);
+    var cursor = useCursor();
+    var selection = useSelection(workspaceId);
+    var moveHelper = useMoveHelper(workspaceId);
+    useEffect(function () {
+        return engine.subscribeTo(DragMoveEvent, function () {
+            var _a;
+            var closestNodeId = (_a = moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.closestNode) === null || _a === void 0 ? void 0 : _a.id;
+            var closestDirection = moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.outlineClosestDirection;
+            var id = node.id;
+            if (!ref.current)
+                return;
+            if (closestNodeId === id &&
+                closestDirection === ClosestPosition.Inner) {
+                if (!ref.current.classList.contains('droppable')) {
+                    ref.current.classList.add('droppable');
+                }
+                if (!ref.current.classList.contains('expanded')) {
+                    if (request.current) {
+                        clearTimeout(request.current);
+                        request.current = null;
+                    }
+                    request.current = setTimeout(function () {
+                        ref.current.classList.add('expanded');
+                    }, 600);
+                }
+            }
+            else {
+                if (request.current) {
+                    clearTimeout(request.current);
+                    request.current = null;
+                }
+                if (ref.current.classList.contains('droppable')) {
+                    ref.current.classList.remove('droppable');
+                }
+            }
+        });
+    }, [node, moveHelper, cursor]);
+    useEffect(function () {
+        return autorun(function () {
+            var _a;
+            var selectedIds = (selection === null || selection === void 0 ? void 0 : selection.selected) || [];
+            var id = node.id;
+            if (!ref.current)
+                return;
+            if (selectedIds.includes(id)) {
+                if (!ref.current.classList.contains('selected')) {
+                    ref.current.classList.add('selected');
+                }
+            }
+            else {
+                if (ref.current.classList.contains('selected')) {
+                    ref.current.classList.remove('selected');
+                }
+            }
+            if (cursor.status === CursorStatus.Dragging &&
+                ((_a = moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.dragNodes) === null || _a === void 0 ? void 0 : _a.length)) {
+                if (ref.current.classList.contains('selected')) {
+                    ref.current.classList.remove('selected');
+                }
+            }
+        });
+    }, [node, selection, moveHelper]);
+    if (!node)
+        return null;
+    var renderIcon = function (node) {
+        var _a;
+        var icon = node.designerProps.icon;
+        if (icon) {
+            return React.createElement(IconWidget, { infer: icon, size: 12 });
+        }
+        if (node === (node === null || node === void 0 ? void 0 : node.root)) {
+            return React.createElement(IconWidget, { infer: "Page", size: 12 });
+        }
+        else if ((_a = node.designerProps) === null || _a === void 0 ? void 0 : _a.droppable) {
+            return React.createElement(IconWidget, { infer: "Container", size: 12 });
+        }
+        return React.createElement(IconWidget, { infer: "Component", size: 12 });
+    };
+    var renderTitle = function (node) {
+        if (isFn(ctx.renderTitle))
+            return ctx.renderTitle(node);
+        return (React.createElement("span", null,
+            React.createElement(NodeTitleWidget, { node: node })));
+    };
+    var renderActions = function (node) {
+        if (isFn(ctx.renderActions))
+            return ctx.renderActions(node);
+    };
+    return (React.createElement("div", { style: style, ref: ref, className: cls(prefix, className, 'expanded'), "data-designer-outline-node-id": node.id },
+        React.createElement("div", { className: prefix + '-header' },
+            React.createElement("div", { className: prefix + '-header-head', style: {
+                    left: -node.depth * 16,
+                    width: node.depth * 16,
+                } }),
+            React.createElement("div", { className: prefix + '-header-content' },
+                React.createElement("div", { className: prefix + '-header-base' },
+                    (((_b = node === null || node === void 0 ? void 0 : node.children) === null || _b === void 0 ? void 0 : _b.length) > 0 || node === node.root) && (React.createElement("div", { className: prefix + '-expand', onClick: function (e) {
+                            var _a, _b, _c, _d;
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if ((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('expanded')) {
+                                (_c = ref.current) === null || _c === void 0 ? void 0 : _c.classList.remove('expanded');
+                            }
+                            else {
+                                (_d = ref.current) === null || _d === void 0 ? void 0 : _d.classList.add('expanded');
+                            }
+                        } },
+                        React.createElement(IconWidget, { infer: "Expand", size: 10 }))),
+                    React.createElement("div", { className: prefix + '-icon' }, renderIcon(node)),
+                    React.createElement("div", { className: prefix + '-title' }, renderTitle(node))),
+                React.createElement("div", { className: prefix + '-header-actions', "data-click-stop-propagation": true },
+                    renderActions(node),
+                    node !== node.root && (React.createElement(IconWidget, { className: cls(prefix + '-hidden-icon', {
+                            hidden: node.hidden,
+                        }), infer: node.hidden ? 'EyeClose' : 'Eye', size: 14, onClick: function () {
+                            node.hidden = !node.hidden;
+                        } }))))),
+        React.createElement("div", { className: prefix + '-children' }, (_c = node.children) === null || _c === void 0 ? void 0 : _c.map(function (child) {
+            return (React.createElement(OutlineTreeNode, { node: child, key: child.id, workspaceId: workspaceId }));
+        }))));
+});

package/esm/widgets/OutlineWidget/context.d.ts

@@ -0,0 +1,8 @@
+import { TreeNode } from '@mdesignable/core';
+import React from 'react';
+interface INodeContext {
+    renderTitle?: (node: TreeNode) => React.ReactNode;
+    renderActions?: (node: TreeNode) => React.ReactNode;
+}
+export declare const NodeContext: React.Context<INodeContext>;
+export {};

package/esm/widgets/OutlineWidget/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var NodeContext = createContext(null);

package/esm/widgets/OutlineWidget/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+export interface IOutlineTreeWidgetProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onClose?: () => void;
+    renderTitle?: (node: TreeNode) => React.ReactNode;
+    renderActions?: (node: TreeNode) => React.ReactNode;
+}
+export declare const OutlineTreeWidget: React.FC<IOutlineTreeWidgetProps>;

package/esm/widgets/OutlineWidget/index.js

@@ -0,0 +1,65 @@
+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);
+};
+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, { useRef, useLayoutEffect } from 'react';
+import cls from 'classnames';
+import { useTree, usePrefix, useOutline, useWorkbench } from '../../hooks';
+import { observer } from '@formily/reactive-react';
+import { OutlineTreeNode } from './OutlineNode';
+import { Insertion } from './Insertion';
+import { NodeContext } from './context';
+import { globalThisPolyfill } from '@mdesignable/shared';
+export var OutlineTreeWidget = observer(function (_a) {
+    var onClose = _a.onClose, style = _a.style, renderActions = _a.renderActions, renderTitle = _a.renderTitle, className = _a.className, props = __rest(_a, ["onClose", "style", "renderActions", "renderTitle", "className"]);
+    var ref = useRef();
+    var prefix = usePrefix('outline-tree');
+    var workbench = useWorkbench();
+    var current = (workbench === null || workbench === void 0 ? void 0 : workbench.activeWorkspace) || (workbench === null || workbench === void 0 ? void 0 : workbench.currentWorkspace);
+    var workspaceId = current === null || current === void 0 ? void 0 : current.id;
+    var tree = useTree(workspaceId);
+    var outline = useOutline(workspaceId);
+    var outlineRef = useRef();
+    useLayoutEffect(function () {
+        if (!workspaceId)
+            return;
+        if (outlineRef.current && outlineRef.current !== outline) {
+            outlineRef.current.onUnmount();
+        }
+        if (ref.current && outline) {
+            outline.onMount(ref.current, globalThisPolyfill);
+        }
+        outlineRef.current = outline;
+        return function () {
+            outline.onUnmount();
+        };
+    }, [workspaceId, outline]);
+    if (!outline || !workspaceId)
+        return null;
+    return (React.createElement(NodeContext.Provider, { value: { renderActions: renderActions, renderTitle: renderTitle } },
+        React.createElement("div", __assign({}, props, { className: cls(prefix + '-container', className), style: style }),
+            React.createElement("div", { className: prefix + '-content', ref: ref },
+                React.createElement(OutlineTreeNode, { node: tree, workspaceId: workspaceId }),
+                React.createElement("div", { className: prefix + '-aux', style: {
+                        pointerEvents: 'none',
+                    } },
+                    React.createElement(Insertion, { workspaceId: workspaceId }))))));
+});

package/esm/widgets/OutlineWidget/styles.less

@@ -0,0 +1,195 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-outline-tree {
+  &-container {
+    position: relative;
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background-color: var(--dn-outline-tree-bg-color);
+  }
+
+  &-header {
+    display: flex;
+    padding: 8px;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--dn-outline-tree-header-border-color);
+    color: var(--dn-outline-tree-color);
+  }
+
+  &-title {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  &-close {
+    display: flex;
+    align-items: center;
+    transform: scale(1.6);
+    cursor: pointer;
+  }
+
+  &-content {
+    position: relative;
+    flex-grow: 1;
+    height: 100%;
+    width: 100%;
+    padding-bottom: 20px;
+    overflow: overlay;
+  }
+
+  &-aux {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &-insertion {
+    background-color: var(--dn-outline-tree-insertion-bg-color);
+  }
+
+  &-node {
+    position: relative;
+    user-select: none;
+    width: fit-content;
+    min-width: 100%;
+
+    &.expanded {
+      & > .@{prefix-cls}-outline-tree-node-header {
+        .@{prefix-cls}-outline-tree-node-expand {
+          transform: rotate(0);
+        }
+      }
+
+      & > .@{prefix-cls}-outline-tree-node-children {
+        display: block;
+      }
+    }
+
+    &.selected {
+      & > .@{prefix-cls}-outline-tree-node-header {
+        background-color: var(--dn-panel-active-bg-color);
+
+        .@{prefix-cls}-outline-tree-node-header-head {
+          background-color: var(--dn-panel-active-bg-color);
+        }
+      }
+    }
+
+    &.droppable {
+      & > .@{prefix-cls}-outline-tree-node-header {
+        .@{prefix-cls}-outline-tree-node-header-content {
+          .@{prefix-cls}-outline-tree-node-header-base {
+            & > .@{prefix-cls}-outline-tree-node-icon {
+              transform: scale(1.2);
+            }
+          }
+        }
+      }
+    }
+
+    &-hidden-icon:not(.hidden) {
+      display: none;
+    }
+
+    &-header {
+      display: flex;
+      min-height: 32px;
+      width: fit-content;
+      min-width: 100%;
+      align-items: center;
+      color: var(--dn-outline-tree-node-header-color);
+      position: relative;
+      padding-left: 8px;
+
+      &:hover {
+        .@{prefix-cls}-outline-tree-node-header-content {
+          color: var(--dn-outline-tree-node-hover-color);
+        }
+
+        .@{prefix-cls}-outline-tree-node-hidden-icon {
+          display: block;
+        }
+      }
+    }
+
+    &-header-head {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    &-header-content {
+      display: flex;
+      align-items: center;
+      transition: all 0.15s ease-in;
+      transform-origin: left;
+      width: fit-content;
+      min-width: 100%;
+      height: 100%;
+      justify-content: space-between;
+      font-size: 12px;
+    }
+
+    &-header-base {
+      display: flex;
+      align-items: center;
+    }
+
+    &-header-actions {
+      display: flex;
+      align-items: center;
+      margin-right: 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-expand {
+      display: flex;
+      align-items: center;
+      transition: all 0.15s ease-out;
+      transform: rotate(-90deg);
+      margin-right: 3px;
+      width: 12px;
+    }
+
+    &-icon {
+      margin-right: 5px;
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    &-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 100px;
+    }
+
+    &-actions {
+      font-size: 12px;
+      flex-grow: 2;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-children {
+      padding-left: 16px;
+      display: none;
+      width: fit-content;
+      min-width: 100%;
+    }
+  }
+}

package/esm/widgets/ResourceWidget/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IResourceLike, IResource } from '@mdesignable/core';
+import './styles.less';
+export type SourceMapper = (resource: IResource) => React.ReactChild;
+export interface IResourceWidgetProps {
+    title: React.ReactNode;
+    sources?: IResourceLike[];
+    className?: string;
+    defaultExpand?: boolean;
+    children?: SourceMapper | React.ReactElement;
+}
+export declare const ResourceWidget: React.FC<IResourceWidgetProps>;

package/esm/widgets/ResourceWidget/index.js

@@ -0,0 +1,69 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React, { useState } from 'react';
+import { isResourceHost, isResourceList, } from '@mdesignable/core';
+import { isFn } from '@mdesignable/shared';
+import { observer } from '@formily/reactive-react';
+import { usePrefix } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+import { TextWidget } from '../TextWidget';
+import cls from 'classnames';
+import './styles.less';
+export var ResourceWidget = observer(function (props) {
+    var prefix = usePrefix('resource');
+    var _a = __read(useState(props.defaultExpand), 2), expand = _a[0], setExpand = _a[1];
+    var renderNode = function (source) {
+        var _a;
+        var node = source.node, icon = source.icon, title = source.title, thumb = source.thumb, span = source.span;
+        return (React.createElement("div", { className: prefix + '-item', style: { gridColumnStart: "span ".concat(span || 1) }, key: node.id, "data-designer-source-id": node.id },
+            thumb && React.createElement("img", { className: prefix + '-item-thumb', src: thumb }),
+            icon && React.isValidElement(icon) ? (React.createElement(React.Fragment, null, icon)) : (React.createElement(IconWidget, { className: prefix + '-item-icon', infer: icon, style: { width: 150, height: 40 } })),
+            React.createElement("span", { className: prefix + '-item-text' }, React.createElement(TextWidget, null, title || ((_a = node.children[0]) === null || _a === void 0 ? void 0 : _a.getMessage('title'))))));
+    };
+    var sources = props.sources.reduce(function (buf, source) {
+        if (isResourceList(source)) {
+            return buf.concat(source);
+        }
+        else if (isResourceHost(source)) {
+            return buf.concat(source.Resource);
+        }
+        return buf;
+    }, []);
+    var remainItems = sources.reduce(function (length, source) {
+        var _a;
+        return length + ((_a = source.span) !== null && _a !== void 0 ? _a : 1);
+    }, 0) % 3;
+    return (React.createElement("div", { className: cls(prefix, props.className, {
+            expand: expand,
+        }) },
+        React.createElement("div", { className: prefix + '-header', onClick: function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                setExpand(!expand);
+            } },
+            React.createElement("div", { className: prefix + '-header-expand' },
+                React.createElement(IconWidget, { infer: "Expand", size: 10 })),
+            React.createElement("div", { className: prefix + '-header-content' },
+                React.createElement(TextWidget, null, props.title))),
+        React.createElement("div", { className: prefix + '-content-wrapper' },
+            React.createElement("div", { className: prefix + '-content' },
+                sources.map(isFn(props.children) ? props.children : renderNode),
+                remainItems ? (React.createElement("div", { className: prefix + '-item-remain', style: { gridColumnStart: "span ".concat(3 - remainItems) } })) : null))));
+});
+ResourceWidget.defaultProps = {
+    defaultExpand: true,
+};

package/esm/widgets/ResourceWidget/styles.less

@@ -0,0 +1,87 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-resource {
+  flex-wrap: wrap;
+  overflow: hidden;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: 5px 8px;
+    color: var(--dn-collapse-header-color);
+    border-bottom: 1px solid var(--dn-panel-border-color);
+    background-color: var(--dn-panel-active-bg-color);
+    cursor: pointer;
+    transition: all 0.25s ease-in-out;
+    font-size: 13px;
+
+    &-expand {
+      transform: rotate(-90deg);
+      font-size: 12px;
+      transition: all 0.15s ease-in-out;
+      margin-right: 3px;
+    }
+  }
+
+  &-content-wrapper {
+    display: flex;
+    justify-content: center;
+    background: var(--dn-resource-content-bg-color);
+  }
+
+  &-content {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    display: none;
+  }
+
+  &.expand {
+    .@{prefix-cls}-resource-content {
+      display: grid;
+      grid-template-columns: repeat(3, 33.3333%);
+      grid-gap: 1px;
+      background-color: var(--dn-panel-border-color);
+      border-bottom: 1px solid var(--dn-panel-border-color);
+    }
+
+    .@{prefix-cls}-resource-header-expand {
+      transform: rotate(0);
+    }
+  }
+
+  &-item {
+    position: relative;
+    user-select: none;
+    background: var(--dn-resource-content-bg-color);
+    min-height: 40px;
+    color: var(--dn-resource-item-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    cursor: grab;
+    transition: color 0.1s ease-out;
+
+    &:hover {
+      color: var(--dn-resource-item-hover-color);
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      z-index: 1;
+    }
+
+    &-icon {
+      margin: 12px 0;
+    }
+
+    &-text {
+      text-align: center;
+      font-size: 12px;
+      line-height: 1;
+      margin-bottom: 12px;
+    }
+
+    &-remain {
+      background: var(--dn-resource-content-bg-color);
+    }
+  }
+}

package/esm/widgets/SimpleResourceWidget/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IResourceLike, IResource } from '@mdesignable/core';
+import './styles.less';
+export type SimpleSourceMapper = (resource: IResource) => React.ReactChild;
+export interface ISimpleResourceWidgetProps {
+    sources?: IResourceLike[];
+    className?: string;
+    children?: SimpleSourceMapper | React.ReactElement;
+}
+export declare const SimpleResourceWidget: React.FC<ISimpleResourceWidgetProps>;