From 4379d8df9700fec3e4e7b5be0ea6029202e59316 Mon Sep 17 00:00:00 2001
From: "wuji.xwt" <wuji.xwt@alibaba-inc.com>
Date: Fri, 11 Sep 2020 16:33:22 +0800
Subject: [PATCH] style: fix for plugin-outline-pane

---
 packages/plugin-outline-pane/.eslintrc.js     |  7 +++
 .../src/helper/dwell-timer.ts                 |  9 +++-
 .../src/helper/indent-track.ts                |  2 +-
 packages/plugin-outline-pane/src/main.ts      | 26 ++++++-----
 .../plugin-outline-pane/src/tree-master.ts    |  5 +-
 packages/plugin-outline-pane/src/tree-node.ts |  5 +-
 packages/plugin-outline-pane/src/tree.ts      |  5 +-
 .../src/views/tree-title.tsx                  | 46 +++++++++----------
 .../plugin-outline-pane/src/views/tree.tsx    |  2 +-
 9 files changed, 66 insertions(+), 41 deletions(-)
 create mode 100644 packages/plugin-outline-pane/.eslintrc.js

diff --git a/packages/plugin-outline-pane/.eslintrc.js b/packages/plugin-outline-pane/.eslintrc.js
new file mode 100644
index 000000000..cee0b299a
--- /dev/null
+++ b/packages/plugin-outline-pane/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: 'eslint-config-ali/typescript/react',
+  rules: {
+    'no-unused-expressions': 1,
+    'react/no-multi-comp': 1,
+  }
+}
\ No newline at end of file
diff --git a/packages/plugin-outline-pane/src/helper/dwell-timer.ts b/packages/plugin-outline-pane/src/helper/dwell-timer.ts
index 701751756..039d605d3 100644
--- a/packages/plugin-outline-pane/src/helper/dwell-timer.ts
+++ b/packages/plugin-outline-pane/src/helper/dwell-timer.ts
@@ -10,7 +10,14 @@ export default class DwellTimer {
 
   private event?: LocateEvent;
 
-  constructor(private decide: (node: ParentalNode, event: LocateEvent) => void, private timeout: number = 500) {}
+  private decide: (node: ParentalNode, event: LocateEvent) => void;
+
+  private timeout: number = 500;
+
+  constructor(decide: (node: ParentalNode, event: LocateEvent) => void, timeout: number = 500) {
+    this.decide = decide;
+    this.timeout = timeout;
+  }
 
   focus(node: ParentalNode, event: LocateEvent) {
     this.event = event;
diff --git a/packages/plugin-outline-pane/src/helper/indent-track.ts b/packages/plugin-outline-pane/src/helper/indent-track.ts
index b8b87f7e8..659bd272a 100644
--- a/packages/plugin-outline-pane/src/helper/indent-track.ts
+++ b/packages/plugin-outline-pane/src/helper/indent-track.ts
@@ -1,4 +1,4 @@
-import { DropLocation, ParentalNode, isLocationChildrenDetail, Node } from '@ali/lowcode-designer';
+import { DropLocation, ParentalNode, isLocationChildrenDetail } from '@ali/lowcode-designer';
 
 const IndentSensitive = 15;
 export class IndentTrack {
diff --git a/packages/plugin-outline-pane/src/main.ts b/packages/plugin-outline-pane/src/main.ts
index e46a34b4d..c568082c3 100644
--- a/packages/plugin-outline-pane/src/main.ts
+++ b/packages/plugin-outline-pane/src/main.ts
@@ -46,7 +46,13 @@ export class OutlineMain implements ISensor, ITreeBoard, IScrollable {
     return this._visible;
   }
 
-  constructor(readonly editor: IEditor, readonly at: string | symbol) {
+  readonly editor: IEditor;
+
+  readonly at: string | symbol;
+
+  constructor(editor: IEditor, at: string | symbol) {
+    this.editor = editor;
+    this.at = at;
     let inited = false;
     const setup = async () => {
       if (inited) {
@@ -198,12 +204,10 @@ export class OutlineMain implements ISensor, ITreeBoard, IScrollable {
         } else {
           this.dwell.reset();
         }
-      } else {
-        // FIXME: recreate new location
-        if ((originLoc.detail as LocationChildrenDetail).near) {
-          (originLoc.detail as LocationChildrenDetail).near = undefined;
-          this.dwell.reset();
-        }
+      // FIXME: recreate new location
+      } else if ((originLoc.detail as LocationChildrenDetail).near) {
+        (originLoc.detail as LocationChildrenDetail).near = undefined;
+        this.dwell.reset();
       }
       return;
     }
@@ -216,12 +220,12 @@ export class OutlineMain implements ISensor, ITreeBoard, IScrollable {
         let { focusSlots } = pos;
         let { node } = treeNode;
         if (isDragNodeObject(dragObject)) {
-          const nodes = operationalNodes;
-          let i = nodes.length;
+          const newNodes = operationalNodes;
+          let i = newNodes.length;
           let p: any = node;
           while (i-- > 0) {
-            if (contains(nodes[i], p)) {
-              p = nodes[i].parent;
+            if (contains(newNodes[i], p)) {
+              p = newNodes[i].parent;
             }
           }
           if (p !== node) {
diff --git a/packages/plugin-outline-pane/src/tree-master.ts b/packages/plugin-outline-pane/src/tree-master.ts
index 050dce420..4e4049d0f 100644
--- a/packages/plugin-outline-pane/src/tree-master.ts
+++ b/packages/plugin-outline-pane/src/tree-master.ts
@@ -11,7 +11,10 @@ export interface ITreeBoard {
 }
 
 export class TreeMaster {
-  constructor(readonly designer: Designer) {
+  readonly designer: Designer;
+
+  constructor(designer: Designer) {
+    this.designer = designer;
     let startTime: any;
     designer.dragon.onDragstart(() => {
       startTime = Date.now() / 1000;
diff --git a/packages/plugin-outline-pane/src/tree-node.ts b/packages/plugin-outline-pane/src/tree-node.ts
index 69ab638c5..e021d6b65 100644
--- a/packages/plugin-outline-pane/src/tree-node.ts
+++ b/packages/plugin-outline-pane/src/tree-node.ts
@@ -218,7 +218,10 @@ export default class TreeNode {
     return this._node;
   }
 
-  constructor(readonly tree: Tree, node: Node) {
+  readonly tree: Tree;
+
+  constructor(tree: Tree, node: Node) {
+    this.tree = tree;
     this.document = node.document;
     this.designer = this.document.designer;
     this._node = node;
diff --git a/packages/plugin-outline-pane/src/tree.ts b/packages/plugin-outline-pane/src/tree.ts
index 61dff2535..a34bdfd21 100644
--- a/packages/plugin-outline-pane/src/tree.ts
+++ b/packages/plugin-outline-pane/src/tree.ts
@@ -8,7 +8,10 @@ export class Tree {
 
   readonly id: string;
 
-  constructor(readonly document: DocumentModel) {
+  readonly document: DocumentModel;
+
+  constructor(document: DocumentModel) {
+    this.document = document;
     this.root = this.getTreeNode(document.rootNode);
     this.id = document.id;
   }
diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx
index 4f2629894..165b88534 100644
--- a/packages/plugin-outline-pane/src/views/tree-title.tsx
+++ b/packages/plugin-outline-pane/src/views/tree-title.tsx
@@ -3,8 +3,6 @@ import classNames from 'classnames';
 import { observer, Title, Tip, globalContext, Editor } from '@ali/lowcode-editor-core';
 import { IconArrowRight } from '../icons/arrow-right';
 import { IconEyeClose } from '../icons/eye-close';
-import { IconLock } from '../icons/lock';
-import { IconUnlock } from '../icons/unlock';
 import { intl, intlNode } from '../locale';
 import TreeNode from '../tree-node';
 import { IconEye } from '../icons/eye';
@@ -14,7 +12,7 @@ import { IconRadioActive } from '../icons/radio-active';
 import { IconRadio } from '../icons/radio';
 import { createIcon } from '@ali/lowcode-utils';
 
-function emitOutlineEvent(type: string, treeNode: TreeNode, rest?: object) {
+function emitOutlineEvent(type: string, treeNode: TreeNode, rest?: Record<string, unknown>) {
   const editor = globalContext.get(Editor);
   const node = treeNode?.node;
   const npm = node?.componentMeta?.npm;
@@ -172,28 +170,28 @@ export default class TreeTitle extends Component<{
   }
 }
 
-@observer
-class LockBtn extends Component<{ treeNode: TreeNode }> {
-  shouldComponentUpdate() {
-    return false;
-  }
+// @observer
+// class LockBtn extends Component<{ treeNode: TreeNode }> {
+//   shouldComponentUpdate() {
+//     return false;
+//   }
 
-  render() {
-    const { treeNode } = this.props;
-    return (
-      <div
-        className="tree-node-lock-btn"
-        onClick={(e) => {
-          e.stopPropagation();
-          treeNode.setLocked(!treeNode.locked);
-        }}
-      >
-        {treeNode.locked ? <IconLock /> : <IconUnlock />}
-        <Tip>{treeNode.locked ? intl('Unlock') : intl('Lock')}</Tip>
-      </div>
-    );
-  }
-}
+//   render() {
+//     const { treeNode } = this.props;
+//     return (
+//       <div
+//         className="tree-node-lock-btn"
+//         onClick={(e) => {
+//           e.stopPropagation();
+//           treeNode.setLocked(!treeNode.locked);
+//         }}
+//       >
+//         {treeNode.locked ? <IconLock /> : <IconUnlock />}
+//         <Tip>{treeNode.locked ? intl('Unlock') : intl('Lock')}</Tip>
+//       </div>
+//     );
+//   }
+// }
 
 @observer
 class HideBtn extends Component<{ treeNode: TreeNode }> {
diff --git a/packages/plugin-outline-pane/src/views/tree.tsx b/packages/plugin-outline-pane/src/views/tree.tsx
index 8302b34e6..4f7871e96 100644
--- a/packages/plugin-outline-pane/src/views/tree.tsx
+++ b/packages/plugin-outline-pane/src/views/tree.tsx
@@ -152,7 +152,7 @@ export default class TreeView extends Component<{ tree: Tree }> {
     return (
       <div
         className="lc-outline-tree"
-        ref={(shell) => (this.shell = shell)}
+        ref={(shell) => { this.shell = shell; }}
         onMouseDownCapture={this.onMouseDown}
         onMouseOver={this.onMouseOver}
         onClick={this.onClick}