@mdesignable/react 1.0.0-beta.64

package/esm/panels/CompositePanel.js

@@ -0,0 +1,140 @@
+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 __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, { useEffect, useRef, useState } from 'react';
+import { isValid } from '@mdesignable/shared';
+import cls from 'classnames';
+import { IconWidget, TextWidget } from '../widgets';
+import { usePrefix } from '../hooks';
+var parseItems = function (children) {
+    var items = [];
+    React.Children.forEach(children, function (child, index) {
+        var _a;
+        if ((child === null || child === void 0 ? void 0 : child['type']) === CompositePanel.Item) {
+            items.push(__assign({ key: (_a = child['key']) !== null && _a !== void 0 ? _a : index }, child['props']));
+        }
+    });
+    return items;
+};
+var findItem = function (items, key) {
+    for (var index = 0; index < items.length; index++) {
+        var item = items[index];
+        if (key === index)
+            return item;
+        if (key === item.key)
+            return item;
+    }
+};
+var getDefaultKey = function (children) {
+    var items = parseItems(children);
+    return items === null || items === void 0 ? void 0 : items[0].key;
+};
+export var CompositePanel = function (props) {
+    var _a;
+    var _b, _c, _d;
+    var prefix = usePrefix('composite-panel');
+    var _e = __read(useState((_b = props.defaultActiveKey) !== null && _b !== void 0 ? _b : getDefaultKey(props.children)), 2), activeKey = _e[0], setActiveKey = _e[1];
+    var activeKeyRef = useRef(null);
+    var _f = __read(useState((_c = props.defaultPinning) !== null && _c !== void 0 ? _c : false), 2), pinning = _f[0], setPinning = _f[1];
+    var _g = __read(useState((_d = props.defaultOpen) !== null && _d !== void 0 ? _d : true), 2), visible = _g[0], setVisible = _g[1];
+    var items = parseItems(props.children);
+    var currentItem = findItem(items, activeKey);
+    var content = currentItem === null || currentItem === void 0 ? void 0 : currentItem.children;
+    activeKeyRef.current = activeKey;
+    useEffect(function () {
+        if (isValid(props.activeKey)) {
+            if (props.activeKey !== activeKeyRef.current) {
+                setActiveKey(props.activeKey);
+            }
+        }
+    }, [props.activeKey]);
+    var renderContent = function () {
+        if (!content || !visible)
+            return;
+        return (React.createElement("div", { className: cls(prefix + '-tabs-content', {
+                pinning: pinning,
+            }) },
+            React.createElement("div", { className: prefix + '-tabs-header' },
+                React.createElement("div", { className: prefix + '-tabs-header-title' },
+                    React.createElement(TextWidget, null, currentItem.title)),
+                React.createElement("div", { className: prefix + '-tabs-header-actions' },
+                    React.createElement("div", { className: prefix + '-tabs-header-extra' }, currentItem.extra),
+                    !pinning && (React.createElement(IconWidget, { infer: "PushPinOutlined", className: prefix + '-tabs-header-pin', onClick: function () {
+                            setPinning(!pinning);
+                        } })),
+                    pinning && (React.createElement(IconWidget, { infer: "PushPinFilled", className: prefix + '-tabs-header-pin-filled', onClick: function () {
+                            setPinning(!pinning);
+                        } })),
+                    React.createElement(IconWidget, { infer: "Close", className: prefix + '-tabs-header-close', onClick: function () {
+                            setVisible(false);
+                        } }))),
+            React.createElement("div", { className: prefix + '-tabs-body' }, content)));
+    };
+    return (React.createElement("div", { className: cls(prefix, (_a = {},
+            _a["direction-".concat(props.direction)] = !!props.direction,
+            _a)) },
+        React.createElement("div", { className: prefix + '-tabs' }, items.map(function (item, index) {
+            var _a;
+            var takeTab = function () {
+                if (item.href) {
+                    return React.createElement("a", { href: item.href }, item.icon);
+                }
+                return (React.createElement(IconWidget, { tooltip: props.showNavTitle
+                        ? null
+                        : {
+                            title: React.createElement(TextWidget, null, item.title),
+                            placement: props.direction === 'right' ? 'left' : 'right',
+                        }, infer: item.icon }));
+            };
+            var shape = (_a = item.shape) !== null && _a !== void 0 ? _a : 'tab';
+            var Comp = shape === 'link' ? 'a' : 'div';
+            return (React.createElement(Comp, { className: cls(prefix + '-tabs-pane', {
+                    active: activeKey === item.key,
+                }), key: index, href: item.href, onClick: function (e) {
+                    var _a, _b;
+                    if (shape === 'tab') {
+                        if (activeKey === item.key) {
+                            setVisible(!visible);
+                        }
+                        else {
+                            setVisible(true);
+                        }
+                        if (!(props === null || props === void 0 ? void 0 : props.activeKey) || !(props === null || props === void 0 ? void 0 : props.onChange))
+                            setActiveKey(item.key);
+                    }
+                    (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+                    (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, item.key);
+                } },
+                takeTab(),
+                props.showNavTitle && item.title ? (React.createElement("div", { className: prefix + '-tabs-pane-title' },
+                    React.createElement(TextWidget, null, item.title))) : null));
+        })),
+        renderContent()));
+};
+CompositePanel.Item = function () {
+    return React.createElement(React.Fragment, null);
+};

package/esm/panels/SettingsPanel.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ISettingPanelProps {
+    title?: React.ReactNode;
+    extra?: React.ReactNode;
+}
+export declare const SettingsPanel: React.FC<ISettingPanelProps>;

package/esm/panels/SettingsPanel.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, { useEffect, useState } from 'react';
+import { requestIdle } from '@mdesignable/shared';
+import { observer } from '@formily/reactive-react';
+import { TextWidget, IconWidget } from '../widgets';
+import { usePrefix, useWorkbench } from '../hooks';
+import cls from 'classnames';
+export var SettingsPanel = observer(function (props) {
+    var prefix = usePrefix('settings-panel');
+    var workbench = useWorkbench();
+    var _a = __read(useState(true), 2), innerVisible = _a[0], setInnerVisible = _a[1];
+    var _b = __read(useState(false), 2), pinning = _b[0], setPinning = _b[1];
+    var _c = __read(useState(true), 2), visible = _c[0], setVisible = _c[1];
+    useEffect(function () {
+        if (visible || workbench.type === 'DESIGNABLE') {
+            if (!innerVisible) {
+                requestIdle(function () {
+                    requestAnimationFrame(function () {
+                        setInnerVisible(true);
+                    });
+                });
+            }
+        }
+    }, [visible, workbench.type]);
+    if (workbench.type !== 'DESIGNABLE') {
+        if (innerVisible)
+            setInnerVisible(false);
+        return null;
+    }
+    if (!visible) {
+        if (innerVisible)
+            setInnerVisible(false);
+        return (React.createElement("div", { className: prefix + '-opener', onClick: function () {
+                setVisible(true);
+            } },
+            React.createElement(IconWidget, { infer: "Setting", size: 20 })));
+    }
+    return (React.createElement("div", { className: cls(prefix, { pinning: pinning }) },
+        React.createElement("div", { className: prefix + '-header' },
+            React.createElement("div", { className: prefix + '-header-title' },
+                React.createElement(TextWidget, null, props.title)),
+            React.createElement("div", { className: prefix + '-header-actions' },
+                React.createElement("div", { className: prefix + '-header-extra' }, props.extra),
+                !pinning && (React.createElement(IconWidget, { infer: "PushPinOutlined", className: prefix + '-header-pin', onClick: function () {
+                        setPinning(!pinning);
+                    } })),
+                pinning && (React.createElement(IconWidget, { infer: "PushPinFilled", className: prefix + '-pin-filled', onClick: function () {
+                        setPinning(!pinning);
+                    } })),
+                React.createElement(IconWidget, { infer: "Close", className: prefix + '-header-close', onClick: function () {
+                        setVisible(false);
+                    } }))),
+        React.createElement("div", { className: prefix + '-body' }, innerVisible && props.children)));
+});

package/esm/panels/SourceBarPanel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './sourceBarPanel.less';
+export type ISourceBarPanelProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const SourceBarPanel: React.FC<ISourceBarPanelProps>;

package/esm/panels/SourceBarPanel.js

@@ -0,0 +1,31 @@
+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 from 'react';
+import { usePrefix } from '../hooks';
+import cls from 'classnames';
+import './sourceBarPanel.less';
+export var SourceBarPanel = function (props) {
+    var prefix = usePrefix('sourceBar');
+    var className = props.className, rest = __rest(props, ["className"]);
+    return (React.createElement("div", __assign({ className: cls(prefix + '-panel', className) }, rest), props.children));
+};

package/esm/panels/StudioPanel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Layout } from '../containers';
+export interface IStudioPanelProps {
+    style?: React.CSSProperties;
+    className?: string;
+    logo?: React.ReactNode;
+    actions?: React.ReactNode;
+    prefixCls?: string;
+    theme?: string;
+    position?: React.ComponentProps<typeof Layout>['position'];
+}
+export declare const StudioPanel: React.FC<IStudioPanelProps>;

package/esm/panels/StudioPanel.js

@@ -0,0 +1,44 @@
+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 from 'react';
+import { usePrefix, usePosition } from '../hooks';
+import { Layout } from '../containers';
+import cls from 'classnames';
+var StudioPanelInternal = function (_a) {
+    var logo = _a.logo, actions = _a.actions, props = __rest(_a, ["logo", "actions"]);
+    var prefix = usePrefix('main-panel');
+    var position = usePosition();
+    var classNameBase = cls('root', position, props.className);
+    if (logo || actions) {
+        return (React.createElement("div", __assign({}, props, { className: cls("".concat(prefix, "-container"), classNameBase) }),
+            React.createElement("div", { className: prefix + '-header' },
+                React.createElement("div", { className: prefix + '-header-logo' }, logo),
+                React.createElement("div", { className: prefix + '-header-actions' }, actions)),
+            React.createElement("div", { className: prefix }, props.children)));
+    }
+    return (React.createElement("div", __assign({}, props, { className: cls(prefix, classNameBase) }), props.children));
+};
+export var StudioPanel = function (props) {
+    return (React.createElement(Layout, { theme: props.theme, prefixCls: props.prefixCls, position: props.position },
+        React.createElement(StudioPanelInternal, __assign({}, props))));
+};

package/esm/panels/ToolbarPanel.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IWorkspaceItemProps } from './WorkspacePanel';
+export declare const ToolbarPanel: React.FC<IWorkspaceItemProps>;

package/esm/panels/ToolbarPanel.js

@@ -0,0 +1,16 @@
+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 React from 'react';
+import { WorkspacePanel } from './WorkspacePanel';
+export var ToolbarPanel = function (props) {
+    return (React.createElement(WorkspacePanel.Item, __assign({}, props, { style: __assign({ display: 'flex', justifyContent: 'space-between', marginBottom: 4, padding: '0 4px' }, props.style) }), props.children));
+};

package/esm/panels/ViewPanel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TreeNode, ITreeNode, WorkbenchTypes } from '@mdesignable/core';
+export interface IViewPanelProps {
+    type: WorkbenchTypes;
+    children: (tree: TreeNode, onChange: (tree: ITreeNode) => void) => React.ReactElement;
+    scrollable?: boolean;
+    dragTipsDirection?: 'left' | 'right';
+}
+export declare const ViewPanel: React.FC<IViewPanelProps>;

package/esm/panels/ViewPanel.js

@@ -0,0 +1,57 @@
+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, { useEffect, useState } from 'react';
+import { observer } from '@formily/reactive-react';
+import { useTree, useWorkbench } from '../hooks';
+import { Viewport } from '../containers';
+import { requestIdle } from '@mdesignable/shared';
+export var ViewPanel = observer(function (props) {
+    var _a = __read(useState(true), 2), visible = _a[0], setVisible = _a[1];
+    var workbench = useWorkbench();
+    var tree = useTree();
+    useEffect(function () {
+        if (workbench.type === props.type) {
+            requestIdle(function () {
+                requestAnimationFrame(function () {
+                    setVisible(true);
+                });
+            });
+        }
+        else {
+            setVisible(false);
+        }
+    }, [workbench.type]);
+    if (workbench.type !== props.type)
+        return null;
+    var render = function () {
+        return props.children(tree, function (payload) {
+            tree.from(payload);
+            tree.takeSnapshot();
+        });
+    };
+    if (workbench.type === 'DESIGNABLE')
+        return (React.createElement(Viewport, { dragTipsDirection: props.dragTipsDirection }, render()));
+    return (React.createElement("div", { style: {
+            overflow: props.scrollable ? 'overlay' : 'hidden',
+            height: '100%',
+            cursor: 'auto',
+            userSelect: 'text',
+        } }, visible && render()));
+});
+ViewPanel.defaultProps = {
+    scrollable: true,
+};

package/esm/panels/ViewportPanel.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IWorkspaceItemProps } from './WorkspacePanel';
+export declare const ViewportPanel: React.FC<IWorkspaceItemProps>;

package/esm/panels/ViewportPanel.js

@@ -0,0 +1,18 @@
+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 React from 'react';
+import { WorkspacePanel } from './WorkspacePanel';
+import { Simulator } from '../containers';
+export var ViewportPanel = function (props) {
+    return (React.createElement(WorkspacePanel.Item, __assign({}, props, { flexable: true }),
+        React.createElement(Simulator, null, props.children)));
+};

package/esm/panels/WorkspacePanel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface IWorkspaceItemProps {
+    style?: React.CSSProperties;
+    flexable?: boolean;
+}
+export declare const WorkspacePanel: React.FC & {
+    Item?: React.FC<IWorkspaceItemProps>;
+};

package/esm/panels/WorkspacePanel.js

@@ -0,0 +1,21 @@
+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 React from 'react';
+import { usePrefix } from '../hooks';
+export var WorkspacePanel = function (props) {
+    var prefix = usePrefix('workspace-panel');
+    return React.createElement("div", { className: prefix }, props.children);
+};
+WorkspacePanel.Item = function (props) {
+    var prefix = usePrefix('workspace-panel-item');
+    return (React.createElement("div", { className: prefix, style: __assign(__assign({}, props.style), { flexGrow: props.flexable ? 1 : 0, flexShrink: props.flexable ? 1 : 0 }) }, props.children));
+};

package/esm/panels/index.d.ts

@@ -0,0 +1,9 @@
+import './styles.less';
+export * from './StudioPanel';
+export * from './CompositePanel';
+export * from './SettingsPanel';
+export * from './WorkspacePanel';
+export * from './ToolbarPanel';
+export * from './ViewportPanel';
+export * from './ViewPanel';
+export * from './SourceBarPanel';

package/esm/panels/index.js

@@ -0,0 +1,9 @@
+import './styles.less';
+export * from './StudioPanel';
+export * from './CompositePanel';
+export * from './SettingsPanel';
+export * from './WorkspacePanel';
+export * from './ToolbarPanel';
+export * from './ViewportPanel';
+export * from './ViewPanel';
+export * from './SourceBarPanel';

package/esm/panels/sourceBarPanel.less

@@ -0,0 +1,4 @@
+@import '../variables.less';
+
+.@{prefix-cls}-sourceBar-panel {
+}