add new code to 2.0

project/public/index.html

@@ -5,39 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     
-    <title>React App</title>
-    <script>
-      !(function(e, i) {
-        var t = e.documentElement,
-          n = navigator.userAgent.match(/iphone|ipod|ipad/gi),
-          a = n ? Math.min(i.devicePixelRatio, 3) : 1,
-          m = 'orientationchange' in window ? 'orientationchange' : 'resize';
-        t.dataset.dpr = a;
-        for (
-          var d, l, c = !1, o = e.getElementsByTagName('meta'), r = 0;
-          r < o.length;
-          r++
-        )
-          (l = o[r]), 'viewport' == l.name && ((c = !0), (d = l));
-        if (c)
-          d.content =
-            'width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no';
-        else {
-          var o = e.createElement('meta');
-          (o.name = 'viewport'),
-            (o.content =
-              'width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no'),
-            t.firstElementChild.appendChild(o);
-        }
-        var s = function() {
-          var e = t.clientWidth;
-          e / a > 750 && (e = 750 * a),
-            (window.remScale = e / 750),
-            (t.style.fontSize = 200 * (e / 750) + 'px');
-        };
-        s(), e.addEventListener && i.addEventListener(m, s, !1);
-      })(document, window);
-    </script>
+    <title>AUPop for test</title>
+    <script src="//yun.duiba.com.cn/js-libs/rem/1.1.0/rem.min.js"></script>
     <script src="//yun.duiba.com.cn/h5/lib/zepto.min.js"></script>
      <script>
       function getApp(){

project/src/app.jsx

@@ -6,13 +6,13 @@ import store from './redux/store' // Redux --> store
 import { Provider } from 'react-redux' // Redux --> Provider
 // import AUPop from "./components/AUPop/AUPop.jsx" // Redux --> AUPop
 
-import { AUPopState } from './pop/AUState.js' // Mobx --> AUState
-import AUPop from "./pop/AUPopMobx/AUPopMobx.jsx" // Mobx --> AUPop
+import { AUP_MBX_STATE, AUPOP } from "./pop"  // Mobx --> AUP_MBX_STATE & AUPOP
 
 //此处为spark-cli动态生成
 import PageHome from "./pages/PageHome/PageHome.jsx";
 class App extends Component {
-  // use redux type
+
+  // USE REDUX TYPE
   // render() {
     // return (
     //   <Provider store={store}>
@@ -26,14 +26,14 @@ class App extends Component {
     // );
   // }
 
-  // pure type
+  // PURE TYPE
   render() {
     return(
       <>
         {/* 页面 */}
         <PageHome />
         {/* 弹窗 */}
-        <AUPop AUPopState={AUPopState} />
+        <AUPOP AUPopState={AUP_MBX_STATE} />
       </>
     )
   }

project/src/pages/PageHome/PageHome.jsx

@@ -5,7 +5,7 @@ import { Random } from 'mockjs';
 import { AUConnect } from '../../redux/auConnect';
 import { debounce } from '../../utils/debounce';
 
-import { Aup } from '../../pop' // Mobx --> AUState
+import { Aup } from '../../pop' // Mobx --> Aup is api
 
 import './PageHome.less';
 
@@ -18,29 +18,26 @@ class PageHome extends Component {
   }
 
   openDefault = () => {
-    this.props.showPop({
-      type: 'PopDefault',
-      fn: () => {
-        console.log('simple callback, param "fn" ')
-      }
-    })
+    // AUPOP 1.0
+    // this.props.showPop({
+    //   type: 'PopDefault',
+    //   data: 
+    //   fn: () => {
+    //     console.log('simple callback, param "fn" ')
+    //   },
+    //   ctx: this
+    // })
+
+    // AUPOP 2.0
+    Aup.show('PopDefault')
   }
 
   openRule = () => {
-    this.props.showPop({
-      type: 'PopRule',
-      data: {
-        ruler: this.state.ruleData
-      }
-    })
+    
   }
 
   openInput = () => {
-    this.props.showPop({
-      type: 'PopInput',
-      data: {},
-      ctx: this
-    })
+    
   }
 
   parentConsoleFunction = (data) => {
@@ -48,26 +45,17 @@ class PageHome extends Component {
   }
 
   openRotate = () => {
-    this.props.showPop({
-      type: 'PopRotate',
-      ctx: this
-    })
+
   }
 
   openInfinite = () => {
-    this.props.showPop({
-      type: 'PopInfiniteA',
-      ctx: this
-    })
+
   }
 
   nowShow = 'aupro - test'
 
   mobxAction01 = () => {
-    // AUPOP.testSet(1)
-    // AUPOP.fetchOption()
-    // AUPOP.reactiontestFunc()
-    Aup.AupopShow('PopRotate')
+    Aup.show('PopRotate')
   }
 
   openColorful = () => {

project/src/pop/AUPopMobx/AUPopMobx.jsx

 import React, { Component } from 'react';
-import SvgaShine from '../../components/pop/SvgaShine/SvgaShine.jsx' // svga - components
-import { AUPopState, popWatcher } from '../../pop/AUState.js' // Mobx --> AUState
 
 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 './AUPopMobx.less'
 
@@ -19,17 +19,15 @@ class AUPopMobx extends Component {
   }
 
   static getDerivedStateFromProps(nextProprs, preState) {
-    console.log(nextProprs)
-    return true
-    // if (nextProprs) {
-    //   console.log(nextProprs.target)
-    //   console.log(nextProprs.handler)
-    //   console.log(nextProprs.p)
-    //   return {
-    //     popArr: nextProprs.popArr
-    //   }
-    // }
-    // else return false
+    console.log(`%c AUPopMobx nextProprs is: \n`, ConsoleStyleComponents, toJS(nextProprs.popArr))
+    if (nextProprs.popArr.length === 0) {
+      allowScroll()
+    } else if (nextProprs.popArr.length && preState.length == 0) {
+      disableScroll()
+    }
+    return {
+      popArr: nextProprs.popArr
+    }
   }
 
   closePop = (index) => {
@@ -39,11 +37,13 @@ class AUPopMobx extends Component {
         this.auPopRef.current.style.opacity = '0'
         this.setState({closeFlag: true})
         setTimeout(() => {
-          this.props.showPop({type: 0})
+          // this.props.showPop({type: 0})
+          Aup.close()
           this.setState({closeFlag: false})
         }, 400);
       } else {
-        this.props.showPop({type: 0})
+        // this.props.showPop({type: 0})
+        Aup.close()
         this.setState({closeFlag: false})
       }
     }
@@ -51,7 +51,8 @@ class AUPopMobx extends Component {
       console.log(this.state.popArr)
       this.setState({closeFlag: true})
       setTimeout(() => {
-        this.props.showPop({type: 0})
+        // this.props.showPop({type: 0})
+        Aup.close()
         this.setState({closeFlag: false})
       }, 400);
     }
@@ -64,7 +65,6 @@ class AUPopMobx extends Component {
       const { showPop, popData, fn, ctx } = item
       let PItem = popMap.get(showPop)
       Pop.push(
-        // <SvgaShine show={showPop === 'PopLightCard' ? true : false}/>
         <div className={showPop === 'PopLightCard' ? 'compop_content comPop_zoom_from0' : 'compop_content comPop_zoom'}>
           <PItem onClose={this.closePop} data={popData} fn={fn} ctx={ctx} type='spot'/>
         </div>
@@ -97,11 +97,46 @@ class AUPopMobx extends Component {
   }
 }
 
-// export default observer(({ AUPopState }) => <AUPopMobx AUPopState={AUPopState} /> )
-export default observer(({ AUPopState }) => {
+export const AUPOP = observer(({ AUPopState }) => {
   console.log(AUPopState)
-  return (
-    <AUPopMobx pop={toJS(AUPopState.popArr)}/>
-    // <span>Seconds passed: {AUPopState.nowShow}</span>
-  )
+  return <AUPopMobx popArr={toJS(AUPopState.popArr)}/>
 })
+
+const debounce = (fn, wait, immediate = false) => {
+  let timer
+  return function () {
+    if (timer) clearTimeout(timer)
+    if (immediate) {
+      // 如果已经执行过，不再执行
+      var callNow = !timer
+      timer = setTimeout(() => {
+        timer = null
+      }, wait)
+      if (callNow) {
+        fn()
+      }
+    } else {
+      timer = setTimeout(() => {
+        fn()
+      }, wait)
+    }
+  }
+}
+
+let top = 0
+const disableScroll = debounce(() => {
+  var top_ = window.scrollY;
+  // console.log('ScrollScroll disableScroll', top_)
+  document.body.style.position = "fixed";
+  document.body.style.overflow = "hidden";
+  top = top_
+  document.body.style.top = -top + "px";
+}, 300, 1)
+
+const allowScroll = debounce(() => {
+  // console.log('ScrollScroll allowScroll', top)
+  document.body.style.top = "0px";
+  document.body.style.position = "relative";
+  document.body.style.overflow = "auto";
+  window.scrollTo(0, top);
+}, 300, 1)

project/src/pop/AUState.js

 'use strict';
-import { makeAutoObservable, observable, computed, action, runInAction, autorun, reaction, configure } from 'mobx'
+import { makeAutoObservable, observable, computed, action, runInAction, autorun, reaction, configure, toJS } from 'mobx'
 import { CONSO_START_mark, ConsoleStyleTitle, ConsoFunc } from './api/tools'
 // configure({
 //   useProxies: "never"
 // })
 
-export class PopState {
+class PopState {
   nowShow
   popArr
-  aaa
 
   constructor() {
     this.popArr = []
-    this.nowShow = 0
-    this.aaa = arguments[0]
+    this.nowShow = arguments[0]
     // makeAutoObservable(this)
     makeAutoObservable(this, {
       nowShow: observable,
@@ -25,27 +23,37 @@ export class PopState {
   }
 
   addPop = (data) => {
-    console.log(`${CONSO_START_mark}\n addPop:`, ConsoleStyleTitle, data)
-    this.nowShow += 1
+    this.nowShow = data.type
     this.popArr.push(data)
+    // console.log(`${CONSO_START_mark}\n addPop:`, ConsoleStyleTitle, toJS(this.popArr))
   }
 
   changePop = (data) => {
-    console.log(`${CONSO_START_mark}\n changePop:`, ConsoleStyleTitle, this.popArr)
-    this.nowShow += 1
+    this.nowShow = data.type
+    this.popArr.push(data)
+    // console.log(`${CONSO_START_mark}\n changePop:`, ConsoleStyleTitle, toJS(this.popArr))
     // 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
+  }
+
+
+
   get computedPopArr () {
-    console.log(`${CONSO_START_mark}\n this.popArr:`, ConsoleStyleTitle, this.popArr)
+    console.log(`${CONSO_START_mark}\n this.popArr:`, ConsoleStyleTitle, toJS(this.popArr))
   }
 }
 
-export const AUPopState = new PopState(100)
+export const AUP_MBX_STATE = new PopState('init')
 
 autorun(() => {
-  console.log(`${CONSO_START_mark}\n AUTORUN::: this.popArr:`, ConsoleStyleTitle, AUPopState.popArr)
-  return AUPopState.popArr
+  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)
+  return last
 })
 
 

project/src/pop/api/clear.js

+'use strict';
+import { AUP_MBX_STATE } from '../AUState'
+import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
+
+/** 
+ * 清空页面弹窗
+ */
+export const clear = () => {
+
+}
\ No newline at end of file

project/src/pop/api/close.js

+'use strict';
+import { AUP_MBX_STATE } from '../AUState'
+import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
+
+/** 
+ * 关闭弹窗
+ * @param {Number} length 关闭的数量
+ */
+export const close = (length = 1) => {
+  AUP_MBX_STATE.delePop(length)
+}
+

project/src/pop/api/cover.js

+'use strict';
+import { AUP_MBX_STATE } from '../AUState'
+import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
+
+/** 
+ * 显示弹窗
+ * @param {String} type 弹窗类型
+ * @param {Object} data 传递数据
+ * @param {Fucntion} fn 定义更多 需要执行的方法 (context 来自父组件)
+ * @param {Context} ctx 传递 父组件 Context 
+ */
+export const cover = (type, data = {}, option = null) => {
+  const pData = {
+    showPop: type,
+    popData: data || null,
+    fn: fn || null, 
+    ctx: ctx || 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)
+
+  // 出现弹窗 - ps: 首个弹窗
+  else AUP_MBX_STATE.addPop(pData)
+
+}
+

project/src/pop/api/getArr.js

+'use strict';
+import { AUP_MBX_STATE } from '../AUState'
+import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
+
+/** 
+ * 获取弹窗数组
+ */
+export const getArr = () => {
+  return []
+}
+
+// IntersectionObserver
\ No newline at end of file

project/src/pop/api/index.js

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

project/src/pop/api/show.js

+'use strict';
+import { AUP_MBX_STATE } from '../AUState'
+import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
+
+/** 
+ * 显示弹窗
+ * @param {String} type 弹窗类型
+ * @param {Object} data 传递数据
+ * @param {Fucntion} fn 定义更多 需要执行的方法 (context 来自父组件)
+ * @param {Context} ctx 传递 父组件 Context 
+ */
+export const show = (type, data = {}, ctx, fn) => {
+  const pData = {
+    showPop: type,
+    popData: data || null,
+    fn: fn || null, 
+    ctx: ctx || null
+  }
+  // console.log(`${CONSO_START_mark}\n AupopShow data is:`, ConsoleStyleTitle, data)
+
+  // 添加弹窗 没有弹窗
+  if (type && !AUP_MBX_STATE.popArr.length) AUP_MBX_STATE.addPop(pData)
+
+  // 替换弹窗
+  else if (type && AUP_MBX_STATE.popArr.length) AUP_MBX_STATE.changePop(pData)
+
+}
+

project/src/pop/api/showPop.js

-'use strict';
-import { AUPopState } from '../AUState'
-import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
-
-/** 
- * 显示弹窗
- * @param {String} type 弹窗类型
- * @param {Object} data 传递数据
- * @param {Object} option 定义更多
- * @param option.fn 定义 需要执行的方法 (context 来自父组件)
- * @param option.ctx 传递 父组件 Context
- * @param option.cover 是否覆盖 在上个弹弹窗 之上
- */
-export const AupopShow = (type, data = {}, option = null) => {
-  const pData = {
-    showPop: type,
-    popData: data,
-    cover: option? option.cover || false : false,
-    fn: option? option.fn || null : null,
-    ctx: option? option.ctx || null : null
-  }
-  // console.log(`${CONSO_START_mark}\n AupopShow data is:`, ConsoleStyleTitle, data)
-
-  // 覆盖弹窗
-  if (type && AUPopState.popArr.length && (option && option.cover)) AUPopState.addPop(pData)
-
-  // 替换弹窗 - ps: 不是覆盖 就是替换 最上层的 弹窗
-  else if (type && !AUPopState.popArr.length) AUPopState.changePop(pData)
-
-  // 出现弹窗 - ps: 首个弹窗
-  else AUPopState.addPop(pData)
-
-}
-
-
-/** 
- * 关闭弹窗
- * @param {Number} start 关闭弹窗的索引
- * @param {Number} length 关闭的数量
- */
-export const AupopClose = (start = 0, length = 1) => {
-  // 没有参数 默认清除上一层
-  if (!start) {
-
-  }
-  // 默认清除一个
-  else if (start && length === 1) {
-
-  }
-  // splice一下
-  else {
-
-  }
-}
-
-
-/** 
- * 清空页面弹窗
- */
-export const AupopCleanAll = () => {
-
-}
-
-
-/** 
- * 获取弹窗数组
- */
-export const AupopGetPopArr = () => {
-  return []
-}
-
-// IntersectionObserver
-

project/src/pop/api/tools.js

@@ -23,7 +23,11 @@ export const ConsoleStyleDetail = [
   'font-weight: 200'
 ].join(';')
 
-
+export const ConsoleStyleComponents = [
+  'color: #a591ff',
+  'font-size: 12px',
+  'font-weight: 400'
+].join(';')
 
 
 

project/src/pop/index.js

-export * as Aup from './api/showPop'
+export * as Aup from './api'
\ No newline at end of file
+export { AUP_MBX_STATE } from './AUState'
+export { AUPOP } from './AUPopMobx/AUPopMobx.jsx'
\ No newline at end of file