pixuireactcomponents 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixuireactcomponents",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "pixui react components",
   "main": "index.js",
   "scripts": {

package/ui/components/slapface/Slapface.tsx

@@ -133,6 +133,10 @@ export class Slapface extends Component<any, any>
     constructor(props) {
         super(props)
         this.LoadGroup = this.props.LoadGroup;
+        for(let i = 0;i<this.LoadGroup.length;i++)
+        {
+            this.LoadGroup[i].isLoadDone = false;
+        }
         this.jumpButton = this.props.jumpButton? this.props.jumpButton : jumpButton
         this.settingsitems = this.props.settingsitems? this.props.settingsitems : settingsitems
         this.btn_closeButton = this.props.btn_closeButton? this.props.btn_closeButton : ''
@@ -150,9 +154,7 @@ export class Slapface extends Component<any, any>
         }
 
         return (
-            <div className={SlapfaceLess.maininterface} style ={{display:this.actDisplay}}>
-                <div style={{ flexDirection: 'row', flexWrap: 'nowrap' }}>
-                </div>
+            <div style ={{display:this.actDisplay,width:"100%",height:"100%"}}>
                 <div style={{ width: '100%', height: '100%', backgroundColor: "rgba(0,0,0,0.5)" }}>
                     {<Group  {...slapfaceinfo} closeAct = {this.closeAct}/>}
                 </div>
@@ -198,9 +200,10 @@ class Group extends Component<any, any>
         //     setTimeout(()=>{this.picBack.style.display = 'flex';
         //     this.closeClick()},300)
         // }
+        this.loadDisplay = "hidden"
         if(this.firstFrameDisplay == "none"){
             setTimeout(()=>{this.firstFrameDisplay = 'flex';
-            this.closeClick()},0)
+            this.closeClick()},300)
         }
     }
 
@@ -217,10 +220,9 @@ class Group extends Component<any, any>
     closeClick(e?: Event) {
         e?.stopPropagation()
         let nextIndex = this.groupIndexList.CheckReady();
-
         // setTimeout(() => {
         //     this.loadDisplay = "visible"
-        // }, 1);
+        // }, 50);
         this.loadDisplay = "visible"
         this.elseDisplay = "hidden"
         if (nextIndex != -1) {
@@ -243,16 +245,14 @@ class Group extends Component<any, any>
             )
         }
 
-        return (<div  ref={(div)=>{this.picBack = div}} style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', position: 'absolute'}} onAnimationEnd={() => {setTimeout(()=>{this.picBack.className = SlapfaceLess.groupBackReverse},10)}}>
+        return (<div style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', position: 'absolute'}}>
             <div onClick={() => { if (this.props.settingsitems.is_mask == false) return; this.closeClick() }} style={{ position: "absolute", width: "100%", height: "100%" }}></div>
-            <div >
-                <img src = {this.groupArr[this.state.curIndex].picture} style ={{visibility:this.elseDisplay,width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height}} onLoad = {()=>{let curIndex = this.state.curIndex;if(!this.groupArr[curIndex].isLoadDone) {this.groupArr[curIndex].isLoadDone = true; this.loadDisplay = "hidden";this.elseDisplay = "visible";this.forceUpdate()}}}></img>
-                <div ref={(div)=>{this.loadPic = div}} className={SlapfaceLess.loading_anim}  style ={{backgroundImage: `url(${this.props.pic_loading})`,width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height,position:"absolute",visibility : this.loadDisplay}}> </div>
-                <div style={{width: '100%', height: '100%',visibility:this.firstFrameDisplay}}>
-                    <CloseButton btn_closeButton = {this.props.btn_closeButton} elseDisplay = {this.elseDisplay} onClick={(e: Event) => { this.closeClick(e);this.loadDisplay = "hidden" }} />
-                    <JumpButton elseDisplay = {this.elseDisplay} jumpButton = {this.props.jumpButton}/>
-                </div>
+            <div ref={(div)=>{this.picBack = div}} onAnimationEnd={() => {setTimeout(()=>{this.picBack.className = SlapfaceLess.groupBackReverse},0)}}>
+                <img src = {this.groupArr[this.state.curIndex].picture} style ={{visibility:this.elseDisplay,width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height}} onLoad = {()=>{let curIndex = this.state.curIndex;if(!this.groupArr[curIndex].isLoadDone) {this.groupArr[curIndex].isLoadDone = true;this.loadDisplay = "hidden";this.elseDisplay = "visible";this.forceUpdate()}}}></img>
+                <CloseButton firstFrameDisplay = {this.firstFrameDisplay} btn_closeButton = {this.props.btn_closeButton} elseDisplay = {this.elseDisplay} onClick={(e: Event) => { this.closeClick(e);}} />
+                <JumpButton firstFrameDisplay = {this.firstFrameDisplay} elseDisplay = {this.elseDisplay} jumpButton = {this.props.jumpButton}/>
             </div>
+            <div ref={(div)=>{this.loadPic = div}} className={SlapfaceLess.loading_anim}  style ={{backgroundImage: `url(${this.props.pic_loading})`,width:"300px", height: "300px",position:"absolute",visibility : this.loadDisplay}}> </div>
         </div>);
     }
 
@@ -262,7 +262,7 @@ class CloseButton extends Component<any, any>
 {
     render() {
         return (
-            <button className={SlapfaceLess.closeButton} style={{ visibility : this.props.elseDisplay,backgroundSize:"contain",backgroundImage: `url(${this.props.btn_closeButton})` }} onClick={this.props.onClick}></button>
+            <button className={SlapfaceLess.closeButton} style={{display:this.props.firstFrameDisplay,visibility : this.props.elseDisplay,backgroundSize:"contain",backgroundImage: `url(${this.props.btn_closeButton})` }} onClick={this.props.onClick}></button>
         )
     }
 }
@@ -272,8 +272,8 @@ class JumpButton extends Component<any, any>
     private jumpbtnImg
     render() {
         return (
-            <div className= {SlapfaceLess.jumpButton} style ={{visibility : this.props.elseDisplay}}
-                onMouseDown={() => {(this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_yaxia;console.log("yaxia") }}
+            <div className= {SlapfaceLess.jumpButton} style ={{display:this.props.firstFrameDisplay,visibility : this.props.elseDisplay}}
+                onMouseDown={() => {(this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_yaxia;}}
                 onMouseUp={() => { (this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_xuanfu }}
                 onMouseOver={() => { (this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_xuanfu; }}
                 onMouseOut={() => { (this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_changtai; }}>

package/ui/sample/Slapface/SlapfaceDemo.tsx

@@ -15,14 +15,14 @@ let jumpButton = {
 
 let btn_closeButton = Images.btn_close
 
-let groupArr = [{ picture: "https://cdn.pixabay.com/photo/2021/03/22/01/55/burger-6113497_1280.jpg", isLoadDone: false, width: 632, height: 639 }, { picture: "https://cdn.pixabay.com/photo/2023/03/07/13/18/fruit-7835730_1280.jpg", isLoadDone: false, width: 304, height: 331 },
-{ picture: "https://cdn.pixabay.com/photo/2023/03/08/20/52/architecture-7838713_1280.jpg", isLoadDone: false, width: 662, height: 631 }, { picture: "https://cdn.pixabay.com/photo/2023/02/12/13/34/bird-7785106_1280.jpg", isLoadDone: false, width: 728, height: 651 },
-{ picture: "https://cdn.pixabay.com/photo/2023/03/06/15/45/coffee-7833769_1280.jpg", isLoadDone: false, width: 630, height: 579 }, { picture: "https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_1280.jpg", isLoadDone: false, width: 703, height: 621 }];
+let groupArr = [{ picture: Images.slapface_samplepic1, width: 632, height: 639 }, { picture: Images.slapface_samplepic2, width: 304, height: 331 },
+{ picture: Images.slapface_samplepic3, width: 662, height: 631 }, { picture: Images.slapface_samplepic4, width: 728, height: 651 },
+{ picture: Images.slapface_samplepic5, width: 630, height: 579 }, { picture: Images.slapface_samplepic6, width: 703, height: 621 }];
 
 export class SlapfaceDemo extends Component<any, any>{
     render() {
         return (
-            <div>
+            <div style={{position:"relative",width:"100%",height:"100%"}}>
                 <Slapface LoadGroup={groupArr} jumpButton={jumpButton} settingsitems={settingsitems}  pic_loading={Images.loading} btn_closeButton = {Images.btn_close}/>
             </div>
         )