@co-hooks/popper v1.0.11

Popper 一 气泡浮层

API

类型 定义

import {CSSProperties} from 'react';

export type IRcTrigger = 'click' | 'hover' | 'focus' | 'manual';

export type IRcPlacementLeft = 'left-start' | 'left' | 'left-end';
export type IRcPlacementRight = 'right-start' | 'right' | 'right-end';
export type IRcPlacementTop = 'top-start' | 'top' | 'top-end';
export type IRcPlacementBottom = 'bottom-start' | 'bottom' | 'bottom-end';

export type IRcPlacement = IRcPlacementLeft | IRcPlacementRight | IRcPlacementTop | IRcPlacementBottom;

export interface ITouch {
    touchX?: boolean;
    touchY?: boolean;
}

export interface IOverFlowBoundaries {
    left?: number;
    right?: number;
    top?: number;
    bottom?: number;
}

export interface IArrowInfo {
    arrowStyle: CSSProperties;
    arrowDirection: string;
}

用法

import React, {CSSProperties, useCallback, useState} from 'react';
import {RcPopper, IArrowInfo} from '@rc-hooks/popper';
import './demo.less';

export default (props: {}) => {
    const [showls, setShowLS] = useState(false);

    const getArrow = useCallback((arrowInfo: IArrowInfo) => {
        const {arrowDirection} = arrowInfo;
        const arrowStyle: CSSProperties = {
            borderWidth: '5px',
            width: 0,
            height: 0,
            fontSize: 0,
            lineHeight: 0,
            borderStyle: 'solid',
            display: 'block'
        };
        switch (arrowDirection) {
            case 'top':
                Object.assign(arrowStyle, {
                    borderColor: 'transparent transparent #ccc transparent'
                });
                break;
            case 'bottom':
                Object.assign(arrowStyle, {
                    borderColor: '#ccc transparent transparent transparent'
                });
                break;
            case 'left':
                Object.assign(arrowStyle, {
                    borderColor: 'transparent #ccc transparent transparent'
                });
                break;
            case 'right':
                Object.assign(arrowStyle, {
                    borderColor: 'transparent transparent transparent #ccc'
                });
                break;
        }

        return (
            <span style={arrowStyle} />
        );
    }, []);

    return (
        <div className="dialog-demo">
            <div style={{marginBottom: '50px'}}>以下popper都是lazyInit的, hover会在隐藏时销毁，click的不会销毁</div>
            <div className="part">
                <RcPopper
                    show={showls}
                    trigger="click"
                    placement="left-start"
                    getPopper="提示文字"
                    lazyInit={true}
                    arrow={true}
                    getArrow={getArrow}
                    arrowOffset={{x: 0, y: 5}}
                    offset={{x: -10, y: 0}}
                    onShow={() => setShowLS(true)}
                    onHide={() => setShowLS(false)}
                >
                    <Button>click 左上</Button>
                </RcPopper>
            </div>
        </div>
    );
};