react-widget-popup

安装

npm install --save react-widget-popup

使用

import Popup from 'react-widget-popup';
import 'react-widget-popup/style';
 
export default function App(){
    return (
        <Popup
            visible={true}
            style={{
                left: 100,
                top: 100
            }}
        >
            test
        </Popup>
    )
}
 

Interfaces

type statusTypes = 'unmounted' | 'exited' | 'entering' | 'entered' | 'exiting' ;
 
interface PopupProps extends React.HTMLAttributes<any> {
    /** 样式前缀 */
    prefixCls?: string;
    /** popup元素样式 */
    style?: React.CSSProperties;
    /** popupCSS样式名 */
    className?: string;
    /** popup根节点CSS样式名 */
    rootClassName?: string;
    /** popup根节点样式 */
    rootStyle?: React.CSSProperties;
    /** popup元素属性 */
    rootProps?: React.HTMLAttributes<any>;
    /** 否显示popup(受控) */
    visible?: boolean;
    /** 使用fixed定位popup */
    fixed?: boolean;
    /** 初始不显示的情况下不渲染组件 */
    lazy?: boolean;
    /** 当destroyOnClose=false时，组件刷新时强制更新 */
    forceRender?: boolean;
    /** CSSTransition参数，参考：react-transition-group */
    transition?: Partial<CSSTransitionProps>;
    /** 隐藏销毁弹组件 */
    destroyOnClose?: boolean;
    /** popup显示用于获取元素显示位置信息，大部分情况下建议直接用style */
    getPosition?: (
        dom: HTMLElement
    ) => {
        top?: number | string;
        left?: number | string;
        right?: number | string;
        bottom?: number | string;
    };
    /** 禁用mask */
    disableMask?: boolean;
    /** 是否开启遮罩层 */
    mask?: boolean;
    /** 遮罩层样式 */
    maskStyle?: React.CSSProperties;
    /** 遮罩层组件属性 */
    maskProps?: React.HTMLAttributes<any>;
    /** 遮罩层样式名称 */
    maskClassName?: string;
    /** CSSTransition参数，参考：react-transition-group */
    maskTransition?: Partial<CSSTransitionProps>;
    /** 内部使用 */
    component?: React.ElementType;
    /** 内部使用 */
    maskComponent?: React.ElementType;
    /** 内部使用 */
    rootComponent?: React.ElementType;
    /** 内部使用 */
    wrapContent?: (node: React.ReactNode) => React.ReactNode;
}

defaultProps

{
    prefixCls: "rw-popup",
    style: {},
    className: "",
    rootClassName: "",
 
    fixed: false,
    lazy: true,
    transition: {},
    destroyOnClose: true,
 
    disableMask: false,
    mask: false,
    maskStyle: {},
    maskProps: {},
    maskClassName: "",
    maskTransition: {},
 
    component: "div",
    maskComponent: "div",
    rootComponent: "div"
}

基础样式

.rw-popup-root {
    /* TODO */
}
 
.rw-popup {
    position: absolute;
    left: 0;
    top: 0;
    outline: 0;
}
 
.rw-popup-mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0.1;
}
 
.rw-popup-fixed,
.rw-popup-mask-fixed {
    position: fixed;
}