Function useContextView

src/components/contextView/index.tsx:61–156

(props: IContextViewProps = {})

 * TODO: It's not a hook, don't begin with use
 */
export function useContextView(props: IContextViewProps = {}): IContextView {
    const { shadowOutline = true } = props;
    const claName = classNames(contextViewClass, 'fade-in');
    let contextView: HTMLElementType = select(`.${contextViewClass}`); // Singleton contextView dom

    const show = (anchorPos: IPosition, render?: () => React.ReactNode) => {
        const content = select<HTMLElement>('.' + contentClassName);
        const renderContent = render || props?.render;
        if (!renderContent)
            throw new Error(
                'ContextView show Error: the render parameter is required!'
            );
        renderUtils(
            <div
                ref={() => {
                    // Notice: if want to get the computed offsetHeight of contextView,
                    // must display contextView ahead.
                    if (contextView) {
                        const position = getRelativePosition(
                            contextView,
                            anchorPos
                        );
                        contextView.style.cssText = `
                    visibility: visible;
                    top: ${position.y}px;
                    left: ${position.x}px;
                `;
                    }
                }}
            >
                {renderContent()}
            </div>,
            content!
        );
    };

    const hide = () => {
        if (contextView) {
            const contentContainer = select<HTMLElement>(
                `.${contentClassName}`
            );
            if (contentContainer) {
                unmout(contentContainer);
            }
            contextView.style.visibility = 'hidden';
            Emitter.emit(ContextViewEvent.onHide);
        }
    };

    const onHide = (callback: Function) => {
        Emitter.subscribe(ContextViewEvent.onHide, callback);
    };

    const onMaskClick = (e: React.MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();
        hide();
    };