From 1c0b488ca9989ca35c59b8cf2f621c1d0d678780 Mon Sep 17 00:00:00 2001 From: bplok20010 Date: Mon, 4 May 2020 18:53:30 +0800 Subject: [PATCH] =?UTF-8?q?3.4.2=20=E4=BF=AE=E5=A4=8Dmask=20popup=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=E6=97=B6=E9=97=B4=E4=B8=8D=E4=B8=80=E8=87=B4=E6=97=B6?= =?UTF-8?q?=E5=AF=BC=E8=87=B4=E6=8F=90=E6=97=A9=E7=BB=93=E6=9D=9F=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/asset-manifest.json | 4 +-- docs/index.html | 2 +- ...a87.chunk.css => index.dcc079cc.chunk.css} | 0 docs/static/js/index.69cc3a87.chunk.js | 1 - docs/static/js/index.dcc079cc.chunk.js | 1 + package.json | 2 +- src/index.tsx | 28 +++++++++++++++++++ 7 files changed, 33 insertions(+), 5 deletions(-) rename docs/static/css/{index.69cc3a87.chunk.css => index.dcc079cc.chunk.css} (100%) delete mode 100644 docs/static/js/index.69cc3a87.chunk.js create mode 100644 docs/static/js/index.dcc079cc.chunk.js diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json index 15f6193..055cfd4 100644 --- a/docs/asset-manifest.json +++ b/docs/asset-manifest.json @@ -1,6 +1,6 @@ { - "index.css": "static/css/index.69cc3a87.chunk.css", - "index.js": "static/js/index.69cc3a87.chunk.js", + "index.css": "static/css/index.dcc079cc.chunk.css", + "index.js": "static/js/index.dcc079cc.chunk.js", "runtime-index.js": "static/js/runtime-index.70097ef2.js", "static/js/2.676e54e4.chunk.js": "static/js/2.676e54e4.chunk.js", "index.html": "index.html" diff --git a/docs/index.html b/docs/index.html index 91fa7d8..d5e943a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -popup
\ No newline at end of file +popup
\ No newline at end of file diff --git a/docs/static/css/index.69cc3a87.chunk.css b/docs/static/css/index.dcc079cc.chunk.css similarity index 100% rename from docs/static/css/index.69cc3a87.chunk.css rename to docs/static/css/index.dcc079cc.chunk.css diff --git a/docs/static/js/index.69cc3a87.chunk.js b/docs/static/js/index.69cc3a87.chunk.js deleted file mode 100644 index 22d28c0..0000000 --- a/docs/static/js/index.69cc3a87.chunk.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{112:function(e,t,n){},113:function(e,t,n){},114:function(e,t,n){},125:function(e,t,n){"use strict";n.r(t);var s=n(0),a=n.n(s),i=n(4),o=n.n(i),l=(n(112),n(113),n(114),n(8),n(115),n(14),n(1)),r=n.n(l),c=(n(69),n(72)),d=n.n(c),m=n(19),p=n.n(m),h=n(28),u=n.n(h),k=n(18),b=n(12),f=n(43);class v extends a.a.Component{constructor(...e){super(...e),r()(this,"transitionStatus",b.a),r()(this,"inTransition",!1),r()(this,"inMaskTransition",!1),r()(this,"rootInstance",void 0),r()(this,"popupInstance",void 0),r()(this,"maskInstance",void 0),r()(this,"refHandlers",{root:e=>this.rootInstance=e,popup:e=>this.popupInstance=e,mask:e=>this.maskInstance=e})}shouldComponentUpdate(e){return e.forceRender||!(b.a===this.transitionStatus&&!e.visible)}componentDidMount(){const e=this.props,t=e.lazy,n=e.visible,s=e.mask,a=Object(i.findDOMNode)(this.rootInstance),o=Object(i.findDOMNode)(this.popupInstance),l=Object(i.findDOMNode)(this.maskInstance);n||t||(a&&(a.style.display="none"),o&&(o.style.display="none"),l&&(l.style.display="none")),n&&!s&&l&&(l.style.display="none")}onEnter({onEnter:e},t,n,s){const a=this.props,o=a.destroyOnClose,l=a.getPosition,r=Object(i.findDOMNode)(this.rootInstance),c=Object(i.findDOMNode)(this.popupInstance),d=Object(i.findDOMNode)(this.maskInstance);if(t?this.inMaskTransition=!0:this.inTransition=!0,o||(r&&(r.style.display=""),!t&&c&&(c.style.display=""),t&&d&&(d.style.display="")),!t&&l){const e=l(n),t=e=>"number"===typeof e?e+"px":e;e&&("left"in e&&(n.style.left=t(e.left)),"top"in e&&(n.style.top=t(e.top)),"right"in e&&(n.style.right=t(e.right)),"bottom"in e&&(n.style.bottom=t(e.bottom)))}e&&e(n,s)}onExited({onExited:e},t,n){const s=this.props,a=s.destroyOnClose,o=s.visible,l=Object(i.findDOMNode)(this.rootInstance),r=Object(i.findDOMNode)(this.popupInstance),c=Object(i.findDOMNode)(this.maskInstance);t?this.inMaskTransition=!1:this.inTransition=!1,a||(o||this.inMaskTransition||this.inTransition||!l||(l.style.display="none"),!t&&r&&(r.style.display="none"),t&&c&&(c.style.display="none")),e&&e(n)}renderPopupMask(){const e=this.props,t=e.prefixCls,n=e.visible,s=e.mask,i=e.maskProps,o=e.maskStyle,l=e.maskClassName,r=e.maskTransition,c=e.lazy,d=e.destroyOnClose,m=e.fixed,h=e.maskComponent,k=u()({[t+"-mask"]:!0,[t+"-mask-fixed"]:m},i.className,l),v=r.classNames?f.a:b.b;return a.a.createElement(v,p()({enter:!0,exit:!0,appear:!0,addEndListener:(e,t)=>null==r.timeout&&t()},r,{in:s&&n,onEnter:this.onEnter.bind(this,r,!0),onExited:this.onExited.bind(this,r,!0),unmountOnExit:d,mountOnEnter:c}),a.a.createElement(h,p()({},i,{ref:this.refHandlers.mask,style:Object.assign({},o,{},i.style),className:k})))}render(){const e=this.props,t=e.style,n=e.prefixCls,i=e.className,o=e.fixed,l=e.visible,r=e.children,c=e.lazy,m=e.destroyOnClose,h=e.rootClassName,v=e.rootStyle,C=e.rootProps,E=e.rootComponent,g=(e.component,e.transition),y=e.wrapContent,x=e.disableMask,O=d()(e,["style","prefixCls","className","fixed","visible","children","lazy","destroyOnClose","rootClassName","rootStyle","rootProps","rootComponent","component","transition","wrapContent","disableMask"]),N=E,I=E;delete O.mask,delete O.maskProps,delete O.maskStyle,delete O.maskClassName,delete O.maskComponent,delete O.maskTransition,delete O.getPosition,delete O.forceRender;let M=Object.assign({},C,{className:u()(h,C.className),style:Object.assign({},v,{},C.style)});N===s.Fragment&&(M={});const D=u()(n,{[n+"-fixed"]:o},i),S=g.classNames?f.a:b.b,F=a.a.createElement(N,p()({},M,{ref:this.refHandlers.root}),!x&&this.renderPopupMask(),y(a.a.createElement(S,p()({enter:!0,exit:!0,appear:!0,addEndListener:(e,t)=>null==g.timeout&&t()},g,{in:l,onEnter:this.onEnter.bind(this,g,!1),onExited:this.onExited.bind(this,g,!1),unmountOnExit:m,mountOnEnter:c}),e=>(this.transitionStatus=e,a.a.createElement(I,p()({},O,{ref:this.refHandlers.popup,style:t,className:D}),"function"===typeof r?r(e):r)))));return a.a.createElement(k.a.Provider,{value:null},a.a.createElement(b.b,{enter:!0,exit:!0,appear:!0,addEndListener:g.addEndListener||((e,t)=>null==g.timeout&&t()),timeout:g.timeout,in:l,unmountOnExit:m,mountOnEnter:c},()=>F))}}r()(v,"defaultProps",{prefixCls:"rw-popup",style:{},className:"",rootClassName:"",rootStyle:{},rootProps:{},visible:!1,fixed:!1,lazy:!0,forceRender:!1,transition:{},destroyOnClose:!0,disableMask:!1,mask:!1,maskStyle:{},maskProps:{},maskClassName:"",maskTransition:{},component:"div",maskComponent:"div",rootComponent:"div",wrapContent:e=>e});var C=v,E=n(6),g=n.n(E);class y extends s.Component{constructor(...e){super(...e),r()(this,"state",{visible:!1}),r()(this,"toggleClick",e=>{const t=this.state.visible;this.setState({visible:!t})})}componentDidMount(){}render(){const e=this.state.visible;return a.a.createElement("div",null,a.a.createElement("button",{onClick:this.toggleClick},e?"\u5173\u95ed":"\u663e\u793a"),a.a.createElement(C,{rootComponent:"div",rootClassName:"p-root",rootStyle:{zIndex:0,tabIndex:-1},rootProps:{"data-x":"1"},visible:e,transition:{timeout:500,onEnter:e=>{g()(e).hide(),g()(e).stop().fadeIn(500)},onExit:e=>{g()(e).stop().fadeOut(500)}},getPosition:e=>(console.log(e),{left:"50%",top:50})},a.a.createElement("div",{className:"dialog"},"center...")))}}class x extends s.Component{constructor(...e){super(...e),r()(this,"state",{visible:!0,mask:!0}),r()(this,"toggleClick",e=>{const t=this.state.visible;this.setState({visible:!t})}),r()(this,"toggleClick2",e=>{const t=this.state.mask;this.setState({mask:!t})}),r()(this,"refButton",e=>{this._defer.resolve({of:e,my:"left top",at:"left bottom"})}),r()(this,"refButton2",e=>{this._defer2.resolve({of:e,my:"left center",at:"right center"})})}render(){const e=this.state,t=e.visible,n=e.mask;return a.a.createElement(s.Fragment,null,a.a.createElement("div",null,a.a.createElement("button",{onClick:this.toggleClick},t?"\u5173\u95ed":"\u663e\u793a"),a.a.createElement("button",{onClick:this.toggleClick2},n?"\u5173\u95ed\u906e\u7f69\u5c42":"\u663e\u793a\u906e\u7f69\u5c42")),a.a.createElement("div",{style:{height:"calc(100% - 30px)",position:"relative",border:"1px solid #000"}},a.a.createElement(C,{visible:t,mask:n,style:{left:"50%",top:10,background:"#ff5454",color:"#FFF",padding:10},transition:{timeout:500,onEnter:e=>{g()(e).hide(),g()(e).stop().fadeIn(500)},onExit:e=>{g()(e).stop().fadeOut(500)}},maskTransition:{timeout:500,onEnter:e=>{g()(e).hide(),g()(e).stop().fadeIn(500)},onExit:e=>{g()(e).stop().fadeOut(500)}}},a.a.createElement("div",null,"center2..."))))}}let O=1;function N(){return console.log("1"),a.a.createElement("a",null,"Test a",O++)}const I={appear:"animated",appearActive:"fadeBottomIn",appearDone:"done",enter:"animated",enterActive:"fadeBottomIn",enterDone:"done",exit:"animated",exitActive:"fadeBottomOut",exitDone:"done"},M={appear:"animated",appearActive:"fadeIn",appearDone:"done",enter:"animated",enterActive:"fadeIn",enterDone:"done",exit:"animated",exitActive:"fadeOut",exitDone:"done"};class D extends s.Component{constructor(...e){super(...e),r()(this,"state",{visible:!0,mask:!0}),r()(this,"toggleClick",e=>{const t=this.state.visible;this.setState({visible:!t})}),r()(this,"toggleClick2",e=>{const t=this.state.mask;this.setState({mask:!t})})}render(){const e=this.state,t=e.visible,n=e.mask;return a.a.createElement(s.Fragment,null,a.a.createElement("div",null,a.a.createElement("button",{onClick:this.toggleClick},t?"\u5173\u95ed":"\u663e\u793a"),a.a.createElement("button",{onClick:this.toggleClick2},n?"\u5173\u95ed\u906e\u7f69\u5c42":"\u663e\u793a\u906e\u7f69\u5c42"),a.a.createElement("button",{onClick:()=>this.forceUpdate()},"refresh")),a.a.createElement("div",{style:{height:"calc(100% - 30px)",position:"relative",border:"1px solid #000"}},a.a.createElement(C,{visible:t,mask:n,destroyOnClose:!1,style:{left:10,top:10,background:"#ff5454",color:"#FFF",padding:10},transition:{timeout:500,classNames:I},maskTransition:{timeout:500,classNames:M}},a.a.createElement("div",null,a.a.createElement(N,null)))))}}const S={appear:"animated",appearActive:"fadeBottomIn",appearDone:"done",enter:"animated",enterActive:"fadeBottomIn",enterDone:"done",exit:"animated",exitActive:"fadeBottomOut",exitDone:"done"},F={appear:"animated",appearActive:"fadeIn",appearDone:"done",enter:"animated",enterActive:"fadeIn",exit:"animated",exitActive:"fadeOut"};class P extends s.Component{constructor(...e){super(...e),r()(this,"state",{visible:!0,mask:!1,disableMask:!1}),r()(this,"toggleClick",e=>{const t=this.state.visible;this.setState({visible:!t})}),r()(this,"toggleClick2",e=>{const t=this.state.mask;this.setState({mask:!t})}),r()(this,"toggleClick3",e=>{const t=this.state.disableMask;this.setState({disableMask:!t})})}render(){const e=this.state,t=e.visible,n=e.mask,i=e.disableMask;return console.log(n,"render"),a.a.createElement(s.Fragment,null,a.a.createElement("div",null,a.a.createElement("button",{onClick:this.toggleClick},t?"\u5173\u95ed":"\u663e\u793a"),a.a.createElement("button",{onClick:this.toggleClick2},n?"\u5173\u95ed\u906e\u7f69\u5c42":"\u663e\u793a\u906e\u7f69\u5c42"),a.a.createElement("button",{onClick:this.toggleClick3},i?"\u542f\u7528\u906e\u7f69\u5c42":"\u7981\u7528\u906e\u7f69\u5c42"),a.a.createElement("button",{onClick:()=>this.forceUpdate()},"refresh")),a.a.createElement("div",{style:{height:"calc(100% - 30px)",position:"relative",border:"1px solid #000"}},a.a.createElement(C,{disableMask:i,visible:t,mask:n,lazy:!1,destroyOnClose:!0,style:{background:"#ff5454",color:"#FFF",padding:10},transition:{timeout:500,classNames:S},maskTransition:{timeout:500,classNames:F},maskProps:{onClick:()=>{this.toggleClick2()}},destroyOnClose:!1,fixed:!0},a.a.createElement("div",null,"fixed test"))))}}class T extends s.Component{constructor(...e){super(...e),r()(this,"state",{visible:!0,mask:!0}),r()(this,"toggleClick",e=>{const t=this.state.visible;this.setState({visible:!t})}),r()(this,"toggleClick2",e=>{const t=this.state.mask;this.setState({mask:!t})})}render(){const e=this.state,t=e.visible,n=e.mask;return a.a.createElement(s.Fragment,null,a.a.createElement("div",null,a.a.createElement("button",{onClick:this.toggleClick},t?"\u5173\u95ed":"\u663e\u793a"),a.a.createElement("button",{onClick:this.toggleClick2},n?"\u5173\u95ed\u906e\u7f69\u5c42":"\u663e\u793a\u906e\u7f69\u5c42"),a.a.createElement("button",{onClick:()=>this.forceUpdate()},"refresh")),a.a.createElement("div",{style:{height:"calc(100% - 30px)",position:"relative",border:"1px solid #000"}},a.a.createElement(C,{visible:t,mask:n,destroyOnClose:!0,style:{background:"#ff5454",color:"#FFF",padding:10},maskProps:{onClick:()=>{this.toggleClick2()}}},a.a.createElement("div",null,"fixed test"))))}}var j=[{label:"\u57fa\u672c\u529f\u80fd",component:y},{label:"\u906e\u7f69\u5c42",component:x},{label:"\u4f7f\u7528CSS\u52a8\u753b",component:D},{label:"fixed",component:P},{label:"\u65e0\u52a8\u753b",component:T}];class A extends s.Component{constructor(...e){super(...e),r()(this,"state",{current:j[0]})}onDemoChange(e,t){this.setState({current:e})}render(){const e=this.state.current;return a.a.createElement("div",{className:"container"},a.a.createElement("div",{className:"slider"},j.map((t,n)=>a.a.createElement("div",{key:n,className:e===t?"active":"",onClick:this.onDemoChange.bind(this,t)},t.label))),a.a.createElement("div",{className:"content"},e?a.a.createElement(e.component,null):null))}}o.a.render(a.a.createElement(A,null),document.getElementById("demo"))},74:function(e,t,n){n(75),e.exports=n(125)}},[[74,1,2]]]); \ No newline at end of file diff --git a/docs/static/js/index.dcc079cc.chunk.js b/docs/static/js/index.dcc079cc.chunk.js new file mode 100644 index 0000000..f973d56 --- /dev/null +++ b/docs/static/js/index.dcc079cc.chunk.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{112:function(e,t,n){},113:function(e,t,n){},114:function(e,t,n){},125:function(e,t,n){"use strict";n.r(t);var s=n(0),i=n.n(s),a=n(4),o=n.n(a),l=(n(112),n(113),n(114),n(8),n(115),n(14),n(1)),r=n.n(l),c=(n(69),n(72)),d=n.n(c),m=n(19),p=n.n(m),h=n(28),u=n.n(h),k=n(18),b=n(12),E=n(43);class f extends i.a.Component{constructor(...e){super(...e),r()(this,"transitionStatus",b.a),r()(this,"inTransition",!1),r()(this,"inMaskTransition",!1),r()(this,"rootInstance",void 0),r()(this,"popupInstance",void 0),r()(this,"maskInstance",void 0),r()(this,"refHandlers",{root:e=>this.rootInstance=e,popup:e=>this.popupInstance=e,mask:e=>this.maskInstance=e})}shouldComponentUpdate(e){return e.forceRender||!(b.a===this.transitionStatus&&!e.visible)}componentDidMount(){const e=this.props,t=e.lazy,n=e.visible,s=e.mask,i=Object(a.findDOMNode)(this.rootInstance),o=Object(a.findDOMNode)(this.popupInstance),l=Object(a.findDOMNode)(this.maskInstance);n||t||(i&&(i.style.display="none"),o&&(o.style.display="none"),l&&(l.style.display="none")),n&&!s&&l&&(l.style.display="none")}onEnter({onEnter:e},t,n,s){const i=this.props,o=i.destroyOnClose,l=i.getPosition,r=Object(a.findDOMNode)(this.rootInstance),c=Object(a.findDOMNode)(this.popupInstance),d=Object(a.findDOMNode)(this.maskInstance);if(t?this.inMaskTransition=!0:this.inTransition=!0,o||(r&&(r.style.display=""),!t&&c&&(c.style.display=""),t&&d&&(d.style.display="")),!t&&l){const e=l(n),t=e=>"number"===typeof e?e+"px":e;e&&("left"in e&&(n.style.left=t(e.left)),"top"in e&&(n.style.top=t(e.top)),"right"in e&&(n.style.right=t(e.right)),"bottom"in e&&(n.style.bottom=t(e.bottom)))}e&&e(n,s)}onEntered({onEntered:e},t,n,s){t?this.inMaskTransition=!1:this.inTransition=!1,e&&e(n,s)}onExit({onExit:e},t,n){t?this.inMaskTransition=!0:this.inTransition=!0,e&&e(n)}onExited({onExited:e},t,n){const s=this.props,i=s.destroyOnClose,o=s.visible,l=Object(a.findDOMNode)(this.rootInstance),r=Object(a.findDOMNode)(this.popupInstance),c=Object(a.findDOMNode)(this.maskInstance);t?this.inMaskTransition=!1:this.inTransition=!1,i||(o||this.inMaskTransition||this.inTransition||!l||(l.style.display="none"),!t&&r&&(r.style.display="none"),t&&c&&(c.style.display="none")),e&&e(n)}renderPopupMask(){const e=this.props,t=e.prefixCls,n=e.visible,s=e.mask,a=e.maskProps,o=e.maskStyle,l=e.maskClassName,r=e.maskTransition,c=e.lazy,d=e.destroyOnClose,m=e.fixed,h=e.maskComponent,k=u()({[t+"-mask"]:!0,[t+"-mask-fixed"]:m},a.className,l),f=r.classNames?E.a:b.b;return i.a.createElement(f,p()({enter:!0,exit:!0,appear:!0,addEndListener:(e,t)=>null==r.timeout&&t()},r,{in:s&&n,onEnter:this.onEnter.bind(this,r,!0),onEntered:this.onEntered.bind(this,r,!0),onExit:this.onExit.bind(this,r,!0),onExited:this.onExited.bind(this,r,!0),unmountOnExit:d,mountOnEnter:c}),i.a.createElement(h,p()({},a,{ref:this.refHandlers.mask,style:Object.assign({},o,{},a.style),className:k})))}render(){const e=this.props,t=e.style,n=e.prefixCls,a=e.className,o=e.fixed,l=e.visible,r=e.children,c=e.lazy,m=e.destroyOnClose,h=e.rootClassName,f=e.rootStyle,v=e.rootProps,C=e.rootComponent,g=(e.component,e.transition),y=e.wrapContent,x=e.disableMask,O=d()(e,["style","prefixCls","className","fixed","visible","children","lazy","destroyOnClose","rootClassName","rootStyle","rootProps","rootComponent","component","transition","wrapContent","disableMask"]),N=C,I=C;delete O.mask,delete O.maskProps,delete O.maskStyle,delete O.maskClassName,delete O.maskComponent,delete O.maskTransition,delete O.getPosition,delete O.forceRender;let M=Object.assign({},v,{className:u()(h,v.className),style:Object.assign({},f,{},v.style)});N===s.Fragment&&(M={});const D=u()(n,{[n+"-fixed"]:o},a),S=g.classNames?E.a:b.b,T=i.a.createElement(N,p()({},M,{ref:this.refHandlers.root}),!x&&this.renderPopupMask(),y(i.a.createElement(S,p()({enter:!0,exit:!0,appear:!0,addEndListener:(e,t)=>null==g.timeout&&t()},g,{in:l,onEnter:this.onEnter.bind(this,g,!1),onEntered:this.onEntered.bind(this,g,!1),onExit:this.onExit.bind(this,g,!1),onExited:this.onExited.bind(this,g,!1),unmountOnExit:m,mountOnEnter:c}),e=>(this.transitionStatus=e,i.a.createElement(I,p()({},O,{ref:this.refHandlers.popup,style:t,className:D}),"function"===typeof r?r(e):r)))));return i.a.createElement(k.a.Provider,{value:null},i.a.createElement(b.b,{enter:!0,exit:!0,appear:!0,addEndListener:g.addEndListener||((e,t)=>null==g.timeout&&t()),timeout:g.timeout,in:l,unmountOnExit:m,mountOnEnter:c},()=>T))}}r()(f,"defaultProps",{prefixCls:"rw-popup",style:{},className:"",rootClassName:"",rootStyle:{},rootProps:{},visible:!1,fixed:!1,lazy:!0,forceRender:!1,transition:{},destroyOnClose:!0,disableMask:!1,mask:!1,maskStyle:{},maskProps:{},maskClassName:"",maskTransition:{},component:"div",maskComponent:"div",rootComponent:"div",wrapContent:e=>e});var v=f,C=n(6),g=n.n(C);class y extends s.Component{constructor(...e){super(...e),r()(this,"state",{visible:!1}),r()(this,"toggleClick",e=>{const t=this.state.visible;this.setState({visible:!t})})}componentDidMount(){}render(){const e=this.state.visible;return i.a.createElement("div",null,i.a.createElement("button",{onClick:this.toggleClick},e?"\u5173\u95ed":"\u663e\u793a"),i.a.createElement(v,{rootComponent:"div",rootClassName:"p-root",rootStyle:{zIndex:0,tabIndex:-1},rootProps:{"data-x":"1"},visible:e,transition:{timeout:500,onEnter:e=>{g()(e).hide(),g()(e).stop().fadeIn(500)},onExit:e=>{g()(e).stop().fadeOut(500)}},getPosition:e=>(console.log(e),{left:"50%",top:50})},i.a.createElement("div",{className:"dialog"},"center...")))}}class x extends s.Component{constructor(...e){super(...e),r()(this,"state",{visible:!0,mask:!0}),r()(this,"toggleClick",e=>{const t=this.state.visible;this.setState({visible:!t})}),r()(this,"toggleClick2",e=>{const t=this.state.mask;this.setState({mask:!t})}),r()(this,"refButton",e=>{this._defer.resolve({of:e,my:"left top",at:"left bottom"})}),r()(this,"refButton2",e=>{this._defer2.resolve({of:e,my:"left center",at:"right center"})})}render(){const e=this.state,t=e.visible,n=e.mask;return i.a.createElement(s.Fragment,null,i.a.createElement("div",null,i.a.createElement("button",{onClick:this.toggleClick},t?"\u5173\u95ed":"\u663e\u793a"),i.a.createElement("button",{onClick:this.toggleClick2},n?"\u5173\u95ed\u906e\u7f69\u5c42":"\u663e\u793a\u906e\u7f69\u5c42")),i.a.createElement("div",{style:{height:"calc(100% - 30px)",position:"relative",border:"1px solid #000"}},i.a.createElement(v,{visible:t,mask:n,style:{left:"50%",top:10,background:"#ff5454",color:"#FFF",padding:10},transition:{timeout:500,onEnter:e=>{g()(e).hide(),g()(e).stop().fadeIn(500)},onExit:e=>{g()(e).stop().fadeOut(500)}},maskTransition:{timeout:500,onEnter:e=>{g()(e).hide(),g()(e).stop().fadeIn(500)},onExit:e=>{g()(e).stop().fadeOut(500)}}},i.a.createElement("div",null,"center2..."))))}}let O=1;function N(){return console.log("1"),i.a.createElement("a",null,"Test a",O++)}const I={appear:"animated",appearActive:"fadeBottomIn",appearDone:"done",enter:"animated",enterActive:"fadeBottomIn",enterDone:"done",exit:"animated",exitActive:"fadeBottomOut",exitDone:"done"},M={appear:"animated",appearActive:"fadeIn",appearDone:"done",enter:"animated",enterActive:"fadeIn",enterDone:"done",exit:"animated",exitActive:"fadeOut",exitDone:"done"};class D extends s.Component{constructor(...e){super(...e),r()(this,"state",{visible:!0,mask:!0}),r()(this,"toggleClick",e=>{const t=this.state.visible;this.setState({visible:!t})}),r()(this,"toggleClick2",e=>{const t=this.state.mask;this.setState({mask:!t})})}render(){const e=this.state,t=e.visible,n=e.mask;return i.a.createElement(s.Fragment,null,i.a.createElement("div",null,i.a.createElement("button",{onClick:this.toggleClick},t?"\u5173\u95ed":"\u663e\u793a"),i.a.createElement("button",{onClick:this.toggleClick2},n?"\u5173\u95ed\u906e\u7f69\u5c42":"\u663e\u793a\u906e\u7f69\u5c42"),i.a.createElement("button",{onClick:()=>this.forceUpdate()},"refresh")),i.a.createElement("div",{style:{height:"calc(100% - 30px)",position:"relative",border:"1px solid #000"}},i.a.createElement(v,{visible:t,mask:n,destroyOnClose:!1,style:{left:10,top:10,background:"#ff5454",color:"#FFF",padding:10},transition:{timeout:500,classNames:I},maskTransition:{timeout:500,classNames:M}},i.a.createElement("div",null,i.a.createElement(N,null)))))}}const S={appear:"animated",appearActive:"fadeBottomIn",appearDone:"done",enter:"animated",enterActive:"fadeBottomIn",enterDone:"done",exit:"animated",exitActive:"fadeBottomOut",exitDone:"done"},T={appear:"animated",appearActive:"fadeIn",appearDone:"done",enter:"animated",enterActive:"fadeIn",exit:"animated",exitActive:"fadeOut"};class F extends s.Component{constructor(...e){super(...e),r()(this,"state",{visible:!0,mask:!1,disableMask:!1}),r()(this,"toggleClick",e=>{const t=this.state.visible;this.setState({visible:!t})}),r()(this,"toggleClick2",e=>{const t=this.state.mask;this.setState({mask:!t})}),r()(this,"toggleClick3",e=>{const t=this.state.disableMask;this.setState({disableMask:!t})})}render(){const e=this.state,t=e.visible,n=e.mask,a=e.disableMask;return console.log(n,"render"),i.a.createElement(s.Fragment,null,i.a.createElement("div",null,i.a.createElement("button",{onClick:this.toggleClick},t?"\u5173\u95ed":"\u663e\u793a"),i.a.createElement("button",{onClick:this.toggleClick2},n?"\u5173\u95ed\u906e\u7f69\u5c42":"\u663e\u793a\u906e\u7f69\u5c42"),i.a.createElement("button",{onClick:this.toggleClick3},a?"\u542f\u7528\u906e\u7f69\u5c42":"\u7981\u7528\u906e\u7f69\u5c42"),i.a.createElement("button",{onClick:()=>this.forceUpdate()},"refresh")),i.a.createElement("div",{style:{height:"calc(100% - 30px)",position:"relative",border:"1px solid #000"}},i.a.createElement(v,{disableMask:a,visible:t,mask:n,lazy:!1,destroyOnClose:!0,style:{background:"#ff5454",color:"#FFF",padding:10},transition:{timeout:500,classNames:S},maskTransition:{timeout:500,classNames:T},maskProps:{onClick:()=>{this.toggleClick2()}},destroyOnClose:!1,fixed:!0},i.a.createElement("div",null,"fixed test"))))}}class P extends s.Component{constructor(...e){super(...e),r()(this,"state",{visible:!0,mask:!0}),r()(this,"toggleClick",e=>{const t=this.state.visible;this.setState({visible:!t})}),r()(this,"toggleClick2",e=>{const t=this.state.mask;this.setState({mask:!t})})}render(){const e=this.state,t=e.visible,n=e.mask;return i.a.createElement(s.Fragment,null,i.a.createElement("div",null,i.a.createElement("button",{onClick:this.toggleClick},t?"\u5173\u95ed":"\u663e\u793a"),i.a.createElement("button",{onClick:this.toggleClick2},n?"\u5173\u95ed\u906e\u7f69\u5c42":"\u663e\u793a\u906e\u7f69\u5c42"),i.a.createElement("button",{onClick:()=>this.forceUpdate()},"refresh")),i.a.createElement("div",{style:{height:"calc(100% - 30px)",position:"relative",border:"1px solid #000"}},i.a.createElement(v,{visible:t,mask:n,destroyOnClose:!0,style:{background:"#ff5454",color:"#FFF",padding:10},maskProps:{onClick:()=>{this.toggleClick2()}}},i.a.createElement("div",null,"fixed test"))))}}var j=[{label:"\u57fa\u672c\u529f\u80fd",component:y},{label:"\u906e\u7f69\u5c42",component:x},{label:"\u4f7f\u7528CSS\u52a8\u753b",component:D},{label:"fixed",component:F},{label:"\u65e0\u52a8\u753b",component:P}];class A extends s.Component{constructor(...e){super(...e),r()(this,"state",{current:j[0]})}onDemoChange(e,t){this.setState({current:e})}render(){const e=this.state.current;return i.a.createElement("div",{className:"container"},i.a.createElement("div",{className:"slider"},j.map((t,n)=>i.a.createElement("div",{key:n,className:e===t?"active":"",onClick:this.onDemoChange.bind(this,t)},t.label))),i.a.createElement("div",{className:"content"},e?i.a.createElement(e.component,null):null))}}o.a.render(i.a.createElement(A,null),document.getElementById("demo"))},74:function(e,t,n){n(75),e.exports=n(125)}},[[74,1,2]]]); \ No newline at end of file diff --git a/package.json b/package.json index 49caee7..653834d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-widget-popup", - "version": "3.4.1", + "version": "3.4.2", "description": "", "main": "cjs/index.js", "module": "esm/index.js", diff --git a/src/index.tsx b/src/index.tsx index b2ede27..b4d8da6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -167,6 +167,30 @@ export class Popup extends React.Component { } } + onEntered({ onEntered }, isMask: boolean, node: HTMLElement, appearing: boolean) { + if (isMask) { + this.inMaskTransition = false; + } else { + this.inTransition = false; + } + + if (onEntered) { + onEntered(node, appearing); + } + } + + onExit({ onExit }: CSSTransitionProps, isMask: boolean, node: HTMLElement) { + if (isMask) { + this.inMaskTransition = true; + } else { + this.inTransition = true; + } + + if (onExit) { + onExit(node); + } + } + onExited({ onExited }: CSSTransitionProps, isMask: boolean, node: HTMLElement) { const { destroyOnClose, visible } = this.props; const rootElement = findDOMNode(this.rootInstance) as HTMLElement; @@ -233,6 +257,8 @@ export class Popup extends React.Component { {...maskTransition} in={mask && visible} onEnter={this.onEnter.bind(this, maskTransition, true)} + onEntered={this.onEntered.bind(this, maskTransition, true)} + onExit={this.onExit.bind(this, maskTransition, true)} onExited={this.onExited.bind(this, maskTransition, true)} unmountOnExit={destroyOnClose} mountOnEnter={lazy} @@ -318,6 +344,8 @@ export class Popup extends React.Component { {...transition} in={visible} onEnter={this.onEnter.bind(this, transition, false)} + onEntered={this.onEntered.bind(this, transition, false)} + onExit={this.onExit.bind(this, transition, false)} onExited={this.onExited.bind(this, transition, false)} unmountOnExit={destroyOnClose} mountOnEnter={lazy}