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