cbvirtua 1.0.106 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/mouse-wheel/components/pulldown.js

@@ -0,0 +1,131 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import BScroll from '@better-scroll/core'
+import PullDown from '@better-scroll/pull-down'
+import MouseWheel from '@better-scroll/mouse-wheel'
+
+BScroll.use(PullDown)
+BScroll.use(MouseWheel)
+
+const useStableCallback = (callback) => {
+  const callbackRef = useRef(callback)
+
+  useEffect(() => {
+    callbackRef.current = callback
+  })
+
+  return useCallback((...args) => callbackRef.current(...args), [])
+}
+
+const ajaxGet = (/* url */) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const dataList = generateData()
+      resolve(dataList)
+    }, 1000)
+  })
+}
+
+const TIME_BOUNCE = 800
+let STEP = 0
+
+function generateData() {
+  const BASE = 30
+  const begin = BASE * STEP
+  const end = BASE * (STEP + 1)
+  let ret = []
+  for (let i = end; i > begin; i--) {
+    ret.push(i)
+  }
+  return ret
+}
+
+const Pulldown = () => {
+  const [beforePullDown, setBeforePullDown] = useState(true)
+  const [isPullingDown, setIsPullingDown] = useState(false)
+  const [data, setData] = useState(generateData())
+
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  const requestData = async () => {
+    try {
+      const newData = await ajaxGet(/* url */)
+      setData((prev) => newData.concat(prev))
+    } 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)
+    STEP += 1
+    await requestData()
+    setIsPullingDown(false)
+    finishPullDown()
+  })
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        scrollY: true,
+        bounceTime: TIME_BOUNCE,
+        pullDownRefresh: {
+          threshold: 70,
+          stop: 56,
+        },
+        mouseWheel: true,
+      }))
+
+      BS.on('pullingDown', pullingDownHandler)
+
+      BS.on('scroll', (pos) => {
+        console.log(pos.y)
+      })
+
+      BS.on('scrollEnd', () => {
+        console.log('scrollEnd')
+      })
+    }
+  }, [pullingDownHandler])
+
+  return (
+    <div className="mouse-wheel-pulldown view">
+      <div className="pulldown-wrapper" ref={wrapperRef}>
+        <div className="pulldown-content">
+          <div className="pulldown-tips">
+            <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="pulldown-list">
+            {data.map((item, index) => (
+              <li key={index} className="pulldown-list-item">
+                {`I am item ${item} `}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Pulldown

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/mouse-wheel/components/pullup.js

@@ -0,0 +1,94 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import BScroll from '@better-scroll/core'
+import Pullup from '@better-scroll/pull-up'
+import MouseWheel from '@better-scroll/mouse-wheel'
+
+BScroll.use(Pullup)
+BScroll.use(MouseWheel)
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+
+const useStableCallback = (callback) => {
+  const callbackRef = useRef(callback)
+
+  useEffect(() => {
+    callbackRef.current = callback
+  })
+
+  return useCallback((...args) => callbackRef.current(...args), [])
+}
+
+const ajaxGet = (/* url */) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(20)
+    }, 1000)
+  })
+}
+
+const PullupPage = () => {
+  const [isPullUpLoad, setIsPullUpLoad] = useState(false)
+  const [num, setNum] = useState(30)
+
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  const requestData = async () => {
+    try {
+      const newData = await ajaxGet(/* url */)
+      setNum((n) => n + newData)
+    } catch (err) {
+      // handle err
+      console.log(err)
+    }
+  }
+
+  const pullingUpHandler = useStableCallback(async () => {
+    setIsPullUpLoad(true)
+    await requestData()
+    scrollRef.current.finishPullUp()
+    scrollRef.current.refresh()
+    setIsPullUpLoad(false)
+  })
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        probeType: 3,
+        pullUpLoad: true,
+        mouseWheel: true,
+      }))
+
+      BS.on('pullingUp', pullingUpHandler)
+    }
+  }, [pullingUpHandler])
+
+  return (
+    <div className="mouse-wheel-pullup view">
+      <div className="pullup-wrapper" ref={wrapperRef}>
+        <div className="pullup-content">
+          <ul className="pullup-list">
+            {createArray(num).map((item, index) => (
+              <li key={index} className="pullup-list-item">
+                {item % 5 === 0 ? 'scroll up 👆🏻' : `I am item ${item} `}
+              </li>
+            ))}
+          </ul>
+          <div className="pullup-tips">
+            {isPullUpLoad ? (
+              <div className="after-trigger">
+                <span className="pullup-txt">Loading...</span>
+              </div>
+            ) : (
+              <div className="before-trigger">
+                <span className="pullup-txt">Pull up and load more</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PullupPage

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/mouse-wheel/components/vertical-scroll.js

@@ -0,0 +1,35 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import MouseWheel from '@better-scroll/mouse-wheel'
+
+BScroll.use(MouseWheel)
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+const data = createArray(100)
+
+const VerticalScroll = () => {
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    scrollRef.current = new BScroll(wrapperRef.current, {
+      mouseWheel: true,
+    })
+  }, [])
+
+  return (
+    <div className="mouse-wheel-vertical-scroll view">
+      <div className="mouse-wheel-wrapper" ref={wrapperRef}>
+        <div className="mouse-wheel-content">
+          {data.map((item, index) => (
+            <div key={index} className="mouse-wheel-item">
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default VerticalScroll

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/mouse-wheel/components/vertical-slide.js

@@ -0,0 +1,71 @@
+import React, { useState, useRef, useEffect } from 'react'
+import classNames from 'classnames'
+import BScroll from '@better-scroll/core'
+import Slide from '@better-scroll/slide'
+import MouseWheel from '@better-scroll/mouse-wheel'
+
+BScroll.use(Slide)
+BScroll.use(MouseWheel)
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+const nums = createArray(4)
+
+const VerticalSlide = () => {
+  const [currentPageIndex, setCurrentPageIndex] = useState(0)
+
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        scrollX: false,
+        scrollY: true,
+        slide: {
+          loop: true,
+          threshold: 100,
+        },
+        mouseWheel: true,
+        momentum: false,
+        bounce: false,
+        stopPropagation: true,
+      }))
+
+      BS.on('scrollEnd', () => {
+        setCurrentPageIndex(BS.getCurrentPage().pageY)
+      })
+    }
+
+    return () => {
+      scrollRef.current?.destroy()
+    }
+  }, [])
+
+  return (
+    <div className="mouse-wheel-slide-vertical view">
+      <div className="slide-container">
+        <div className="slide-wrapper" ref={wrapperRef}>
+          <div className="slide-content">
+            {nums.map((num) => (
+              <div key={num} className={`slide-page page${num}`}>
+                page {num}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="dots-wrapper">
+          {nums.map((num) => (
+            <span
+              key={num}
+              className={classNames('dot', {
+                active: currentPageIndex === num - 1,
+              })}
+            ></span>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default VerticalSlide

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

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import './index.styl'
+
+const examples = [
+  {
+    path: '/mouse-wheel/vertical-scroll',
+    name: 'vertical scroll',
+  },
+  {
+    path: '/mouse-wheel/horizontal-scroll',
+    name: 'horizontal scroll',
+  },
+  {
+    path: '/mouse-wheel/vertical-slide',
+    name: 'vertical slide',
+  },
+  {
+    path: '/mouse-wheel/horizontal-slide',
+    name: 'horizontal slide',
+  },
+  {
+    path: '/mouse-wheel/pullup',
+    name: 'pull up load',
+  },
+  {
+    path: '/mouse-wheel/pulldown',
+    name: 'pull down refresh',
+  },
+  {
+    path: '/mouse-wheel/picker',
+    name: 'picker',
+  },
+]
+
+const MouseWheel = (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 MouseWheel

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

@@ -0,0 +1,319 @@
+.mouse-wheel-vertical-scroll
+  .mouse-wheel-wrapper
+    height 400px
+    overflow hidden
+    .mouse-wheel-item
+      height 50px
+      line-height 50px
+      font-size 20px
+      font-weight bold
+      text-align center
+      &:nth-child(2n)
+        background-color #C3D899
+      &:nth-child(2n+1)
+        background-color #F2D4A7
+
+.mouse-wheel-horizontal-scroll
+  .mouse-wheel-wrapper
+    width 90%
+    margin 80px auto
+    white-space nowrap
+    border 3px solid #42b983
+    border-radius 5px
+    overflow hidden
+    .mouse-wheel-content
+      display inline-block
+      .mouse-wheel-item
+        height 50px
+        line-height 50px
+        font-size 24px
+        display inline-block
+        text-align center
+        padding 0 20px
+        &:nth-child(2n)
+          background-color #C3D899
+        &:nth-child(2n+1)
+          background-color #F2D4A7
+
+.mouse-wheel-slide-vertical
+  height 100%
+  &.view
+    padding 0
+    height 100%
+  .slide-container
+    position relative
+    height 100%
+    font-size 0
+  .slide-wrapper
+    height 100%
+    overflow hidden
+    .slide-page
+      display inline-block
+      width 100%
+      line-height 200px
+      text-align center
+      font-size 26px
+      transform translate3d(0,0,0)
+      backface-visibility hidden
+      &.page1
+        background-color #D6EADF
+      &.page2
+        background-color #DDA789
+      &.page3
+        background-color #C3D899
+      &.page4
+        background-color #F2D4A7
+  .dots-wrapper
+    position absolute
+    right 4px
+    top 50%
+    transform translateY(-50%)
+    .dot
+      display block
+      margin 4px 0
+      width 8px
+      height 8px
+      border-radius 50%
+      background #eee
+      &.active
+        height  20px
+        border-radius 5px
+
+.mouse-wheel-horizontal-slide
+  .slide-container
+    position relative
+  .slide-wrapper
+    min-height 1px
+    overflow hidden
+  .slide-content
+    height 200px
+    white-space nowrap
+    font-size 0
+    .slide-page
+      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
+  .dots-wrapper
+    position absolute
+    bottom 4px
+    left 50%
+    transform translateX(-50%)
+    .dot
+      display inline-block
+      margin 0 4px
+      width 8px
+      height 8px
+      border-radius 50%
+      background #eee
+      &.active
+        width 20px
+        border-radius 5px
+
+.mouse-wheel-pullup
+  height: 100%
+  .pullup-wrapper
+    height: 100%
+    padding: 0 10px
+    border: 1px solid #ccc
+    overflow: hidden
+  .pullup-list
+    padding: 0
+  .pullup-list-item
+    padding: 10px 0
+    list-style: none
+    border-bottom: 1px solid #ccc
+  .pullup-tips
+    padding: 20px
+    text-align: center
+    color: #999
+
+.mouse-wheel-pulldown
+  height: 100%
+  .pulldown-wrapper
+    position: relative
+    height: 100%
+    padding: 0 10px
+    border: 1px solid #ccc
+    overflow: hidden
+  .pulldown-list
+    padding: 0
+  .pulldown-list-item
+    padding: 10px 0
+    list-style: none
+    border-bottom: 1px solid #ccc
+  .pulldown-tips
+    position: absolute
+    width: 100%
+    padding: 20px
+    box-sizing: border-box
+    transform: translateY(-100%) translateZ(0)
+    text-align: center
+    color: #999
+
+/* reset */
+ul
+  list-style none
+  padding 0
+
+.border-bottom-1px, .border-top-1px
+  position: relative
+  &:before, &:after
+    content: ""
+    display: block
+    position: absolute
+    transform-origin: 0 0
+.border-bottom-1px
+  &:after
+    border-bottom: 1px solid #ebebeb
+    left: 0
+    bottom: 0
+    width: 100%
+    transform-origin: 0 bottom
+.border-top-1px
+  &:before
+    border-top: 1px solid #ebebeb
+    left: 0
+    top: 0
+    width: 100%
+    transform-origin: 0 top
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
+  .border-top-1px
+    &:before
+      width: 200%
+      transform: scale(.5) translateZ(0)
+  .border-bottom-1px
+    &:after
+      width: 200%
+      transform: scale(.5) translateZ(0)
+
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
+  .border-top-1px
+    &:before
+      width: 300%
+      transform: scale(.333) translateZ(0)
+  .border-bottom-1px
+    &:after
+      width: 300%
+      transform: scale(.333) translateZ(0)
+.container-btn
+  margin: 2rem
+  background-color white
+  padding: 0.8rem
+  border: 1px solid rgba(0, 0, 0, .1)
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1)
+  text-align: center
+
+.picker
+  display: none
+  position: fixed
+  left: 0
+  top: 0
+  z-index: 100
+  width: 100%
+  height: 100%
+  overflow: hidden
+  text-align: center
+  font-size: 14px
+  background-color: rgba(37, 38, 45, .4)
+  &.picker-fade-enter
+    opacity: 0
+  &.picker-fade-enter-active
+    opacity: 1
+    transition: all .3s ease-in-out
+  &.picker-fade-exit-active
+    opacity: 0;
+    transition: all .3s ease-in-out
+
+
+  .picker-panel
+    position: absolute
+    z-index: 600
+    bottom: 0
+    width: 100%
+    height: 273px
+    background: white
+    &.picker-move-enter
+      transform: translate3d(0, 273px, 0)
+    &.picker-move-enter-active
+      transform: translate3d(0, 0, 0)
+      transition: all .3s ease-in-out
+    &.picker-move-exit-active
+      transform: translate3d(0, 273px, 0)
+      transition: all .3s ease-in-out
+    .picker-choose
+      position: relative
+      height: 60px
+      color: #999
+      .picker-title
+        margin: 0
+        line-height: 60px
+        font-weight: normal
+        text-align: center
+        font-size: 18px
+        color: #333
+      .confirm, .cancel
+        position: absolute
+        top: 6px
+        padding: 16px
+        font-size: 14px
+      .confirm
+        right: 0
+        color: #007bff
+        &:active
+          color: #5aaaff
+      .cancel
+        left: 0
+        &:active
+          color: #c2c2c2
+    .picker-content
+      position: relative
+      top: 20px
+      .mask-top, .mask-bottom
+        z-index: 10
+        width: 100%
+        height: 68px
+        pointer-events: none
+        transform: translateZ(0)
+      .mask-top
+        position: absolute
+        top: 0
+        background: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8))
+      .mask-bottom
+        position: absolute
+        bottom: 1px
+        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8))
+    .wheel-wrapper
+      display: flex
+      padding: 0 16px
+      .wheel
+        flex: 1
+        width: 1%
+        height: 173px
+        overflow: hidden
+        font-size: 18px
+        .wheel-scroll
+          padding: 0
+          margin-top: 68px
+          line-height: 36px
+          list-style: none
+          .wheel-item
+            list-style: none
+            height: 36px
+            overflow: hidden
+            white-space: nowrap
+            color: #333
+            &.wheel-disabled-item
+              opacity: .2;
+  .picker-footer
+    height: 20px