3.4.0

1. 新增forceRender属性
2. lazyMount重命名为lazy
3. 细节调整

Author: bplok20010

README.md

@@ -40,12 +40,14 @@ interface PopupProps {
     style?: React.CSSProperties;
     className?: string;
     rootClassName?: string;
-    rootStyle: React.CSSProperties;
-    rootProps: React.HTMLAttributes<any>;
+    rootStyle?: React.CSSProperties;
+    rootProps?: React.HTMLAttributes<any>;
 
     fixed?: boolean;
     visible: boolean;
-    lazyMount?: boolean;
+    lazy?: boolean;
+	forceRender?: boolean;
+
     //http://reactcommunity.org/react-transition-group/css-transition
     transition?: CSSTransitionProps;
     destroyOnClose?: boolean;
@@ -77,7 +79,7 @@ interface PopupProps {
     rootClassName: "",
 
     fixed: false,
-    lazyMount: true,
+    lazy: true,
     transition: {},
     destroyOnClose: true,
 

docs/asset-manifest.json

@@ -1,40 +1,36 @@
-import React, { Component } from 'react';
-import DemoList from './DemoList';
+import React, { Component } from "react";
+import DemoList from "./DemoList";
 
 export default class Demo extends Component {
+	state = {
+		current: DemoList[0],
+	};
 
-    state = {
-        current: DemoList[0]
-    }
+	onDemoChange(item, e) {
+		this.setState({
+			current: item,
+		});
+	}
 
-    onDemoChange(item, e) {
-        this.setState({
-            current: item
-        });
-    }
-
-    render() {
-        const { current } = this.state;
-        return (
-            <div className="container">
-                <div className="slider">
-                    {
-                        DemoList.map((item, i) => {
-                            return (
-                                <div
-                                    className={current === item ? 'active' : ''}
-                                    onClick={this.onDemoChange.bind(this, item)}
-                                >
-                                    {item.label}
-                                </div>
-                            );
-                        })
-                    }
-                </div>
-                <div className="content">
-                    {current ? <current.component /> : null}
-                </div>
-            </div>
-        )
-    }
-}
+	render() {
+		const { current } = this.state;
+		return (
+			<div className="container">
+				<div className="slider">
+					{DemoList.map((item, i) => {
+						return (
+							<div
+								key={i}
+								className={current === item ? "active" : ""}
+								onClick={this.onDemoChange.bind(this, item)}
+							>
+								{item.label}
+							</div>
+						);
+					})}
+				</div>
+				<div className="content">{current ? <current.component /> : null}</div>
+			</div>
+		);
+	}
+}

docs/index.html

@@ -26,7 +26,7 @@ const maskAnimateClassNames = {
 export default class DEMO extends Component {
 	state = {
 		visible: true,
-		mask: true,
+		mask: false,
 	};
 
 	toggleClick = e => {
@@ -46,6 +46,8 @@ export default class DEMO extends Component {
 	render() {
 		const { visible, mask } = this.state;
 
+		console.log(mask, "render");
+
 		return (
 			<Fragment>
 				<div>
@@ -65,6 +67,7 @@ export default class DEMO extends Component {
 					<Popup
 						visible={visible}
 						mask={mask}
+						lazy={false}
 						destroyOnClose={true}
 						style={{
 							background: "#ff5454",
@@ -84,6 +87,7 @@ export default class DEMO extends Component {
 								this.toggleClick2();
 							},
 						}}
+						destroyOnClose={false}
 						fixed
 					>
 						<div>fixed test</div>