react-widget-modal

模态对话框。

安装

npm install --save react-widget-modal

使用

importModalfrom'react-widget-modal';import'react-widget-modal/cjs/style/index.css';classAppextendsReact.Component{state={visible: false};showModal=()=>{this.setState({visible: true,});};handleOk=e=>{console.log(e);this.setState({visible: false,});};handleCancel=e=>{console.log(e);this.setState({visible: false,});};render(){return(<div><buttononClick={this.showModal}>
Open Modal
</button><Modaltitle="Basic Modal"visible={this.state.visible}onOk={this.handleOk}onCancel={this.handleCancel}><p>Some contents...</p><p>Some contents...</p><p>Some contents...</p></Modal></div>);}}ReactDOM.render(<App/>,mountNode);

Interfaces

interfaceRenderOkButtonProps{children: React.ReactNode;onClick: (e: React.MouseEvent<HTMLElement>)=>void;}typeRenderCancelButtonProps=RenderOkButtonProps;interfaceModalPropsextendsReact.HTMLAttributes<any>{/** 样式前缀 */prefixCls?: string;/** 根样式 */rootClassName?: string;/** 模态框是否可见 */visible?: boolean;/** 是否显示右上角的关闭按钮 */closable?: boolean;/** 自定义关闭图标 */closeIcon?: React.ReactNode;/** 自定义关闭按按钮样式 */closeClassName?: string;/** 关闭时销毁Modal */destroyOnClose?: boolean;/** 是否全屏显示 */fullscreen?: boolean;/** 垂直居中展示 */centered?: boolean;/** 设置Modal的zIndex */zIndex?: number;/** 宽度 */width?: number|string;/** 标题 */title?: React.ReactNode;/** 显示时自动获得焦点 */autoFocus?: boolean;/** 锁定焦点在Modal框内切换 */enforceFocus?: boolean;/** 是否支持键盘 esc 关闭 */keyboard?: boolean;/** 当destroyOnClose关闭时，组件刷新时强制更新Modal组件 */forceRender?: boolean;/** Modal显示/关闭的CSSTransition参数，参考：react-transition-group */transition?: CSSTransitionProps;/** Modal外层容器的样式 */wrapStyle?: React.CSSProperties;/** Modal外层容器的组件属性 */wrapProps?: React.HTMLAttributes<any>;/** Modal外层容器的样式类名 */wrapClassName?: string;/** 是否展示遮罩 */mask?: boolean;/** 遮罩组件属性 */maskProps?: React.HTMLAttributes<any>;/** 遮罩组件样式 */maskStyle?: React.CSSProperties;/** 点击遮罩层是否允许关闭 */maskClosable?: boolean;/** 遮罩组件样式类 */maskClassName?: string;/** mask显示/关闭的CSSTransition参数，参考：react-transition-group */maskTransition?: CSSTransitionProps;/** Modal标题，优先级高于title，不需要标题是可设置为null */header?: React.ReactNode;/** 标题样式 */headerStyle?: React.CSSProperties;/** 标题样式类名 */headerClassName?: string;/** Modal容器样式 */bodyStyle?: React.CSSProperties;/** Modal容器样式类名 */bodyClassName?: string;/** Modal底部内容，不需要底部内容时可设置为null，默认会渲染确定/取消按钮 */footer?: React.ReactNode;/** 底部样式 */footerStyle?: React.CSSProperties;/** 底部样式类名 */footerClassName?: string;/** 确认按钮文字 */okText?: React.ReactNode;/** 确认 按钮 props */okButtonProps?: React.ButtonHTMLAttributes<any>;/** 自定义渲染确定按钮，建议进行二次封装使用 */renderOkButton?: (props: RenderOkButtonProps,modalProps: ModalProps)=>React.ReactNode;/** 取消按钮文字 */cancelText?: React.ReactNode;/** 取消按钮props */cancelButtonProps?: React.ButtonHTMLAttributes<any>;/** 自定义渲染取消按钮，建议进行二次封装使用 */renderCancelButton?: (props: RenderCancelButtonProps,modalProps: ModalProps)=>React.ReactNode;/** 点击确定回调 */onOk?: (e: React.MouseEvent<HTMLElement>)=>void;/** 点击取消回调 */onCancel?: (e: React.MouseEvent<HTMLElement>)=>void;/** 完全关闭后的回调 */afterClose?: ()=>void;/** 设置Modal挂载容器，默认为document.body */getContainer?: ()=>HTMLElement|null;}

defaultProps

{prefixCls: "rw-modal",visible: false,closable: true,closeIcon: "X",destroyOnClose: true,fullscreen: false,width: 520,autoFocus: true,enforceFocus: true,keyboard: true,centered: false,forceRender: false,transition: {classNames: "rw-modal",timeout: 300,},mask: true,maskClosable: true,maskTransition: {classNames: "rw-modal-mask",timeout: 300,},wrapProps: {},bodyStyle: {},getContainer(){returndocument.body;},okText: "确定",renderOkButton(props,modalProps){return<button{...props}className="rw-btn rw-btn-primary"/>;},cancelText: "取消",renderCancelButton(props,modalProps){return<button{...props}className="rw-btn rw-btn"/>;},}

基础样式

.rw-modal-root {
position: absolute;
left:0;
top:0;
right:0;
height:0;
overflow: visible;
z-index:1050;
}
.rw-modal-container {
position: fixed;
left:0;
top:0;
right:0;
bottom:0;
overflow: auto;
}
.rw-modal-wrapper {
position: absolute;
width:100%;
min-height:100%;
outline: none;
}
.rw-modal-centered {
display: flex;
align-items: center;
justify-content: center;
}
.rw-modal-centered .rw-modal {
margin:30px0;
}
.rw-modal-wrapper:not(.rw-modal-centered) .rw-modal {
margin:0 auto;
margin-bottom:30px;
top:100px;
}
.rw-modal-wrapper-fullscreen {
overflow: hidden;
height:100%;
}
.rw-modal-wrapper.rw-modal-wrapper-fullscreen .rw-modal {
position: absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:0;
}
.rw-modal {
position: relative;
display: flex;
flex-direction: column;
}
.rw-modal-content {
position: relative;
background-color:#fff;
border-radius:2px;
height:100%;
display: flex;
flex-direction: column;
box-shadow:03px6px-4pxrgba(0,0,0,0.12),06px16px0rgba(0,0,0,0.08),09px28px8pxrgba(0,0,0,0.05);
}
.rw-modal-mask {
position: fixed;
left:0;
top:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.45);
}
.rw-modal-fixed,
.rw-modal-mask-fixed {
position: fixed;
}
.rw-modal-close {
position: absolute;
top:0;
right:0;
z-index:10;
padding:0;
color:rgba(0,0,0,0.45);
font-weight:700;
line-height:1;
text-decoration: none;
background:00;
border:0;
/* outline: 0; */cursor: pointer;
transition: color 0.3s;
}
.rw-modal-close-x {
display: block;
width:56px;
height:56px;
font-size:16px;
font-style: normal;
line-height:56px;
text-align: center;
text-transform: none;
text-rendering: auto;
}
.rw-modal-header {
padding:16px24px;
color:rgba(0,0,0,0.65);
background:#fff;
border-bottom:1px solid #f0f0f0;
border-radius:2px2px00;
flex: none;
}
.rw-modal-title {
margin:0;
color:rgba(0,0,0,0.85);
font-weight:500;
font-size:16px;
line-height:22px;
word-wrap: break-word;
}
.rw-modal-body {
padding:24px;
font-size:14px;
line-height:1.5715;
word-wrap: break-word;
flex:1;
overflow: auto;
}
.rw-modal-footer {
padding:10px16px;
text-align: right;
background:00;
border-top:1px solid #f0f0f0;
border-radius:002px2px;
flex: none;
}
/***animate***/
.rw-modal-appear,
.rw-modal-enter {
opacity:0.01;
transform:translateY(-20px);
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.rw-modal-appear-active,
.rw-modal-enter-active {
opacity:1;
transform:translateY(0);
}
.rw-modal-exit {
opacity:1;
transform:translateY(0);
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.rw-modal-exit-active {
opacity:0.01;
transform:translateY(-20px);
}
.rw-modal-mask-appear,
.rw-modal-mask-enter {
opacity:0.01;
transition: opacity 0.3s ease-out;
}
.rw-modal-mask-appear-active,
.rw-modal-mask-enter-active {
opacity:1;
}
.rw-modal-mask-exit {
opacity:1;
transition: opacity 0.3s ease-out;
}
.rw-modal-mask-exit-active {
opacity:0.01;
}
/***footer button***/
.rw-modal-footerbutton+button {
margin-left:8px;
}
.rw-btn {
/* outline: 0; */line-height:1.5715;
position: relative;
display: inline-block;
font-weight:400;
white-space: nowrap;
text-align: center;
background-image: none;
border:1px solid transparent;
cursor: pointer;
height:32px;
padding:4px15px;
font-size:14px;
border-radius:2px;
}
.rw-btn-primary {
color:#fff;
background-color:#1890ff;
border-color:#1890ff;
text-shadow:0-1px0rgba(0,0,0,0.12);
box-shadow:02px0rgba(0,0,0,0.045);
}