@mdesignable/react 1.0.0-beta.64

package/lib/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/lib/widgets/ResourceWidget/index.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.ResourceWidget = void 0;
+var react_1 = __importStar(require("react"));
+var core_1 = require("@mdesignable/core");
+var shared_1 = require("@mdesignable/shared");
+var reactive_react_1 = require("@formily/reactive-react");
+var hooks_1 = require("../../hooks");
+var IconWidget_1 = require("../IconWidget");
+var TextWidget_1 = require("../TextWidget");
+var classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.ResourceWidget = (0, reactive_react_1.observer)(function (props) {
+    var prefix = (0, hooks_1.usePrefix)('resource');
+    var _a = __read((0, react_1.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_1.default.createElement("div", { className: prefix + '-item', style: { gridColumnStart: "span ".concat(span || 1) }, key: node.id, "data-designer-source-id": node.id },
+            thumb && react_1.default.createElement("img", { className: prefix + '-item-thumb', src: thumb }),
+            icon && react_1.default.isValidElement(icon) ? (react_1.default.createElement(react_1.default.Fragment, null, icon)) : (react_1.default.createElement(IconWidget_1.IconWidget, { className: prefix + '-item-icon', infer: icon, style: { width: 150, height: 40 } })),
+            react_1.default.createElement("span", { className: prefix + '-item-text' }, react_1.default.createElement(TextWidget_1.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 ((0, core_1.isResourceList)(source)) {
+            return buf.concat(source);
+        }
+        else if ((0, core_1.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_1.default.createElement("div", { className: (0, classnames_1.default)(prefix, props.className, {
+            expand: expand,
+        }) },
+        react_1.default.createElement("div", { className: prefix + '-header', onClick: function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                setExpand(!expand);
+            } },
+            react_1.default.createElement("div", { className: prefix + '-header-expand' },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Expand", size: 10 })),
+            react_1.default.createElement("div", { className: prefix + '-header-content' },
+                react_1.default.createElement(TextWidget_1.TextWidget, null, props.title))),
+        react_1.default.createElement("div", { className: prefix + '-content-wrapper' },
+            react_1.default.createElement("div", { className: prefix + '-content' },
+                sources.map((0, shared_1.isFn)(props.children) ? props.children : renderNode),
+                remainItems ? (react_1.default.createElement("div", { className: prefix + '-item-remain', style: { gridColumnStart: "span ".concat(3 - remainItems) } })) : null))));
+});
+exports.ResourceWidget.defaultProps = {
+    defaultExpand: true,
+};

package/lib/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/lib/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>;

package/lib/widgets/SimpleResourceWidget/index.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleResourceWidget = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("@mdesignable/core");
+var shared_1 = require("@mdesignable/shared");
+var reactive_react_1 = require("@formily/reactive-react");
+var hooks_1 = require("../../hooks");
+var IconWidget_1 = require("../IconWidget");
+var classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+var antd_1 = require("antd");
+var TextWidget_1 = require("../TextWidget");
+exports.SimpleResourceWidget = (0, reactive_react_1.observer)(function (props) {
+    var prefix = (0, hooks_1.usePrefix)('simple-resource');
+    var renderNode = function (source) {
+        var _a;
+        var node = source.node, icon = source.icon, title = source.title, thumb = source.thumb, span = source.span, _b = source.showTitle, showTitle = _b === void 0 ? true : _b;
+        var titleTxt = title || ((_a = node.children[0]) === null || _a === void 0 ? void 0 : _a.getMessage('title'));
+        return (react_1.default.createElement(antd_1.Tooltip, { title: titleTxt },
+            react_1.default.createElement("div", { className: prefix + '-item', style: { gridColumnStart: "span ".concat(span || 1) }, key: node.id, "data-designer-source-id": node.id },
+                thumb && react_1.default.createElement("img", { className: prefix + '-item-thumb', src: thumb }),
+                icon && react_1.default.isValidElement(icon) ? (react_1.default.createElement(react_1.default.Fragment, null, icon)) : (react_1.default.createElement(IconWidget_1.IconWidget, { title: titleTxt, className: prefix + '-item-icon', infer: icon, style: { width: 24, height: 24, color: 'red' } })),
+                showTitle ? (react_1.default.createElement("span", { className: prefix + '-item-text' }, react_1.default.createElement(TextWidget_1.TextWidget, null, titleTxt))) : null)));
+    };
+    var sources = props.sources.reduce(function (buf, source) {
+        if ((0, core_1.isResourceList)(source)) {
+            return buf.concat(source);
+        }
+        else if ((0, core_1.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_1.default.createElement("div", { className: (0, classnames_1.default)(prefix, props.className) },
+        react_1.default.createElement("div", { className: prefix + '-content-wrapper' },
+            react_1.default.createElement("div", { className: prefix + '-content' },
+                sources.map((0, shared_1.isFn)(props.children) ? props.children : renderNode),
+                remainItems ? (react_1.default.createElement("div", { className: prefix + '-item-remain', style: { gridColumnStart: "span ".concat(3 - remainItems) } })) : null))));
+});
+exports.SimpleResourceWidget.defaultProps = {};

package/lib/widgets/SimpleResourceWidget/styles.less

@@ -0,0 +1,57 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-simple-resource {
+  flex-wrap: wrap;
+  overflow: hidden;
+
+  &-content-wrapper {
+    display: flex;
+    justify-content: center;
+    background: var(--dn-resource-content-bg-color);
+  }
+
+  &-content {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+
+  &-item {
+    position: relative;
+    user-select: none;
+    background: var(--dn-resource-content-bg-color);
+    min-height: 40px;
+    min-width: 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;
+    gap: 8px;
+
+    &-text {
+      color: inherit;
+      font-size: 12px;
+    }
+
+    &:hover {
+      z-index: 1;
+      color: var(--ant-color-primary);
+    }
+
+    &-icon {
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-remain {
+      background: var(--dn-resource-content-bg-color);
+    }
+  }
+}

package/lib/widgets/TextWidget/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IDesignerMiniLocales } from '@mdesignable/core';
+export interface ITextWidgetProps {
+    componentName?: string;
+    sourceName?: string;
+    token?: string | IDesignerMiniLocales;
+    defaultMessage?: string | IDesignerMiniLocales;
+}
+export declare const TextWidget: React.FC<ITextWidgetProps>;

package/lib/widgets/TextWidget/index.js

@@ -0,0 +1,58 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextWidget = void 0;
+var react_1 = __importStar(require("react"));
+var shared_1 = require("@mdesignable/shared");
+var core_1 = require("@mdesignable/core");
+var reactive_react_1 = require("@formily/reactive-react");
+exports.TextWidget = (0, reactive_react_1.observer)(function (props) {
+    var takeLocale = function (message) {
+        if ((0, shared_1.isStr)(message))
+            return message;
+        if ((0, shared_1.isPlainObj)(message)) {
+            var lang = core_1.GlobalRegistry.getDesignerLanguage();
+            for (var key in message) {
+                if (key.toLocaleLowerCase() === lang)
+                    return message[key];
+            }
+            return;
+        }
+        return message;
+    };
+    var takeMessage = function (token) {
+        if (!token)
+            return;
+        var message = (0, shared_1.isStr)(token)
+            ? core_1.GlobalRegistry.getDesignerMessage(token)
+            : token;
+        if (message)
+            return takeLocale(message);
+        return token;
+    };
+    return (react_1.default.createElement(react_1.Fragment, null, takeMessage(props.children) ||
+        takeMessage(props.token) ||
+        takeMessage(props.defaultMessage)));
+});

package/lib/widgets/ViewToolsWidget/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WorkbenchTypes } from '@mdesignable/core';
+export interface IViewToolsWidget {
+    use?: WorkbenchTypes[];
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const ViewToolsWidget: React.FC<IViewToolsWidget>;

package/lib/widgets/ViewToolsWidget/index.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewToolsWidget = void 0;
+var react_1 = __importDefault(require("react"));
+var antd_1 = require("antd");
+var reactive_react_1 = require("@formily/reactive-react");
+var IconWidget_1 = require("../IconWidget");
+var hooks_1 = require("../../hooks");
+var classnames_1 = __importDefault(require("classnames"));
+exports.ViewToolsWidget = (0, reactive_react_1.observer)(function (_a) {
+    var use = _a.use, style = _a.style, className = _a.className;
+    var workbench = (0, hooks_1.useWorkbench)();
+    var prefix = (0, hooks_1.usePrefix)('view-tools');
+    return (react_1.default.createElement(antd_1.Button.Group, { style: style, className: (0, classnames_1.default)(prefix, className) },
+        use.includes('DESIGNABLE') && (react_1.default.createElement(antd_1.Button, { disabled: workbench.type === 'DESIGNABLE', onClick: function () {
+                workbench.type = 'DESIGNABLE';
+            }, size: "small" },
+            react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Design" }))),
+        use.includes('JSONTREE') && (react_1.default.createElement(antd_1.Button, { disabled: workbench.type === 'JSONTREE', onClick: function () {
+                workbench.type = 'JSONTREE';
+            }, size: "small" },
+            react_1.default.createElement(IconWidget_1.IconWidget, { infer: "JSON" }))),
+        use.includes('MARKUP') && (react_1.default.createElement(antd_1.Button, { disabled: workbench.type === 'MARKUP', onClick: function () {
+                workbench.type = 'MARKUP';
+            }, size: "small" },
+            react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Code" }))),
+        use.includes('PREVIEW') && (react_1.default.createElement(antd_1.Button, { disabled: workbench.type === 'PREVIEW', onClick: function () {
+                workbench.type = 'PREVIEW';
+            }, size: "small" },
+            react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Play" })))));
+});
+exports.ViewToolsWidget.defaultProps = {
+    use: ['DESIGNABLE', 'JSONTREE', 'PREVIEW'],
+};

package/lib/widgets/index.d.ts

@@ -0,0 +1,16 @@
+export * from './AuxToolWidget';
+export * from './ComponentTreeWidget';
+export * from './DesignerToolsWidget';
+export * from './ViewToolsWidget';
+export * from './ResourceWidget';
+export * from './GhostWidget';
+export * from './EmptyWidget';
+export * from './OutlineWidget';
+export * from './IconWidget';
+export * from './TextWidget';
+export * from './HistoryWidget';
+export * from './NodePathWidget';
+export * from './NodeTitleWidget';
+export * from './DroppableWidget';
+export * from './NodeActionsWidget';
+export * from './SimpleResourceWidget';

package/lib/widgets/index.js

@@ -0,0 +1,32 @@
+"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 });
+__exportStar(require("./AuxToolWidget"), exports);
+__exportStar(require("./ComponentTreeWidget"), exports);
+__exportStar(require("./DesignerToolsWidget"), exports);
+__exportStar(require("./ViewToolsWidget"), exports);
+__exportStar(require("./ResourceWidget"), exports);
+__exportStar(require("./GhostWidget"), exports);
+__exportStar(require("./EmptyWidget"), exports);
+__exportStar(require("./OutlineWidget"), exports);
+__exportStar(require("./IconWidget"), exports);
+__exportStar(require("./TextWidget"), exports);
+__exportStar(require("./HistoryWidget"), exports);
+__exportStar(require("./NodePathWidget"), exports);
+__exportStar(require("./NodeTitleWidget"), exports);
+__exportStar(require("./DroppableWidget"), exports);
+__exportStar(require("./NodeActionsWidget"), exports);
+__exportStar(require("./SimpleResourceWidget"), exports);

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@mdesignable/react",
+  "version": "1.0.0-beta.64",
+  "license": "MIT",
+  "main": "lib",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "esm",
+    "dist"
+  ],
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "module": "esm",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alibaba/designable.git"
+  },
+  "bugs": {
+    "url": "https://github.com/alibaba/didesignable/issues"
+  },
+  "homepage": "https://github.com/alibaba/designable#readme",
+  "scripts": {
+    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd && ts-node copy",
+    "build:cjs": "tsc --project tsconfig.build.json",
+    "build:esm": "tsc --project tsconfig.build.json --module es2015 --outDir esm",
+    "build:umd": "rollup --config"
+  },
+  "devDependencies": {
+    "@formily/reactive": "^2.0.2",
+    "@formily/reactive-react": "^2.0.2",
+    "typescript": "5.6.2"
+  },
+  "peerDependencies": {
+    "@formily/reactive": "^2.0.2",
+    "@formily/reactive-react": "^2.0.2",
+    "antd": "^5.20.6",
+    "react": "16.x || 17.x"
+  },
+  "dependencies": {
+    "@mdesignable/core": "1.0.0-beta.64",
+    "@mdesignable/shared": "1.0.0-beta.64",
+    "dateformat": "^4.5.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "a95d7ed382ffef81d8a31ad307e9150a001a07be"
+}