@formily-design/react 1.0.0

package/lib/panels/CompositePanel.js

@@ -0,0 +1,152 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositePanel = void 0;
+const react_1 = __importStar(require("react"));
+const shared_1 = require("@formily-design/shared");
+const classnames_1 = __importDefault(require("classnames"));
+const widgets_1 = require("../widgets");
+const hooks_1 = require("../hooks");
+const parseItems = (children) => {
+    const items = [];
+    react_1.default.Children.forEach(children, (child, index) => {
+        var _a;
+        if ((child === null || child === void 0 ? void 0 : child['type']) === exports.CompositePanel.Item) {
+            items.push({ key: (_a = child['key']) !== null && _a !== void 0 ? _a : index, ...child['props'] });
+        }
+    });
+    return items;
+};
+const findItem = (items, key) => {
+    for (let index = 0; index < items.length; index++) {
+        const item = items[index];
+        if (key === index)
+            return item;
+        if (key === item.key)
+            return item;
+    }
+};
+const getDefaultKey = (children) => {
+    const items = parseItems(children);
+    return items === null || items === void 0 ? void 0 : items[0].key;
+};
+const CompositePanel = (props) => {
+    var _a, _b, _c;
+    const prefix = (0, hooks_1.usePrefix)('composite-panel');
+    const [activeKey, setActiveKey] = (0, react_1.useState)((_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : getDefaultKey(props.children));
+    const activeKeyRef = (0, react_1.useRef)(null);
+    const [pinning, setPinning] = (0, react_1.useState)((_b = props.defaultPinning) !== null && _b !== void 0 ? _b : false);
+    const [visible, setVisible] = (0, react_1.useState)((_c = props.defaultOpen) !== null && _c !== void 0 ? _c : true);
+    const items = parseItems(props.children);
+    const currentItem = findItem(items, activeKey);
+    const content = currentItem === null || currentItem === void 0 ? void 0 : currentItem.children;
+    activeKeyRef.current = activeKey;
+    (0, react_1.useEffect)(() => {
+        if ((0, shared_1.isValid)(props.activeKey)) {
+            if (props.activeKey !== activeKeyRef.current) {
+                setActiveKey(props.activeKey);
+            }
+        }
+    }, [props.activeKey]);
+    const renderContent = () => {
+        if (!content || !visible)
+            return;
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(prefix + '-tabs-content', {
+                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: () => {
+                            setPinning(!pinning);
+                        } })),
+                    pinning && (react_1.default.createElement(widgets_1.IconWidget, { infer: "PushPinFilled", className: prefix + '-tabs-header-pin-filled', onClick: () => {
+                            setPinning(!pinning);
+                        } })),
+                    react_1.default.createElement(widgets_1.IconWidget, { infer: "Close", className: prefix + '-tabs-header-close', onClick: () => {
+                            setVisible(false);
+                        } }))),
+            react_1.default.createElement("div", { className: prefix + '-tabs-body' }, content)));
+    };
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(prefix, {
+            [`direction-${props.direction}`]: !!props.direction,
+        }) },
+        react_1.default.createElement("div", { className: prefix + '-tabs' }, items.map((item, index) => {
+            var _a;
+            const takeTab = () => {
+                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 }));
+            };
+            const shape = (_a = item.shape) !== null && _a !== void 0 ? _a : 'tab';
+            const 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: (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 = () => {
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};

package/lib/panels/SettingsPanel.d.ts

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

package/lib/panels/SettingsPanel.js

@@ -0,0 +1,92 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsPanel = void 0;
+const react_1 = __importStar(require("react"));
+const shared_1 = require("@formily-design/shared");
+const reactive_react_1 = require("@formily/reactive-react");
+const widgets_1 = require("../widgets");
+const hooks_1 = require("../hooks");
+const classnames_1 = __importDefault(require("classnames"));
+exports.SettingsPanel = (0, reactive_react_1.observer)((props) => {
+    const prefix = (0, hooks_1.usePrefix)('settings-panel');
+    const workbench = (0, hooks_1.useWorkbench)();
+    const [innerVisible, setInnerVisible] = (0, react_1.useState)(true);
+    const [pinning, setPinning] = (0, react_1.useState)(false);
+    const [visible, setVisible] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        if (visible || workbench.type === 'DESIGNABLE') {
+            if (!innerVisible) {
+                (0, shared_1.requestIdle)(() => {
+                    requestAnimationFrame(() => {
+                        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: () => {
+                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 }) },
+        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: () => {
+                        setPinning(!pinning);
+                    } })),
+                pinning && (react_1.default.createElement(widgets_1.IconWidget, { infer: "PushPinFilled", className: prefix + '-pin-filled', onClick: () => {
+                        setPinning(!pinning);
+                    } })),
+                react_1.default.createElement(widgets_1.IconWidget, { infer: "Close", className: prefix + '-header-close', onClick: () => {
+                        setVisible(false);
+                    } }))),
+        react_1.default.createElement("div", { className: prefix + '-body' }, innerVisible && props.children)));
+});

package/lib/panels/StudioPanel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Layout } from '../containers';
+export interface IStudioPanelProps {
+    children?: React.ReactNode;
+    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,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioPanel = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../hooks");
+const containers_1 = require("../containers");
+const classnames_1 = __importDefault(require("classnames"));
+const StudioPanelInternal = ({ logo, actions, ...props }) => {
+    const prefix = (0, hooks_1.usePrefix)('main-panel');
+    const position = (0, hooks_1.usePosition)();
+    const classNameBase = (0, classnames_1.default)('root', position, props.className);
+    if (logo || actions) {
+        return (react_1.default.createElement("div", { ...props, className: (0, classnames_1.default)(`${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", { ...props, className: (0, classnames_1.default)(prefix, classNameBase) }, props.children));
+};
+const StudioPanel = (props) => {
+    return (react_1.default.createElement(containers_1.Layout, { theme: props.theme, prefixCls: props.prefixCls, position: props.position, className: props.className, style: props.style },
+        react_1.default.createElement(StudioPanelInternal, { ...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,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarPanel = void 0;
+const react_1 = __importDefault(require("react"));
+const WorkspacePanel_1 = require("./WorkspacePanel");
+const ToolbarPanel = (props) => {
+    return (react_1.default.createElement(WorkspacePanel_1.WorkspacePanel.Item, { ...props, style: {
+            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 '@formily-design/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,77 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewPanel = void 0;
+const react_1 = __importStar(require("react"));
+const reactive_react_1 = require("@formily/reactive-react");
+const hooks_1 = require("../hooks");
+const containers_1 = require("../containers");
+const shared_1 = require("@formily-design/shared");
+exports.ViewPanel = (0, reactive_react_1.observer)((props) => {
+    const [visible, setVisible] = (0, react_1.useState)(true);
+    const workbench = (0, hooks_1.useWorkbench)();
+    const tree = (0, hooks_1.useTree)();
+    (0, react_1.useEffect)(() => {
+        if (workbench.type === props.type) {
+            (0, shared_1.requestIdle)(() => {
+                requestAnimationFrame(() => {
+                    setVisible(true);
+                });
+            });
+        }
+        else {
+            setVisible(false);
+        }
+    }, [workbench.type]);
+    if (workbench.type !== props.type)
+        return null;
+    const render = () => {
+        return props.children(tree, (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,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewportPanel = void 0;
+const react_1 = __importDefault(require("react"));
+const WorkspacePanel_1 = require("./WorkspacePanel");
+const containers_1 = require("../containers");
+const ViewportPanel = (props) => {
+    return (react_1.default.createElement(WorkspacePanel_1.WorkspacePanel.Item, { ...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,11 @@
+import React from 'react';
+export interface IWorkspaceItemProps {
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    flexable?: boolean;
+}
+export declare const WorkspacePanel: React.FC<{
+    children?: React.ReactNode;
+}> & {
+    Item?: React.FC<IWorkspaceItemProps>;
+};

package/lib/panels/WorkspacePanel.js

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

package/lib/panels/index.d.ts

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

package/lib/panels/index.js

@@ -0,0 +1,24 @@
+"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);