cbvirtua 1.0.106 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/compose/components/pullup-pulldown-slide.js

@@ -0,0 +1,197 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import BScroll from '@better-scroll/core'
+import PullDown from '@better-scroll/pull-down'
+import PullUp from '@better-scroll/pull-up'
+import Slide from '@better-scroll/slide'
+
+BScroll.use(PullDown)
+BScroll.use(PullUp)
+BScroll.use(Slide)
+
+const useStableCallback = (callback) => {
+  const callbackRef = useRef(callback)
+
+  useEffect(() => {
+    callbackRef.current = callback
+  })
+
+  return useCallback((...args) => callbackRef.current(...args), [])
+}
+
+const TIME_BOUNCE = 700
+const REQUEST_TIME = 1000
+const THRESHOLD = 50
+const STOP = 56
+
+function generateData() {
+  return Array.from({ length: 2 }, (_, i) => i)
+}
+
+const ajaxGet = (/* url */) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(generateData())
+    }, REQUEST_TIME)
+  })
+}
+
+const PullUpPullDownSlide = () => {
+  const [beforePullDown, setBeforePullDown] = useState(true)
+  const [isPullingDown, setIsPullingDown] = useState(false)
+  const [isPullUpLoad, setIsPullUpLoad] = useState(false)
+  const [data, setData] = useState(generateData())
+
+  const stopPullup = useRef(false)
+
+  const wrapperRef = useRef(null)
+  const pulldownRef = useRef(null)
+  const pullupRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  const requestData = async (type) => {
+    try {
+      const newData = await ajaxGet(/* url */)
+      if (type === 'load') {
+        setData((prev) => newData.concat(prev))
+      } else {
+        setData(newData)
+      }
+    } catch (err) {
+      // handle err
+      console.log(err)
+    }
+  }
+
+  const resetPullUpPos = () => {
+    const pullUpEle = pullupRef.current
+    pullUpEle.style.transform = `translateY(0px) translateZ(0)`
+    pullUpEle.style.transition = 'transform 0.5s'
+    stopPullup.current = false
+  }
+
+  const finishPullDown = () => {
+    scrollRef.current.finishPullDown()
+    scrollRef.current.enabled = true
+    setTimeout(() => {
+      setBeforePullDown(true)
+      scrollRef.current.refresh()
+    }, TIME_BOUNCE + 100)
+  }
+
+  const pullingDownHandler = useStableCallback(async () => {
+    setBeforePullDown(false)
+    setIsPullingDown(true)
+    scrollRef.current.enabled = false
+    await requestData('refresh')
+    setIsPullingDown(false)
+    finishPullDown()
+  })
+
+  const pullingUpHandler = useStableCallback(async () => {
+    setIsPullUpLoad(true)
+    scrollRef.current.enabled = false
+    await requestData('load')
+    scrollRef.current.finishPullUp()
+    scrollRef.current.enabled = true
+    scrollRef.current.refresh()
+    setIsPullUpLoad(false)
+    resetPullUpPos()
+  })
+
+  const scrollHandler = useStableCallback((pos) => {
+    if (pos.y >= 0) {
+      const pullDownEle = pulldownRef.current
+      const { height: pulldownH } = getComputedStyle(pullDownEle, null)
+      pullDownEle.style.transform = `translateY(${
+        -parseInt(pulldownH) + pos.y
+      }px) translateZ(0)`
+    }
+    const pullupThreshold = -30
+    const maxScrollY = scrollRef.current.maxScrollY
+    if (pos.y - maxScrollY <= pullupThreshold && isPullUpLoad) {
+      stopPullup.current = true
+    }
+    if (pos.y - maxScrollY <= 0 && !stopPullup.current) {
+      const pullUpEle = pullupRef.current
+      pullUpEle.style.transform = `translateY(${
+        pos.y - maxScrollY
+      }px) translateZ(0)`
+    }
+  })
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        scrollY: true,
+        bounceTime: TIME_BOUNCE,
+        momentum: false,
+        // pullDown options
+        pullDownRefresh: {
+          threshold: THRESHOLD,
+          stop: STOP,
+        },
+        // pullUp options
+        pullUpLoad: {
+          threshold: -THRESHOLD,
+        },
+        // slide options
+        slide: {
+          threshold: 5,
+          disableSetHeight: true,
+          autoplay: false,
+          loop: false,
+        },
+      }))
+
+      BS.on('pullingDown', pullingDownHandler)
+      BS.on('pullingUp', pullingUpHandler)
+      BS.on('scroll', scrollHandler)
+    }
+  }, [pullingDownHandler, pullingUpHandler, scrollHandler])
+
+  return (
+    <div className="pullup-down-slide-wrapper view">
+      {/* pull down */}
+      <div className="pulldown-wrapper" ref={pulldownRef}>
+        <div style={{ display: beforePullDown ? '' : 'none' }}>
+          <span>Pull Down and refresh</span>
+        </div>
+        <div style={{ display: beforePullDown ? 'none' : '' }}>
+          <div v-show="isPullingDown">
+            <span>Loading...</span>
+          </div>
+          <div style={{ display: isPullingDown ? 'none' : '' }}>
+            <span>Refresh success</span>
+          </div>
+        </div>
+      </div>
+      {/* slide item */}
+      <div className="pullup-pulldown-slide-bswrapper" ref={wrapperRef}>
+        <div className="pullup-pulldown-slide-scroller">
+          {data.map((_, index) => (
+            <div
+              key={index}
+              className={`pullup-pulldown-slide-item page${index % 4}`}
+            >
+              {`Page ${index} `}
+            </div>
+          ))}
+        </div>
+      </div>
+      {/* pollup */}
+      <div className="pullup-wrapper" ref={pullupRef}>
+        {isPullUpLoad ? (
+          <div>
+            <span>Loading...</span>
+          </div>
+        ) : (
+          <div>
+            <span>Pull Up and load</span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default PullUpPullDownSlide

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/compose/components/pullup-pulldown.js

@@ -0,0 +1,148 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import BScroll from '@better-scroll/core'
+import PullDown from '@better-scroll/pull-down'
+import PullUp from '@better-scroll/pull-up'
+
+BScroll.use(PullDown)
+BScroll.use(PullUp)
+
+const useStableCallback = (callback) => {
+  const callbackRef = useRef(callback)
+
+  useEffect(() => {
+    callbackRef.current = callback
+  })
+
+  return useCallback((...args) => callbackRef.current(...args), [])
+}
+
+const TIME_BOUNCE = 800
+const REQUEST_TIME = 3000
+const THRESHOLD = 70
+const STOP = 56
+
+function generateData() {
+  return Array.from({ length: 30 }, (_, i) => i)
+}
+
+const ajaxGet = (/* url */) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(generateData())
+    }, REQUEST_TIME)
+  })
+}
+
+const PullUpPullDown = () => {
+  const [beforePullDown, setBeforePullDown] = useState(true)
+  const [isPullingDown, setIsPullingDown] = useState(false)
+  const [isPullUpLoad, setIsPullUpLoad] = useState(false)
+  const [data, setData] = useState(generateData())
+
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  const requestData = async (type) => {
+    try {
+      const newData = await ajaxGet(/* url */)
+      if (type === 'load') {
+        setData((prev) => newData.concat(prev))
+      } else {
+        setData(newData)
+      }
+    } catch (err) {
+      // handle err
+      console.log(err)
+    }
+  }
+
+  const finishPullDown = () => {
+    scrollRef.current.finishPullDown()
+    setTimeout(() => {
+      setBeforePullDown(true)
+      scrollRef.current.refresh()
+    }, TIME_BOUNCE + 100)
+  }
+
+  const pullingDownHandler = useStableCallback(async () => {
+    setBeforePullDown(false)
+    setIsPullingDown(true)
+    await requestData('refresh')
+    setIsPullingDown(false)
+    finishPullDown()
+  })
+
+  const pullingUpHandler = useStableCallback(async () => {
+    setIsPullUpLoad(true)
+    await requestData('load')
+    scrollRef.current.finishPullUp()
+    scrollRef.current.refresh()
+    setIsPullUpLoad(false)
+  })
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        scrollY: true,
+        bounceTime: TIME_BOUNCE,
+        // pullDown options
+        pullDownRefresh: {
+          threshold: THRESHOLD,
+          stop: STOP,
+        },
+        // pullUp options
+        pullUpLoad: {
+          threshold: THRESHOLD,
+        },
+      }))
+
+      BS.on('pullingDown', pullingDownHandler)
+      BS.on('pullingUp', pullingUpHandler)
+      BS.on('scroll', (pos) => {
+        console.log(pos.y)
+      })
+    }
+  }, [pullingDownHandler, pullingUpHandler])
+
+  return (
+    <div className="pullup-down view">
+      <div className="pullup-down-bswrapper" ref={wrapperRef}>
+        <div className="pulldown-scroller">
+          <div className="pulldown-wrapper">
+            <div style={{ display: beforePullDown ? '' : 'none' }}>
+              <span>Pull Down and refresh</span>
+            </div>
+            <div style={{ display: beforePullDown ? 'none' : '' }}>
+              <div v-show="isPullingDown">
+                <span>Loading...</span>
+              </div>
+              <div style={{ display: isPullingDown ? 'none' : '' }}>
+                <span>Refresh success</span>
+              </div>
+            </div>
+          </div>
+          <ul className="pullup-down-list">
+            {data.map((_, index) => (
+              <li key={index} className="pullup-down-list-item">
+                {`I am item ${index} `}
+              </li>
+            ))}
+          </ul>
+          <div className="pullup-wrapper">
+            {isPullUpLoad ? (
+              <div>
+                <span>Loading...</span>
+              </div>
+            ) : (
+              <div>
+                <span>Pull Up and load</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PullUpPullDown

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/compose/components/slide-nested.js

@@ -0,0 +1,87 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import NestedScroll from '@better-scroll/nested-scroll'
+import Slide from '@better-scroll/slide'
+
+BScroll.use(NestedScroll)
+BScroll.use(Slide)
+
+const DATA = [
+  '😀 😁 😂 🤣 😃 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 ☹️ ',
+  '🙂 🤔 😄 🤨  😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 ☹️ ',
+]
+
+const NestedScrollPage = () => {
+  const outerWrapperRef = useRef(null)
+  const innerWrapperRef = useRef(null)
+
+  useEffect(() => {
+    const outerScrollRef = new BScroll(outerWrapperRef.current, {
+      nestedScroll: {
+        groupId: 'slide-nested',
+      },
+    })
+
+    const innerScrollRef = new BScroll(innerWrapperRef.current, {
+      nestedScroll: {
+        groupId: 'slide-nested',
+      },
+      scrollX: true,
+      scrollY: false,
+      momentum: false,
+      // close bounce effects
+      bounce: {
+        top: false,
+        bottom: false,
+      },
+      slide: {
+        loop: true,
+        autoplay: false,
+      },
+    })
+
+    return () => {
+      outerScrollRef.destroy()
+      innerScrollRef.destroy()
+    }
+  }, [])
+
+  return (
+    <div className="slide-nested view">
+      <div className="outer-wrapper" ref={outerWrapperRef}>
+        <div className="outer-content">
+          <ul>
+            {DATA.map((item, index) => (
+              <li key={index} className="outer-list-item">
+                {item}
+              </li>
+            ))}
+          </ul>
+          <div className="inner-wrapper" ref={innerWrapperRef}>
+            <div className="slide-banner-content">
+              <div className="slide-item page1">page 1</div>
+              <div className="slide-item page2">page 2</div>
+              <div className="slide-item page3">page 3</div>
+              <div className="slide-item page4">page 4</div>
+            </div>
+          </div>
+          <ul>
+            {DATA.map((item, index) => (
+              <li key={index} className="outer-list-item">
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default NestedScrollPage

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/compose/index.js

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import './index.styl'
+
+const examples = [
+  {
+    path: '/compose/pullup-pulldown',
+    name: 'pullup-pulldown',
+  },
+  {
+    path: '/compose/pullup-pulldown-slide',
+    name: 'pullup-pulldown-slide',
+  },
+  {
+    path: '/compose/pullup-pulldown-outnested',
+    name: 'pullup-pulldown-outnested',
+  },
+  {
+    path: '/compose/slide-nested',
+    name: 'slide-nested',
+  },
+]
+
+const Compose = (props) => {
+  const goPage = (path) => {
+    props.history.push(path)
+  }
+
+  return (
+    <div className="view core">
+      <ul className="example-list">
+        {examples.map((item) => (
+          <li
+            className="example-item"
+            onClick={() => goPage(item.path)}
+            key={item.path}
+          >
+            <span>{item.name}</span>
+          </li>
+        ))}
+      </ul>
+      {props.children}
+    </div>
+  )
+}
+
+export default Compose

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/compose/index.styl

@@ -0,0 +1,146 @@
+.pullup-down
+  height 100%
+  .pullup-down-bswrapper
+    position relative
+    height 100%
+    padding 0 10px
+    border 1px solid #ccc
+    overflow hidden
+  .pullup-down-list
+    padding 0
+  .pullup-down-list-item
+    padding 10px 0
+    list-style none
+    border-bottom 1px solid #ccc
+  .pulldown-wrapper
+    position absolute
+    width 100%
+    padding 20px
+    box-sizing border-box
+    transform translateY(-100%) translateZ(0)
+    text-align center
+    color #999
+  .pullup-wrapper
+    padding 20px
+    text-align center
+    color #999
+
+.pullup-down-slide-wrapper
+  height 100%
+  overflow hidden
+  .pullup-pulldown-slide-bswrapper
+    position relative
+    height 100%
+    overflow hidden
+  .pullup-down-list
+    padding 0
+  .pullup-pulldown-slide-item
+    list-style none
+    width 100%
+    line-height 200px
+    text-align center
+    font-size 26px
+    transform translate3d(0,0,0)
+    backface-visibility hidden
+    box-sizing: border-box
+  .pulldown-wrapper
+    position absolute
+    width 100%
+    padding 20px
+    box-sizing border-box
+    transform translateY(-100%) translateZ(0)
+    text-align center
+    color #999
+  .pullup-wrapper
+    height 40px !important
+    padding 20px
+    text-align center
+    color #999
+  .page1
+    background-color #D6EADF
+  .page2
+    background-color #DDA789
+  .page3
+    background-color #C3D899
+  .page0
+    background-color #F2D4A7
+
+.pullup-pulldown-outnested
+  height: 100%
+  .outer-wrapper
+  .inner-wrapper
+    border: 2px solid #62B791
+    border-radius: 5px
+    transform: rotate(0deg)
+    position: relative
+    overflow: hidden
+  .outer-wrapper
+    height: 100%
+    border: 1px solid rgba(0, 0, 0, .1)
+  .inner-wrapper
+    height: 240px
+    background-color: rgba(98,183,145, 0.2)
+  .inner-list-item
+    height: 50px
+    line-height: 50px
+    text-align: center
+    list-style: none
+  .outer-list-item2,
+  .outer-list-item
+    height: 40px
+    line-height: 40px
+    text-align: center
+    list-style: none
+  .pulldown-wrapper
+    position absolute
+    width 100%
+    padding 20px
+    box-sizing border-box
+    transform translateY(-100%) translateZ(0)
+    text-align center
+    color #999
+  .pullup-wrapper
+    padding 20px
+    text-align center
+    color #999
+
+.slide-nested
+  height: 100%
+  .outer-wrapper
+  .inner-wrapper
+    border-radius: 5px
+    transform: rotate(0deg)
+    position: relative
+    overflow: hidden
+    box-sizing: border-box
+  .outer-wrapper
+    height: 100%
+    border: 1px solid rgba(0, 0, 0, .1)
+    border: 1px solid #62B791
+  .inner-wrapper
+    height: 200px
+  .outer-list-item
+    height: 40px
+    line-height: 40px
+    text-align: center
+    list-style: none
+  .slide-banner-content
+    height 200px
+    white-space nowrap
+    width: 100%
+    font-size 0
+    .slide-item
+      display inline-block
+      height 200px
+      width 100%
+      line-height 200px
+      text-align center
+      font-size 26px
+      &.page1
+        background-color #95B8D1
+      &.page2
+        background-color #DDA789
+      &.page3
+        background-color #C3D899
+      &.page4
+        background-color #F2D4A7

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/core/components/default.js

@@ -0,0 +1,84 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+
+const emojis = [
+  '😀 😁 😂 🤣 😃',
+  '😄 😅 😆 😉 😊',
+  '😫 😴 😌 😛 😜',
+  '👆🏻 😒 😓 😔 👇🏻',
+  '😑 😶 🙄 😏 😣',
+  '😞 😟 😤 😢 😭',
+  '🤑 😲 🙄 🙁 😖',
+  '👍 👎 👊 ✊ 🤛',
+  '🙄 ✋ 🤚 🖐 🖖',
+  '👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼',
+  '☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽',
+  '🌖 🌗 🌘 🌑 🌒',
+  '💫 💥 💢 💦 💧',
+  '🐠 🐟 🐬 🐳 🐋',
+  '😬 😐 😕 😯 😶',
+  '😇 😏 😑 😓 😵',
+  '🐥 🐣 🐔 🐛 🐤',
+  '💪 ✨ 🔔 ✊ ✋',
+  '👇 👊 👍 👈 👆',
+  '💛 👐 👎 👌 💘',
+  '👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼',
+  '☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽',
+  '🌖 🌗 🌘 🌑 🌒',
+  '💫 💥 💢 💦 💧',
+  '🐠 🐟 🐬 🐳 🐋',
+  '😬 😐 😕 😯 😶',
+  '😇 😏 😑 😓 😵',
+  '🐥 🐣 🐔 🐛 🐤',
+  '💪 ✨ 🔔 ✊ ✋',
+  '👇 👊 👍 👈 👆',
+  '💛 👐 👎 👌 💘',
+]
+
+const handleClick = (item) => {
+  window.alert(item)
+}
+
+const Default = () => {
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        probeType: 3,
+        click: true,
+      }))
+
+      BS.on('scrollStart', () => {
+        console.log('scrollStart-')
+      })
+      BS.on('scroll', ({ y }) => {
+        console.log('scrolling-')
+      })
+      BS.on('scrollEnd', (pos) => {
+        console.log(pos)
+      })
+    }
+  }, [])
+
+  return (
+    <div className="core-container view">
+      <div className="scroll-wrapper" ref={wrapperRef}>
+        <div className="scroll-content">
+          {emojis.map((item, index) => (
+            <div
+              key={index}
+              className="scroll-item"
+              onClick={() => handleClick(item)}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Default