@mdesignable/react 1.0.0-beta.64

package/lib/widgets/AuxToolWidget/styles.less

@@ -0,0 +1,383 @@
+@import '../../variables.less';
+
+@keyframes dn-animate-slide-to-top {
+  from {
+    transform: translateY(-10%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 0.8;
+  }
+}
+
+.@{prefix-cls}-auxtool {
+  transform: perspective(1px) translate3d(0, 0, 0);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+
+  z-index: 9998;
+}
+
+.dn-aux-button {
+  button {
+    font-size: 12px !important;
+    display: flex;
+    align-items: center;
+    padding: 0 3px;
+    height: 20px;
+    color: var(--dn-aux-selector-btn-color); //#fff
+    background: var(--dn-aux-selector-btn-bg-color); //#1890ff
+    border-color: var(--dn-aux-selector-btn-border-color); //#1890ff
+
+    &:hover,
+    &:focus {
+      color: var(--dn-aux-selector-btn-hover-color); //#fff
+      background: var(--dn-aux-selector-btn-hover-bg-color); //#40a9ff
+      border-color: var(--dn-aux-selector-btn-hover-border-color); //#40a9ff
+    }
+
+    &:active {
+      color: var(--dn-aux-selector-btn-active-color); //#fff
+      background: var(--dn-aux-selector-btn-active-bg-color); //#096dd9
+      border-color: var(--dn-aux-selector-btn-active-border-color); //#096dd9
+    }
+  }
+}
+
+.@{prefix-cls}-aux-cover-rect {
+  &.dragging {
+    background-color: var(--dn-aux-cover-rect-dragging-color);
+  }
+
+  &.dropping {
+    background-color: var(--dn-aux-cover-rect-dropping-color);
+  }
+}
+
+.@{prefix-cls}-aux-free-selection {
+  background-color: var(--dn-aux-free-selection-background-color);
+  border-color: var(--dn-aux-free-selection-border-color);
+}
+
+.@{prefix-cls}-aux-helpers {
+  position: absolute;
+  pointer-events: all;
+  z-index: 10;
+  user-select: none;
+
+  .dn-aux-button();
+
+  &.bottom-right {
+    top: 100%;
+    right: 0;
+  }
+
+  &.bottom-left {
+    top: 100%;
+    left: 0;
+  }
+
+  &.bottom-center {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.inner-top-right {
+    top: -2px;
+    right: 2px;
+  }
+
+  &.inner-top-left {
+    top: -2px;
+    left: 2px;
+  }
+
+  &.inner-top-center {
+    top: -2px;
+    right: 2px;
+  }
+
+  &.inner-bottom-right {
+    bottom: -2px;
+    right: 2px;
+  }
+
+  &.inner-bottom-left {
+    bottom: -2px;
+    left: 2px;
+  }
+
+  &.inner-bottom-center {
+    bottom: -2px;
+    right: 2px;
+  }
+
+  &.top-right {
+    bottom: 100%;
+    right: 0;
+  }
+
+  &.top-left {
+    bottom: 100%;
+    left: 0;
+  }
+
+  &.top-center {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  button {
+    span {
+      transform: scale(0.9);
+      margin-left: 2px;
+
+      &.@{prefix-cls}-icon {
+        transform: scale(1);
+        margin-left: 0;
+      }
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+
+    button {
+      font-size: 12px !important;
+      display: flex;
+      align-items: center;
+      padding: 0 3px;
+      height: 20px;
+    }
+
+    & > * {
+      margin-top: 4px;
+      margin-bottom: 4px;
+      margin-left: 2px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.@{prefix-cls}-aux-insertion {
+  background-color: var(--dn-aux-insertion-color);
+}
+
+.@{prefix-cls}-aux-dashed-box {
+  border: 1px dashed var(--dn-aux-dashed-box-color);
+
+  &-title {
+    color: var(--dn-aux-dashed-box-title-color);
+  }
+}
+
+.@{prefix-cls}-aux-selection-box {
+  border: 2px solid var(--dn-aux-selection-box-border-color);
+  position: relative;
+  pointer-events: none;
+
+  &-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &-title {
+    color: var(--dn-aux-selection-box-color);
+  }
+}
+
+.@{prefix-cls}-aux-selector {
+  .dn-aux-button();
+
+  &-menu {
+    margin-top: -4px;
+    animation: dn-animate-slide-to-top 0.2s;
+    opacity: 0.8;
+
+    button {
+      font-size: 12px !important;
+      display: flex;
+      align-items: center;
+      padding: 0 3px;
+      height: 20px;
+      margin-top: 2px;
+    }
+  }
+}
+
+.@{prefix-cls}-aux-drag-handler {
+  cursor: move;
+}
+
+.@{prefix-cls}-aux-node-resize-handler {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  pointer-events: all;
+  border-radius: 10px;
+  background-color: #fff;
+  border: 1px solid var(--dn-brand-color);
+
+  &.left-center {
+    left: 0;
+    top: 50%;
+    transform: translate(calc(-50% - 1px), -50%);
+    cursor: ew-resize;
+  }
+
+  &.right-center {
+    left: 100%;
+    top: 50%;
+    transform: translate(calc(-50% + 1px), -50%);
+    cursor: ew-resize;
+  }
+
+  &.center-top {
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, calc(-50% - 1px));
+    cursor: ns-resize;
+  }
+
+  &.center-bottom {
+    left: 50%;
+    top: 100%;
+    transform: translate(-50%, calc(-50% + 1px));
+    cursor: ns-resize;
+  }
+
+  &.left-top {
+    left: 0;
+    top: 0;
+    transform: translate(calc(-50% + 1px), calc(-50% + 1px));
+    cursor: nwse-resize;
+  }
+
+  &.left-bottom {
+    left: 0;
+    top: 100%;
+    transform: translate(-50%, -50%);
+    cursor: nesw-resize;
+  }
+
+  &.right-bottom {
+    left: 100%;
+    top: 100%;
+    transform: translate(-50%, -50%);
+    cursor: nwse-resize;
+  }
+
+  &.right-top {
+    left: 100%;
+    top: 0;
+    transform: translate(-50%, -50%);
+    cursor: nesw-resize;
+  }
+}
+
+.@{prefix-cls}-aux-node-translate-handler {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  width: 40px;
+  height: 20px;
+  background: #1890ff;
+  opacity: 0.5;
+  pointer-events: all;
+}
+
+.@{prefix-cls}-aux-space-block-ruler-indicator {
+  position: absolute;
+  background-color: var(--dn-brand-color);
+  color: var(--dn-white);
+  border-radius: 8px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    margin: 0 6px;
+    display: inline-block;
+    font-size: 12px;
+  }
+}
+
+.@{prefix-cls}-aux-space-block-ruler-h {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+  width: 100%;
+  height: 12px;
+  border-left: 1px solid var(--dn-brand-color);
+  border-right: 1px solid var(--dn-brand-color);
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    transform: translate(0, -50%);
+    width: 100%;
+    height: 1px;
+    background-color: var(--dn-brand-color);
+    z-index: 1;
+  }
+
+  .@{prefix-cls}-aux-space-block-ruler-indicator {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.7);
+  }
+}
+
+.@{prefix-cls}-aux-space-block-ruler-v {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  height: 100%;
+  width: 12px;
+  border-top: 1px solid var(--dn-brand-color);
+  border-bottom: 1px solid var(--dn-brand-color);
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    height: 100%;
+    width: 1px;
+    background-color: var(--dn-brand-color);
+    z-index: 1;
+  }
+
+  .@{prefix-cls}-aux-space-block-ruler-indicator {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.7);
+  }
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IDesignerComponents } from '../../types';
+import { TreeNode } from '@mdesignable/core';
+import './styles.less';
+export interface IComponentTreeWidgetProps {
+    style?: React.CSSProperties;
+    className?: string;
+    components: IDesignerComponents;
+}
+export interface ITreeNodeWidgetProps {
+    node: TreeNode;
+    children?: React.ReactChild;
+}
+export declare const TreeNodeWidget: React.FC<ITreeNodeWidgetProps>;
+export declare const ComponentTreeWidget: React.FC<IComponentTreeWidgetProps>;

package/lib/widgets/ComponentTreeWidget/index.js

@@ -0,0 +1,135 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentTreeWidget = exports.TreeNodeWidget = void 0;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../hooks");
+var context_1 = require("../../context");
+var core_1 = require("@mdesignable/core");
+var reactive_react_1 = require("@formily/reactive-react");
+var classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.TreeNodeWidget = (0, reactive_react_1.observer)(function (props) {
+    var _a, _b;
+    var designer = (0, hooks_1.useDesigner)((_b = (_a = props.node) === null || _a === void 0 ? void 0 : _a.designerProps) === null || _b === void 0 ? void 0 : _b.effects);
+    var components = (0, hooks_1.useComponents)();
+    var node = props.node;
+    var renderChildren = function () {
+        var _a, _b;
+        if ((_a = node === null || node === void 0 ? void 0 : node.designerProps) === null || _a === void 0 ? void 0 : _a.selfRenderChildren)
+            return [];
+        return (_b = node === null || node === void 0 ? void 0 : node.children) === null || _b === void 0 ? void 0 : _b.map(function (child) {
+            return react_1.default.createElement(exports.TreeNodeWidget, { key: child.id, node: child });
+        });
+    };
+    var renderProps = function (extendsProps) {
+        var _a, _b, _c;
+        if (extendsProps === void 0) { extendsProps = {}; }
+        var props = __assign(__assign(__assign(__assign({}, (_a = node.designerProps) === null || _a === void 0 ? void 0 : _a.defaultProps), extendsProps), node.props), (_c = (_b = node.designerProps) === null || _b === void 0 ? void 0 : _b.getComponentProps) === null || _c === void 0 ? void 0 : _c.call(_b, node));
+        if (node.depth === 0) {
+            delete props.style;
+        }
+        return props;
+    };
+    var renderComponent = function () {
+        var _a, _b;
+        var componentName = node.componentName;
+        var Component = components[componentName];
+        var dataId = {};
+        if (Component) {
+            if (designer) {
+                dataId[(_a = designer === null || designer === void 0 ? void 0 : designer.props) === null || _a === void 0 ? void 0 : _a.nodeIdAttrName] = node.id;
+            }
+            return react_1.default.createElement.apply(react_1.default, __spreadArray([Component,
+                renderProps(dataId)], __read(renderChildren()), false));
+        }
+        else {
+            if ((_b = node === null || node === void 0 ? void 0 : node.children) === null || _b === void 0 ? void 0 : _b.length) {
+                return react_1.default.createElement(react_1.Fragment, null, renderChildren());
+            }
+        }
+    };
+    if (!node)
+        return null;
+    if (node.hidden)
+        return null;
+    return react_1.default.createElement(context_1.TreeNodeContext.Provider, { value: node }, renderComponent());
+});
+exports.ComponentTreeWidget = (0, reactive_react_1.observer)(function (props) {
+    var _a, _b;
+    var tree = (0, hooks_1.useTree)();
+    var prefix = (0, hooks_1.usePrefix)('component-tree');
+    var designer = (0, hooks_1.useDesigner)();
+    var dataId = {};
+    if (designer && tree) {
+        dataId[(_a = designer === null || designer === void 0 ? void 0 : designer.props) === null || _a === void 0 ? void 0 : _a.nodeIdAttrName] = tree.id;
+    }
+    (0, react_1.useEffect)(function () {
+        core_1.GlobalRegistry.registerDesignerBehaviors(props.components);
+    }, []);
+    return (react_1.default.createElement("div", __assign({ style: __assign(__assign({}, props.style), (_b = tree === null || tree === void 0 ? void 0 : tree.props) === null || _b === void 0 ? void 0 : _b.style), className: (0, classnames_1.default)(prefix, props.className) }, dataId),
+        react_1.default.createElement(context_1.DesignerComponentsContext.Provider, { value: props.components },
+            react_1.default.createElement(exports.TreeNodeWidget, { node: tree }))));
+});
+exports.ComponentTreeWidget.displayName = 'ComponentTreeWidget';

package/lib/widgets/ComponentTreeWidget/styles.less

@@ -0,0 +1,6 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-component-tree {
+  min-height: 100%;
+  min-width: 100%;
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import './styles.less';
+type DesignerToolsType = 'HISTORY' | 'CURSOR' | 'SCREEN_TYPE';
+export type IDesignerToolsWidgetProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    use?: DesignerToolsType[];
+};
+export declare const DesignerToolsWidget: React.FC<IDesignerToolsWidgetProps>;
+export {};

package/lib/widgets/DesignerToolsWidget/index.js

@@ -0,0 +1,138 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignerToolsWidget = void 0;
+var react_1 = __importStar(require("react"));
+var antd_1 = require("antd");
+var reactive_react_1 = require("@formily/reactive-react");
+var core_1 = require("@mdesignable/core");
+var hooks_1 = require("../../hooks");
+var IconWidget_1 = require("../IconWidget");
+var classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.DesignerToolsWidget = (0, reactive_react_1.observer)(function (props) {
+    var screen = (0, hooks_1.useScreen)();
+    var cursor = (0, hooks_1.useCursor)();
+    var workbench = (0, hooks_1.useWorkbench)();
+    var history = (0, hooks_1.useHistory)();
+    var sizeRef = (0, react_1.useRef)({});
+    var prefix = (0, hooks_1.usePrefix)('designer-tools');
+    var renderHistoryController = function () {
+        if (!props.use.includes('HISTORY'))
+            return null;
+        return (react_1.default.createElement(antd_1.Button.Group, { size: "small", style: { marginRight: 20 } },
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: !(history === null || history === void 0 ? void 0 : history.allowUndo), onClick: function () {
+                    history.undo();
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Undo" })),
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: !(history === null || history === void 0 ? void 0 : history.allowRedo), onClick: function () {
+                    history.redo();
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Redo" }))));
+    };
+    var renderCursorController = function () {
+        if (workbench.type !== 'DESIGNABLE')
+            return null;
+        if (!props.use.includes('CURSOR'))
+            return null;
+        return (react_1.default.createElement(antd_1.Button.Group, { size: "small", style: { marginRight: 20 } },
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: cursor.type === core_1.CursorType.Normal, onClick: function () {
+                    cursor.setType(core_1.CursorType.Normal);
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Move" })),
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: cursor.type === core_1.CursorType.Selection, onClick: function () {
+                    cursor.setType(core_1.CursorType.Selection);
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Selection" }))));
+    };
+    var renderResponsiveController = function () {
+        if (!props.use.includes('SCREEN_TYPE'))
+            return null;
+        if (screen.type !== core_1.ScreenType.Responsive)
+            return null;
+        return (react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement(antd_1.InputNumber, { size: "small", value: screen.width, style: { width: 70, textAlign: 'center' }, onChange: function (value) {
+                    sizeRef.current.width = value;
+                }, onPressEnter: function () {
+                    screen.setSize(sizeRef.current.width, screen.height);
+                } }),
+            react_1.default.createElement(IconWidget_1.IconWidget, { size: 10, infer: "Close", style: { padding: '0 3px', color: '#999' } }),
+            react_1.default.createElement(antd_1.InputNumber, { value: screen.height, size: "small", style: {
+                    width: 70,
+                    textAlign: 'center',
+                    marginRight: 10,
+                }, onChange: function (value) {
+                    sizeRef.current.height = value;
+                }, onPressEnter: function () {
+                    screen.setSize(screen.width, sizeRef.current.height);
+                } }),
+            (screen.width !== '100%' || screen.height !== '100%') && (react_1.default.createElement(antd_1.Button, { size: "small", style: { marginRight: 20 }, onClick: function () {
+                    screen.resetSize();
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Recover" })))));
+    };
+    var renderScreenTypeController = function () {
+        if (!props.use.includes('SCREEN_TYPE'))
+            return null;
+        return (react_1.default.createElement(antd_1.Button.Group, { size: "small", style: { marginRight: 20 } },
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: screen.type === core_1.ScreenType.PC, onClick: function () {
+                    screen.setType(core_1.ScreenType.PC);
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "PC" })),
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: screen.type === core_1.ScreenType.Mobile, onClick: function () {
+                    screen.setType(core_1.ScreenType.Mobile);
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Mobile" })),
+            react_1.default.createElement(antd_1.Button, { size: "small", disabled: screen.type === core_1.ScreenType.Responsive, onClick: function () {
+                    screen.setType(core_1.ScreenType.Responsive);
+                } },
+                react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Responsive" }))));
+    };
+    var renderMobileController = function () {
+        if (!props.use.includes('SCREEN_TYPE'))
+            return null;
+        if (screen.type !== core_1.ScreenType.Mobile)
+            return;
+        return (react_1.default.createElement(antd_1.Button, { size: "small", style: { marginRight: 20 }, onClick: function () {
+                screen.setFlip(!screen.flip);
+            } },
+            react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Flip", style: {
+                    transition: 'all .15s ease-in',
+                    transform: screen.flip ? 'rotate(-90deg)' : '',
+                } })));
+    };
+    return (react_1.default.createElement("div", { style: props.style, className: (0, classnames_1.default)(prefix, props.className) },
+        renderHistoryController(),
+        renderCursorController(),
+        renderScreenTypeController(),
+        renderMobileController(),
+        renderResponsiveController()));
+});
+exports.DesignerToolsWidget.defaultProps = {
+    use: ['HISTORY', 'CURSOR', 'SCREEN_TYPE'],
+};