add new code

project/src/components/pop/PopDefault/PopDefault.jsx

@@ -3,17 +3,23 @@
 import React, { Component } from 'react';
 import resList from '../../../resconfig/resList';
 
+import { Aup } from '../../../pop'
+
 import './PopDefault.less';
 class PopDefault extends Component {
   constructor(props) {
     super(props);
     this.state = this.state || {
-      resList: resList
+      resList: resList,
+      data: this.props.data
     };
+    this.ref = React.createRef()
   }
 
-  doCallBack = () => {
-    this.props.fn()
+  doCallBack = async () => {
+    // this.props.fn()
+    let arr = await Aup.getArr()
+    console.log(arr)
   }
 
   render() {
@@ -31,4 +37,5 @@ class PopDefault extends Component {
     );
   }
 }
+
 export default PopDefault;

project/src/pages/PageHome/PageHome.jsx

@@ -67,6 +67,7 @@ class PageHome extends Component {
       <div className="home">
         <div className="home_title">pageHome</div>
         <div className="home_button_group">
+  
           <div onClick={ debounce(this.openDefault, 300, 1) } className="home_button">open pop default</div>
           <div onClick={ debounce(this.openRule, 300, 1) } className="home_button">open pop rule</div>
           <div onClick={ debounce(this.openInput, 300, 1) } className="home_button">open pop input</div>

project/src/pop/AUPopMobx/AUPopMobx.jsx

@@ -4,7 +4,7 @@ import popMap from '../PopMap.js'
 import { observer } from 'mobx-react-lite'
 import { toJS } from "mobx";
 import { Aup } from "../index.js"
-import { ConsoleStyleComponents } from '../api/tools.js';
+import { ConsoleStyleComponents, ConsoleStyleFlagColor } from '../api/tools.js';
 
 import './AUPopMobx.less'
 
@@ -12,14 +12,14 @@ class AUPopMobx extends Component {
   constructor (props) {
     super(props)
     this.state = this.state || {
-      popArr: [],
-      closeFlag: false
+      popArr: []
     }
     this.auPopRef = React.createRef()
+    this.closeFlagRef = React.createRef()
   }
 
   static getDerivedStateFromProps(nextProprs, preState) {
-    console.log(`%c AUPopMobx nextProprs is: \n`, ConsoleStyleComponents, toJS(nextProprs.popArr))
+    console.log(`%c AUPopMobx nextProprs is: \n`, ConsoleStyleComponents, nextProprs)
     if (nextProprs.popArr.length === 0) {
       allowScroll()
     } else if (nextProprs.popArr.length && preState.length == 0) {
@@ -31,35 +31,41 @@ class AUPopMobx extends Component {
   }
 
   closePop = (index) => {
-    if (this.state.popArr.length == 1) {
+  
+    // TODO: not complete
+    // TODO: inject some animation function in there:
+
+    if (!this.state.popArr.length) return
+
+    else if (this.state.popArr.length == 1) {
       if (this.auPopRef.current) {
         this.auPopRef.current.style.transition = `opacity 350ms`
         this.auPopRef.current.style.opacity = '0'
-        this.setState({closeFlag: true})
+        this.closeFlagRef.current && (this.closeFlagRef.current.style.display = 'block')
         setTimeout(() => {
-          // this.props.showPop({type: 0})
           Aup.close()
-          this.setState({closeFlag: false})
+          this.closeFlagRef.current && (this.closeFlagRef.current.style.display = 'none')
         }, 400);
       } else {
-        // this.props.showPop({type: 0})
         Aup.close()
-        this.setState({closeFlag: false})
+        this.closeFlagRef.current.style.display = 'none'
       }
     }
-    else {
-      console.log(this.state.popArr)
-      this.setState({closeFlag: true})
+
+    else if (this.state.popArr.length > 1) {
+      this.closeFlagRef.current && (this.closeFlagRef.current.style.display = 'block')
       setTimeout(() => {
-        // this.props.showPop({type: 0})
         Aup.close()
-        this.setState({closeFlag: false})
+        this.closeFlagRef.current && (this.closeFlagRef.current.style.display = 'none')
       }, 400);
     }
+
   }
 
   render() {
-    const { popArr, closeFlag } = this.state
+    console.log('%c ----------------- AUtest - RENDER RUN FLAG ----------------- ----------------- ----------------- -----------------', ConsoleStyleFlagColor)
+
+    const { popArr } = this.state
     let Pop = []
     popArr.forEach((item, index) => {
       const { showPop, popData, fn, ctx } = item
@@ -77,7 +83,7 @@ class AUPopMobx extends Component {
         <div className='compop_mask'></div>
 
         {/* 关闭-禁止点击 */}
-        { closeFlag ? <div className='compop_transparent'></div> : null }
+        <div ref={this.closeFlagRef} className='compop_transparent'></div>
 
         {Pop.map((It, index) => {
           return (

project/src/pop/AUPopMobx/AUPopMobx.less

@@ -25,6 +25,7 @@
     left: 0;
     z-index: 9;
     touch-action: none;
+    display: none;
   }
 }
 

project/src/pop/AUState.js

@@ -18,16 +18,18 @@ class PopState {
       popArr: observable,
       addPop: action.bound,
       changePop: action.bound,
-      computedPopArr: computed
+      popArrLength: computed
     })
   }
 
+  // 添加一个弹窗
   addPop = (data) => {
     this.nowShow = data.type
     this.popArr.push(data)
     // console.log(`${CONSO_START_mark}\n addPop:`, ConsoleStyleTitle, toJS(this.popArr))
   }
 
+  // 改变数组中的第一个弹窗
   changePop = (data) => {
     this.nowShow = data.type
     this.popArr.push(data)
@@ -35,15 +37,20 @@ class PopState {
     // this.popArr = [data]
   }
 
+  // 删除弹窗
   delePop = (long) => {
     this.popArr.splice(this.popArr.length - long, long)
     if (this.popArr.length) this.nowShow = this.popArr[this.popArr.length - 1].type
   }
 
+  // 清空 弹窗
+  clearPop = () => {
+    this.popArr = []
+  }
 
-
-  get computedPopArr () {
-    console.log(`${CONSO_START_mark}\n this.popArr:`, ConsoleStyleTitle, toJS(this.popArr))
+  get popArrLength () {
+    // console.log(`${CONSO_START_mark}\n this.popArr:`, ConsoleStyleTitle, toJS(this.popArr))
+    return this.popArr.length
   }
 }
 
@@ -52,12 +59,12 @@ export const AUP_MBX_STATE = new PopState('init')
 autorun(() => {
   let tempLastComPop = toJS(AUP_MBX_STATE.popArr)
   let last = tempLastComPop.length ? tempLastComPop[tempLastComPop.length - 1] : undefined
-  console.log(`${CONSO_START_mark}\n AUTORUN::: the last Pop of AUP_MBX_STATE.popArr:`, ConsoleStyleTitle, last)
+  console.log(`${CONSO_START_mark}\n AUTORUN::: the last Pop`, ConsoleStyleTitle, last)
   return last
 })
 
 
-// ready for mobx can't use
+// ready code for mobx can't use
 
 // author: 沈阳楠
 

project/src/pop/api/clear.js

@@ -6,5 +6,8 @@ import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
  * 清空页面弹窗
  */
 export const clear = () => {
-
+  if (AUP_MBX_STATE.popArrLength === 0) return
+  else AUP_MBX_STATE.clearPop()
 }
+
+

project/src/pop/api/close.js

@@ -7,6 +7,16 @@ import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
  * @param {Number} length 关闭的数量
  */
 export const close = (length = 1) => {
+  if (AUP_MBX_STATE.popArrLength === 0) {
+    console.warn(`弹窗数组无储存的弹窗, \n 勿重复调用 close()`)
+    return
+  }
+  else if (AUP_MBX_STATE.popArrLength >= length) {
     AUP_MBX_STATE.delePop(length)
+  }
+  else {
+    console.warn(`传入的关闭弹窗数量 ${length}，大于弹窗数组所储存的数量 ${AUP_MBX_STATE.popArrLength}, \n 执行清空操作`)
+    AUP_MBX_STATE.clearPop()
+  }
 }
 

project/src/pop/api/cover.js

@@ -19,7 +19,7 @@ export const cover = (type, data = {}, option = null) => {
   // console.log(`${CONSO_START_mark}\n AupopShow data is:`, ConsoleStyleTitle, data)
 
   // 覆盖弹窗
-  if (type && AUP_MBX_STATE.popArr.length && (option && option.cover)) AUP_MBX_STATE.addPop(pData)
+  if (type && AUP_MBX_STATE.popArrLength) AUP_MBX_STATE.addPop(pData)
 
   // 出现弹窗 - ps: 首个弹窗
   else AUP_MBX_STATE.addPop(pData)

project/src/pop/api/getArr.js

@@ -6,7 +6,23 @@ import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
  * 获取弹窗数组
  */
 export const getArr = () => {
-  return []
+  return new Promise((resolve, reject) => {
+    let popArrTmp = deepCopy(AUP_MBX_STATE.popArr)
+    resolve(popArrTmp)
+  })
+}
+function deepCopy(source){
+  if (typeof source != "object") {
+    return source
+  }
+  if (source == null) {
+    return source
+  }
+  var newObj = source.constructor === Array ? [] : {}  //开辟一块新的内存空间
+  for (var i in source) {
+    newObj[i] = deepCopy(source[i])
+  }
+  return newObj
 }
 
 // IntersectionObserver
\ No newline at end of file

project/src/pop/api/index.js

 export { show } from './show'
+export { cover } from './cover'
 export { close } from './close'
 export { clear } from './clear'
 export { getArr } from './getArr'
\ No newline at end of file

project/src/pop/api/show.js

@@ -19,10 +19,10 @@ export const show = (type, data = {}, ctx, fn) => {
   // console.log(`${CONSO_START_mark}\n AupopShow data is:`, ConsoleStyleTitle, data)
 
   // 添加弹窗 没有弹窗
-  if (type && !AUP_MBX_STATE.popArr.length) AUP_MBX_STATE.addPop(pData)
+  if (type && !AUP_MBX_STATE.popArrLength) AUP_MBX_STATE.addPop(pData)
 
   // 替换弹窗
-  else if (type && AUP_MBX_STATE.popArr.length) AUP_MBX_STATE.changePop(pData)
+  else if (type && AUP_MBX_STATE.popArrLength) AUP_MBX_STATE.changePop(pData)
 
 }
 

project/src/pop/api/tools.js

@@ -29,6 +29,11 @@ export const ConsoleStyleComponents = [
   'font-weight: 400'
 ].join(';')
 
+export const ConsoleStyleFlagColor = [
+  'color: #fda300',
+  'font-size: 6px',
+  'font-weight: 900'
+].join(';')