@mdesignable/react 1.0.0-beta.64

package/lib/panels/CompositePanel.js

@@ -0,0 +1,170 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositePanel = void 0;
+var react_1 = __importStar(require("react"));
+var shared_1 = require("@mdesignable/shared");
+var classnames_1 = __importDefault(require("classnames"));
+var widgets_1 = require("../widgets");
+var hooks_1 = require("../hooks");
+var parseItems = function (children) {
+    var items = [];
+    react_1.default.Children.forEach(children, function (child, index) {
+        var _a;
+        if ((child === null || child === void 0 ? void 0 : child['type']) === exports.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;
+};
+var CompositePanel = function (props) {
+    var _a;
+    var _b, _c, _d;
+    var prefix = (0, hooks_1.usePrefix)('composite-panel');
+    var _e = __read((0, react_1.useState)((_b = props.defaultActiveKey) !== null && _b !== void 0 ? _b : getDefaultKey(props.children)), 2), activeKey = _e[0], setActiveKey = _e[1];
+    var activeKeyRef = (0, react_1.useRef)(null);
+    var _f = __read((0, react_1.useState)((_c = props.defaultPinning) !== null && _c !== void 0 ? _c : false), 2), pinning = _f[0], setPinning = _f[1];
+    var _g = __read((0, react_1.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;
+    (0, react_1.useEffect)(function () {
+        if ((0, shared_1.isValid)(props.activeKey)) {
+            if (props.activeKey !== activeKeyRef.current) {
+                setActiveKey(props.activeKey);
+            }
+        }
+    }, [props.activeKey]);
+    var renderContent = function () {
+        if (!content || !visible)
+            return;
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(prefix + '-tabs-content', {
+                pinning: pinning,
+            }) },
+            react_1.default.createElement("div", { className: prefix + '-tabs-header' },
+                react_1.default.createElement("div", { className: prefix + '-tabs-header-title' },
+                    react_1.default.createElement(widgets_1.TextWidget, null, currentItem.title)),
+                react_1.default.createElement("div", { className: prefix + '-tabs-header-actions' },
+                    react_1.default.createElement("div", { className: prefix + '-tabs-header-extra' }, currentItem.extra),
+                    !pinning && (react_1.default.createElement(widgets_1.IconWidget, { infer: "PushPinOutlined", className: prefix + '-tabs-header-pin', onClick: function () {
+                            setPinning(!pinning);
+                        } })),
+                    pinning && (react_1.default.createElement(widgets_1.IconWidget, { infer: "PushPinFilled", className: prefix + '-tabs-header-pin-filled', onClick: function () {
+                            setPinning(!pinning);
+                        } })),
+                    react_1.default.createElement(widgets_1.IconWidget, { infer: "Close", className: prefix + '-tabs-header-close', onClick: function () {
+                            setVisible(false);
+                        } }))),
+            react_1.default.createElement("div", { className: prefix + '-tabs-body' }, content)));
+    };
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(prefix, (_a = {},
+            _a["direction-".concat(props.direction)] = !!props.direction,
+            _a)) },
+        react_1.default.createElement("div", { className: prefix + '-tabs' }, items.map(function (item, index) {
+            var _a;
+            var takeTab = function () {
+                if (item.href) {
+                    return react_1.default.createElement("a", { href: item.href }, item.icon);
+                }
+                return (react_1.default.createElement(widgets_1.IconWidget, { tooltip: props.showNavTitle
+                        ? null
+                        : {
+                            title: react_1.default.createElement(widgets_1.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_1.default.createElement(Comp, { className: (0, classnames_1.default)(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_1.default.createElement("div", { className: prefix + '-tabs-pane-title' },
+                    react_1.default.createElement(widgets_1.TextWidget, null, item.title))) : null));
+        })),
+        renderContent()));
+};
+exports.CompositePanel = CompositePanel;
+exports.CompositePanel.Item = function () {
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};

package/lib/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/lib/panels/SettingsPanel.js

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsPanel = void 0;
+var react_1 = __importStar(require("react"));
+var shared_1 = require("@mdesignable/shared");
+var reactive_react_1 = require("@formily/reactive-react");
+var widgets_1 = require("../widgets");
+var hooks_1 = require("../hooks");
+var classnames_1 = __importDefault(require("classnames"));
+exports.SettingsPanel = (0, reactive_react_1.observer)(function (props) {
+    var prefix = (0, hooks_1.usePrefix)('settings-panel');
+    var workbench = (0, hooks_1.useWorkbench)();
+    var _a = __read((0, react_1.useState)(true), 2), innerVisible = _a[0], setInnerVisible = _a[1];
+    var _b = __read((0, react_1.useState)(false), 2), pinning = _b[0], setPinning = _b[1];
+    var _c = __read((0, react_1.useState)(true), 2), visible = _c[0], setVisible = _c[1];
+    (0, react_1.useEffect)(function () {
+        if (visible || workbench.type === 'DESIGNABLE') {
+            if (!innerVisible) {
+                (0, shared_1.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_1.default.createElement("div", { className: prefix + '-opener', onClick: function () {
+                setVisible(true);
+            } },
+            react_1.default.createElement(widgets_1.IconWidget, { infer: "Setting", size: 20 })));
+    }
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(prefix, { pinning: pinning }) },
+        react_1.default.createElement("div", { className: prefix + '-header' },
+            react_1.default.createElement("div", { className: prefix + '-header-title' },
+                react_1.default.createElement(widgets_1.TextWidget, null, props.title)),
+            react_1.default.createElement("div", { className: prefix + '-header-actions' },
+                react_1.default.createElement("div", { className: prefix + '-header-extra' }, props.extra),
+                !pinning && (react_1.default.createElement(widgets_1.IconWidget, { infer: "PushPinOutlined", className: prefix + '-header-pin', onClick: function () {
+                        setPinning(!pinning);
+                    } })),
+                pinning && (react_1.default.createElement(widgets_1.IconWidget, { infer: "PushPinFilled", className: prefix + '-pin-filled', onClick: function () {
+                        setPinning(!pinning);
+                    } })),
+                react_1.default.createElement(widgets_1.IconWidget, { infer: "Close", className: prefix + '-header-close', onClick: function () {
+                        setVisible(false);
+                    } }))),
+        react_1.default.createElement("div", { className: prefix + '-body' }, innerVisible && props.children)));
+});

package/lib/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/lib/panels/SourceBarPanel.js

@@ -0,0 +1,38 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SourceBarPanel = void 0;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../hooks");
+var classnames_1 = __importDefault(require("classnames"));
+require("./sourceBarPanel.less");
+var SourceBarPanel = function (props) {
+    var prefix = (0, hooks_1.usePrefix)('sourceBar');
+    var className = props.className, rest = __rest(props, ["className"]);
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)(prefix + '-panel', className) }, rest), props.children));
+};
+exports.SourceBarPanel = SourceBarPanel;

package/lib/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/lib/panels/StudioPanel.js

@@ -0,0 +1,51 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioPanel = void 0;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../hooks");
+var containers_1 = require("../containers");
+var classnames_1 = __importDefault(require("classnames"));
+var StudioPanelInternal = function (_a) {
+    var logo = _a.logo, actions = _a.actions, props = __rest(_a, ["logo", "actions"]);
+    var prefix = (0, hooks_1.usePrefix)('main-panel');
+    var position = (0, hooks_1.usePosition)();
+    var classNameBase = (0, classnames_1.default)('root', position, props.className);
+    if (logo || actions) {
+        return (react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)("".concat(prefix, "-container"), classNameBase) }),
+            react_1.default.createElement("div", { className: prefix + '-header' },
+                react_1.default.createElement("div", { className: prefix + '-header-logo' }, logo),
+                react_1.default.createElement("div", { className: prefix + '-header-actions' }, actions)),
+            react_1.default.createElement("div", { className: prefix }, props.children)));
+    }
+    return (react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(prefix, classNameBase) }), props.children));
+};
+var StudioPanel = function (props) {
+    return (react_1.default.createElement(containers_1.Layout, { theme: props.theme, prefixCls: props.prefixCls, position: props.position },
+        react_1.default.createElement(StudioPanelInternal, __assign({}, props))));
+};
+exports.StudioPanel = StudioPanel;

package/lib/panels/ToolbarPanel.d.ts

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

package/lib/panels/ToolbarPanel.js

@@ -0,0 +1,23 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarPanel = void 0;
+var react_1 = __importDefault(require("react"));
+var WorkspacePanel_1 = require("./WorkspacePanel");
+var ToolbarPanel = function (props) {
+    return (react_1.default.createElement(WorkspacePanel_1.WorkspacePanel.Item, __assign({}, props, { style: __assign({ display: 'flex', justifyContent: 'space-between', marginBottom: 4, padding: '0 4px' }, props.style) }), props.children));
+};
+exports.ToolbarPanel = ToolbarPanel;

package/lib/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/lib/panels/ViewPanel.js

@@ -0,0 +1,83 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewPanel = void 0;
+var react_1 = __importStar(require("react"));
+var reactive_react_1 = require("@formily/reactive-react");
+var hooks_1 = require("../hooks");
+var containers_1 = require("../containers");
+var shared_1 = require("@mdesignable/shared");
+exports.ViewPanel = (0, reactive_react_1.observer)(function (props) {
+    var _a = __read((0, react_1.useState)(true), 2), visible = _a[0], setVisible = _a[1];
+    var workbench = (0, hooks_1.useWorkbench)();
+    var tree = (0, hooks_1.useTree)();
+    (0, react_1.useEffect)(function () {
+        if (workbench.type === props.type) {
+            (0, shared_1.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_1.default.createElement(containers_1.Viewport, { dragTipsDirection: props.dragTipsDirection }, render()));
+    return (react_1.default.createElement("div", { style: {
+            overflow: props.scrollable ? 'overlay' : 'hidden',
+            height: '100%',
+            cursor: 'auto',
+            userSelect: 'text',
+        } }, visible && render()));
+});
+exports.ViewPanel.defaultProps = {
+    scrollable: true,
+};

package/lib/panels/ViewportPanel.d.ts

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

package/lib/panels/ViewportPanel.js

@@ -0,0 +1,25 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewportPanel = void 0;
+var react_1 = __importDefault(require("react"));
+var WorkspacePanel_1 = require("./WorkspacePanel");
+var containers_1 = require("../containers");
+var ViewportPanel = function (props) {
+    return (react_1.default.createElement(WorkspacePanel_1.WorkspacePanel.Item, __assign({}, props, { flexable: true }),
+        react_1.default.createElement(containers_1.Simulator, null, props.children)));
+};
+exports.ViewportPanel = ViewportPanel;

package/lib/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/lib/panels/WorkspacePanel.js

@@ -0,0 +1,28 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkspacePanel = void 0;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../hooks");
+var WorkspacePanel = function (props) {
+    var prefix = (0, hooks_1.usePrefix)('workspace-panel');
+    return react_1.default.createElement("div", { className: prefix }, props.children);
+};
+exports.WorkspacePanel = WorkspacePanel;
+exports.WorkspacePanel.Item = function (props) {
+    var prefix = (0, hooks_1.usePrefix)('workspace-panel-item');
+    return (react_1.default.createElement("div", { className: prefix, style: __assign(__assign({}, props.style), { flexGrow: props.flexable ? 1 : 0, flexShrink: props.flexable ? 1 : 0 }) }, props.children));
+};

package/lib/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/lib/panels/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./styles.less");
+__exportStar(require("./StudioPanel"), exports);
+__exportStar(require("./CompositePanel"), exports);
+__exportStar(require("./SettingsPanel"), exports);
+__exportStar(require("./WorkspacePanel"), exports);
+__exportStar(require("./ToolbarPanel"), exports);
+__exportStar(require("./ViewportPanel"), exports);
+__exportStar(require("./ViewPanel"), exports);
+__exportStar(require("./SourceBarPanel"), exports);

package/lib/panels/sourceBarPanel.less

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