fix: sync code

sync code

.stylelintrc.json

@@ -2,6 +2,7 @@
 	"extends": "stylelint-config-sass-guidelines",
 	"rules": {
 		"indentation": 4,
-		"scss/dollar-variable-pattern": null
+		"scss/dollar-variable-pattern": null,
+		"max-nesting-depth": 4
 	}
 }

package.json

@@ -24,7 +24,7 @@
   "license": "ISC",
   "dependencies": {
     "@types/react": "^16.9.35",
-    "classnames": "^2.2.6",
+    "@types/react-dom": "^16.9.9",
     "dt-utils": "^1.0.1",
     "loadsh": "^0.0.4",
     "monaco-editor": "^0.21.2",
@@ -42,6 +42,7 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@storybook/addon-actions": "6.0.21",
     "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-knobs": "^6.0.28",
     "@storybook/addon-links": "6.0.21",
     "@storybook/addons": "6.0.21",
     "@storybook/react": "6.0.21",

src/common/className.ts

@@ -10,3 +10,7 @@ import { APP_PREFIX } from 'mo/common/const';
 export function prefixClaName(name: string, prefix: string = APP_PREFIX ) {
     return name ? `${prefix}-${name}` : '';
 }
+
+export function classNames(...names) {
+    return names.filter((name) => !!name).join(' ');
+}

src/common/dom.ts

@@ -0,0 +1,52 @@
+export type HTMLElementType = HTMLElement | null;
+export const select = document.querySelector.bind(document);
+export const selectAll = document.querySelectorAll.bind(document);
+
+export interface IPosition {
+    x: number;
+    y: number;
+}
+
+/**
+ * Get Document Rectangle info
+ */
+export function getDocumentRect() {
+    const body = document.body;
+    const html = document.documentElement;
+
+    const height = Math.max( body.scrollHeight, body.offsetHeight,
+        html.clientHeight, html.scrollHeight, html.offsetHeight );
+
+    const width = Math.max( body.scrollWidth, body.offsetWidth,
+        html.clientWidth, html.scrollWidth, html.offsetWidth );
+
+    return {
+        height,
+        width,
+    };
+}
+
+/**
+ * Returns the position of element relative anchor's position
+ * @param element target element
+ * @param anchorPos anchor's position
+ */
+export function getRelativePosition(element: HTMLElement, anchorPos: IPosition) {
+    const page = getDocumentRect();
+    const anchorX = anchorPos.x;
+    const anchorY = anchorPos.y;
+
+    const marginRight = page.width - anchorX;
+    const marginBottom = page.height - anchorY;
+
+    const viewHeight = element.offsetHeight;
+    const viewWidth = element.offsetWidth;
+
+    const x = marginRight < viewWidth ? anchorX - viewWidth : anchorX;
+    const y = marginBottom < viewHeight ? anchorY - viewHeight : anchorY;
+
+    return {
+        x,
+        y,
+    };
+}

src/components/collapse/index.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import RcCollapse from 'rc-collapse';
-import classNames from 'classnames';
 import { CollapseProps } from 'rc-collapse/lib/interface';
-import { prefixClaName } from 'mo/common/className';
+import { prefixClaName, classNames } from 'mo/common/className';
 import './style.scss';
 
 export const Collapse: React.FunctionComponent<CollapseProps> = (props: CollapseProps) => {

src/components/contextMenu/index.tsx

@@ -1,24 +1,36 @@
-// import * as React from 'react';
-// import { prefixClaName } from 'mo/common/className';
-// import { ContextView } from 'monaco-editor/esm/vs/base/browser/ui/contextview/contextview';
-// import { StandardMouseEvent } from 'monaco-editor/esm/vs/base/browser/mouseEvent';
-
-// export interface IContextMenuProps {
-
-// }
-
-// const ContextMenu: React.FunctionComponent = function(props) {
-//     const view = new ContextView();
-
-//     return (
-//         <div className={`${prefixClaName('contextmenu')}`} >
-//             {
-//                 props.children
-//             }
-//         </div>
-//     );
-// }
-
-// export {
-//     ContextMenu
-// }
+import * as React from 'react';
+import { HTMLElementType } from 'mo/common/dom';
+import { useContextView } from 'mo/components/contextview';
+import './style.scss';
+
+export interface IContextMenu {
+    anchor: HTMLElementType;
+    render: () => React.ReactNode
+}
+
+export function useContextMenu(props: IContextMenu) {
+    const { anchor, render } = props;
+
+    if (!anchor) {
+        return;
+    }
+
+    const contextView = useContextView();
+
+    const onContextMenu = (e: MouseEvent) => {
+        e.preventDefault();
+        contextView!.show({
+            x: e.clientX,
+            y: e.clientY,
+        }, render);
+    };
+
+    anchor.addEventListener('contextmenu', onContextMenu);
+
+    const dispose = () => {
+        contextView!.hide();
+        anchor.removeEventListener('contextmenu', onContextMenu);
+    };
+
+    return { contextView, dispose };
+}

src/components/contextMenu/style.scss

@@ -0,0 +1,5 @@
+@import 'mo/style/const';
+$name: 'context-menu';
+
+// #{prefix($name)} {
+// }

src/components/contextview/index.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { prefixClaName, classNames } from 'mo/common/className';
+import { getRelativePosition, select, HTMLElementType, IPosition } from 'mo/common/dom';
+import './style.scss';
+
+export interface IContextViewProps {
+    render?: () => React.ReactNode
+}
+
+export interface IContextView {
+    contextView: HTMLElementType;
+    show(anchorPos: IPosition, render?: () => React.ReactNode): void;
+    hide(): void;
+}
+
+const contextViewClass = prefixClaName('context-view');
+const contentClass = '.context-view-content';
+
+export function useContextView(props?: IContextViewProps): IContextView {
+    const claName = classNames(contextViewClass, 'fade-in');
+    let contextView: HTMLElementType = select('.' + contextViewClass); // Singleton contextView dom
+
+    const show = (anchorPos: IPosition, render?: () => React.ReactNode) => {
+        const content = select(contentClass);
+        const renderContent = render || props?.render;
+        if (!renderContent) throw Error('ContextView show Error: the render parameter not allowed be null!');
+        ReactDOM.render(<>
+            { renderContent() }
+        </>, content, () => {
+            // Notice: if want to get the computed offsetHeight of contextView,
+            // must display contextView ahead.
+            contextView!.style.display = 'block';
+            const position = getRelativePosition(contextView!, anchorPos);
+            contextView!.style.cssText = `
+                top: ${position.y}px;
+                left: ${position.x}px;
+            `;
+        });
+    };
+
+    const hide = () => {
+        if (contextView) {
+            contextView.style.display = 'none';
+            ReactDOM.unmountComponentAtNode(select(contentClass)!);
+        }
+    };
+
+    const onMaskClick = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        hide();
+    };
+
+    if (!contextView) {
+        contextView = document.createElement('div');
+        contextView.className = claName;
+        contextView.style.display = 'none';
+        document.body.appendChild(contextView);
+
+        ReactDOM.render(<>
+            <div className="context-view-block" onClick={onMaskClick} onContextMenu={onMaskClick}></div>
+            <div className="context-view-content"></div>
+        </>, contextView);
+    }
+
+    return { contextView, show, hide };
+};

src/components/contextview/style.scss

@@ -0,0 +1,22 @@
+@import 'mo/style/const';
+$name: 'context-view';
+
+#{prefix($name)} {
+    border: 0;
+    outline: 0;
+    position: absolute;
+    width: initial;
+    z-index: 2500;
+
+    .#{$name}-block {
+        bottom: 0;
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: fixed;
+        right: 0;
+        top: 0;
+        width: 100%;
+        z-index: -1;
+    }
+}

src/components/tree/index.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import RcTree from 'rc-tree';
-import classNames from 'classnames';
 
 import './style.scss';
-import { prefixClaName } from 'mo/common/className';
+import { prefixClaName, classNames } from 'mo/common/className';
 
 export interface ITree {
 

src/style/animation.scss

@@ -0,0 +1,13 @@
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.fade-in {
+    animation: fadeIn 0.083s linear;
+}

src/style/main.scss

@@ -1,5 +1,6 @@
 @import './const';
 @import './theme';
+@import './animation';
 
 .#{$prefix} {
     bottom: 0;

src/workbench/activityBar/activityBarItem.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { memo } from 'react';
-import classNames from 'classnames';
 
-import { prefixClaName } from 'mo/common/className';
+import { prefixClaName, classNames } from 'mo/common/className';
 import { ID_ACTIVITY_BAR } from 'mo/common/id';
 import { IActivityBarItem } from 'mo/model/workbench/activityBar';
 

src/workbench/workbench.tsx

@@ -1,9 +1,8 @@
 import './style.scss';
 import * as React from 'react';
-import classNames from 'classnames';
 import { Utils } from 'dt-utils';
 import SplitPane from 'react-split-pane';
-import { prefixClaName } from 'mo/common/className';
+import { classNames, prefixClaName } from 'mo/common/className';
 import { APP_PREFIX } from 'mo/common/const';
 
 import { EditorView } from 'mo/workbench/editor';

stories/common/propsTable/index.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import './style.scss';
+
+export function propsTable(props: any) {
+    const { propDefinitions } = props;
+    const propsFields = propDefinitions.map(
+        ({ property, propType, required, description, defaultValue }: any) => {
+            return (
+                <tr key={property}>
+                    <td>
+                        {property}
+                        {required ? <span style={{
+                            color: '#ff3348',
+                            marginLeft: '5px',
+                        }}>*</span> : null}
+                    </td>
+                    <td>{description}</td>
+                    <td>{propType}</td>
+                    <td>{defaultValue}</td>
+                </tr>
+            );
+        },
+    );
+
+    return (
+        <table {...{ width: '90%' }}>
+            <thead>
+                <tr>
+                    <th>参数</th>
+                    <th>说明</th>
+                    <th>类型</th>
+                    <th>默认值</th>
+                </tr>
+            </thead>
+            <tbody>{propsFields}</tbody>
+        </table>
+    );
+}

stories/common/propsTable/style.scss

@@ -0,0 +1,28 @@
+table {
+    border-collapse: collapse;
+    font-family: sfmono-regular,Consolas,liberation mono,Menlo,Courier,monospace;
+    margin: 0 auto;
+    text-align: center;
+}
+
+table td,
+table th {
+    border: 1px solid #ccc;
+    color: #666;
+    height: 30px;
+}
+
+table thead th {
+    background-color: #f7f7f7;
+    width: 100px;
+}
+
+table tbody {
+    td:first-child {
+        font-weight: bold;
+    }
+
+    td:nth-child(3) {
+        color: #c41d7f;
+    }
+}