feat: add draft contextView component

Author: wewoor

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;
+    }
+}

stories/components/ContextView.stories.tsx

@@ -0,0 +1,111 @@
+
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { propsTable } from '../common/propsTable';
+
+import { useContextView } from 'mo/components/contextview';
+
+const stories = storiesOf('ContextView', module);
+stories.addDecorator(withKnobs);
+
+const propDefinitions = [{
+    property: 'render',
+    propType: '() => React.ReactNode',
+    required: false,
+    description: 'Default render content',
+    defaultValue: null,
+}];
+
+stories.add('Basic Usage', () => {
+    const contextView = useContextView();
+
+    const show = (event: React.MouseEvent): void => {
+        const x = event.clientX;
+        const y = event.clientY;
+        console.log('x, y:', x, y);
+        contextView.show({
+            x: x,
+            y: y,
+        }, () => {
+            return (
+                <div>
+                    <h1>Hello World: </h1>
+                    <p>x: {x}</p>
+                    <p>y: {y}</p>
+                </div>
+            );
+        });
+    };
+
+    const styled: React.CSSProperties = {
+        position: 'relative',
+        width: 200,
+        height: 200,
+        top: 0,
+        left: 0,
+        margin: 'auto',
+        background: '#dddddd',
+    };
+
+    return (
+        <div>
+            <h2>简述</h2>
+            <p>
+                ContextView 组件主要是提供了一个可根据指定锚点位置、渲染内容的视图容器。
+            </p>
+            <h2>使用示例</h2>
+            <div id="topLeft"
+                onClick={show}
+                style={styled}>
+                    Click me!
+            </div>
+        </div>
+    );
+}, {
+    info: {
+        inline: true,
+        TableComponent: () => propsTable({ propDefinitions }),
+        // propTablesExclude: [],
+        text: `
+            代码示例：
+            ~~~js
+            import { useContextView } from 'mo/components/contextview';
+
+            const contextView = useContextView();
+
+            const mouseMove = (event: React.MouseEvent): void => {
+                contextView.show({
+                    x: event.clientX,
+                    y: event.clientY,
+                }, () => {
+                    return (
+                        <h1>Hello World</h1>
+                    );
+                });
+            };
+
+            return (
+                <div>
+                    <div id="topLeft"
+                        onMouseMove={mouseMove}
+                        style={
+                            {
+                                position: 'absolute',
+                                width: 200,
+                                height: 200,
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                background: '#dddddd',
+                            }
+                        }>
+                            Hover me!
+                    </div>
+                </div>
+            );
+            ～～
+        `,
+    },
+});