@mdesignable/react 1.0.0-beta.64

package/lib/panels/styles.less

@@ -0,0 +1,331 @@
+@import '../variables.less';
+
+.@{prefix-cls}-main-panel {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+
+  &-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    &.root {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+    &.absolute {
+      position: absolute;
+    }
+    &.relative {
+      position: relative;
+    }
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    justify-content: space-between;
+    background: var(--dn-main-panel-header-bg-color);
+    border-bottom: 1px solid var(--dn-panel-border-color);
+    padding: 4px;
+
+    &-logo {
+      display: flex;
+      align-items: center;
+    }
+
+    &-actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+
+  &.root {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.@{prefix-cls}-composite-panel {
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: flex;
+  position: relative;
+  user-select: none;
+  z-index: 2;
+
+  &-tabs {
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--dn-panel-border-color);
+    background-color: var(--dn-composite-panel-tabs-bg-color);
+    z-index: 2;
+    position: relative;
+
+    &-pane {
+      color: var(--dn-composite-panel-tabs-color);
+      min-height: 48px;
+      min-width: 48px;
+      padding: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      position: relative;
+      font-size: 20px;
+      flex-direction: column;
+
+      &-title {
+        font-size: 10px;
+        margin-top: 6px;
+      }
+
+      &:hover {
+        color: var(--dn-composite-panel-tabs-hover-color);
+      }
+
+      &.active {
+        color: var(--dn-composite-panel-tabs-hover-color);
+
+        &::after {
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: block;
+          content: '';
+          width: 3px;
+          height: 100%;
+          background-color: var(--dn-composite-panel-tabs-hover-color);
+        }
+      }
+    }
+
+    &-content {
+      width: 300px;
+      border-right: 1px solid var(--dn-panel-border-color);
+      background: var(--dn-composite-panel-tabs-content-bg-color);
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-sizing: content-box;
+
+      &.pinning {
+        position: absolute;
+        z-index: 1;
+        left: 100%;
+        top: 0;
+        border-right: 1px solid transparent;
+        box-shadow: -2px 5px 10px rgba(102, 102, 102, 0.42);
+      }
+    }
+
+    &-header {
+      padding: 14px 7px;
+      color: var(--dn-composite-panel-tabs-header-color);
+      line-height: 18px;
+      font-size: 16px;
+      border-bottom: 1px solid var(--dn-panel-border-color);
+      display: flex;
+      justify-content: space-between;
+
+      &-actions {
+        display: flex;
+        align-items: center;
+
+        & > * {
+          margin-right: 8px;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+
+      &-pin {
+        transition: all 0.15s ease-in-out;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+
+      &-title {
+        font-size: 20px;
+      }
+
+      &-close {
+        transition: all 0.15s ease-in-out;
+
+        &:hover {
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    &-body {
+      flex-grow: 2;
+      flex-shrink: 2;
+      overflow: overlay;
+      overflow-x: hidden;
+      height: 100%;
+    }
+  }
+
+  &.direction-right {
+    flex-direction: row-reverse;
+
+    .@{prefix-cls}-composite-panel-tabs-pane.active:after {
+      left: auto;
+      right: -1px;
+    }
+
+    .@{prefix-cls}-composite-panel-tabs-content.pinning {
+      left: auto;
+      right: 100%;
+      top: 0;
+    }
+
+    .@{prefix-cls}-composite-panel-tabs-content {
+      border-right: none;
+      border-left: 1px solid var(--dn-panel-border-color);
+    }
+    .@{prefix-cls}-composite-panel-tabs {
+      border-left: 1px solid var(--dn-panel-border-color);
+    }
+  }
+}
+
+.@{prefix-cls}-workspace-panel {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  padding: 4px;
+  overflow: hidden;
+  box-sizing: border-box;
+  background-color: var(--dn-workspace-panel-bg-color);
+  position: relative;
+  z-index: 1;
+
+  &-item {
+    position: relative;
+  }
+
+  button[disabled] {
+    pointer-events: none !important;
+  }
+}
+
+.@{prefix-cls}-settings-panel {
+  flex-grow: 0;
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  z-index: 2;
+  width: 300px;
+  background: var(--dn-composite-panel-tabs-content-bg-color);
+  border-left: 1px solid var(--dn-panel-border-color);
+  height: 100%;
+  box-sizing: content-box;
+  user-select: none;
+
+  &.pinning {
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    right: 0;
+    box-shadow: 2px 5px 10px rgba(102, 102, 102, 0.52);
+    border-left: 1px solid transparent;
+  }
+
+  &-header {
+    padding: 14px 7px;
+    color: var(--dn-composite-panel-tabs-header-color);
+    line-height: 18px;
+    font-size: 16px;
+    border-bottom: 1px solid var(--dn-panel-border-color);
+    display: flex;
+    justify-content: space-between;
+
+    &-actions {
+      display: flex;
+      align-items: center;
+
+      & > * {
+        margin-right: 8px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    &-pin {
+      transition: all 0.15s ease-in-out;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    &-title {
+      font-size: 20px;
+    }
+
+    &-close {
+      transition: all 0.15s ease-in-out;
+
+      &:hover {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  &-body {
+    flex-grow: 2;
+    flex-shrink: 2;
+    overflow: overlay;
+    height: 100%;
+  }
+
+  &-opener {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    background: var(--dn-composite-panel-tabs-content-bg-color);
+    border: 1px solid var(--dn-panel-border-color);
+    color: var(--dn-composite-panel-tabs-color);
+    box-shadow: 0 0 6px rgb(0 0 0 / 10%);
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+
+    .dn-icon {
+      transition: all 0.15s ease-in-out;
+    }
+
+    &:hover .dn-icon {
+      transform: rotate(45deg);
+    }
+  }
+}

package/lib/simulators/MobileSimulator/body.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export interface IMobileBodyProps {
+}
+export declare const MobileBody: React.FC<IMobileBodyProps>;

package/lib/simulators/MobileSimulator/body.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileBody = void 0;
+var reactive_react_1 = require("@formily/reactive-react");
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../hooks");
+var MockupImages = {
+    dark: [
+        '//img.alicdn.com/imgextra/i3/O1CN01zXMc8W26oJZGUaCK1_!!6000000007708-55-tps-946-459.svg',
+        '//img.alicdn.com/imgextra/i3/O1CN012KWk2i1DLduN7InSK_!!6000000000200-55-tps-459-945.svg',
+    ],
+    light: [
+        '//img.alicdn.com/imgextra/i4/O1CN01vuXGe31tEy00v2xBx_!!6000000005871-55-tps-946-459.svg',
+        '//img.alicdn.com/imgextra/i4/O1CN01ehfzMc1QPqY6HONTJ_!!6000000001969-55-tps-459-945.svg',
+    ],
+};
+exports.MobileBody = (0, reactive_react_1.observer)(function (props) {
+    var screen = (0, hooks_1.useScreen)();
+    var theme = (0, hooks_1.useTheme)();
+    var prefix = (0, hooks_1.usePrefix)('mobile-simulator-body');
+    var getContentStyles = function () {
+        if (screen.flip) {
+            return {
+                position: 'absolute',
+                width: 736,
+                height: 414,
+                top: 43.3333,
+                left: 106.667,
+                overflow: 'hidden',
+            };
+        }
+        return {
+            position: 'absolute',
+            width: 414,
+            height: 736,
+            top: 126.667,
+            left: 23.3333,
+            overflow: 'hidden',
+        };
+    };
+    return (react_1.default.createElement("div", { className: prefix, style: {
+            alignItems: screen.flip ? 'center' : '',
+            minWidth: screen.flip ? 1000 : 0,
+        } },
+        react_1.default.createElement("div", { className: prefix + '-wrapper', style: {
+                position: 'relative',
+                minHeight: screen.flip ? 0 : 1000,
+            } },
+            react_1.default.createElement("img", { src: screen.flip ? MockupImages[theme][0] : MockupImages[theme][1], style: {
+                    display: 'block',
+                    margin: '20px 0',
+                    width: screen.flip ? 946.667 : 460,
+                    height: screen.flip ? 460 : 946.667,
+                    boxShadow: '0 0 20px #0000004d',
+                    borderRadius: 60,
+                    backfaceVisibility: 'hidden',
+                } }),
+            react_1.default.createElement("div", { className: prefix + '-content', style: getContentStyles() }, props.children))));
+});
+exports.MobileBody.defaultProps = {};

package/lib/simulators/MobileSimulator/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './styles.less';
+export interface IMobileSimulatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const MobileSimulator: React.FC<IMobileSimulatorProps>;

package/lib/simulators/MobileSimulator/index.js

@@ -0,0 +1,29 @@
+"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.MobileSimulator = void 0;
+var react_1 = __importDefault(require("react"));
+var body_1 = require("./body");
+var hooks_1 = require("../../hooks");
+var classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+var MobileSimulator = function (props) {
+    var prefix = (0, hooks_1.usePrefix)('mobile-simulator');
+    return (react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(prefix, props.className) }),
+        react_1.default.createElement("div", { className: prefix + '-content' },
+            react_1.default.createElement(body_1.MobileBody, null, props.children))));
+};
+exports.MobileSimulator = MobileSimulator;

package/lib/simulators/MobileSimulator/styles.less

@@ -0,0 +1,29 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-mobile-simulator {
+  position: relative;
+  min-height: 100px;
+  height: 100%;
+  width: 100%;
+  background-color: var(--dn-mobile-simulator-bg-color);
+
+  &-content {
+    width: 100%;
+    top: 0;
+    left: 0;
+    height: 100%;
+    position: absolute;
+    overflow: overlay;
+  }
+
+  &-body {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+
+    &-content {
+      background-color: var(--dn-mobile-simulator-body-bg-color);
+      border: 3px solid var(--dn-mobile-simulator-border-color)
+    }
+  }
+}

package/lib/simulators/PCSimulator/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './styles.less';
+export interface IPCSimulatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PCSimulator: React.FC<IPCSimulatorProps>;

package/lib/simulators/PCSimulator/index.js

@@ -0,0 +1,26 @@
+"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.PCSimulator = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var hooks_1 = require("../../hooks");
+require("./styles.less");
+var PCSimulator = function (props) {
+    var prefix = (0, hooks_1.usePrefix)('pc-simulator');
+    return (react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(prefix, props.className) }), props.children));
+};
+exports.PCSimulator = PCSimulator;

package/lib/simulators/PCSimulator/styles.less

@@ -0,0 +1,11 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-pc-simulator {
+  background-color: var(--dn-pc-simulator-bg-color);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-sizing: border-box;
+}

package/lib/simulators/ResponsiveSimulator/handle.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare enum ResizeHandleType {
+    Resize = "RESIZE",
+    ResizeWidth = "RESIZE_WIDTH",
+    ResizeHeight = "RESIZE_HEIGHT"
+}
+export interface IResizeHandleProps {
+    type?: ResizeHandleType;
+}
+export declare const ResizeHandle: React.FC<IResizeHandleProps>;

package/lib/simulators/ResponsiveSimulator/handle.js

@@ -0,0 +1,35 @@
+"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.ResizeHandle = exports.ResizeHandleType = void 0;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../hooks");
+var classnames_1 = __importDefault(require("classnames"));
+var ResizeHandleType;
+(function (ResizeHandleType) {
+    ResizeHandleType["Resize"] = "RESIZE";
+    ResizeHandleType["ResizeWidth"] = "RESIZE_WIDTH";
+    ResizeHandleType["ResizeHeight"] = "RESIZE_HEIGHT";
+})(ResizeHandleType || (exports.ResizeHandleType = ResizeHandleType = {}));
+var ResizeHandle = function (props) {
+    var _a, _b;
+    var prefix = (0, hooks_1.usePrefix)('resize-handle');
+    var designer = (0, hooks_1.useDesigner)();
+    return (react_1.default.createElement("div", __assign({}, props, (_a = {}, _a[designer.props.screenResizeHandlerAttrName] = props.type, _a.className = (0, classnames_1.default)(prefix, (_b = {},
+        _b["".concat(prefix, "-").concat(props.type)] = !!props.type,
+        _b)), _a)), props.children));
+};
+exports.ResizeHandle = ResizeHandle;

package/lib/simulators/ResponsiveSimulator/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './styles.less';
+export interface IResponsiveSimulatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ResponsiveSimulator: React.FC<IResponsiveSimulatorProps>;