add new code

project/package.json

@@ -9,6 +9,7 @@
     "css-loader": "^3.6.0",
     "fyge-tbmini": "^1.3.1",
     "mobx": "^6.0.4",
+    "mobx-react-lite": "^3.1.6",
     "postcss-loader": "^3.0.0",
     "prettier": "^2.0.5",
     "qs": "^6.9.4",

project/src/app.jsx

@@ -4,24 +4,39 @@ import "./app.less";
 
 import store from './redux/store' // Redux --> store
 import { Provider } from 'react-redux' // Redux --> Provider
-import AUPop from "./components/AUPop/AUPop.jsx" // Redux --> AUPop
+// import AUPop from "./components/AUPop/AUPop.jsx" // Redux --> AUPop
 
+import { AUPopState, popWatcher } from './pop/AUState.js' // Mobx --> AUState
+import AUPop from "./pop/AUPopMobx/AUPopMobx.jsx" // Mobx --> AUPop
 
 //此处为spark-cli动态生成
 import PageHome from "./pages/PageHome/PageHome.jsx";
 class App extends Component {
- 
+
+  // use redux type
+  // render() {
+    // return (
+    //   <Provider store={store}>
+    //     <>
+    //       {/* 页面 */}
+    //       <PageHome />
+    //       {/* 弹窗 */}
+    //       <AUPopMobx auState={popWatcher}/>
+    //     </>
+    //   </Provider>
+    // );
+  // }
+
+  // pure type
   render() {
-    return (
-      <Provider store={store}>
-        <>
-          {/* 页面 */}
-          <PageHome />
-          {/* 弹窗 */}
-          <AUPop/>
-        </>
-      </Provider>
-    );
+    return(
+      <>
+        {/* 页面 */}
+        <PageHome />
+        {/* 弹窗 */}
+        <AUPop AUPopState={AUPopState.popArr} />
+      </>
+    )
   }
 }
 

project/src/mobx/apiFunction.js

 import { showPop } from '../redux/action'
-import popState from './mobxState'
+import { AUPopState, actionWrapeprFunction02, fetchWatcher } from './mobxState'
 
 const showPop1 = () => {
 
@@ -10,16 +10,29 @@ export const showPop2 = () => {
 }
 
 export const testGet = () => {
-  return popState.testNum
+  return AUPopState.testNum
 }
 
 export const testComputed = (num) => {
   // console.log()
-  return popState.computed4test
+  return AUPopState.computed4test
 }
 
 export const testSet = (num) => {
-  return popState.add(num)
+  // return AUPopState.addTest02(num)
+  return actionWrapeprFunction02(num)
+}
+
+export const fetchOption = () => {
+  return AUPopState.fetchOption()
+}
+
+export const fetchWatcherFunc = () => {
+  return fetchWatcher()
+}
+
+export const reactiontestFunc = () => {
+  return AUPopState.reactiontest()
 }
 
 // export default showPop1

project/src/mobx/mobxState.js

-// 'use strict';
-
-// import { observable, action, decorate } from "mobx";
-import { makeAutoObservable, observable, computed, action } from 'mobx'
+'use strict';
+import { makeAutoObservable, observable, computed, action, runInAction, autorun, reaction } from 'mobx'
+import { ConsoFunc } from './tools'
 
 class PopState {
+  testNum
+  nowShow
+  popArr
+  fetchStatus
+  fetchResultBack
+  reactionValue
 
   constructor() {
+    // also
+    // makeAutoObservable(this)
+    this.popArr = []
+    this.nowShow = 0
+    this.testNum = 0
+    this.fetchStatus = 'close'
+    this.fetchResultBack = 'no data'
+    this.reactionValue = 10
     makeAutoObservable(this, {
       nowShow: observable,
       testNum: observable,
       computed4test: computed,
-      add: action
+      add: action,
+      addTest01: action.bound,
+      fetchOption: action.bound,
+      reactiontest: action.bound,
+      fetchStatus: observable,
+      fetchResultBack: observable
     })
   }
 
-  nowShow = 0
-
-  popArr = []
 
+  // action__: common type
   add = (num) => {
     this.testNum += num
   }
 
-  testNum = 0
+  // action__: ues action bound
+  addTest01 = (num) => {
+    this.testNum += num
+  }
+
+  // action__: can not to use makeAutoObservable if you need
+  addTest02 = (num) => {
+    // TODO: some async function callback 
+    // TODO:   .then(res => { action( ...
+    // TODO:   .catch(err => { action( ...
+    action(num => {
+      this.testNum += num
+      ConsoFunc('testNum', this.testNum)
+    }).bind(this, num)()
+  }
+
+  // runInAction: async await type options
+  fetchOption = async () => {
+    this.fetchStatus = 'pending'
+
+    // also can use await
+    // try {
+    //   let res = await fetchExample()
+    // } catch (err) { console.warn(err) }
+
+    fetchExample().then(res => {
+      runInAction(() => {
+        this.fetchStatus = 'complete success'
+        this.fetchResultBack = res
+      })
+    })
+    .catch(err => {
+      runInAction(() => {
+        this.fetchStatus = 'complete fail'
+        this.fetchResultBack = res
+      })
+    })
+
+  }
 
+  // computed__:
   get computed4test () {
-    console.log('testNum is: ', this.testNum)
+    ConsoFunc('testNum', this.testNum)
     return `testNum is : ${this.testNum}`
   }
+
+  // reaction__:
+  reactiontest = () => {
+    this.reactionValue += 10
+  }
+
+}
+
+export const AUPopState = new PopState()
+
+// reaction
+reaction(
+  () => AUPopState.reactionValue,
+  reactionValue => {
+    ConsoFunc('reactionValue now is: ', reactionValue)
+  }
+)
+
+// autorun
+export const fetchWatcher = autorun(() => {
+  ConsoFunc(`fetchStatus is: ${AUPopState.fetchStatus}, fetchResultBack is: ${AUPopState.fetchResultBack}`)
+})
+
+const actionWrapeprFunction = action((state, num) => {
+  state.testNum += num
+  ConsoFunc('testNum', state.testNum)
+})
+
+
+export const actionWrapeprFunction02 = (num) => {
+  actionWrapeprFunction(AUPopState, num)
 }
 
-const AUPopState = new PopState()
 
-export default AUPopState
+function fetchExample () {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('fetchExample success')
+    }, 1000)
+  })
+}

project/src/mobx/tools.js

+
+
+
+
+export function ConsoFunc() {
+  console.log(
+    CONSO_START_mark, ConsoleStyleTitle, 
+    ...arguments
+  )
+  // console.log(END_mark, ConsoleStyleDetail)
+}
+
+export const ConsoleStyleTitle = [
+  'color: #94c902',
+  'font-size: 8px',
+  'font-weight: 500',
+  'text-shadow: 1px 1px rgba(200, 200, 200, 0.2)',
+  'padding: 2px 0px 4px 0px'
+].join(';')
+
+export const ConsoleStyleDetail = [
+  'color: #94c902',
+  'font-size: 8px',
+  'font-weight: 200'
+].join(';')
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export const CONSO_END_mark = `%c  end - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -\n`
+
+export const CONSO_START_mark = `%c  - (๑• . •๑) - aupop - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - :::\n`
\ No newline at end of file

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 { AUPOP } from '../../mobx/index'
+import { Aup } from '../../pop' // Mobx --> AUState
 
 import './PageHome.less';
 
@@ -14,7 +14,7 @@ class PageHome extends Component {
     super(props);
     this.state = this.state || {
       ruleData: `活动规则: ${Random.cparagraph(20, 40)}`
-    };
+    }
   }
 
   openDefault = () => {
@@ -61,11 +61,13 @@ class PageHome extends Component {
     })
   }
 
+  nowShow = 'aupro - test'
+
   mobxAction01 = () => {
-    console.log('AUPOP is: ', AUPOP)
-    AUPOP.testSet(1)
-    console.log('AUPOP.testGet:::::  ', AUPOP.testGet())
-    console.log('AUPOP.testComputed:::::  ', AUPOP.testComputed())
+    // AUPOP.testSet(1)
+    // AUPOP.fetchOption()
+    // AUPOP.reactiontestFunc()
+    Aup.AupopShow('PopRotate')
   }
 
   openColorful = () => {
@@ -91,4 +93,5 @@ class PageHome extends Component {
   }
 }
 
-export default AUConnect(PageHome)
+// export default AUConnect(PageHome)
+export default PageHome

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 './AUPopMobx.less'
+
+class AUPopMobx extends Component {
+  constructor (props) {
+    super(props)
+    this.state = this.state || {
+      popArr: [],
+      closeFlag: false
+    }
+    this.auPopRef = React.createRef()
+  }
+
+  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
+  }
+
+  closePop = (index) => {
+    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})
+        setTimeout(() => {
+          this.props.showPop({type: 0})
+          this.setState({closeFlag: false})
+        }, 400);
+      } else {
+        this.props.showPop({type: 0})
+        this.setState({closeFlag: false})
+      }
+    }
+    else {
+      console.log(this.state.popArr)
+      this.setState({closeFlag: true})
+      setTimeout(() => {
+        this.props.showPop({type: 0})
+        this.setState({closeFlag: false})
+      }, 400);
+    }
+  }
+
+  render() {
+    const { popArr, closeFlag } = this.state
+    let Pop = []
+    popArr.forEach((item, index) => {
+      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>
+      )
+    })
+
+    const Com = (popArr.length && popArr[0].showPop) ? (
+      <div className='compop_back' ref={this.auPopRef}>
+
+        <div className='compop_mask'></div>
+
+        {/* 关闭-禁止点击 */}
+        { closeFlag ? <div className='compop_transparent'></div> : null }
+
+        {Pop.map((It, index) => {
+          return (
+            <React.Fragment key={index}>
+              <div className={(index !== Pop.length - 1) ? 'Fragment-wrapper Fragment-small-opacity' : 'Fragment-wrapper'}>
+                {(index !== Pop.length - 1) ? <div className="Fragment-wrapper-mask"></div> : null }
+                {It}
+              </div>
+            </React.Fragment>)
+        })}
+
+      </div>
+    ) : null
+    return (
+      Com
+    );
+  }
+}
+
+const AUPop = observer(({ AUPopState }) => <AUPopMobx popState={AUPopState} /> )
+
+export default AUPop
\ No newline at end of file

project/src/pop/AUPopMobx/AUPopMobx.less

+.compop_back {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 99;
+  touch-action: none;
+  .compop_mask {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .7);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    touch-action: none;
+  }
+  .compop_transparent {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9;
+    touch-action: none;
+  }
+}
+
+.pop_mask {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  position: fixed;
+  background: transparent;
+}
+
+.compop_content {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.comPop_close_btn {
+  position: absolute;
+  display: block;
+  z-index: 1;
+  width: 102px;
+  height: 102px;
+  left: calc(49% - (102px / 2));
+  bottom: -160px;
+  z-index: 3;
+}
+
+.comPop_back_light {
+  position: absolute;
+  display: block;
+  z-index: -1;
+  width: 883px;
+  height: 883px;
+  left: calc(50% - (883px / 2));
+  top: -200px;
+  bottom: -144px;
+}
+
+.comPop_back_head {
+  position: absolute;
+  display: block;
+  z-index: 2;
+  width: 567px;
+  height: 140px;
+  left: 5px;
+  top: 20px;
+  animation: floatAni 3000ms infinite linear;
+  transform-origin: center center center;
+  position: relative;
+}
+
+@keyframes floatAni {
+  0% {
+    transform: skewX(-1deg) skewY(0.8deg) scaleX(1.05) translateY(-30px) rotate(-3deg);
+  }
+  25% {
+    transform: skewX(-0.5deg) skewY(0.3deg) scaleX(1.02) translateY(-20px) rotate(-2deg);
+  }
+  50% {
+    transform: skewX(0deg) skewY(0deg) scaleX(1) translateY(-15px) rotate(-2deg);
+  }
+  75% {
+    transform: skewX(-0.5deg) skewY(0.3deg) scaleX(1.02) translateY(-20px) rotate(-2deg);
+  }
+  100% {
+    transform: skewX(-1deg) skewY(0.8deg) scaleX(1.05) translateY(-30px) rotate(-3deg);
+  }
+}
+
+.comPop_zoom {
+  transform-origin: center center;
+  animation: zoom 0.24s linear 0s 1;
+}
+
+.comPop_zoom_from0 {
+  transform-origin: center center;
+  opacity: 0;
+  transform: scale(0);
+  animation: zoomfrom0 0.22s linear 0.44s 1 forwards;
+}
+
+.Fragment-wrapper-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  z-index: 99;
+  touch-action: none;
+}
+
+.Fragment-small-opacity {
+  transition: transform 300ms ease-in, opacity 200ms linear !important;
+  transform: scale(0.5) !important;
+  opacity: 0 !important;
+}
+
+.Fragment-wrapper {
+  opacity: 1;
+  transition: transform 200ms ease-out, opacity 200ms linear;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1);
+  transform-origin: center center;
+}
+
+@keyframes zoom {
+  0% {
+    transform: scale(0.75);
+  }
+
+  50% {
+    transform: scale(1.08)
+  }
+
+  100% {
+    transform: scale(1)
+  }
+}
+
+@keyframes zoomfrom0 {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+
+  80% {
+    opacity: 1;
+    transform: scale(1.12)
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1)
+  }
+}
+
+.comPop_fadeout {
+  opacity: 0;
+  transition: opacity 300ms linear;
+}
\ No newline at end of file

project/src/pop/AUState.js

+'use strict';
+import { makeAutoObservable, observable, computed, action, runInAction, autorun, reaction, configure } from 'mobx'
+import { CONSO_START_mark, ConsoleStyleTitle, ConsoFunc } from './api/tools'
+// configure({
+//   useProxies: "never"
+// })
+
+class PopState {
+  nowShow
+  popArr
+
+  constructor() {
+    this.popArr = []
+    this.nowShow = ''
+    // makeAutoObservable(this)
+    makeAutoObservable(this, {
+      nowShow: observable,
+      addPop: action.bound,
+      changePop: action.bound,
+      computedPopArr: computed
+    })
+  }
+
+  addPop = (data) => {
+    console.log(`${CONSO_START_mark}\n addPop:`, ConsoleStyleTitle, data)
+    this.popArr.push(data)
+  }
+
+  changePop = (data) => {
+    console.log(`${CONSO_START_mark}\n changePop:`, ConsoleStyleTitle, data)
+    this.popArr = [data]
+  }
+
+  get computedPopArr () {
+    console.log(`${CONSO_START_mark}\n this.popArr:`, ConsoleStyleTitle, this.popArr)
+  }
+}
+
+export const AUPopState = new PopState()
+
+export const popWatcher = autorun(() => {
+  return AUPopState.popArr
+})
\ No newline at end of file

project/src/pop/PopMap.js

+import PopGetPiece from '../components/pop/PopGetPiece/PopGetPiece.jsx'
+import PopInfiniteA from '../components/pop/PopInfiniteA/PopInfiniteA.jsx'
+import PopRegret from '../components/pop/PopRegret/PopRegret.jsx'
+import PopRotate from '../components/pop/PopRotate/PopRotate.jsx'
+import PopInput from '../components/pop/PopInput/PopInput.jsx'
+import PopDefault from '../components/pop/PopDefault/PopDefault.jsx'
+import PopRule from '../components/pop/PopRule/PopRule.jsx'
+import PopLightCard from '../components/pop/PopLightCard/PopLightCard.jsx'
+
+let popMap = new Map()
+
+popMap.set("PopRule", PopRule)
+popMap.set("PopGetPiece", PopGetPiece)
+popMap.set("PopRegret", PopRegret)
+popMap.set("PopInfiniteA", PopInfiniteA)
+popMap.set("PopRotate", PopRotate)
+popMap.set("PopDefault", PopDefault)
+popMap.set("PopInput", PopInput)
+popMap.set("PopLightCard", PopLightCard)
+
+
+export default popMap
\ No newline at end of file

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 []
+}
+

project/src/pop/api/tools.js

+
+
+
+
+export function ConsoFunc() {
+  console.log(
+    CONSO_START_mark, ConsoleStyleTitle, 
+    ...arguments
+  )
+  // console.log(END_mark, ConsoleStyleDetail)
+}
+
+export const ConsoleStyleTitle = [
+  'color: #94c902',
+  'font-size: 12px',
+  'font-weight: 500',
+  'text-shadow: 1px 1px rgba(200, 200, 200, 0.2)',
+].join(';')
+
+export const ConsoleStyleDetail = [
+  'color: #94c902',
+  'font-size: 8px',
+  'font-weight: 200'
+].join(';')
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export const CONSO_END_mark = `%c  end  --------\n`
+
+export const CONSO_START_mark = `%c------- ~ (๑• . •๑) ~ ------- AUPOP -------- \n`
\ No newline at end of file

project/src/pop/index.js

+export * as Aup from './api/showPop'
\ No newline at end of file